fix: order catalog fixes

src/pages/Order/Card/OrderCatalog.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute, useRouter } from 'vue-router';
-import { onBeforeMount, onMounted, onUnmounted, ref, computed } from 'vue';
+import { onBeforeMount, onMounted, onUnmounted, ref, computed, watch } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
@@ -9,11 +9,15 @@ import CatalogItem from 'components/ui/CatalogItem.vue';
 import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import getParamWhere from 'src/filters/getParamWhere';
+import { useArrayData } from 'composables/useArrayData';
 
 const route = useRoute();
 const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
+const arrayData = useArrayData('OrderCatalogList');
+const store = arrayData.store;
+const showFilter = ref(null);
 const tags = ref([]);
 
 let catalogParams = {
@@ -37,6 +41,8 @@ onBeforeMount(() => {
             ...catalogParams,
             ...formattedWhereParams,
         };
+    } else {
+        showFilter.value = true;
     }
 });
 
@@ -44,6 +50,7 @@ onMounted(() => {
     stateStore.rightDrawer = true;
     checkOrderConfirmation();
 });
+
 onUnmounted(() => (stateStore.rightDrawer = false));
 
 async function checkOrderConfirmation() {
@@ -54,6 +61,7 @@ async function checkOrderConfirmation() {
 }
 
 function extractTags(items) {
+    if (!items || !items.length) return;
     const resultTags = [];
     (items || []).forEach((item) => {
         (item.tags || []).forEach((tag) => {
@@ -82,6 +90,14 @@ function extractValueTags(items) {
     tagValue.value = resultValueTags;
 }
 const autoLoad = computed(() => !!catalogParams.categoryFk);
+
+watch(
+    () => store.data,
+    (val) => {
+        extractTags(val);
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
@@ -95,7 +111,7 @@ const autoLoad = computed(() => !!catalogParams.categoryFk);
         :info="t('You can search items by name or id')"
     />
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+        <QScrollArea v-if="showFilter" class="fit text-grey-8">
             <OrderCatalogFilter
                 data-key="OrderCatalogList"
                 :tag-value="tagValue"
@@ -111,7 +127,7 @@ const autoLoad = computed(() => !!catalogParams.categoryFk);
                 url="Orders/CatalogFilter"
                 :limit="50"
                 :user-params="catalogParams"
-                @on-fetch="extractTags"
+                @on-fetch="showFilter = true"
                 :update-router="false"
                 :auto-load="autoLoad"
             >

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -26,11 +26,8 @@ const props = defineProps({
         type: Array,
         required: true,
     },
-    initialCatalogParams: {
-        type: Object,
-        default: () => ({}),
-    },
 });
+
 const categoryList = ref(null);
 const selectedCategoryFk = ref(null);
 const typeList = ref([]);
@@ -52,14 +49,6 @@ const orderWayList = ref([
 const orderBySelected = ref('relevancy DESC, name');
 const orderWaySelected = ref('ASC');
 
-const createValue = (val, done) => {
-    if (val.length > 2) {
-        if (!tagOptions.value.includes(val)) {
-            done(tagOptions.value, 'add-unique');
-        }
-        tagValues.value.push({ value: val });
-    }
-};
 const resetCategory = () => {
     selectedCategoryFk.value = null;
     typeList.value = null;
@@ -97,14 +86,7 @@ const selectedCategory = computed(() => {
         (category) => category?.id === selectedCategoryFk.value
     );
 });
-function filterFn(val, update) {
+
-    update(() => {
-        const needle = val.toLowerCase();
-        tagOptions.value = props.tagValue.filter(
-            (v) => v.toLowerCase().indexOf(needle) > -1
-        );
-    });
-}
 const selectedType = computed(() => {
     return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
 });
@@ -120,36 +102,36 @@ function exprBuilder(param, value) {
     }
 }
 
-const applyTagFilter = (params, search) => {
+const applyTags = (params, search) => {
     if (!tagValues.value?.length) {
         params.tagGroups = null;
         search();
         return;
     }
-    if (!params.tagGroups) {
+
-        params.tagGroups = [];
+    const tagGroups = {
-    }
+        values: [...tagValues.value],
-    params.tagGroups.push(
+        tagFk: selectedTag?.value?.id,
-        JSON.stringify({
+        tagSelection: {
-            values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
+            name: selectedTag?.value?.name,
-            tagSelection: {
+        },
-                ...selectedTag.value,
+    };
-                orgShowField: selectedTag?.value?.name,
+
-            },
+    params.tagGroups = tagGroups;
-            tagFk: selectedTag?.value?.tagFk,
-        })
-    );
     search();
-    selectedTag.value = null;
-    tagValues.value = [{}];
 };
 
-const removeTagChip = (selection, params, search) => {
+const removeTagGroupParam = (params, search, valIndex = null) => {
-    if (params.tagGroups) {
+    if (!params.tagGroups) return;
-        params.tagGroups = (params.tagGroups || []).filter(
+
-            (value) => value !== selection
+    if (!valIndex) {
-        );
+        params.tagGroups = null;
+        tagValues.value = [{}];
+    } else {
+        (tagValues.value || []).splice(valIndex, 1);
+        params.tagGroups.values.splice(valIndex, 1);
     }
+
     search();
 };
 
@@ -178,9 +160,37 @@ function addOrder(value, field, params) {
     vnFilterPanelRef.value.search();
 }
 
+const getSelectedTagValues = async (tag) => {
+    try {
+        if (!tag?.id) return;
+        const filter = {
+            fields: ['value'],
+            order: 'value ASC',
+            limit: 30,
+        };
+
+        const url = `Tags/${tag?.id}/filterValue`;
+        console.log('url', url);
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get(url, {
+            params,
+        });
+        tagOptions.value = data;
+    } catch (err) {
+        console.error('Error getting selected tag values');
+    }
+};
+
 onMounted(() => {
     selectedCategoryFk.value = getParamWhere(route, 'categoryFk');
     selectedTypeFk.value = getParamWhere(route, 'typeFk');
+    if (route.query.params && JSON.parse(route.query.params).tagGroups) {
+        const tagGroups = JSON.parse(route.query.params).tagGroups;
+        tagValues.value = [...tagGroups.values];
+        selectedTag.value = (props.tags || []).find(
+            (tag) => tag.name === tagGroups.tagSelection.name
+        );
+    }
 });
 </script>
 
@@ -212,19 +222,19 @@ onMounted(() => {
             <template v-for="tag in customTags" :key="tag.label">
                 <template v-if="tag.label === 'tagGroups'">
                     <VnFilterPanelChip
-                        v-for="chip in tag.value"
-                        :key="chip"
                         removable
-                        @remove="removeTagChip(chip, params, searchFn)"
+                        @remove="removeTagGroupParam(params, searchFn)"
                     >
-                        <pre>{{ chip }}</pre>
+                        <strong class="q-mr-xs">
-
+                            {{ tag.value?.tagSelection?.name }}:
-                        <strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
+                        </strong>
-                        <span>{{
+                        <span>
-                            (JSON.parse(chip).values || [])
+                            {{
-                                .map((item) => item.value)
+                                (tag.value?.values || [])
-                                .join(' | ')
+                                    .map((item) => `"${item.value}"`)
-                        }}</span>
+                                    .join(', ')
+                            }}
+                        </span>
                     </VnFilterPanelChip>
                 </template>
             </template>
@@ -323,6 +333,7 @@ onMounted(() => {
                         rounded
                         :emit-value="false"
                         use-input
+                        @update:model-value="($event) => getSelectedTagValues($event)"
                     />
                 </QItemSection>
             </QItem>
@@ -331,16 +342,9 @@ onMounted(() => {
                 :key="value"
                 class="q-mt-md filter-value"
             >
-                <FetchData
-                    v-if="selectedTag"
-                    :url="`Tags/${selectedTag}/filterValue`"
-                    limit="30"
-                    auto-load
-                    @on-fetch="(data) => (tagOptions = data)"
-                />
                 <VnSelect
-                    v-if="!selectedTag"
+                    v-if="!selectedTag?.isFree && tagOptions"
-                    :label="t('params.value')"
+                    :label="t('components.itemsFilterPanel.value')"
                     v-model="value.value"
                     :options="tagOptions || []"
                     option-value="value"
@@ -350,41 +354,23 @@ onMounted(() => {
                     rounded
                     emit-value
                     use-input
-                    class="filter-input"
+                    :disable="!value"
-                    @new-value="createValue"
+                    :is-clearable="false"
-                    @filter="filterFn"
+                    @update:model-value="applyTags(params, searchFn)"
-                    @update:model-value="applyTagFilter(params, searchFn)"
-                />
-                <VnSelect
-                    v-else-if="selectedTag === 1"
-                    :label="t('params.value')"
-                    v-model="value.value"
-                    :options="tagOptions || []"
-                    option-value="value"
-                    option-label="value"
-                    dense
-                    outlined
-                    rounded
-                    emit-value
-                    use-input
-                    class="filter-input"
-                    @new-value="createValue"
-                    @update:model-value="applyTagFilter(params, searchFn)"
                 />
                 <VnInput
                     v-else
-                    :label="t('params.value')"
                     v-model="value.value"
-                    dense
+                    :label="t('components.itemsFilterPanel.value')"
-                    outlined
+                    :disable="!value"
-                    rounded
+                    is-outlined
-                    class="filter-input"
+                    :is-clearable="false"
-                    @keyup.enter="applyTagFilter(params, searchFn)"
+                    @keyup.enter="applyTags(params, searchFn)"
                 />
                 <QIcon
                     name="delete"
                     class="filter-icon"
-                    @click="(tagValues || []).splice(index, 1)"
+                    @click="removeTagGroupParam(params, searchFn, index)"
                 />
             </QItem>
             <QItem class="q-mt-lg">
@@ -393,11 +379,11 @@ onMounted(() => {
                     shortcut="+"
                     flat
                     class="filter-icon"
+                    size="md"
                     @click="tagValues.push({})"
                 />
             </QItem>
             <QSeparator />
-            <pre>{{ params }}</pre>
         </template>
     </VnFilterPanel>
 </template>