src/components/VnTable/VnTable.vue

@@ -168,10 +168,20 @@ function setUserParams(watchedParams, watchedOrder) {
     watchedParams = { ...watchedParams, ...where };
     delete watchedParams.filter;
     delete params.value?.filter;
-    params.value = { ...params.value, ...watchedParams };
+    params.value = { ...params.value, ...sanitizer(watchedParams) };
     orders.value = parseOrder(order);
 }
 
+function sanitizer(params) {
+    for (const [key, value] of Object.entries(params)) {
+        if (typeof value == 'object') {
+            const param = Object.values(value)[0];
+            if (typeof param == 'string') params[key] = param.replaceAll('%', '');
+        }
+    }
+    return params;
+}
+
 function splitColumns(columns) {
     splittedColumns.value = {
         columns: [],

src/components/ui/VnFilterPanel.vue

@@ -92,16 +92,18 @@ function setUserParams(watchedParams) {
     const order = watchedParams.filter?.order;
 
     delete watchedParams.filter;
-    userParams.value = { ...userParams.value, ...sanitizer(watchedParams) };
+    userParams.value = sanitizer(watchedParams);
     emit('setUserParams', userParams.value, order);
 }
 
 watch(
-    () => [route.query[$props.searchUrl], arrayData.store.userParams],
-    ([newSearchUrl, newUserParams], [oldSearchUrl, oldUserParams]) => {
-        if (newSearchUrl || oldSearchUrl) setUserParams(newSearchUrl);
-        if (newUserParams || oldUserParams) setUserParams(newUserParams);
-    }
+    () => route.query[$props.searchUrl],
+    (val, oldValue) => (val || oldValue) && setUserParams(val)
+);
+
+watch(
+    () => arrayData.store.userParams,
+    (val, oldValue) => (val || oldValue) && setUserParams(val)
 );
 
 watch(

src/pages/Zone/Card/ZoneCard.vue

@@ -28,8 +28,10 @@ function notIsLocations(ifIsFalse, ifIsTrue) {
             url: 'Zones',
             label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),
             info: t('list.searchInfo'),
-            whereFilter: notIsLocations((text) => {
-                return { name: { like: `%${text}%` } };
+            whereFilter: notIsLocations((value) => {
+                return /^\d+$/.test(value)
+                    ? { id: value }
+                    : { name: { like: `%${value}%` } };
             }),
         }"
     />

src/pages/Zone/Card/ZoneSearchbar.vue

@@ -19,24 +19,14 @@ const exprBuilder = (param, value) => {
                 agencyModeFk: value,
             };
         case 'search':
-            if (value) {
-                if (!isNaN(value)) {
-                    return { id: value };
-                } else {
-                    return {
-                        name: {
-                            like: `%${value}%`,
-                        },
-                    };
-                }
-            }
+            return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
     }
 };
 </script>
 
 <template>
     <VnSearchbar
-        data-key="ZoneList"
+        data-key="Zones"
         url="Zones"
         :filter="{
             include: { relation: 'agencyMode', scope: { fields: ['name'] } },

src/pages/Zone/ZoneList.vue

@@ -15,9 +15,9 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputTime from 'src/components/common/VnInputTime.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import ZoneFilterPanel from './ZoneFilterPanel.vue';
+import ZoneSearchbar from './Card/ZoneSearchbar.vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -39,17 +39,6 @@ const tableFilter = {
     ],
 };
 
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value) ? { id: value } : { name: { like: `%${value}%` } };
-        case 'name':
-            return { [param]: { like: `%${value}%` } };
-        case 'agencyModeFk':
-            return { [param]: value };
-    }
-}
-
 const columns = computed(() => [
     {
         align: 'left',
@@ -63,13 +52,16 @@ const columns = computed(() => [
             inWhere: true,
         },
     },
-    //TODO: acabar filtro name porque muestra [object Object]
     {
         align: 'left',
         name: 'name',
         label: t('list.name'),
         isTitle: true,
         create: true,
+        columnFilter: {
+            optionLabel: 'name',
+            optionValue: 'id',
+        },
     },
     {
         align: 'left',
@@ -138,20 +130,14 @@ const handleClone = (id) => {
     );
 };
 
-//TODO: la tabla no tiene en cuenta el menú de la izquierda, arreglar
 onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
-    <VnSearchbar
-        data-key="Zones"
-        :label="t('Search zone')"
-        :info="t('You can search zones by id or name')"
-        :expr-builder="exprBuilder"
-    />
+    <ZoneSearchbar />
     <RightMenu>
         <template #right-panel>
-            <ZoneFilterPanel data-key="Zones" :expr-builder="exprBuilder" />
+            <ZoneFilterPanel data-key="Zones" />
         </template>
     </RightMenu>
     <VnTable
@@ -168,7 +154,6 @@ onMounted(() => (stateStore.rightDrawer = true));
         :columns="columns"
         redirect="zone"
         :right-search="false"
-        :expr-builder="exprBuilder"
         auto-load
     >
         <template #more-create-dialog="{ data }">

test/cypress/integration/zone/zoneCreate.spec.js

@@ -6,15 +6,6 @@ describe('ZoneCreate', () => {
         Price: { val: '3' },
         Bonus: { val: '0' },
         'Traveling days': { val: '0' },
-        Close: {
-            val: {
-                h: '10',
-                m: '0',
-                x: 'PM',
-            },
-            type: 'time',
-            day: 11,
-        },
         Warehouse: { val: 'Algemesi', type: 'select' },
         Volumetric: { val: 'true', type: 'checkbox' },
     };
@@ -30,6 +21,7 @@ describe('ZoneCreate', () => {
         cy.fillInForm({
             ...data,
         });
+        cy.get('input[aria-label="Close"]').type('1000');
         cy.get('.q-mt-lg > .q-btn--standard').click();
         cy.get(notification).should('contains.text', 'Agency cannot be blank');
     });
@@ -39,6 +31,7 @@ describe('ZoneCreate', () => {
             ...data,
             Agency: { val: 'inhouse pickup', type: 'select' },
         });
+        cy.get('input[aria-label="Close"]').type('1000');
         cy.get('.q-mt-lg > .q-btn--standard').click();
         cy.get(notification).should('contains.text', 'Data created');
     });

test/cypress/integration/zone/zoneList.spec.js

@@ -6,14 +6,13 @@ describe('ZoneList', () => {
     });
 
     it('should filter by agency', () => {
-        cy.get('.bg-header > :nth-child(3) > .full-width > :nth-child(1) >').type(
-            '{downArrow}{enter}'
-        );
+        cy.get(
+            ':nth-child(1) > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
+        ).type('{downArrow}{enter}');
     });
 
     it('should open the zone summary', () => {
-        cy.get('.bg-header > :nth-child(2) > .full-width > :nth-child(1) >').type(
-            'zone refund{enter}'
-        );
+        cy.get('input[aria-label="Name"]').type('zone refund');
+        cy.get('.q-scrollarea__content > .q-btn--standard > .q-btn__content').click();
     });
 });