Add search filter

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,
         },
     });

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">