From cb0422d83f8b0cf17175f6be948bba1f5ea4684a Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 13 Dec 2024 14:16:27 +0100
Subject: [PATCH 01/20] feat: refs #7957 open in new tab

---
 src/components/ui/VnSearchbar.vue                   |  6 ++++++
 src/composables/useArrayData.js                     | 13 +++++++++----
 src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue |  1 +
 src/pages/Monitor/locale/en.yml                     |  2 +-
 src/pages/Monitor/locale/es.yml                     |  2 +-
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index ccf87c6d6..830029e8e 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -67,6 +67,10 @@ const props = defineProps({
         type: Function,
         default: undefined,
     },
+    newTab: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const searchText = ref();
@@ -109,6 +113,7 @@ async function search() {
             search: searchText.value,
         },
         ...{ filter: props.filter },
+        newTab: props.newTab,
     };
 
     if (props.whereFilter) {
@@ -117,6 +122,7 @@ async function search() {
         };
         delete filter.params.search;
     }
+
     await arrayData.applyFilter(filter);
 }
 </script>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index da62eee3e..098991fe8 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -4,6 +4,7 @@ import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 import { buildFilter } from 'filters/filterPanel';
 import { isDialogOpened } from 'src/filters';
+import useOpenURL from './useOpenURL';
 
 const arrayDataStore = useArrayDataStore();
 
@@ -65,7 +66,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
     }
 
