Merge pull request '#7129 - fixFilters' (!559) from 7129-fixFilters into test

Reviewed-on: verdnatura/salix-front#559
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/components/VnTable/VnTable.vue

@@ -177,7 +177,8 @@ function splitColumns(columns) {
         if (col.create) splittedColumns.value.create.push(col);
         if (col.cardVisible) splittedColumns.value.cardVisible.push(col);
         if ($props.isEditable && col.disable == null) col.disable = false;
-        if ($props.useModel) col.columnFilter = { ...col.columnFilter, inWhere: true };
+        if ($props.useModel && col.columnFilter != false)
+            col.columnFilter = { ...col.columnFilter, inWhere: true };
         splittedColumns.value.columns.push(col);
     }
     // Status column
@@ -273,6 +274,10 @@ defineExpose({
                             :search-url="searchUrl"
                         />
                         <VnTableOrder
+                            v-if="
+                                col?.columnFilter !== false &&
+                                col?.name !== 'tableActions'
+                            "
                             v-model="orders[col.name]"
                             :name="col.orderBy ?? col.name"
                             :data-key="$attrs['data-key']"

src/pages/Route/Cmr/CmrList.vue

@@ -3,7 +3,7 @@ import { onBeforeMount, onMounted, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Notify } from 'quasar';
 import { useSession } from 'src/composables/useSession';
-import { toDate } from 'filters/index';
+import { toDate, toDateHourMin } from 'filters/index';
 import { useStateStore } from 'src/stores/useStateStore';
 
 import axios from 'axios';
@@ -30,53 +30,69 @@ const columns = computed(() => [
         isId: true,
     },
     {
-        align: 'left',
+        align: 'center',
         name: 'hasCmrDms',
         label: t('route.cmr.list.hasCmrDms'),
         component: 'checkbox',
         cardVisible: true,
     },
     {
+        align: 'left',
         label: t('route.cmr.list.ticketFk'),
         name: 'ticketFk',
     },
     {
+        align: 'left',
         label: t('route.cmr.list.routeFk'),
         name: 'routeFk',
     },
     {
+        align: 'left',
         label: t('route.cmr.list.clientFk'),
         name: 'clientFk',
     },
     {
-        align: 'left',
+        align: 'right',
         label: t('route.cmr.list.country'),
-        name: 'country',
+        name: 'countryFk',
         cardVisible: true,
-    },
-    {
-        align: 'center',
-        label: t('route.cmr.list.shipped'),
-        name: 'shipped',
-        cardVisible: true,
-        component: 'date',
-        columnFilter: {
-            alias: 'c',
-            inWhere: true,
-        },
-        format: ({ date }) => toDate(date),
-    },
-    {
-        align: 'center',
-        name: 'warehouseFk',
-        label: t('globals.warehouse'),
-        component: 'select',
         attrs: {
-            options: warehouses.value,
+            url: 'countries',
+            fields: ['id', 'name'],
+            optionLabel: 'name',
+            optionValue: 'id',
         },
+        columnFilter: {
+            inWhere: true,
+            component: 'select',
+        },
+        format: ({ countryName }) => countryName,
     },
     {
         align: 'right',
+        label: t('route.cmr.list.shipped'),
+        name: 'shipped',
+        cardVisible: true,
+        columnFilter: {
+            component: 'date',
+            inWhere: true,
+        },
+        format: ({ shipped }) => toDateHourMin(shipped),
+    },
+    {
+        align: 'right',
+        name: 'warehouseFk',
+        label: t('globals.warehouse'),
+        columnFilter: {
+            component: 'select',
+        },
+        attrs: {
+            options: warehouses.value,
+        },
+        format: ({ warehouseName }) => warehouseName,
+    },
+    {
+        align: 'center',
         name: 'tableActions',
         actions: [
             {
@@ -153,7 +169,7 @@ function downloadPdfs() {
         </template>
         <template #column-clientFk="{ row }">
             <span class="link" @click.stop>
-                {{ row.ticketFk }}
+                {{ row.clientFk }}
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </span>
         </template>

src/pages/Route/RouteAutonomous.vue

@@ -36,23 +36,20 @@ const tableRef = ref();
 const columns = computed(() => [
     {
         align: 'left',
-        name: 'id',
+        name: 'routeFk',
         label: 'Id',
         chip: {
             condition: () => true,
         },
         isId: true,
+        columnFilter: false,
     },
     {
         align: 'left',
         name: 'created',
         label: t('Date'),
-        component: 'date',
+        columnFilter: false,
-        columnFilter: {
+        format: ({ created }) => toDate(created),
-            alias: 'c',
-            inWhere: true,
-        },
-        format: ({ date }) => toDate(date),
     },
     {
         align: 'left',
@@ -66,40 +63,63 @@ const columns = computed(() => [
         label: t('Agency agreement'),
         cardVisible: true,
     },
+    {
+        align: 'left',
+        name: 'to',
+        label: t('To'),
+        visible: false,
+        cardVisible: true,
+        create: true,
+        component: 'date',
+        format: ({ date }) => toDate(date),
+    },
+    {
+        align: 'left',
+        name: 'from',
+        label: t('From'),
+        visible: false,
+        cardVisible: true,
+        create: true,
+        component: 'date',
+        format: ({ date }) => toDate(date),
+    },
     {
         align: 'left',
         name: 'packages',
         label: t('Packages'),
+        columnFilter: false,
     },
     {
         align: 'left',
         name: 'm3',
         label: 'm³',
         cardVisible: true,
-        columnFilter: {
+        columnFilter: false,
-            inWhere: true,
-        },
     },
     {
         align: 'left',
         name: 'kmTotal',
         label: t('Km'),
         cardVisible: true,
+        columnFilter: false,
     },
     {
         align: 'left',
         name: 'price',
         label: t('Price'),
+        columnFilter: false,
     },
     {
         align: 'left',
         name: 'invoiceInFk',
         label: t('Received'),
+        columnFilter: false,
     },
     {
         align: 'left',
         name: 'supplierName',
         label: t('Autonomous'),
+        columnFilter: false,
     },
     {
         align: 'right',

src/pages/Route/RouteList.vue

@@ -24,7 +24,6 @@ const selectedRows = ref([]);
 const tableRef = ref([]);
 const confirmationDialog = ref(false);
 const startingDate = ref(null);
-const refreshKey = ref(0);
 const router = useRouter();
 const routeFilter = {
     include: [
@@ -45,9 +44,7 @@ const columns = computed(() => [
             condition: () => true,
         },
         isId: true,
-        columnFilter: {
+        columnFilter: false,
-            name: 'search',
-        },
     },
     {
         align: 'left',
@@ -65,6 +62,9 @@ const columns = computed(() => [
                 label: 'workerUserName',
             },
         },
+        columnFilter: {
+            inWhere: true,
+        },
         useLike: false,
         cardVisible: true,
         format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
@@ -102,18 +102,38 @@ const columns = computed(() => [
                 label: 'vehiclePlateNumber',
             },
         },
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         name: 'created',
         label: t('Date'),
+        columnFilter: false,
+        cardVisible: true,
+        create: true,
+        component: 'date',
+        format: ({ date }) => toDate(date),
+    },
+    {
+        align: 'left',
+        name: 'to',
+        label: t('To'),
+        visible: false,
+        cardVisible: true,
+        create: true,
+        component: 'date',
+        format: ({ date }) => toDate(date),
+    },
+    {
+        align: 'left',
+        name: 'from',
+        label: t('From'),
+        visible: false,
         cardVisible: true,
         create: true,
         component: 'date',
-        columnFilter: {
-            alias: 'c',
-            inWhere: true,
-        },
         format: ({ date }) => toDate(date),
     },
     {
@@ -136,18 +156,21 @@ const columns = computed(() => [
         name: 'started',
         label: t('hourStarted'),
         component: 'time',
+        columnFilter: false,
     },
     {
         align: 'left',
         name: 'finished',
         label: t('hourFinished'),
         component: 'time',
+        columnFilter: false,
     },
     {
         align: 'left',
         name: 'isOk',
         label: t('Served'),
         component: 'checkbox',
+        columnFilter: false,
     },
     {
         align: 'right',
@@ -183,8 +206,8 @@ const cloneRoutes = () => {
         created: startingDate.value,
         ids: selectedRows.value.map((row) => row?.id),
     });
-    tableRef.value.reload();
     startingDate.value = null;
+    tableRef.value.reload();
 };
 
 const showRouteReport = () => {
@@ -220,7 +243,7 @@ const openTicketsDialog = (id) => {
                 id,
             },
         })
-        .onOk(() => refreshKey.value++);
+        .onOk(() => tableRef.value.reload());
 };
 </script>
 
@@ -249,6 +272,7 @@ const openTicketsDialog = (id) => {
     </QDialog>
     <VnSubToolbar />
     <VnTable
+        class="route-list"
         ref="tableRef"
         data-key="RouteList"
         url="Routes/filter"
@@ -266,7 +290,6 @@ const openTicketsDialog = (id) => {
         }"
         save-url="Routes/crud"
         :disable-option="{ card: true }"
-        :use-model="true"
         table-height="85vh"
         v-model:selected="selectedRows"
         :table="{
@@ -332,6 +355,8 @@ en:
     hourStarted: Started hour
     hourFinished: Finished hour
 es:
+    From: Desde
+    To: Hasta
     Worker: Trabajador
     Agency: Agencia
     Vehicle: Vehículo

src/pages/Route/RouteRoadmap.vue

@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { computed, ref } from 'vue';
 import { dashIfEmpty } from 'src/filters';
-import { toDate } from 'filters/index';
+import { toDate, toDateHourMin } from 'filters/index';
 import { useQuasar } from 'quasar';
 import { useSummaryDialog } from 'composables/useSummaryDialog';
 import toCurrency from 'filters/toCurrency';
@@ -43,10 +43,9 @@ const columns = computed(() => [
         label: t('ETD'),
         component: 'date',
         columnFilter: {
-            alias: 'c',
             inWhere: true,
         },
-        format: ({ date }) => toDate(date),
+        format: ({ created }) => toDate(created),
         cardVisible: true,
     },
     {
@@ -200,6 +199,12 @@ function confirmRemove() {
         }"
         :disable-option="{ card: true }"
     >
+        <template #column-etd="{ row }">
+            {{ toDateHourMin(row.etd) }}
+        </template>
+        <template #column-supplierFk="{ row }">
+            {{ row.supplierFk }}
+        </template>
         <template #more-create-dialog="{ data }">
             <VnInputDate v-model="data.etd" />
             <VnInputTime v-model="data.etd" />

test/cypress/integration/route/roadMap/roadmapList.spec.js

@@ -0,0 +1,13 @@
+describe('RoadMap', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/route/roadmap`);
+    });
+    it('Route list create roadmap and redirect', () => {
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('input[name="name"]').eq(1).type('roadMapTestOne{enter}');
+        cy.get('.q-notification__message').should('have.text', 'Data created');
+        cy.url().should('include', '/summary');
+    });
+});

test/cypress/integration/route/routeList.spec.js

@@ -4,12 +4,28 @@ describe('Route', () => {
         cy.login('developer');
         cy.visit(`/#/route/list`);
     });
+    const getVnSelect =
+        '> :nth-child(1) > .column > .q-field > .q-field__inner > .q-field__control > .q-field__control-container';
+    const getRowColumn = (row, column) => `:nth-child(${row}) > :nth-child(${column})`;
 
     it('Route list create route', () => {
-        cy.visit(`/#/route/list`);
         cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
         cy.get('input[name="description"]').eq(1).type('routeTestOne{enter}');
         cy.get('.q-notification__message').should('have.text', 'Data created');
         cy.url().should('include', '/summary');
     });
+
+    it('Route list search and edit', () => {
+        cy.get('input[name="description"]').type('routeTestOne{enter}');
+        cy.get('.q-table tr')
+            .its('length')
+            .then((rowCount) => {
+                expect(rowCount).to.be.greaterThan(0);
+            });
+        cy.get(getRowColumn(1, 3) + getVnSelect).type('{downArrow}{enter}');
+        cy.get(getRowColumn(1, 4) + getVnSelect).type('{downArrow}{enter}');
+        cy.get(getRowColumn(1, 5) + getVnSelect).type('{downArrow}{enter}');
+        cy.get('button[title="Save"]').click();
+        cy.get('.q-notification__message').should('have.text', 'Data created');
+    });
 });