From bef04d26dedadca708c476f19ddae7c2105faab5 Mon Sep 17 00:00:00 2001
From: Bruce Schultz <bschultz013@gmail.com>
Date: Fri, 6 Sep 2024 11:43:50 +0200
Subject: [PATCH] feat(filter): improve categorical table filters by making
 them reactive

---
 components/analysis/AnalysesTable.vue | 44 ++++++++++++++++-----------
 components/projects/ProposalTable.vue | 30 +++++++++---------
 2 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/components/analysis/AnalysesTable.vue b/components/analysis/AnalysesTable.vue
index a76b384..b00a4a1 100644
--- a/components/analysis/AnalysesTable.vue
+++ b/components/analysis/AnalysesTable.vue
@@ -44,7 +44,7 @@ function onToggleRowExpansion(rowIds) {
 // Table filters
 const defaultFilters = {
   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-  approval_status: { value: null, matchMode: FilterMatchMode.IN },
+  approval_status: { value: null, matchMode: FilterMatchMode.EQUALS },
   "analysis.build_status": { value: null, matchMode: FilterMatchMode.IN },
   run_status: { value: null, matchMode: FilterMatchMode.IN },
   // Below are more examples
@@ -134,8 +134,11 @@ function updateRunStatus(analysisNodeId: string, newStatus: string) {
           <Column
             field="approval_status"
             header="Approval Status"
-            filterField="approval_status"
             :showFilterMatchModes="false"
+            :showClearButton="false"
+            :showApplyButton="false"
+            :showFilterOperator="false"
+            :showAddButton="false"
           >
             <template #body="{ data }">
               <Tag
@@ -144,25 +147,22 @@ function updateRunStatus(analysisNodeId: string, newStatus: string) {
                 :severity="getApprovalStatusSeverity(data.approval_status)"
               />
             </template>
-            <template #filter="{ filterModel }">
-              <MultiSelect
+            <template #filter="{ filterModel, filterCallback }">
+              <Dropdown
                 v-model="filterModel.value"
+                @change="filterCallback()"
                 :options="approvalStatuses"
-                optionLabel=""
-                placeholder="Any"
-                display="chip"
+                placeholder="Select One"
                 class="p-column-filter"
+                :showClear="true"
               >
                 <template #option="slotProps">
-                  <div class="flex align-items-center gap-2">
-                    <Tag
-                      v-if="slotProps.option"
-                      :value="slotProps.option"
-                      :severity="getApprovalStatusSeverity(slotProps.option)"
-                    />
-                  </div>
+                  <Tag
+                    :value="slotProps.option"
+                    :severity="getApprovalStatusSeverity(slotProps.option)"
+                  />
                 </template>
-              </MultiSelect>
+              </Dropdown>
             </template>
           </Column>
           <Column
@@ -170,6 +170,10 @@ function updateRunStatus(analysisNodeId: string, newStatus: string) {
             header="Build Status"
             filterField="analysis.build_status"
             :showFilterMatchModes="false"
+            :showClearButton="false"
+            :showApplyButton="false"
+            :showFilterOperator="false"
+            :showAddButton="false"
           >
             <template #body="{ data }">
               <Tag
@@ -178,9 +182,10 @@ function updateRunStatus(analysisNodeId: string, newStatus: string) {
                 :severity="getBuildStatusSeverity(data.analysis.build_status)"
               />
             </template>
-            <template #filter="{ filterModel }">
+            <template #filter="{ filterModel, filterCallback }">
               <MultiSelect
                 v-model="filterModel.value"
+                @change="filterCallback()"
                 :options="buildStatuses"
                 optionLabel=""
                 placeholder="Any"
@@ -204,6 +209,10 @@ function updateRunStatus(analysisNodeId: string, newStatus: string) {
             header="Run Status"
             filterField="run_status"
             :showFilterMatchModes="false"
+            :showClearButton="false"
+            :showApplyButton="false"
+            :showFilterOperator="false"
+            :showAddButton="false"
           >
             <template #body="{ data }">
               <Tag
@@ -212,9 +221,10 @@ function updateRunStatus(analysisNodeId: string, newStatus: string) {
                 :severity="getRunStatusSeverity(data.run_status)"
               />
             </template>
-            <template #filter="{ filterModel }">
+            <template #filter="{ filterModel, filterCallback }">
               <MultiSelect
                 v-model="filterModel.value"
+                @change="filterCallback()"
                 :options="runStatuses"
                 optionLabel=""
                 placeholder="Any"
diff --git a/components/projects/ProposalTable.vue b/components/projects/ProposalTable.vue
index 2fb6ec4..0884f0f 100644
--- a/components/projects/ProposalTable.vue
+++ b/components/projects/ProposalTable.vue
@@ -45,7 +45,7 @@ function updateTable(newData: ProjectNode) {
 // Table filters
 const defaultFilters = {
   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-  approval_status: { value: null, matchMode: FilterMatchMode.IN },
+  approval_status: { value: null, matchMode: FilterMatchMode.EQUALS },
 };
 const filters = ref(defaultFilters);
 
@@ -105,8 +105,11 @@ const updateFilters = (filterText: string) => {
           <Column
             field="approval_status"
             header="Approval Status"
-            filterField="approval_status"
             :showFilterMatchModes="false"
+            :showClearButton="false"
+            :showApplyButton="false"
+            :showFilterOperator="false"
+            :showAddButton="false"
           >
             <template #body="{ data }">
               <Tag
@@ -115,25 +118,22 @@ const updateFilters = (filterText: string) => {
                 :severity="getApprovalStatusSeverity(data.approval_status)"
               />
             </template>
-            <template #filter="{ filterModel }">
-              <MultiSelect
+            <template #filter="{ filterModel, filterCallback }">
+              <Dropdown
                 v-model="filterModel.value"
+                @change="filterCallback()"
                 :options="approvalStatuses"
-                optionLabel=""
-                placeholder="Any"
-                display="chip"
+                placeholder="Select One"
                 class="p-column-filter"
+                :showClear="true"
               >
                 <template #option="slotProps">
-                  <div class="flex align-items-center gap-2">
-                    <Tag
-                      v-if="slotProps.option"
-                      :value="slotProps.option"
-                      :severity="getApprovalStatusSeverity(slotProps.option)"
-                    />
-                  </div>
+                  <Tag
+                    :value="slotProps.option"
+                    :severity="getApprovalStatusSeverity(slotProps.option)"
+                  />
                 </template>
-              </MultiSelect>
+              </Dropdown>
             </template>
           </Column>
           <Column