fix: catalog view category and type filter

src/components/ui/VnFilterPanel.vue

@@ -57,7 +57,6 @@ const $props = defineProps({
     },
 });
 
-defineExpose({ search, sanitizer });
 const emit = defineEmits([
     'update:modelValue',
     'refresh',
@@ -170,9 +169,30 @@ const tagsList = computed(() => {
     return tagList;
 });
 
-const tags = computed(() => {
+const formatTags = (tags) => {
-    return tagsList.value.filter((tag) => !($props.customTags || []).includes(tag.label));
+    const formattedTags = [];
+    tags.forEach((tag) => {
+        if (tag.label === 'and') {
+            tag.value.forEach((item) => {
+                for (const key in item) {
+                    formattedTags.push({ label: key, value: item[key] });
+                }
             });
+        } else {
+            formattedTags.push(tag);
+        }
+    });
+    return formattedTags;
+};
+
+const tags = computed(() => {
+    const filteredTags = tagsList.value.filter(
+        (tag) => !($props.customTags || []).includes(tag.label)
+    );
+    console.log('formatTags: ', formatTags(filteredTags));
+    return formatTags(filteredTags);
+});
+
 const customTags = computed(() =>
     tagsList.value.filter((tag) => ($props.customTags || []).includes(tag.label))
 );
@@ -193,13 +213,20 @@ function formatValue(value) {
 
 function sanitizer(params) {
     for (const [key, value] of Object.entries(params)) {
-        if (value && typeof value === 'object') {
+        if (key === 'and' && Array.isArray(value)) {
+            value.forEach((item) => {
+                Object.assign(params, item);
+            });
+            delete params[key];
+        } else if (value && typeof value === 'object') {
             const param = Object.values(value)[0];
             if (typeof param == 'string') params[key] = param.replaceAll('%', '');
         }
     }
     return params;
 }
+
+defineExpose({ search, sanitizer, userParams });
 </script>
 
 <template>

src/filters/getParamWhere.js

@@ -10,11 +10,19 @@ function parseJSON(str, fallback) {
 export default function (route, param) {
     // catch route query params
     const params = parseJSON(route?.query?.params, {});
-
     // extract and parse filter from params
     const { filter: filterStr = '{}' } = params;
+
     const where = parseJSON(filterStr, {})?.where;
-    if (where && where[param] !== undefined) {
+
+    if (where && !param) {
+        return where;
+    } else if (where && where.and) {
+        const foundParam = where.and.find((p) => p[param]);
+        if (foundParam) {
+            return foundParam[param];
+        }
+    } else if (where && where[param]) {
         return where[param];
     }
     return null;

src/pages/Order/Card/OrderCatalog.vue

@@ -1,13 +1,14 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute, useRouter } from 'vue-router';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onBeforeMount, onMounted, onUnmounted, ref, computed } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 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';
 
 const route = useRoute();
 const router = useRouter();
@@ -15,17 +16,36 @@ const stateStore = useStateStore();
 const { t } = useI18n();
 const tags = ref([]);
 
+let catalogParams = {
+    orderFk: route.params.id,
+    orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
+};
+
+onBeforeMount(() => {
+    const whereParams = getParamWhere(route);
+    if (whereParams) {
+        const formattedWhereParams = {};
+        if (whereParams.and) {
+            whereParams.and.forEach((item) => {
+                Object.assign(formattedWhereParams, item);
+            });
+        } else {
+            Object.assign(formattedWhereParams, whereParams);
+        }
+
+        catalogParams = {
+            ...catalogParams,
+            ...formattedWhereParams,
+        };
+    }
+});
+
 onMounted(() => {
     stateStore.rightDrawer = true;
     checkOrderConfirmation();
 });
 onUnmounted(() => (stateStore.rightDrawer = false));
 
-const catalogParams = {
-    orderFk: route.params.id,
-    orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
-};
-
 async function checkOrderConfirmation() {
     const response = await axios.get(`Orders/${route.params.id}`);
     if (response.data.isConfirmed === 1) {
@@ -61,6 +81,7 @@ function extractValueTags(items) {
     );
     tagValue.value = resultValueTags;
 }
+const autoLoad = computed(() => !!catalogParams.categoryFk);
 </script>
 
 <template>
@@ -79,6 +100,7 @@ function extractValueTags(items) {
                 data-key="OrderCatalogList"
                 :tag-value="tagValue"
                 :tags="tags"
+                :initial-catalog-params="catalogParams"
             />
         </QScrollArea>
     </QDrawer>
@@ -91,6 +113,7 @@ function extractValueTags(items) {
                 :user-params="catalogParams"
                 @on-fetch="extractTags"
                 :update-router="false"
+                :auto-load="autoLoad"
             >
                 <template #body="{ rows }">
                     <div class="catalog-list">

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
@@ -26,9 +26,13 @@ const props = defineProps({
         type: Array,
         required: true,
     },
+    initialCatalogParams: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 const categoryList = ref(null);
-const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
+const selectedCategoryFk = ref(null);
 const typeList = ref([]);
 const selectedTypeFk = ref(null);
 const selectedTag = ref(null);
@@ -74,6 +78,8 @@ const selectCategory = (params, category, search) => {
     } else {
         selectedCategoryFk.value = category?.id;
         params.categoryFk = category?.id;
+        params.typeFk = null;
+        selectedTypeFk.value = null;
         loadTypes(category?.id);
     }
     search();
@@ -86,11 +92,11 @@ const loadTypes = async (categoryFk = selectedCategoryFk.value) => {
     typeList.value = data;
 };
 
-const selectedCategory = computed(() =>
+const selectedCategory = computed(() => {
-    (categoryList.value || []).find(
+    return (categoryList.value || []).find(
         (category) => category?.id === selectedCategoryFk.value
-    )
     );
+});
 function filterFn(val, update) {
     update(() => {
         const needle = val.toLowerCase();
@@ -171,6 +177,11 @@ function addOrder(value, field, params) {
     params.orderBy = JSON.stringify(orderBy);
     vnFilterPanelRef.value.search();
 }
+
+onMounted(() => {
+    selectedCategoryFk.value = getParamWhere(route, 'categoryFk');
+    selectedTypeFk.value = getParamWhere(route, 'typeFk');
+});
 </script>
 
 <template>
@@ -206,6 +217,8 @@ function addOrder(value, field, params) {
                         removable
                         @remove="removeTagChip(chip, params, searchFn)"
                     >
+                        <pre>{{ chip }}</pre>
+
                         <strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
                         <span>{{
                             (JSON.parse(chip).values || [])
@@ -384,6 +397,7 @@ function addOrder(value, field, params) {
                 />
             </QItem>
             <QSeparator />
+            <pre>{{ params }}</pre>
         </template>
     </VnFilterPanel>
 </template>