fix: orderCatalogFilter order

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -32,14 +32,22 @@ const categoryList = ref(null);
 const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
 const typeList = ref([]);
 const selectedTypeFk = ref(null);
-const validationsStore = useValidator();
-const selectedOrder = ref(null);
-const selectedOrderField = ref(null);
-const moreFields = ref([]);
-const moreFieldsOrder = ref([]);
 const selectedTag = ref(null);
 const tagValues = ref([{}]);
 const tagOptions = ref([]);
+const vnFilterPanelRef = ref();
+const orderByList = ref([
+    { id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 },
+    { id: 'showOrder, price', name: t('params.colorAndPrice'), priority: 999 },
+    { id: 'name', name: t('params.name'), priority: 999 },
+    { id: 'price', name: t('params.price'), priority: 999 },
+]);
+const orderWayList = ref([
+    { id: 'ASC', name: t('params.ASC') },
+    { id: 'DESC', name: t('params.DESC') },
+]);
+const orderBySelected = ref('relevancy DESC, name');
+const orderWaySelected = ref('ASC');
 
 const createValue = (val, done) => {
     if (val.length > 2) {
@@ -140,35 +148,6 @@ const removeTagChip = (selection, params, search) => {
     search();
 };
 
-const onOrderChange = (value, params) => {
-    const tagObj = JSON.parse(params.orderBy);
-    tagObj.way = value.name;
-    params.orderBy = JSON.stringify(tagObj);
-};
-
-const onOrderFieldChange = (value, params) => {
-    const tagObj = JSON.parse(params.orderBy);
-    switch (value) {
-        case 'Relevancy':
-            tagObj.name = value + ' DESC, name';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-        case 'ColorAndPrice':
-            tagObj.name = 'showOrder, price';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-        case 'Name':
-            tagObj.name = 'name';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-        case 'Price':
-            tagObj.name = 'price';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-    }
-};
-const _moreFields = ['ASC', 'DESC'];
-const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
 const setCategoryList = (data) => {
     categoryList.value = (data || [])
         .filter((category) => category.display)
@@ -176,8 +155,6 @@ const setCategoryList = (data) => {
             ...category,
             icon: `vn:${(category.icon || '').split('-')[1]}`,
         }));
-    moreFields.value = useLang(_moreFields);
-    moreFieldsOrder.value = useLang(_moreFieldsTypes);
 
     selectedCategoryFk.value && loadTypes();
 };
@@ -188,24 +165,19 @@ const getCategoryClass = (category, params) => {
     }
 };
 
-const useLang = (values) => {
+function addOrder(value, field, params) {
-    const { models } = validationsStore;
+    let { orderBy } = params;
-    const properties = models.Item?.properties || {};
+    orderBy = JSON.parse(orderBy);
-    return values.map((name) => {
+    orderBy[field] = value;
-        let prop = properties[name];
+    params.orderBy = JSON.stringify(orderBy);
-        const label = t(`params.${name}`);
+    vnFilterPanelRef.value.search();
-        return {
+}
-            name,
-            label,
-            type: prop ? prop.type : null,
-        };
-    });
-};
 </script>
 
 <template>
     <FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
     <VnFilterPanel
+        ref="vnFilterPanelRef"
         :data-key="props.dataKey"
         :hidden-tags="['orderFk', 'orderBy']"
         :un-removable-params="['orderFk', 'orderBy']"
@@ -298,33 +270,29 @@ const useLang = (values) => {
                 </QItemSection>
             </QItem>
             <QSeparator />
-            <QItem class="q-my-md">
-                <QItemSection>
-                    <VnSelect
-                        :label="t('Order')"
-                        v-model="selectedOrder"
-                        :options="moreFields"
-                        option-label="label"
-                        option-value="way"
-                        dense
-                        outlined
-                        rounded
-                        @update:model-value="(value) => onOrderChange(value, params)"
-                    />
-                </QItemSection>
-            </QItem>
             <QItem class="q-mb-md">
                 <QItemSection>
                     <VnSelect
                         :label="t('Order by')"
-                        v-model="selectedOrderField"
+                        v-model="orderBySelected"
-                        :options="moreFieldsOrder"
+                        :options="orderByList"
-                        option-label="label"
-                        option-value="name"
                         dense
                         outlined
                         rounded
-                        @update:model-value="(value) => onOrderFieldChange(value, params)"
+                        @update:model-value="(value) => addOrder(value, 'field', params)"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('Order')"
+                        v-model="orderWaySelected"
+                        :options="orderWayList"
+                        dense
+                        outlined
+                        rounded
+                        @update:model-value="(value) => addOrder(value, 'way', params)"
                     />
                 </QItemSection>
             </QItem>
@@ -490,10 +458,10 @@ en:
         order: Order
         ASC: Ascendant
         DESC: Descendant
-        Relevancy: Relevancy
+        relevancy: Relevancy
-        ColorAndPrice: Color and price
+        colorAndPrice: Color and price
-        Name: Name
+        name: Name
-        Price: Price
+        price: Price
 es:
     params:
         type: Tipo
@@ -503,10 +471,10 @@ es:
         order: Orden
         ASC: Ascendiente
         DESC: Descendiente
-        Relevancy: Relevancia
+        relevancy: Relevancia
-        ColorAndPrice: Color y precio
+        colorAndPrice: Color y precio
-        Name: Nombre
+        name: Nombre
-        Price: Precio
+        price: Precio
     Order: Orden
     Order by: Ordenar por
     Plant: Planta