-    async function fetch({ append = false, updateRouter = true }) {
+    async function fetch({ append = false, updateRouter = true, newTab = false }) {
         if (!store.url) return;
 
         cancelRequest();
@@ -110,6 +111,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             params.filter.where = { ...params.filter.where, ...exprFilter };
         params.filter = JSON.stringify(params.filter);
 
+        if (newTab) return updateStateParams(true);
+
         store.isLoading = true;
         const response = await axios.get(store.url, {
             signal: canceller.signal,
@@ -154,12 +157,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
     }
 
-    async function applyFilter({ filter, params }) {
+    async function applyFilter({ filter, params, newTab }) {
         if (filter) store.userFilter = filter;
         store.filter = {};
         if (params) store.userParams = { ...params };
 
-        const response = await fetch({});
+        const response = await fetch({ newTab });
         return response;
     }
 
@@ -255,12 +258,14 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         if (Object.values(store.userParams).length) await fetch({});
     }
 
-    function updateStateParams() {
+    function updateStateParams(newTab) {
         if (!route?.path) return;
         const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
         if (store?.searchUrl)
             newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
 
+        if (newTab) useOpenURL(router.resolve(newUrl).href);
+
         if (store.navigate) {
             const { customRouteRedirectName, searchText } = store.navigate;
             if (customRouteRedirectName)
diff --git a/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue b/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue
index f1c347588..9116a6449 100644
--- a/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue
+++ b/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue
@@ -8,5 +8,6 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
         :redirect="false"
         :label="$t('searchBar.label')"
         :info="$t('searchBar.info')"
+        :new-tab="true"
     />
 </template>
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index e61a24979..fd15a5eb9 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -41,5 +41,5 @@ salesTicketsTable:
     packing: ITP
 searchBar:
     label: Search tickets
-    info: Search tickets by id or alias
+    info: Up to 5 characters search by client id, more than 5 search by ticket id or alias
 refreshInfo: Toggle auto-refresh every 2 minutes
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index 30afb1904..2e1ec7a51 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -41,5 +41,5 @@ salesTicketsTable:
     packing: ITP
 searchBar:
     label: Buscar tickets
-    info: Buscar tickets por identificador o alias
+    info: Hasta 5 caracteres busca por id de cliente, más de 5 busca por id de ticket o alias
 refreshInfo: Conmuta el refresco automático cada 2 minutos

From 0cce5b93cd94b246282b844c768832c2ff68c9a6 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 13 Dec 2024 17:20:28 +0100
Subject: [PATCH 02/20] refactor: refs #7957 remove blank

---
 src/components/ui/VnSearchbar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 830029e8e..148e8b684 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -122,7 +122,6 @@ async function search() {
         };
         delete filter.params.search;
     }
-
     await arrayData.applyFilter(filter);
 }
 </script>

From a6815f4e3d8c677508d8120398d27ff9071146af Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 10:21:20 +0100
Subject: [PATCH 03/20] fix: refs #7957 rollback

---
 src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue | 1 -
 src/pages/Monitor/locale/en.yml                     | 2 +-
 src/pages/Monitor/locale/es.yml                     | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue b/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue
index 9116a6449..f1c347588 100644
--- a/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue
+++ b/src/pages/Monitor/Ticket/MonitorTicketSearchbar.vue
@@ -8,6 +8,5 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
         :redirect="false"
         :label="$t('searchBar.label')"
         :info="$t('searchBar.info')"
-        :new-tab="true"
     />
 </template>
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index fd15a5eb9..e61a24979 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -41,5 +41,5 @@ salesTicketsTable:
     packing: ITP
 searchBar:
     label: Search tickets
-    info: Up to 5 characters search by client id, more than 5 search by ticket id or alias
+    info: Search tickets by id or alias
 refreshInfo: Toggle auto-refresh every 2 minutes
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index 2e1ec7a51..30afb1904 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -41,5 +41,5 @@ salesTicketsTable:
     packing: ITP
 searchBar:
     label: Buscar tickets
-    info: Hasta 5 caracteres busca por id de cliente, más de 5 busca por id de ticket o alias
+    info: Buscar tickets por identificador o alias
 refreshInfo: Conmuta el refresco automático cada 2 minutos

From 6e655b37a1379e843ede24a944ea42d65c2f0f69 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 10:22:01 +0100
Subject: [PATCH 04/20] fix: refs #7957 rollback

---
 src/components/ui/VnSearchbar.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 148e8b684..ccf87c6d6 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -67,10 +67,6 @@ const props = defineProps({
         type: Function,
         default: undefined,
     },
-    newTab: {
-        type: Boolean,
-        default: false,
-    },
 });
 
 const searchText = ref();
@@ -113,7 +109,6 @@ async function search() {
             search: searchText.value,
         },
         ...{ filter: props.filter },
-        newTab: props.newTab,
     };
 
     if (props.whereFilter) {

From 4cf13a83a45f68a589f1b4952cbc90e4d8bda382 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 11:54:57 +0100
Subject: [PATCH 05/20] fix: refs #7957 rollback

---
 src/composables/useArrayData.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 098991fe8..b37fa1377 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -3,8 +3,6 @@ import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 import { buildFilter } from 'filters/filterPanel';
-import { isDialogOpened } from 'src/filters';
-import useOpenURL from './useOpenURL';
 
 const arrayDataStore = useArrayDataStore();
 
@@ -66,7 +64,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
     }
 
-    async function fetch({ append = false, updateRouter = true, newTab = false }) {
+    async function fetch({ append = false, updateRouter = true }) {
         if (!store.url) return;
 
         cancelRequest();
@@ -111,8 +109,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             params.filter.where = { ...params.filter.where, ...exprFilter };
         params.filter = JSON.stringify(params.filter);
 
-        if (newTab) return updateStateParams(true);
-
         store.isLoading = true;
         const response = await axios.get(store.url, {
             signal: canceller.signal,
@@ -127,7 +123,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             for (const row of response.data) store.data.push(row);
         } else {
             store.data = response.data;
-            if (!isDialogOpened()) updateRouter && updateStateParams();
+            if (!document.querySelectorAll('[role="dialog"][aria-modal="true"]').length)
+                updateRouter && updateStateParams();
         }
 
         store.isLoading = false;
@@ -157,12 +154,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
     }
 
-    async function applyFilter({ filter, params, newTab }) {
+    async function applyFilter({ filter, params }) {
         if (filter) store.userFilter = filter;
         store.filter = {};
         if (params) store.userParams = { ...params };
 
-        const response = await fetch({ newTab });
+        const response = await fetch({});
         return response;
     }
 
@@ -258,14 +255,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         if (Object.values(store.userParams).length) await fetch({});
     }
 
-    function updateStateParams(newTab) {
+    function updateStateParams() {
         if (!route?.path) return;
         const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
         if (store?.searchUrl)
             newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
 
-        if (newTab) useOpenURL(router.resolve(newUrl).href);
-
         if (store.navigate) {
             const { customRouteRedirectName, searchText } = store.navigate;
             if (customRouteRedirectName)

From 4a4cb1cf3f84238382147f444f1ebcb86c62c05d Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 16:02:43 +0100
Subject: [PATCH 06/20] feat: refs #7957 enhance search functionality and
 improve data filtering logic

---
 src/components/ui/VnSearchbar.vue | 70 +++++++++++++++++++++++--------
 src/composables/useArrayData.js   | 49 ++++++++++++----------
 2 files changed, 80 insertions(+), 39 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index ccf87c6d6..89a587b31 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -1,14 +1,16 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'src/stores/useStateStore';
+import { useRoute } from 'vue-router';
 
 const quasar = useQuasar();
 const { t } = useI18n();
 const state = useStateStore();
+const route = useRoute();
 
 const props = defineProps({
     dataKey: {
@@ -119,27 +121,43 @@ async function search() {
     }
     await arrayData.applyFilter(filter);
 }
+
+const to = computed(() => {
+    const { params } = arrayData.getCurrentFilter();
+    params.search = searchText.value;
+    const url = { path: route.path, query: { ...(route.query ?? {}) } };
+    const searchUrl = arrayData.store.searchUrl;
+
+    for (const key in params) {
+        const val = params[key];
+        if (typeof val === 'object' && !Array.isArray(val) && !(val instanceof Date))
+            params[key] = JSON.stringify(val);
+    }
+
+    if (searchUrl) url.query[searchUrl] = JSON.stringify(params);
+    return url;
+});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="state.isHeaderMounted()">
         <QForm @submit="search" id="searchbarForm">
+            <RouterLink :to="to" @click="!$event.shiftKey && !$event.ctrlKey && search()">
+                <QIcon
+                    v-if="!quasar.platform.is.mobile"
+                    class="cursor-pointer"
+                    name="search"
+                    size="sm"
+                />
+            </RouterLink>
             <VnInput
                 id="searchbar"
                 v-model.trim="searchText"
                 :placeholder="t(props.label)"
                 dense
-                standout
                 autofocus
                 data-cy="vnSearchBar"
+                borderless
             >
-                <template #prepend>
-                    <QIcon
-                        v-if="!quasar.platform.is.mobile"
-                        class="cursor-pointer"
-                        name="search"
-                        @click="search"
-                    />
-                </template>
                 <template #append>
                     <QIcon
                         v-if="props.info && $q.screen.gt.xs"
@@ -164,20 +182,38 @@ async function search() {
 .q-field {
     transition: width 0.36s;
 }
-</style>
 
-<style lang="scss">
 .cursor-info {
     cursor: help;
 }
-#searchbar {
-    .q-field--standout.q-field--highlighted .q-field__control {
+
+:deep(.q-field--dark .q-field__native:focus) {
+    background-color: white;
+    color: black;
+}
+
+.q-form {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    padding: 0 5px;
+    background-color: #4b4b4b;
+
+    &:focus-within {
         background-color: white;
-        color: black;
-        .q-field__native,
+
         .q-icon {
-            color: black !important;
+            color: black;
         }
     }
 }
+
+.q-icon {
+    color: var(--vn-label-color);
+}
+:deep(.q-field--focused) {
+    .q-icon {
+        color: black;
+    }
+}
 </style>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index b37fa1377..c89f5087e 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -69,27 +69,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
         cancelRequest();
         canceller = new AbortController();
-
-        const filter = {
-            limit: store.limit,
-        };
-
-        let userParams = { ...store.userParams };
-
-        Object.assign(filter, store.userFilter);
-
-        let where;
-        if (filter?.where || store.filter?.where)
-            where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
-        Object.assign(filter, store.filter);
-        filter.where = where;
-        const params = { filter };
-
-        Object.assign(params, userParams);
-        if (params.filter) params.filter.skip = store.skip;
-        if (store?.order && typeof store?.order == 'string') store.order = [store.order];
-        if (store.order?.length) params.filter.order = [...store.order];
-        else delete params.filter.order;
+        const { params, limit } = getCurrentFilter();
 
         store.currentFilter = JSON.parse(JSON.stringify(params));
         delete store.currentFilter.filter.include;
@@ -115,7 +95,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             params,
         });
 
-        const { limit } = filter;
         store.hasMoreData = limit && response.data.length >= limit;
 
         if (append) {
@@ -288,6 +267,31 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         router.replace(newUrl);
     }
 
+    function getCurrentFilter() {
+        const filter = {
+            limit: store.limit,
+        };
+
+        let userParams = { ...store.userParams };
+
+        Object.assign(filter, store.userFilter);
+
+        let where;
+        if (filter?.where || store.filter?.where)
+            where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
+        Object.assign(filter, store.filter);
+        filter.where = where;
+        const params = { filter };
+
+        Object.assign(params, userParams);
+        if (params.filter) params.filter.skip = store.skip;
+        if (store?.order && typeof store?.order == 'string') store.order = [store.order];
+        if (store.order?.length) params.filter.order = [...store.order];
+        else delete params.filter.order;
+
+        return { filter, params, limit: filter.limit };
+    }
+
     const totalRows = computed(() => (store.data && store.data.length) || 0);
     const isLoading = computed(() => store.isLoading || false);
 
@@ -295,6 +299,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         fetch,
         applyFilter,
         addFilter,
+        getCurrentFilter,
         addFilterWhere,
         addOrder,
         deleteOrder,

From 1e0e85972658bb267f0c1649d58a6ecb2fa1fd86 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 16:08:46 +0100
Subject: [PATCH 07/20] fix: refs #7957 update visibility handling for clear
 icon in VnInput component

---
 src/components/common/VnInput.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 57a495ac3..3cecf760a 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -141,13 +141,16 @@ const handleInsertMode = (e) => {
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="
-                        hover &&
-                        value &&
-                        !$attrs.disabled &&
-                        !$attrs.readonly &&
-                        $props.clearable
-                    "
+                    :style="{
+                        visibility:
+                            hover &&
+                            value &&
+                            !$attrs.disabled &&
+                            !$attrs.readonly &&
+                            $props.clearable
+                                ? 'visible'
+                                : 'hidden',
+                    }"
                     @click="
                         () => {
                             value = null;

From 6858f4e44c2502246a330797070b2446dd2a3a0a Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 16:11:42 +0100
Subject: [PATCH 08/20] fix: refs #7957 rollback

---
 src/components/ui/VnSearchbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 89a587b31..576440539 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -124,7 +124,7 @@ async function search() {
 
 const to = computed(() => {
     const { params } = arrayData.getCurrentFilter();
-    params.search = searchText.value;
+    params.search = searchText.value || undefined;
     const url = { path: route.path, query: { ...(route.query ?? {}) } };
     const searchUrl = arrayData.store.searchUrl;
 

From 6bbd122029b630ce8f206b408b2db6311fac6d3e Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 16:11:53 +0100
Subject: [PATCH 09/20] fix: refs #7957 rollback

---
 src/composables/useArrayData.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index c89f5087e..f9e61776f 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -3,6 +3,7 @@ import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 import { buildFilter } from 'filters/filterPanel';
+import { isDialogOpened } from 'src/filters';
 
 const arrayDataStore = useArrayDataStore();
 
@@ -102,8 +103,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             for (const row of response.data) store.data.push(row);
         } else {
             store.data = response.data;
-            if (!document.querySelectorAll('[role="dialog"][aria-modal="true"]').length)
-                updateRouter && updateStateParams();
+            if (!isDialogOpened()) updateRouter && updateStateParams();
         }
 
         store.isLoading = false;

From ed238d32edeb6b2f8c65ac948889e968a1ddbbfe Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 17:02:46 +0100
Subject: [PATCH 10/20] feat: refs #7957 update VnSearchbar component with
 improved search URL handling and styling enhancements

---
 src/components/ui/VnSearchbar.vue | 64 ++++++++++++++++++-------------
 src/css/app.scss                  |  4 ++
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 576440539..b93af77cd 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -85,6 +85,21 @@ if (props.redirect)
     };
 let arrayData = useArrayData(props.dataKey, arrayDataProps);
 let store = arrayData.store;
+const to = computed(() => {
+    const { params } = arrayData.getCurrentFilter();
+    params.search = searchText.value || undefined;
+    const url = { path: route.path, query: { ...(route.query ?? {}) } };
+    const searchUrl = arrayData.store.searchUrl;
+
+    for (const key in params) {
+        const val = params[key];
+        if (typeof val === 'object' && !Array.isArray(val) && !(val instanceof Date))
+            params[key] = JSON.stringify(val);
+    }
+
+    if (searchUrl) url.query[searchUrl] = JSON.stringify(params);
+    return url;
+});
 
 watch(
     () => props.dataKey,
@@ -121,27 +136,17 @@ async function search() {
     }
     await arrayData.applyFilter(filter);
 }
-
-const to = computed(() => {
-    const { params } = arrayData.getCurrentFilter();
-    params.search = searchText.value || undefined;
-    const url = { path: route.path, query: { ...(route.query ?? {}) } };
-    const searchUrl = arrayData.store.searchUrl;
-
-    for (const key in params) {
-        const val = params[key];
-        if (typeof val === 'object' && !Array.isArray(val) && !(val instanceof Date))
-            params[key] = JSON.stringify(val);
-    }
-
-    if (searchUrl) url.query[searchUrl] = JSON.stringify(params);
-    return url;
-});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="state.isHeaderMounted()">
         <QForm @submit="search" id="searchbarForm">
-            <RouterLink :to="to" @click="!$event.shiftKey && !$event.ctrlKey && search()">
+            <RouterLink
+                :to="to"
+                @click="
+                    !$event.shiftKey && !$event.ctrlKey && search();
+                    $refs.input.focus();
+                "
+            >
                 <QIcon
                     v-if="!quasar.platform.is.mobile"
                     class="cursor-pointer"
@@ -151,6 +156,7 @@ const to = computed(() => {
             </RouterLink>
             <VnInput
                 id="searchbar"
+                ref="input"
                 v-model.trim="searchText"
                 :placeholder="t(props.label)"
                 dense
@@ -183,22 +189,31 @@ const to = computed(() => {
     transition: width 0.36s;
 }
 
-.cursor-info {
-    cursor: help;
-}
-
 :deep(.q-field--dark .q-field__native:focus) {
     background-color: white;
     color: black;
 }
 
+:deep(.q-field--focused) {
+    .q-icon {
+        color: black;
+    }
+}
+
+.cursor-info {
+    cursor: help;
+}
+
 .q-form {
     display: flex;
     align-items: center;
     border-radius: 4px;
     padding: 0 5px;
-    background-color: #4b4b4b;
+    background-color: var(--vn-search-color);
 
+    &:hover {
+        background-color: var(--vn-search-color-hover);
+    }
     &:focus-within {
         background-color: white;
 
@@ -211,9 +226,4 @@ const to = computed(() => {
 .q-icon {
     color: var(--vn-label-color);
 }
-:deep(.q-field--focused) {
-    .q-icon {
-        color: black;
-    }
-}
 </style>
diff --git a/src/css/app.scss b/src/css/app.scss
index 63a9f5c46..392dc2fcd 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -11,6 +11,8 @@ body.body--light {
     --vn-text-color: var(--font-color);
     --vn-label-color: #5f5f5f;
     --vn-accent-color: #e7e3e3;
+    --vn-search-color: #d4d4d4;
+    --vn-search-color-hover: #cfcfcf;
 
     background-color: var(--vn-page-color);
 
@@ -26,6 +28,8 @@ body.body--dark {
     --vn-text-color: white;
     --vn-label-color: #a8a8a8;
     --vn-accent-color: #424242;
+    --vn-search-color: #4b4b4b;
+    --vn-search-color-hover: #5b5b5b;
 
     background-color: var(--vn-page-color);
 }

From 6db44f158e2e973727ed8c7359bf2cb2c1dd9954 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 17:26:04 +0100
Subject: [PATCH 11/20] fix: refs #7957 rollback

---
 src/components/ui/VnSearchbar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index b93af77cd..2e6b43ae2 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -156,7 +156,6 @@ async function search() {
             </RouterLink>
             <VnInput
                 id="searchbar"
-                ref="input"
                 v-model.trim="searchText"
                 :placeholder="t(props.label)"
                 dense

From e08f718975c53d1ebbe0cc8516c8e254c46d94a6 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 16 Dec 2024 17:42:28 +0100
Subject: [PATCH 12/20] feat: refs #7957 add tooltip and i18n support for
 search link in VnSearchbar component

---
 src/components/ui/VnSearchbar.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 2e6b43ae2..75a8e32c2 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -152,7 +152,9 @@ async function search() {
                     class="cursor-pointer"
                     name="search"
                     size="sm"
-                />
+                >
+                    <QTooltip>{{ t('link') }}</QTooltip>
+                </QIcon>
             </RouterLink>
             <VnInput
                 id="searchbar"
@@ -226,3 +228,9 @@ async function search() {
     color: var(--vn-label-color);
 }
 </style>
+<i18n>
+en:
+    link: click to search, ctrl + click to open in a new tab, shift + click to open in a new window
+es:
+    link: clic para buscar, ctrl + clic para abrir en una nueva pestaña, shift + clic para abrir en una nueva ventana
+</i18n>

From b1ad357bdae0732ded59cdff0accaca9b84bff06 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 17 Dec 2024 10:16:28 +0100
Subject: [PATCH 13/20] feat: refs #7957 simplify fn to

---
 src/components/ui/VnSearchbar.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 75a8e32c2..84de4c06b 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -86,18 +86,14 @@ if (props.redirect)
 let arrayData = useArrayData(props.dataKey, arrayDataProps);
 let store = arrayData.store;
 const to = computed(() => {
-    const { params } = arrayData.getCurrentFilter();
-    params.search = searchText.value || undefined;
     const url = { path: route.path, query: { ...(route.query ?? {}) } };
     const searchUrl = arrayData.store.searchUrl;
+    const currentFilter = {
+        ...arrayData.store.currentFilter,
+        search: searchText.value || undefined,
+    };
 
-    for (const key in params) {
-        const val = params[key];
-        if (typeof val === 'object' && !Array.isArray(val) && !(val instanceof Date))
-            params[key] = JSON.stringify(val);
-    }
-
-    if (searchUrl) url.query[searchUrl] = JSON.stringify(params);
+    if (searchUrl) url.query[searchUrl] = JSON.stringify(currentFilter);
     return url;
 });
 
@@ -158,6 +154,7 @@ async function search() {
             </RouterLink>
             <VnInput
                 id="searchbar"
+                ref="input"
                 v-model.trim="searchText"
                 :placeholder="t(props.label)"
                 dense

From efeb32fb285879132f924251f276f329b623e083 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 17 Dec 2024 10:44:04 +0100
Subject: [PATCH 14/20] fix: refs #7957 vn-searchbar test

---
 src/components/ui/VnSearchbar.vue | 2 +-
 test/cypress/support/commands.js  | 8 ++------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 84de4c06b..c4e637d9b 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -159,7 +159,7 @@ async function search() {
                 :placeholder="t(props.label)"
                 dense
                 autofocus
-                data-cy="vnSearchBar"
+                data-cy="vn-searchbar"
                 borderless
             >
                 <template #append>
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 2b13a7144..5204084e6 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -250,15 +250,11 @@ Cypress.Commands.add('openLeftMenu', (element) => {
 
 Cypress.Commands.add('clearSearchbar', (element) => {
     if (element) cy.waitForElement(element);
-    cy.get(
-        '#searchbar > form > div:nth-child(1) > label > div:nth-child(1) input'
-    ).clear();
+    cy.get('[data-cy="vn-searchbar"]').clear();
 });
 
 Cypress.Commands.add('writeSearchbar', (value) => {
-    cy.get('#searchbar > form > div:nth-child(1) > label > div:nth-child(1) input').type(
-        value
-    );
+    cy.get('[data-cy="vn-searchbar"]').type(value);
 });
 
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {

From de87acd5cc2f7e52c10f2ace113e801202fe8ac7 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 19 Dec 2024 13:42:48 +0100
Subject: [PATCH 15/20] fix: refs #7957 add missing closing brace

---
 src/composables/useArrayData.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 1c08b200f..0ee512353 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -311,6 +311,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                     store.data.push(val);
                 }
             }
+    }
 
     const totalRows = computed(() => (store.data && store.data.length) || 0);
     const isLoading = computed(() => store.isLoading || false);

From 7b9731a4c888de6a81eab188dc7b1510ade2c930 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 7 Jan 2025 12:22:21 +0100
Subject: [PATCH 16/20] fix: refs #7957 css

---
 src/components/ui/VnSearchbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index c3de94bf5..cbf83a6ed 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -197,7 +197,7 @@ async function search() {
 }
 
 :deep(.q-field--dark .q-field__native:focus) {
-    background-color: white;
+    background-color: transparent;
     color: black;
 }
 

From d925e3f8b4ef40ec02545f561e5c23d6d9ec1040 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 7 Jan 2025 12:24:32 +0100
Subject: [PATCH 17/20] fix: refs #7957 css

---
 src/components/ui/VnSearchbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index cbf83a6ed..cd91b8b0c 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -197,7 +197,7 @@ async function search() {
 }
 
 :deep(.q-field--dark .q-field__native:focus) {
-    background-color: transparent;
+    background-color: unset;
     color: black;
 }
 

From 73c133c62b3e16b849d537d7027ef54e2b285c44 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 7 Jan 2025 12:26:05 +0100
Subject: [PATCH 18/20] fix: refs #7957 css

---
 src/components/ui/VnSearchbar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index cd91b8b0c..176f3fa76 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -197,7 +197,6 @@ async function search() {
 }
 
 :deep(.q-field--dark .q-field__native:focus) {
-    background-color: unset;
     color: black;
 }
 

From f04aeec21d5ea76adb6ea3dab769b6841c97c67f Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 7 Jan 2025 13:21:20 +0100
Subject: [PATCH 19/20] fix: refs #7957 update data-cy

---
 test/cypress/integration/Order/orderCatalog.spec.js | 2 +-
 test/cypress/integration/ticket/ticketList.spec.js  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/cypress/integration/Order/orderCatalog.spec.js b/test/cypress/integration/Order/orderCatalog.spec.js
index 88ec33025..cffc47f91 100644
--- a/test/cypress/integration/Order/orderCatalog.spec.js
+++ b/test/cypress/integration/Order/orderCatalog.spec.js
@@ -41,7 +41,7 @@ describe('OrderCatalog', () => {
             }
         });
         cy.get(
-            '[data-cy="vnSearchBar"] > .q-field > .q-field__inner > .q-field__control'
+            '[data-cy="vn-searchbar"] > .q-field > .q-field__inner > .q-field__control'
         ).type('{enter}');
         cy.get(':nth-child(1) > [data-cy="catalogFilterCategory"]').click();
         cy.dataCy('catalogFilterValueDialogBtn').last().click();
diff --git a/test/cypress/integration/ticket/ticketList.spec.js b/test/cypress/integration/ticket/ticketList.spec.js
index fa5f46de7..e273825c0 100644
--- a/test/cypress/integration/ticket/ticketList.spec.js
+++ b/test/cypress/integration/ticket/ticketList.spec.js
@@ -9,9 +9,9 @@ describe('TicketList', () => {
     });
 
     const searchResults = (search) => {
-        cy.dataCy('vnSearchBar').find('input').focus();
-        if (search) cy.dataCy('vnSearchBar').find('input').type(search);
-        cy.dataCy('vnSearchBar').find('input').type('{enter}');
+        cy.dataCy('vn-searchbar').find('input').focus();
+        if (search) cy.dataCy('vn-searchbar').find('input').type(search);
+        cy.dataCy('vn-searchbar').find('input').type('{enter}');
         cy.dataCy('ticketListTable').should('exist');
         cy.get(firstRow).should('exist');
     };

From 8f418dcb4b73d125e639ab4945e3c7392c2adac8 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 7 Jan 2025 14:31:38 +0100
Subject: [PATCH 20/20] style: refs #7957 update VnSearchbar padding for
 improved layout

---
 src/components/ui/VnSearchbar.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 176f3fa76..bfaa76588 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -196,6 +196,11 @@ async function search() {
     transition: width 0.36s;
 }
 
+:deep(.q-field__native) {
+    padding-top: 10px;
+    padding-left: 5px;
+}
+
 :deep(.q-field--dark .q-field__native:focus) {
     color: black;
 }