From 2af176a502bff57c95f8e0ef2e0eed37c1458f69 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Wed, 3 Jan 2024 10:50:26 -0400
Subject: [PATCH] Fix catalog filter

---
 src/components/ui/VnFilterPanel.vue         |  3 +-
 src/pages/Order/Card/OrderCatalogFilter.vue | 32 ++++++++++++++++-----
 src/pages/Order/OrderCatalog.vue            |  8 +-----
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 6f6183224..a138e0b64 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -41,7 +41,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['refresh', 'clear', 'search', 'init']);
+const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
 
 const arrayData = useArrayData(props.dataKey, {
     exprBuilder: props.exprBuilder,
@@ -116,6 +116,7 @@ const tags = computed(() => {
 async function remove(key) {
     userParams.value[key] = null;
     await search();
+    emit('remove', key)
 }
 
 function formatValue(value) {
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index 23accb680..0859e14a6 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -21,16 +21,27 @@ const selectedCategoryFk = ref(null);
 const typeList = ref(null);
 const selectedTypeFk = ref(null);
 
-const selectCategory = (params, category) => {
+const resetCategory = () => {
+    selectedCategoryFk.value = null;
+    typeList.value = null;
+};
+
+const clearFilter = (key) => {
+    if (key === 'categoryFk') {
+        resetCategory();
+    }
+};
+
+const selectCategory = (params, category, search) => {
     if (params.categoryFk === category?.id) {
-        selectedCategoryFk.value = null;
+        resetCategory();
         params.categoryFk = null;
-        typeList.value = null;
     } else {
         selectedCategoryFk.value = category?.id;
         params.categoryFk = category?.id;
         loadTypes(category?.id);
     }
+    search();
 };
 
 const loadTypes = async (categoryFk) => {
@@ -65,6 +76,8 @@ function exprBuilder(param, value) {
         case 'categoryFk':
         case 'typeFk':
             return { [param]: value };
+        case 'search':
+            return { 'i.name': { like: `%${value}%` } };
     }
 }
 
@@ -88,10 +101,10 @@ const getCategoryClass = (category, params) => {
     <FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
     <VnFilterPanel
         :data-key="props.dataKey"
-        :search-button="true"
         :hidden-tags="['orderFk', 'orderBy']"
         :expr-builder="exprBuilder"
         @init="onFilterInit"
+        @remove="clearFilter"
     >
         <template #tags="{ tag, formatFn }">
             <strong v-if="tag.label === 'categoryFk'">
@@ -105,7 +118,7 @@ const getCategoryClass = (category, params) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <QList dense>
                 <QItem class="category-filter q-mt-md">
                     <div
@@ -116,7 +129,7 @@ const getCategoryClass = (category, params) => {
                         <QIcon
                             :name="category.icon"
                             class="category-icon"
-                            @click="selectCategory(params, category)"
+                            @click="selectCategory(params, category, searchFn)"
                         >
                             <QTooltip>
                                 {{ t(category.name) }}
@@ -138,7 +151,12 @@ const getCategoryClass = (category, params) => {
                             emit-value
                             use-input
                             :disable="!selectedCategoryFk"
-                            @update:model-value="(value) => (selectedTypeFk = value)"
+                            @update:model-value="
+                                (value) => {
+                                    selectedTypeFk = value;
+                                    searchFn();
+                                }
+                            "
                         >
                             <template #option="{ itemProps, opt }">
                                 <QItem v-bind="itemProps">
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index ec81c50f1..a257f7627 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -20,12 +20,6 @@ const catalogParams = {
     orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
 };
 
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'search':
-            return { 'i.name': { like: `%${value}%` } };
-    }
-}
 </script>
 
 <template>
@@ -35,8 +29,8 @@ function exprBuilder(param, value) {
             url="Orders/CatalogFilter"
             :limit="50"
             :user-params="catalogParams"
-            :expr-builder="exprBuilder"
             :static-params="['orderFk', 'orderBy']"
+            :redirect="false"
         />
     </Teleport>
     <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">