perf: #7260 ItemsFilterPanel

src/components/ItemsFilterPanel.vue

@@ -9,6 +9,8 @@ import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 import axios from 'axios';
+import { getParamWhere } from 'src/filters';
+import { useRoute } from 'vue-router';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -26,28 +28,33 @@ const props = defineProps({
     },
 });
 
-const itemCategories = ref([]);
-const selectedCategoryFk = ref(null);
-const selectedTypeFk = ref(null);
+const route = useRoute();
+
 const itemTypesOptions = ref([]);
 const suppliersOptions = ref([]);
 const tagOptions = ref([]);
 const tagValues = ref([]);
+const categoryList = ref(null);
+const selectedCategoryFk = ref(getParamWhere(route.query.table, 'categoryFk', false));
+const selectedTypeFk = ref(getParamWhere(route.query.table, 'typeFk', false));
+// const selectedCategoryFk = ref(
+//     JSON.parse(route?.query?.table ?? '{}').categoryFk ?? null
+// );
+// const selectedTypeFk = ref(JSON.parse(route?.query?.table ?? '{}').typeFk ?? null);
+// const categoryList = computed(() => {
+//     return (itemCategories.value || [])
+//         .filter((category) => category.display)
+//         .map((category) => ({
+//             ...category,
+//             icon: `vn:${(category.icon || '').split('-')[1]}`,
+//         }));
+// });
 
-const categoryList = computed(() => {
-    return (itemCategories.value || [])
-        .filter((category) => category.display)
-        .map((category) => ({
-            ...category,
-            icon: `vn:${(category.icon || '').split('-')[1]}`,
-        }));
-});
-
-const selectedCategory = computed(() =>
-    (itemCategories.value || []).find(
+const selectedCategory = computed(() => {
+    return (categoryList.value || []).find(
         (category) => category?.id === selectedCategoryFk.value
-    )
     );
+});
 
 const selectedType = computed(() => {
     return (itemTypesOptions.value || []).find(
@@ -87,7 +94,7 @@ const applyTags = (params, search) => {
     search();
 };
 
-const fetchItemTypes = async (id) => {
+const fetchItemTypes = async (id = selectedCategoryFk.value) => {
     try {
         const filter = {
             fields: ['id', 'name', 'categoryFk'],
@@ -134,15 +141,19 @@ const removeTag = (index, params, search) => {
     (tagValues.value || []).splice(index, 1);
     applyTags(params, search);
 };
+const setCategoryList = (data) => {
+    categoryList.value = (data || [])
+        .filter((category) => category.display)
+        .map((category) => ({
+            ...category,
+            icon: `vn:${(category.icon || '').split('-')[1]}`,
+        }));
+    fetchItemTypes();
+};
 </script>
 
 <template>
-    <FetchData
-        url="ItemCategories"
-        limit="30"
-        auto-load
-        @on-fetch="(data) => (itemCategories = data)"
-    />
+    <FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
     <FetchData
         url="Suppliers"
         limit="30"
@@ -262,6 +273,7 @@ const removeTag = (index, params, search) => {
                     />
                 </QItemSection>
                 <QItemSection class="col">
+                    {{ value }}
                     <VnSelect
                         v-if="!value?.selectedTag?.isFree && value.valueOptions"
                         :label="t('components.itemsFilterPanel.value')"

src/filters/getParamWhere.js

@@ -1,4 +1,3 @@
-// parsing JSON safely
 function parseJSON(str, fallback) {
     try {
         return JSON.parse(str ?? '{}');
@@ -7,13 +6,15 @@ function parseJSON(str, fallback) {
         return fallback;
     }
 }
-export default function (route, param) {
-    // catch route query params
-    const params = parseJSON(route?.query?.params, {});
-
-    // extract and parse filter from params
+export default function (route, param, inFilter = true) {
+    const params = parseJSON(route?.query?.params ?? route, {});
+    let where = null;
+    if (!inFilter) {
+        where = params;
+    } else {
         const { filter: filterStr = '{}' } = params;
-    const where = parseJSON(filterStr, {})?.where;
+        where = parseJSON(filterStr, {})?.where;
+    }
     if (where && where[param] !== undefined) {
         return where[param];
     }