From ecad46436654765805553fd9910b51c6ce7bdc2d Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Tue, 19 Dec 2023 21:27:39 -0400
Subject: [PATCH] Add search filter

---
 src/components/ui/VnSearchbar.vue | 11 +++++++++++
 src/pages/Order/OrderCatalog.vue  | 17 +++++++++++++----
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index cc6cd1971..8220aa3db 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -53,6 +53,14 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    staticParams: {
+        type: Array,
+        default: () => [],
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
 });
 
 const router = useRouter();
@@ -69,8 +77,11 @@ onMounted(() => {
 });
 
 async function search() {
+    const staticParams = Object.entries(store.userParams)
+        .filter(([key, value]) => value && (props.staticParams || []).includes(key));
     await arrayData.applyFilter({
         params: {
+            ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
     });
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index c4fec45a4..f4cb3fa33 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -2,10 +2,10 @@
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
 import { onMounted, onUnmounted } from 'vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
-import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import { useI18n } from 'vue-i18n';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
 
 const route = useRoute();
 const stateStore = useStateStore();
@@ -18,15 +18,24 @@ const catalogParams = {
     orderFk: route.params.id,
     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>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <OrderSearchbar
+        <VnSearchbar
             data-key="OrderCatalogList"
             url="Orders/CatalogFilter"
             :limit="50"
             :user-params="catalogParams"
+            :expr-builder="exprBuilder"
+            :static-params="['orderFk', 'orderBy']"
         />
     </Teleport>
     <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">