From adf7c3a13920695d6c2528ca42a9b691d8f71b5d Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 4 Jun 2024 09:54:45 +0200
Subject: [PATCH] feat: refs #6896 new filters

---
 src/pages/Order/Card/OrderCatalogFilter.vue | 123 ++++++++++++--------
 1 file changed, 73 insertions(+), 50 deletions(-)

diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index af593008f..46bb80b21 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -3,12 +3,12 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 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';
 
 const { t } = useI18n();
 
@@ -39,9 +39,9 @@ const moreFields = ref([]);
 const moreFieldsOrder = ref([]);
 const createValue = (val, done) => {
     if (val.length > 2) {
-        // if (!tagOptions.value.includes(val)) {
-        // done(tagOptions.value, 'add-unique');
-        // }
+        if (!tagOptions.value.includes(val)) {
+            done(tagOptions.value, 'add-unique');
+        }
         tagValues.value.push({ value: val });
     }
 };
@@ -100,22 +100,6 @@ const tagValues = ref([{}]);
 const tagOptions = ref([]);
 
 const applyTagFilter = (params, search) => {
-    // console.log('params: ', params);
-    // if (!selectedTag.value) {
-    //     console.log('values: ', selectedTag?.value?.name);
-
-    //     params.tagGroups.push(
-    //         JSON.stringify({
-    //             values: selectedTag?.value?.name,
-    //             // tagSelection: {
-    //             //     ...selectedTag.value,
-    //             //     orgShowField: selectedTag?.value?.name,
-    //             // },
-    //         })
-    //     );
-    //     search();
-    //     return;
-    // }
     if (!tagValues.value?.length) {
         params.tagGroups = null;
         search();
@@ -148,14 +132,42 @@ const removeTagChip = (selection, params, search) => {
     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) => {
+    const tagObj = JSON.parse(params.orderBy);
+    tagObj.way = value.name;
+    params.orderBy = JSON.stringify(tagObj);
 };
 
+const onOrderFieldChange = (value, params) => {
+    console.log('value: ', value);
+    console.log('params: ', params);
+    const tagObj = JSON.parse(params.orderBy);
+    switch (value) {
+        case 'Relevancy':
+            tagObj.field = value + ' DESC, name';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+        case 'ColorAndPrice':
+            tagObj.field = 'showOrder, price';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+        case 'Name':
+            tagObj.field = 'name';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+        case 'Price':
+            tagObj.field = 'price';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+    }
+};
+
+const _moreFields = ['ASC', 'DESC'];
+const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
 const setCategoryList = (data) => {
     categoryList.value = (data || [])
         .filter((category) => category.display)
@@ -163,8 +175,6 @@ const setCategoryList = (data) => {
             ...category,
             icon: `vn:${(category.icon || '').split('-')[1]}`,
         }));
-    const _moreFields = ['ASC', 'DESC'];
-    const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
     moreFields.value = useLang(_moreFields);
     moreFieldsOrder.value = useLang(_moreFieldsTypes);
 };
@@ -195,11 +205,13 @@ const useLang = (values) => {
     <VnFilterPanel
         :data-key="props.dataKey"
         :hidden-tags="['orderFk', 'orderBy']"
+        :unremovable-params="['orderFk', 'orderBy']"
         :expr-builder="exprBuilder"
         :custom-tags="['tagGroups']"
         @remove="clearFilter"
     >
         <template #tags="{ tag, formatFn }">
+            {{ console.log('tag: ', tag) }}
             <strong v-if="tag.label === 'categoryFk'">
                 {{ t(selectedCategory?.name || '') }}
             </strong>
@@ -293,9 +305,7 @@ const useLang = (values) => {
                         dense
                         outlined
                         rounded
-                        @update:model-value="
-                            (value) => onOrderChange(value, params, searchFn)
-                        "
+                        @update:model-value="(value) => onOrderChange(value, params)"
                     />
                 </QItemSection>
             </QItem>
@@ -310,9 +320,7 @@ const useLang = (values) => {
                         dense
                         outlined
                         rounded
-                        @update:model-value="
-                            (value) => onOrderFieldChange(value, params, searchFn)
-                        "
+                        @update:model-value="(value) => onOrderFieldChange(value, params)"
                     />
                 </QItemSection>
             </QItem>
@@ -338,14 +346,15 @@ const useLang = (values) => {
                 :key="value"
                 class="q-mt-md filter-value"
             >
-                <VnInput
-                    v-if="selectedTag?.isFree"
-                    v-model="value.value"
-                    :label="t('params.value')"
-                    is-outlined
-                    class="filter-input"
+                <FetchData
+                    v-if="selectedTag"
+                    :url="`Tags/${selectedTag}/filterValue`"
+                    limit="30"
+                    auto-load
+                    @on-fetch="(data) => (tagOptions = data)"
                 />
                 <VnSelect
+                    v-if="!selectedTag"
                     :label="t('params.value')"
                     v-model="value.value"
                     :options="tagValue || []"
@@ -358,17 +367,31 @@ const useLang = (values) => {
                     use-input
                     class="filter-input"
                     @new-value="createValue"
-                >
-                </VnSelect>
-                <FetchData
-                    v-if="selectedTag"
-                    :url="`Tags/${selectedTag}/filterValue`"
-                    limit="30"
-                    auto-load
-                    @on-fetch="(data) => (tagOptions = data)"
                 />
-                {{ console.log('selectedTag: ', selectedTag) }}
-
+                <VnSelect
+                    v-else-if="selectedTag === 1"
+                    :label="t('params.value')"
+                    v-model="value.value"
+                    :options="tagOptions || []"
+                    option-value="value"
+                    option-label="value"
+                    dense
+                    outlined
+                    rounded
+                    emit-value
+                    use-input
+                    class="filter-input"
+                    @new-value="createValue"
+                />
+                <VnInput
+                    v-else
+                    :label="t('params.value')"
+                    v-model="value.value"
+                    dense
+                    outlined
+                    rounded
+                    class="filter-input"
+                />
                 <QIcon
                     name="delete"
                     class="filter-icon"