Add order orderBy filter

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -31,6 +31,12 @@ const resetCategory = () => {
     typeList.value = null;
 };
 
+const selectedOrder = ref(null);
+const orderList = [
+    { way: 'ASC', name: 'Ascendant' },
+    { way: 'DESC', name: 'Descendant' },
+];
+
 const clearFilter = (key) => {
     if (key === 'categoryFk') {
         resetCategory();
@@ -64,6 +70,10 @@ const onFilterInit = async ({ params }) => {
         await loadTypes(params.categoryFk);
         selectedCategoryFk.value = params.categoryFk;
     }
+    if (params.orderBy) {
+        selectedOrder.value = JSON.parse(params.orderBy).way;
+        orderByParam.value = JSON.parse(params.orderBy);
+    }
 };
 
 const selectedCategory = computed(() =>
@@ -104,6 +114,14 @@ const applyTagFilter = (params, search) => {
     });
     search();
 };
+
+const orderByParam = ref(null);
+
+const onOrderChange = (value, params, search) => {
+    const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
+    params.orderBy = JSON.stringify(orderBy);
+    search();
+};
 </script>
 
 <template>
@@ -131,10 +149,12 @@ const applyTagFilter = (params, search) => {
     >
         <template #tags="{ tag, formatFn }">
             <div v-if="tag.label === 'tagGroups'">
-                <strong>
-                    {{ JSON.parse(tag?.value).tagSelection?.name  }}:
-                </strong>
-                <span>{{ (JSON.parse(tag?.value).values || []).map(item => item.value).join(' | ') }}</span>
+                <strong> {{ JSON.parse(tag?.value).tagSelection?.name }}: </strong>
+                <span>{{
+                    (JSON.parse(tag?.value).values || [])
+                        .map((item) => item.value)
+                        .join(' | ')
+                }}</span>
             </div>
             <strong v-else-if="tag.label === 'categoryFk'">
                 {{ t(selectedCategory?.name || '') }}
@@ -204,6 +224,26 @@ const applyTagFilter = (params, search) => {
                     </QItemSection>
                 </QItem>
                 <QSeparator />
+                <QItem class="q-my-md">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.order')"
+                            v-model="selectedOrder"
+                            :options="orderList || []"
+                            option-value="way"
+                            option-label="name"
+                            dense
+                            outlined
+                            rounded
+                            :emit-value="false"
+                            use-input
+                            @update:model-value="
+                                (value) => onOrderChange(value, params, searchFn)
+                            "
+                        />
+                    </QItemSection>
+                </QItem>
+                <QSeparator />
                 <QItem class="q-mt-md">
                     <QItemSection>
                         <VnSelectFilter
@@ -344,12 +384,14 @@ en:
         orderBy: Order By
         tag: Tag
         value: Value
+        order: Order
 es:
     params:
         type: Tipo
         orderBy: Ordenar por
         tag: Etiqueta
         value: Valor
+        order: Orden
     Plant: Planta
     Flower: Flor
     Handmade: Confección