src/components/ui/VnFilterPanel.vue

@@ -185,9 +185,6 @@ async function remove(key) {
 }
 
 function formatValue(value) {
-    if (typeof value === 'object') {
-        return value;
-    }
     if (typeof value === 'boolean') return value ? t('Yes') : t('No');
     if (isNaN(value) && !isNaN(Date.parse(value))) return toDate(value);
 
@@ -196,13 +193,6 @@ function formatValue(value) {
 
 function sanitizer(params) {
     for (const [key, value] of Object.entries(params)) {
-        if (key == 'and') {
-            value.forEach((andValue) => {
-                params = { ...params, ...andValue };
-            });
-            delete params[key];
-        }
-
         if (value && typeof value === 'object') {
             const param = Object.values(value)[0];
             if (typeof param == 'string') params[key] = param.replaceAll('%', '');
@@ -221,7 +211,7 @@ function sanitizer(params) {
         icon="search"
         @click="search()"
     ></QBtn>
-    <QForm @submit="search" id="filterPanelForm" @keyup.enter.prevent="search(true)">
+    <QForm @submit="search" id="filterPanelForm" @keyup.enter="search()">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>

src/components/ui/VnSearchbar.vue

@@ -9,7 +9,6 @@ import { useStateStore } from 'src/stores/useStateStore';
 const quasar = useQuasar();
 const { t } = useI18n();
 const state = useStateStore();
-const emit = defineEmits(['onSearch']);
 
 const props = defineProps({
     dataKey: {
@@ -119,7 +118,6 @@ async function search() {
         delete filter.params.search;
     }
     await arrayData.applyFilter(filter);
-    emit('onSearch', store.data);
 }
 </script>
 <template>

src/pages/Order/Card/OrderCatalog.vue

@@ -86,8 +86,11 @@ function extractValueTags(items) {
         <div class="full-width">
             <VnPaginate
                 data-key="OrderCatalogList"
+                url="Orders/CatalogFilter"
+                :limit="50"
+                :user-params="catalogParams"
+                @on-fetch="extractTags"
                 :update-router="false"
-                @on-change="extractTags"
             >
                 <template #body="{ rows }">
                     <div class="catalog-list">

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -1,13 +1,14 @@
 <script setup>
-import { computed, ref, onMounted, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
+import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import getParamWhere from 'src/filters/getParamWhere';
-import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
 
@@ -47,19 +48,6 @@ const orderWayList = ref([
 const orderBySelected = ref('relevancy DESC, name');
 const orderWaySelected = ref('ASC');
 
-const routeQuery = JSON.parse(route?.query.params ?? '{}');
-const paramsSearch = ref({});
-const tagData = ref([]);
-
-onMounted(() => {
-    paramsSearch.value = JSON.parse(routeQuery.filter ?? '{}')?.where ?? {};
-    if (Object.keys(paramsSearch.value).length > 0) vnFilterPanelRef.value.search();
-    if (routeQuery.categoryFk && routeQuery.typeFk) {
-        selectedCategoryFk.value = routeQuery.categoryFk;
-        selectedTypeFk.value = routeQuery.typeFk;
-    }
-});
-
 const createValue = (val, done) => {
     if (val.length > 2) {
         if (!tagOptions.value.includes(val)) {
@@ -73,21 +61,19 @@ const resetCategory = () => {
     typeList.value = null;
 };
 
-const selectCategory = (category, search) => {
+const clearFilter = (key) => {
-    if (!paramsSearch.value?.filter) paramsSearch.value.filter = { where: {} };
+    if (key === 'categoryFk') {
-    const where = paramsSearch.value.filter.where;
-    if (where.categoryFk === category?.id) {
         resetCategory();
-        where.categoryFk = null;
-    } else {
-        if (where.categoryFk && where.categoryFk !== category?.id) {
-            paramsSearch.value.typeFk = null;
-            selectedTypeFk.value = null;
-            typeList.value = [];
     }
+};
 
+const selectCategory = (params, category, search) => {
+    if (params.categoryFk === category?.id) {
+        resetCategory();
+        params.categoryFk = null;
+    } else {
         selectedCategoryFk.value = category?.id;
-        where.categoryFk = category?.id;
+        params.categoryFk = category?.id;
         loadTypes(category?.id);
     }
     search();
@@ -100,10 +86,6 @@ const loadTypes = async (categoryFk = selectedCategoryFk.value) => {
     typeList.value = data;
 };
 
-watch(selectedTypeFk, (newValue) => {
-    paramsSearch.value.typeFk = newValue;
-});
-
 const selectedCategory = computed(() =>
     (categoryList.value || []).find(
         (category) => category?.id === selectedCategoryFk.value
@@ -121,17 +103,26 @@ const selectedType = computed(() => {
     return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
 });
 
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'categoryFk':
+        case 'typeFk':
+            return { [param]: value };
+        case 'search':
+            if (/^\d+$/.test(value)) return { 'i.id': value };
+            else return { 'i.name': { like: `%${value}%` } };
+    }
+}
+
 const applyTagFilter = (params, search) => {
     if (!tagValues.value?.length) {
         params.tagGroups = null;
         search();
         return;
     }
-
+    if (!params.tagGroups) {
-    if (!params.tagGroups || typeof params.tagGroups === 'string') {
         params.tagGroups = [];
     }
-
     params.tagGroups.push(
         JSON.stringify({
             values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
@@ -142,29 +133,17 @@ const applyTagFilter = (params, search) => {
             tagFk: selectedTag?.value?.tagFk,
         })
     );
-
-    tagData.value.push(JSON.parse(params.tagGroups[params.tagGroups.length - 1]));
     search();
     selectedTag.value = null;
     tagValues.value = [{}];
 };
 
 const removeTagChip = (selection, params, search) => {
-    if (typeof params.tagGroups === 'string') {
+    if (params.tagGroups) {
-        try {
+        params.tagGroups = (params.tagGroups || []).filter(
-            params.tagGroups = JSON.parse(params.tagGroups);
+            (value) => value !== selection
-        } catch (error) {
+        );
-            console.error('Error parsing tagGroups:', error);
-            params.tagGroups = [];
     }
-    }
-    console.log('params.tagGroups: ', params.tagGroups);
-    console.log('selection: ', selection);
-
-    if (Array.isArray(params.tagGroups)) {
-        params.tagGroups = params.tagGroups.filter((value) => value !== selection);
-    }
-
     search();
 };
 
@@ -199,12 +178,12 @@ function addOrder(value, field, params) {
     <VnFilterPanel
         ref="vnFilterPanelRef"
         :data-key="props.dataKey"
-        v-model="paramsSearch"
+        :hidden-tags="['orderFk', 'orderBy']"
-        :redirect="false"
+        :un-removable-params="['orderFk', 'orderBy']"
-        :hidden-tags="['orderFk', 'orderBy', 'filter', 'search', 'or', 'and']"
+        :expr-builder="exprBuilder"
         :custom-tags="['tagGroups']"
-        :unremovable-params="['orderFk', 'orderBy']"
+        @remove="clearFilter"
-        :disable-submit-event="true"
+        :redirect="false"
     >
         <template #tags="{ tag, formatFn }">
             <strong v-if="tag.label === 'categoryFk'">
@@ -222,13 +201,17 @@ function addOrder(value, field, params) {
             <template v-for="tag in customTags" :key="tag.label">
                 <template v-if="tag.label === 'tagGroups'">
                     <VnFilterPanelChip
-                        v-for="chip in tagData"
+                        v-for="chip in tag.value"
                         :key="chip"
                         removable
                         @remove="removeTagChip(chip, params, searchFn)"
                     >
-                        <strong>{{ chip.tagSelection?.name }}: </strong>
+                        <strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
-                        <span>{{ chip.values[0].value }}</span>
+                        <span>{{
+                            (JSON.parse(chip).values || [])
+                                .map((item) => item.value)
+                                .join(' | ')
+                        }}</span>
                     </VnFilterPanelChip>
                 </template>
             </template>
@@ -243,7 +226,7 @@ function addOrder(value, field, params) {
                     <QIcon
                         :name="category.icon"
                         class="category-icon"
-                        @click="selectCategory(category, searchFn)"
+                        @click="selectCategory(params, category, searchFn)"
                     >
                         <QTooltip>
                             {{ t(category.name) }}
@@ -337,7 +320,7 @@ function addOrder(value, field, params) {
             >
                 <FetchData
                     v-if="selectedTag"
-                    :url="`Tags/${selectedTag.id}/filterValue`"
+                    :url="`Tags/${selectedTag}/filterValue`"
                     limit="30"
                     auto-load
                     @on-fetch="(data) => (tagOptions = data)"
@@ -360,7 +343,7 @@ function addOrder(value, field, params) {
                     @update:model-value="applyTagFilter(params, searchFn)"
                 />
                 <VnSelect
-                    v-else-if="selectedTag.id === 1"
+                    v-else-if="selectedTag === 1"
                     :label="t('params.value')"
                     v-model="value.value"
                     :options="tagOptions || []"
@@ -375,7 +358,7 @@ function addOrder(value, field, params) {
                     @new-value="createValue"
                     @update:model-value="applyTagFilter(params, searchFn)"
                 />
-                <QInput
+                <VnInput
                     v-else
                     :label="t('params.value')"
                     v-model="value.value"
@@ -396,7 +379,6 @@ function addOrder(value, field, params) {
                     icon="add_circle"
                     shortcut="+"
                     flat
-                    size="md"
                     class="filter-icon"
                     @click="tagValues.push({})"
                 />