src/components/ui/VnSearchbar.vue

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

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, watch } 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 VnInput from 'src/components/common/VnInput.vue';
+// import VnInput from 'src/components/common/VnInput.vue';
 import getParamWhere from 'src/filters/getParamWhere';
 
 const { t } = useI18n();
@@ -48,12 +48,15 @@ const orderBySelected = ref('relevancy DESC, name');
 const orderWaySelected = ref('ASC');
 
 const routeQuery = JSON.parse(route?.query.params ?? '{}');
-const params = ref({});
+const paramsSearch = ref({});
 
 onMounted(() => {
-    const filter = routeQuery.filter;
+    paramsSearch.value = JSON.parse(routeQuery.filter ?? '{}')?.where ?? {};
-    params.value = JSON.parse(filter ?? '{}')?.where ?? {};
+    if (Object.keys(paramsSearch.value).length > 0) vnFilterPanelRef.value.search();
-    if (Object.keys(params.value).length > 0) vnFilterPanelRef.value.search();
+    if (routeQuery.categoryFk && routeQuery.typeFk) {
+        selectedCategoryFk.value = routeQuery.categoryFk;
+        selectedTypeFk.value = routeQuery.typeFk;
+    }
 });
 
 const createValue = (val, done) => {
@@ -70,12 +73,18 @@ const resetCategory = () => {
 };
 
 const selectCategory = (category, search) => {
-    if (!params.value?.filter) params.value.filter = { where: {} };
+    if (!paramsSearch.value?.filter) paramsSearch.value.filter = { where: {} };
-    const where = params.value.filter.where;
+    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 = [];
+        }
+
         selectedCategoryFk.value = category?.id;
         where.categoryFk = category?.id;
         loadTypes(category?.id);
@@ -90,6 +99,10 @@ 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
@@ -107,25 +120,55 @@ const selectedType = computed(() => {
     return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
 });
 
+// const applyTagFilter = (params, search) => {
+
+//     if (params.tagGroups) params.tagGroups = null;
+//     if (!tagValues.value?.length) {
+//         params.tagGroups = null;
+//         search();
+//         return;
+//     }
+//     if (!params.tagGroups) {
+//         params.tagGroups = [];
+//     }
+//     params.tagGroups.push(
+//         JSON.stringify({
+//             values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
+//             tagSelection: {
+//                 ...selectedTag.value,
+//                 orgShowField: selectedTag?.value?.name,
+//             },
+//             tagFk: selectedTag?.value?.tagFk,
+//         })
+//     );
+//     search();
+//     selectedTag.value = null;
+//     tagValues.value = [{}];
+// };
+
 const applyTagFilter = (params, search) => {
     if (!tagValues.value?.length) {
         params.tagGroups = null;
         search();
         return;
     }
+
     if (!params.tagGroups) {
         params.tagGroups = [];
+    } else if (typeof params.tagGroups === 'string') {
+        params.tagGroups = [params.tagGroups];
     }
-    params.tagGroups.push(
+
-        JSON.stringify({
+    const newTagGroup = JSON.stringify({
         values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
         tagSelection: {
             ...selectedTag.value,
             orgShowField: selectedTag?.value?.name,
         },
         tagFk: selectedTag?.value?.tagFk,
-        })
+    });
-    );
+    params.tagGroups.push(newTagGroup);
+
     search();
     selectedTag.value = null;
     tagValues.value = [{}];
@@ -155,6 +198,22 @@ function addOrder(value, field, params) {
     params.orderBy = JSON.stringify(orderBy);
     vnFilterPanelRef.value.search();
 }
+
+const data = ref([]);
+
+function getTagData(value) {
+    if (Array.isArray(value) && value.length >= 1) {
+        const parsedTags = value.map((obj) => JSON.parse(obj));
+
+        if (parsedTags.length === 1) {
+            data.value = parsedTags[0];
+        } else {
+            data.value = parsedTags;
+        }
+    } else {
+        data.value = JSON.parse(value);
+    }
+}
 </script>
 
 <template>
@@ -162,13 +221,14 @@ function addOrder(value, field, params) {
     <VnFilterPanel
         ref="vnFilterPanelRef"
         :data-key="props.dataKey"
-        v-model="params"
+        v-model="paramsSearch"
         :redirect="false"
         :hidden-tags="['orderFk', 'orderBy', 'filter', 'search', 'or', 'and']"
-        :un-removable-params="['orderFk', 'orderBy']"
+        :unremovable-params="['orderFk', 'orderBy']"
         :disable-submit-event="true"
     >
         <template #tags="{ tag, formatFn }">
+            {{ console.log('tag.label: ', tag.label) }}
             <strong v-if="tag.label === 'categoryFk'">
                 {{ t(selectedCategory?.name || '') }}
             </strong>
@@ -176,10 +236,11 @@ function addOrder(value, field, params) {
                 {{ t(selectedType?.name || '') }}
             </strong>
             <div v-else-if="tag.label === 'tagGroups'" class="q-gutter-x-xs">
-                <strong v-if="JSON.parse(tag.value).tagSelection.name"
+                {{ getTagData(tag.value) }}
-                    >{{ JSON.parse(tag.value).tagSelection?.name }}:
+                <strong> {{ data.tagSelection?.name }}: </strong>
-                </strong>
+                <span>
-                <span>{{ JSON.parse(tag.value).values[0].value }}</span>
+                    {{ console.log('data', data.values) }}
+                </span>
             </div>
             <div v-else class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
@@ -328,7 +389,7 @@ function addOrder(value, field, params) {
                     @new-value="createValue"
                     @update:model-value="applyTagFilter(params, searchFn)"
                 />
-                <VnInput
+                <QInput
                     v-else
                     :label="t('params.value')"
                     v-model="value.value"