From 7f376c8ea4cfa0b1c7863017e33c5a9457f9491a Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 19 Jul 2024 14:53:44 +0200
Subject: [PATCH] fix: refs #7717 fix catalog filter, searchbar redirect and
 search

---
 src/pages/Order/{ => Card}/OrderCatalog.vue | 12 ++++++++++++
 src/pages/Order/Card/OrderCatalogFilter.vue | 20 +++++++++++++++-----
 src/pages/Order/{ => Card}/OrderLines.vue   |  0
 src/pages/Order/{ => Card}/OrderVolume.vue  |  0
 src/router/modules/order.js                 |  6 +++---
 5 files changed, 30 insertions(+), 8 deletions(-)
 rename src/pages/Order/{ => Card}/OrderCatalog.vue (87%)
 rename src/pages/Order/{ => Card}/OrderLines.vue (100%)
 rename src/pages/Order/{ => Card}/OrderVolume.vue (100%)

diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/Card/OrderCatalog.vue
similarity index 87%
rename from src/pages/Order/OrderCatalog.vue
rename to src/pages/Order/Card/OrderCatalog.vue
index 2cf6e1c29..071827a8b 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/Card/OrderCatalog.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import CatalogItem from 'components/ui/CatalogItem.vue';
 import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const route = useRoute();
 const stateStore = useStateStore();
@@ -52,6 +53,17 @@ function extractValueTags(items) {
 </script>
 
 <template>
+    <Teleport to="#searchbar">
+        <VnSearchbar
+            data-key="OrderCatalogList"
+            :user-params="catalogParams"
+            :static-params="['orderFk', 'orderBy']"
+            :redirect="false"
+            url="Orders/CatalogFilter"
+            :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
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index c354ec94b..992fe4b3f 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -27,7 +27,6 @@ const props = defineProps({
         required: true,
     },
 });
-
 const categoryList = ref(null);
 const selectedCategoryFk = ref(null);
 const typeList = ref(null);
@@ -84,7 +83,14 @@ const selectedCategory = computed(() =>
         (category) => category?.id === selectedCategoryFk.value
     )
 );
-
+function filterFn(val, update) {
+    update(() => {
+        const needle = val.toLowerCase();
+        tagOptions.value = props.tagValue.filter(
+            (v) => v.toLowerCase().indexOf(needle) > -1
+        );
+    });
+}
 const selectedType = computed(() => {
     return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
 });
@@ -352,7 +358,7 @@ const useLang = (values) => {
                     v-if="!selectedTag"
                     :label="t('params.value')"
                     v-model="value.value"
-                    :options="tagValue || []"
+                    :options="tagOptions || []"
                     option-value="value"
                     option-label="value"
                     dense
@@ -362,6 +368,8 @@ const useLang = (values) => {
                     use-input
                     class="filter-input"
                     @new-value="createValue"
+                    @filter="filterFn"
+                    @update:model-value="applyTagFilter(params, searchFn)"
                 />
                 <VnSelect
                     v-else-if="selectedTag === 1"
@@ -377,6 +385,7 @@ const useLang = (values) => {
                     use-input
                     class="filter-input"
                     @new-value="createValue"
+                    @update:model-value="applyTagFilter(params, searchFn)"
                 />
                 <VnInput
                     v-else
@@ -386,6 +395,7 @@ const useLang = (values) => {
                     outlined
                     rounded
                     class="filter-input"
+                    @keyup.enter="applyTagFilter(params, searchFn)"
                 />
                 <QIcon
                     name="delete"
@@ -400,7 +410,7 @@ const useLang = (values) => {
                     @click="tagValues.push({})"
                 />
             </QItem>
-            <QItem>
+            <!-- <QItem>
                 <QItemSection class="q-py-sm">
                     <QBtn
                         :label="t('Search')"
@@ -414,7 +424,7 @@ const useLang = (values) => {
                         @click.stop="applyTagFilter(params, searchFn)"
                     />
                 </QItemSection>
-            </QItem>
+            </QItem> -->
             <QSeparator />
         </template>
     </VnFilterPanel>
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/Card/OrderLines.vue
similarity index 100%
rename from src/pages/Order/OrderLines.vue
rename to src/pages/Order/Card/OrderLines.vue
diff --git a/src/pages/Order/OrderVolume.vue b/src/pages/Order/Card/OrderVolume.vue
similarity index 100%
rename from src/pages/Order/OrderVolume.vue
rename to src/pages/Order/Card/OrderVolume.vue
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
index aa1ca774d..8d1a6e5fe 100644
--- a/src/router/modules/order.js
+++ b/src/router/modules/order.js
@@ -72,7 +72,7 @@ export default {
                         title: 'catalog',
                         icon: 'vn:basket',
                     },
-                    component: () => import('src/pages/Order/OrderCatalog.vue'),
+                    component: () => import('src/pages/Order/Card/OrderCatalog.vue'),
                 },
                 {
                     name: 'OrderVolume',
@@ -81,7 +81,7 @@ export default {
                         title: 'volume',
                         icon: 'vn:volume',
                     },
-                    component: () => import('src/pages/Order/OrderVolume.vue'),
+                    component: () => import('src/pages/Order/Card/OrderVolume.vue'),
                 },
                 {
                     name: 'OrderLines',
@@ -90,7 +90,7 @@ export default {
                         title: 'lines',
                         icon: 'vn:lines',
                     },
-                    component: () => import('src/pages/Order/OrderLines.vue'),
+                    component: () => import('src/pages/Order/Card/OrderLines.vue'),
                 },
             ],
         },