feat(tables): working refresh button

PrivateAIM · Sep 9, 2024 · 5aedb47 · 5aedb47
1 parent ee96bd7
commit 5aedb47
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 27 deletions.
diff --git a/components/analysis/AnalysesTable.vue b/components/analysis/AnalysesTable.vue
@@ -27,20 +27,28 @@ const buildStatuses = Object.values(AnalysisBuildStatus);
 
 const { data: response, status, error, refresh } = await getAnalysisNodes();
 
-if (status.value === "success") {
-  analyses.value = formatDataRow(
-    response.value!.data,
-    ["created_at", "updated_at"],
-    expandRowEntries,
-  );
-} else if (error.value?.statusCode === 500) {
-  showHubAdapterConnectionErrorToast();
+function parseData() {
+  if (status.value === "success") {
+    analyses.value = formatDataRow(
+      response.value!.data,
+      ["created_at", "updated_at"],
+      expandRowEntries,
+    );
+  } else if (error.value?.statusCode === 500) {
+    showHubAdapterConnectionErrorToast();
+  }
 }
+parseData();
 
 function onToggleRowExpansion(rowIds) {
   expandedRows.value = rowIds;
 }
 
+async function onTableRefresh() {
+  await refresh();
+  parseData();
+}
+
 // Table filters
 const defaultFilters = {
   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
@@ -130,8 +138,9 @@ function updateRunStatus(analysisNodeId: string, newStatus: string) {
                 <Button
                   icon="pi pi-refresh"
                   aria-label="Filter"
+                  :loading="status === 'pending'"
                   v-tooltip.top="'Refresh table'"
-                  @click="() => refresh()"
+                  @click="onTableRefresh"
                   severity="contrast"
                 />
               </div>

diff --git a/components/projects/ProjectTable.vue b/components/projects/ProjectTable.vue
@@ -12,14 +12,22 @@ const expandRowEntries = [];
 
 const { data: response, status, error, refresh } = await getProjects();
 
-if (status.value === "success") {
-  projects.value = formatDataRow(
-    response.value!.data as unknown as Map<string, string | number | null>[],
-    dataRowUnixCols,
-    expandRowEntries,
-  );
-} else if (error.value?.statusCode === 500) {
-  showHubAdapterConnectionErrorToast();
+function parseData() {
+  if (status.value === "success") {
+    projects.value = formatDataRow(
+      response.value!.data as unknown as Map<string, string | number | null>[],
+      dataRowUnixCols,
+      expandRowEntries,
+    );
+  } else if (error.value?.statusCode === 500) {
+    showHubAdapterConnectionErrorToast();
+  }
+}
+parseData();
+
+async function onTableRefresh() {
+  await refresh();
+  parseData();
 }
 
 // Table filters
@@ -78,7 +86,8 @@ const updateFilters = (filterText: string) => {
                   icon="pi pi-refresh"
                   aria-label="Filter"
                   v-tooltip.top="'Refresh table'"
-                  @click="refresh"
+                  :loading="status === 'pending'"
+                  @click="onTableRefresh"
                   severity="contrast"
                 />
               </div>

diff --git a/components/projects/ProposalTable.vue b/components/projects/ProposalTable.vue
@@ -20,15 +20,18 @@ const approvalStatuses = Object.values(ApprovalStatus);
 
 const { data: response, status, error, refresh } = await getProposals();
 
-if (status.value === "success") {
-  proposals.value = formatDataRow(
-    response.value!.data as unknown as Map<string, string | number | null>[],
-    dataRowUnixCols,
-    expandRowEntries,
-  );
-} else if (error.value?.statusCode === 500) {
-  showHubAdapterConnectionErrorToast();
+function parseData() {
+  if (status.value === "success") {
+    proposals.value = formatDataRow(
+      response.value!.data as unknown as Map<string, string | number | null>[],
+      dataRowUnixCols,
+      expandRowEntries,
+    );
+  } else if (error.value?.statusCode === 500) {
+    showHubAdapterConnectionErrorToast();
+  }
 }
+parseData();
 
 function onToggleRowExpansion(rowIds) {
   expandedRows.value = rowIds;
@@ -43,6 +46,11 @@ function updateTable(newData: ProjectNode) {
   }
 }
 
+async function onTableRefresh() {
+  await refresh();
+  parseData();
+}
+
 // Table filters
 const defaultFilters = {
   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
@@ -102,8 +110,9 @@ const updateFilters = (filterText: string) => {
                 <Button
                   icon="pi pi-refresh"
                   aria-label="Filter"
+                  :loading="status === 'pending'"
                   v-tooltip.top="'Refresh table'"
-                  @click="refresh"
+                  @click="onTableRefresh"
                   severity="contrast"
                 />
               </div>