fix: refs #7354 fix VnSearchbar search for zone section & finished basic tests

src/components/common/VnCard.vue

@@ -20,6 +20,7 @@ const props = defineProps({
     searchUrl: { type: String, default: undefined },
     searchbarLabel: { type: String, default: '' },
     searchbarInfo: { type: String, default: '' },
+    searchKey: { type: String, default: 'search' },
     searchCustomRouteRedirect: { type: String, default: undefined },
     searchRedirect: { type: Boolean, default: true },
     searchMakeFetch: { type: Boolean, default: true },
@@ -72,6 +73,7 @@ if (props.baseUrl) {
             :info="props.searchbarInfo"
             :custom-route-redirect-name="searchCustomRouteRedirect"
             :redirect="searchRedirect"
+            :search-key="searchKey"
         />
     </slot>
     <slot v-else name="searchbar" />

src/components/ui/VnSearchbar.vue

@@ -61,15 +61,23 @@ const props = defineProps({
     },
     customRouteRedirectName: {
         type: String,
-        default: '',
+        default: null,
     },
     makeFetch: {
         type: Boolean,
         default: true,
     },
+    searchKey: {
+        type: String,
+        default: 'search',
+    },
+    isQueryFilter: {
+        type: Boolean,
+        default: false,
+    },
 });
 
-const searchText = ref('');
+const searchText = ref();
 let arrayDataProps = { ...props };
 if (props.redirect)
     arrayDataProps = {
@@ -105,13 +113,26 @@ async function search() {
     );
     arrayData.reset(['skip', 'page']);
 
+    if (props.isQueryFilter) {
         if (props.makeFetch)
             await arrayData.applyFilter({
                 params: {
                     ...Object.fromEntries(staticParams),
-                search: searchText.value,
+                },
+                filter: {
+                    where: {
+                        name: searchText.value == '' ? undefined : searchText.value,
+                    },
                 },
             });
+    } else {
+        if (props.makeFetch)
+            await arrayData.applyFilter({
+                params: {
+                    ...Object.fromEntries(staticParams),
+                },
+            });
+    }
 }
 </script>
 <template>

src/pages/Zone/Card/ZoneCard.vue

@@ -1,36 +1,22 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { computed } from 'vue';
 
 import VnCard from 'components/common/VnCard.vue';
 import ZoneDescriptor from './ZoneDescriptor.vue';
+import ZoneFilterPanel from '../ZoneFilterPanel.vue';
 
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => {
-    if (routeName.value === 'ZoneLocations') return null;
-    return routeName.value;
-});
-const searchbarMakeFetch = computed(() => routeName.value !== 'ZoneEvents');
-const searchBarDataKeys = {
-    ZoneWarehouses: 'ZoneWarehouses',
-    ZoneSummary: 'ZoneSummary',
-    ZoneLocations: 'ZoneLocations',
-    ZoneEvents: 'ZoneEvents',
-};
 </script>
 
 <template>
     <VnCard
         data-key="Zone"
+        base-url="Zones"
+        search-url="Zones"
+        search-key="name"
         :descriptor="ZoneDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        :filter-panel="ZoneFilterPanel"
-        :search-custom-route-redirect="customRouteRedirectName"
+        :search-data-key="'ZoneList'"
-        :search-redirect="!!customRouteRedirectName"
-        :search-make-fetch="searchbarMakeFetch"
         :searchbar-label="t('list.searchZone')"
         :searchbar-info="t('list.searchInfo')"
     />

src/pages/Zone/Card/ZoneWarehouses.vue

@@ -14,7 +14,7 @@ const { t } = useI18n();
 const route = useRoute();
 const { openConfirmationModal } = useVnConfirm();
 
-const paginateRef = ref(null);
+const paginateRef = ref();
 const createWarehouseDialogRef = ref(null);
 
 const arrayData = useArrayData('ZoneWarehouses');

src/pages/Zone/ZoneFilterPanel.vue

@@ -27,6 +27,7 @@ const agencies = ref([]);
         :data-key="props.dataKey"
         :search-button="true"
         :hidden-tags="['search']"
+        search-url="table"
     >
         <template #tags="{ tag }">
             <div class="q-gutter-x-xs">

src/pages/Zone/ZoneList.vue

@@ -14,6 +14,7 @@ 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';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -114,6 +115,13 @@ const handleClone = (id) => {
 </script>
 
 <template>
+    <VnSearchbar
+        search-key="name"
+        data-key="ZoneList"
+        :label="t('Search claim')"
+        :info="t('You can search by claim id or customer name')"
+        :is-query-filter="true"
+    />
     <VnTable
         ref="tableRef"
         data-key="ZoneList"

src/pages/Zone/ZoneMain.vue

@@ -1,54 +1,11 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'src/components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
-const { t } = useI18n();
 const stateStore = useStateStore();
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'name':
-            return {
-                name: { like: `%${value}%` },
-            };
-        case 'code':
-            return {
-                code: { like: `%${value}%` },
-            };
-        case 'agencyModeFk':
-            return {
-                agencyModeFk: value,
-            };
-        case 'search':
-            if (value) {
-                if (!isNaN(value)) {
-                    return { id: value };
-                } else {
-                    return {
-                        name: {
-                            like: `%${value}%`,
-                        },
-                    };
-                }
-            }
-    }
-};
 </script>
 
 <template>
