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>

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)

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>

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

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