fix: tag chips

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -6,8 +6,8 @@ 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 getParamWhere from 'src/filters/getParamWhere';
+import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
 
@@ -49,6 +49,7 @@ 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 ?? {};
@@ -120,32 +121,6 @@ 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;
@@ -153,27 +128,46 @@ const applyTagFilter = (params, search) => {
         return;
     }
 
-    if (!params.tagGroups) {
+    if (!params.tagGroups || typeof params.tagGroups === 'string') {
         params.tagGroups = [];
-    } else if (typeof params.tagGroups === 'string') {
-        params.tagGroups = [params.tagGroups];
     }
 
-    const newTagGroup = JSON.stringify({
+    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,
-    });
+        })
-    params.tagGroups.push(newTagGroup);
+    );
 
+    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') {
+        try {
+            params.tagGroups = JSON.parse(params.tagGroups);
+        } 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();
+};
+
 const setCategoryList = (data) => {
     categoryList.value = (data || [])
         .filter((category) => category.display)
@@ -198,22 +192,6 @@ 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>
@@ -224,29 +202,37 @@ function getTagData(value) {
         v-model="paramsSearch"
         :redirect="false"
         :hidden-tags="['orderFk', 'orderBy', 'filter', 'search', 'or', 'and']"
+        :custom-tags="['tagGroups']"
         :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>
             <strong v-else-if="tag.label === 'typeFk'">
                 {{ t(selectedType?.name || '') }}
             </strong>
-            <div v-else-if="tag.label === 'tagGroups'" class="q-gutter-x-xs">
-                {{ getTagData(tag.value) }}
-                <strong> {{ data.tagSelection?.name }}: </strong>
-                <span>
-                    {{ console.log('data', data.values) }}
-                </span>
-            </div>
             <div v-else class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
+        <template #customTags="{ tags: customTags, params, searchFn }">
+            <template v-for="tag in customTags" :key="tag.label">
+                <template v-if="tag.label === 'tagGroups'">
+                    <VnFilterPanelChip
+                        v-for="chip in tagData"
+                        :key="chip"
+                        removable
+                        @remove="removeTagChip(chip, params, searchFn)"
+                    >
+                        <strong>{{ chip.tagSelection?.name }}: </strong>
+                        <span>{{ chip.values[0].value }}</span>
+                    </VnFilterPanelChip>
+                </template>
+            </template>
+        </template>
         <template #body="{ params, searchFn }">
             <QItem class="category-filter q-mt-md">
                 <div
@@ -410,6 +396,7 @@ function getTagData(value) {
                     icon="add_circle"
                     shortcut="+"
                     flat
+                    size="md"
                     class="filter-icon"
                     @click="tagValues.push({})"
                 />