-    <VnSearchbar
-        data-key="Zones"
-        url="Zones"
-        :filter="{
-            include: { relation: 'agencyMode', scope: { fields: ['name'] } },
-        }"
-        :expr-builder="exprBuilder"
-        :label="t('list.searchZone')"
-        :info="t('list.searchInfo')"
-        custom-route-redirect-name="ZoneSummary"
-    />
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
             <LeftMenu />

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

@@ -0,0 +1,23 @@
+describe('ZoneCreate', () => {
+    const notification = '.q-notification__message';
+
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/zone/4/basic-data');
+    });
+
+    it('should throw an error if the name is empty', () => {
+        cy.get('.q-card > :nth-child(1)').click();
+        cy.get('.q-card > :nth-child(1)').clear();
+        cy.get('.q-btn-group > .q-btn--standard').click();
+        cy.get(notification).should('contains.text', "can't be blank");
+    });
+
+    it("should edit the basicData's zone", () => {
+        cy.get('.q-card > :nth-child(1)').click();
+        cy.get('.q-card > :nth-child(1)').type(' modified');
+        cy.get('.q-btn-group > .q-btn--standard').click();
+        cy.get(notification).should('contains.text', 'Data saved');
+    });
+});

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

@@ -0,0 +1,45 @@
+describe('ZoneCreate', () => {
+    const notification = '.q-notification__message';
+
+    const data = {
+        Name: { val: 'Zone pickup D' },
+        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' },
+    };
+
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/zone/list');
+        cy.get('.q-page-sticky > div > .q-btn').click();
+    });
+
+    it('should throw an error if an agency has not been selected', () => {
+        cy.fillInForm({
+            ...data,
+        });
+        cy.get('.q-mt-lg > .q-btn--standard').click();
+        cy.get(notification).should('contains.text', 'Agency cannot be blank');
+    });
+
+    it('should create a zone', () => {
+        cy.fillInForm({
+            ...data,
+            Agency: { val: 'inhouse pickup', type: 'select' },
+        });
+        cy.get('.q-mt-lg > .q-btn--standard').click();
+        cy.get(notification).should('contains.text', 'Data created');
+    });
+});

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

@@ -0,0 +1,19 @@
+describe('ZoneList', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/zone/list');
+    });
+
+    it('should filter by agency', () => {
+        cy.get('.bg-header > :nth-child(3) > .full-width > :nth-child(1) >').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}'
+        );
+    });
+});

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

@@ -0,0 +1,34 @@
+describe('ZoneWarehouse', () => {
+    const data = {
+        Warehouse: { val: 'Algemesi', type: 'select' },
+    };
+    const deviceProductionField =
+        '.vn-row > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container';
+    const dataError = "ER_DUP_ENTRY: Duplicate entry '2-2' for key 'zoneFk'";
+
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit(`/#/zone/2/warehouses`);
+    });
+
+    it('should throw an error if the warehouse chosen is already put in the zone', () => {
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get(deviceProductionField).click();
+        cy.get(deviceProductionField).type('{upArrow}{enter}');
+        cy.get('.q-notification__message').should('have.text', dataError);
+    });
+
+    it('should create a warehouse', () => {
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get(deviceProductionField).click();
+        cy.fillInForm(data);
+        cy.get('.q-mt-lg > .q-btn--standard').click();
+    });
+
+    it('should delete a warehouse', () => {
+        cy.get('tbody > :nth-child(2) > :nth-child(2) > .q-icon').click();
+        cy.get('.q-card__actions > .q-btn--flat > .q-btn__content').click();
+        cy.reload();
+    });
+});

test/cypress/support/commands.js

@@ -108,6 +108,12 @@ Cypress.Commands.add('fillInForm', (obj, form = '.q-form > .q-card') => {
                             .eq(day ? day - 1 : 0)
                             .click();
                         break;
+                    case 'time':
+                        cy.wrap(el).click();
+                        cy.get('.q-time .q-time__clock').contains(val.h).click();
+                        cy.get('.q-time .q-time__clock').contains(val.m).click();
+                        cy.get('.q-time .q-time__link').contains(val.x).click();
+                        break;
                     default:
                         cy.wrap(el).type(val);
                         break;