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

Reviewed-on: verdnatura/salix-front#559 Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
2024-07-22 16:00:14 +00:00 · 2024-07-22 16:00:14 +00:00 · a421c96e85
parent 580777af65 1a091e5b5a
commit a421c96e85
7 changed files with 150 additions and 50 deletions
--- a/src/components/VnTable/VnTable.vue
+++ b/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']"
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/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>
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/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: {
-            alias: 'c',
-            inWhere: true,
-        },
-        format: ({ date }) => toDate(date),
+        columnFilter: false,
+        format: ({ created }) => toDate(created),
    },
    {
        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: {
-            inWhere: true,
-        },
+        columnFilter: false,
    },
    {
        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',
--- a/src/pages/Route/RouteList.vue
+++ b/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: {
-            name: 'search',
-        },
+        columnFilter: false,
    },
    {
        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',
-        columnFilter: {
-            alias: 'c',
-            inWhere: true,
+        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',
        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
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/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" />
--- a/test/cypress/integration/route/roadMap/roadmapList.spec.js
+++ b/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');
+    });
+});
--- a/test/cypress/integration/route/routeList.spec.js
+++ b/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');
+    });
 });