From 5c2b99565949cb0d1b14f7e91c8da4500b2b9dd9 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Mon, 8 Jan 2024 10:28:55 -0400
Subject: [PATCH] Add order catalog sort filter

---
 src/pages/Order/Card/OrderCatalogFilter.vue | 44 +++++++++++++++++++--
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index ee6859c80..c325a9b05 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -39,6 +39,14 @@ const orderList = [
     { way: 'DESC', name: 'Descendant' },
 ];
 
+const selectedOrderField = ref(null);
+const OrderFields = [
+    { field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 },
+    { field: 'showOrder, price', name: 'Color and price', priority: 999 },
+    { field: 'name', name: 'Name', priority: 999 },
+    { field: 'price', name: 'Price', priority: 999 },
+];
+
 const clearFilter = (key) => {
     if (key === 'categoryFk') {
         resetCategory();
@@ -73,8 +81,9 @@ const onFilterInit = async ({ params }) => {
         selectedCategoryFk.value = params.categoryFk;
     }
     if (params.orderBy) {
-        selectedOrder.value = JSON.parse(params.orderBy).way;
         orderByParam.value = JSON.parse(params.orderBy);
+        selectedOrder.value = orderByParam.value?.way;
+        selectedOrderField.value = orderByParam.value?.field;
     }
 };
 
@@ -101,7 +110,9 @@ function exprBuilder(param, value) {
 const selectedTag = ref(null);
 const tagValues = ref([{}]);
 const tagOptions = ref(null);
-const isButtonDisabled = computed(()=> !selectedTag.value || tagValues.value.some(item => !item.value))
+const isButtonDisabled = computed(
+    () => !selectedTag.value || tagValues.value.some((item) => !item.value)
+);
 
 const applyTagFilter = (params, search) => {
     if (!tagValues.value?.length) {
@@ -124,7 +135,7 @@ const applyTagFilter = (params, search) => {
     );
     search();
     selectedTag.value = null;
-    tagValues.value = [{}]
+    tagValues.value = [{}];
 };
 
 const removeTagChip = (selection, params, search) => {
@@ -138,6 +149,12 @@ const removeTagChip = (selection, params, search) => {
 
 const orderByParam = ref(null);
 
+const onOrderFieldChange = (value, params, search) => {
+    const orderBy = Object.assign({}, orderByParam.value, { field: value.field });
+    params.orderBy = JSON.stringify(orderBy);
+    search();
+};
+
 const onOrderChange = (value, params, search) => {
     const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
     params.orderBy = JSON.stringify(orderBy);
@@ -268,12 +285,33 @@ const getCategoryClass = (category, params) => {
                             rounded
                             :emit-value="false"
                             use-input
+                            :is-clearable="false"
                             @update:model-value="
                                 (value) => onOrderChange(value, params, searchFn)
                             "
                         />
                     </QItemSection>
                 </QItem>
+                <QItem class="q-mb-md">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.order')"
+                            v-model="selectedOrderField"
+                            :options="OrderFields || []"
+                            option-value="field"
+                            option-label="name"
+                            dense
+                            outlined
+                            rounded
+                            :emit-value="false"
+                            use-input
+                            :is-clearable="false"
+                            @update:model-value="
+                                (value) => onOrderFieldChange(value, params, searchFn)
+                            "
+                        />
+                    </QItemSection>
+                </QItem>
                 <QSeparator />
                 <QItem class="q-mt-md">
                     <QItemSection>