perf: refs #7717 right menu filter

src/filters/getParamWhere.js

@@ -0,0 +1,21 @@
+// parsing JSON safely
+function parseJSON(str, fallback) {
+    try {
+        return JSON.parse(str ?? '{}');
+    } catch (e) {
+        console.error('Error parsing JSON:', e);
+        return 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) {
+        return where[param];
+    }
+    return null;
+}

src/filters/index.js

@@ -11,6 +11,7 @@ import dashIfEmpty from './dashIfEmpty';
 import dateRange from './dateRange';
 import toHour from './toHour';
 import dashOrCurrency from './dashOrCurrency';
+import getParamWhere from './getParamWhere';
 
 export {
     toLowerCase,
@@ -26,4 +27,5 @@ export {
     toPercentage,
     dashIfEmpty,
     dateRange,
+    getParamWhere,
 };

src/pages/Order/Card/OrderCatalog.vue

@@ -53,8 +53,6 @@ function extractValueTags(items) {
 </script>
 
 <template>
-    <!-- TODO Sobreescribir la barra de búsqueda -->
-    <!-- <Teleport to="#searchbar"> -->
     <VnSearchbar
         data-key="OrderCatalogList"
         :user-params="catalogParams"
@@ -64,7 +62,6 @@ function extractValueTags(items) {
         :label="t('Search items')"
         :info="t('You can search orders by reference')"
     />
-    <!-- </Teleport> -->
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <OrderCatalogFilter

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -9,6 +9,7 @@ import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 import { useValidator } from 'src/composables/useValidator';
 import VnInput from 'src/components/common/VnInput.vue';
+import getParamWhere from 'src/filters/getParamWhere';
 
 const { t } = useI18n();
 
@@ -28,34 +29,7 @@ const props = defineProps({
     },
 });
 const categoryList = ref(null);
-const params = JSON.parse(route?.query?.params ?? '{}');
+const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
-const filter = JSON.parse(params?.filter ?? '{}');
-const selectedCategoryFk = ref(filter?.where?.categoryFk ?? null);
-// CHATGPT
-/**
- // Función para parsear JSON de manera segura
-const parseJSON = (str, fallback) => {
-  try {
-    return JSON.parse(str);
-  } catch (e) {
-    console.error("Error parsing JSON:", e);
-    return fallback;
-  }
-};
-
-// Obtener los parámetros de la ruta
-const params = parseJSON(route?.query?.params, {});
-
-// Extraer y parsear el filtro de los parámetros
-const { filter: filterStr = '{}' } = params;
-const filter = parseJSON(filterStr, {});
-
-// Obtener el categoryFk del filtro, si existe
-const selectedCategoryFk = ref(filter?.where?.categoryFk ?? null);
-
-console.log(selectedCategoryFk.value);
-
- */
 const typeList = ref([]);
 const selectedTypeFk = ref(null);
 const validationsStore = useValidator();
@@ -98,7 +72,7 @@ const selectCategory = (params, category, search) => {
     search();
 };
 
-const loadTypes = async (categoryFk) => {
+const loadTypes = async (categoryFk = selectedCategoryFk.value) => {
     const { data } = await axios.get(`Orders/${route.params.id}/getItemTypeAvailable`, {
         params: { itemCategoryId: categoryFk },
     });
@@ -192,8 +166,6 @@ const onOrderFieldChange = (value, params) => {
             break;
     }
 };
-const getCategory = (fk) =>
-    (categoryList.value || []).find((category) => category?.id === fk);
 const _moreFields = ['ASC', 'DESC'];
 const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
 const setCategoryList = (data) => {
@@ -205,13 +177,8 @@ const setCategoryList = (data) => {
         }));
     moreFields.value = useLang(_moreFields);
     moreFieldsOrder.value = useLang(_moreFieldsTypes);
-    // const { categoryFk } = JSON.parse(JSON.parse(route.query.params).filter).where;
 
-    // if (!selectedCategoryFk.value) {
+    selectedCategoryFk.value && loadTypes();
-    //     selectedCategoryFk.value = categoryFk;
-    //     selectedCategory.value = getCategory(categoryFk);
-    //     loadTypes(categoryFk);
-    // }
 };
 
 const getCategoryClass = (category, params) => {