src/pages/Route/Cmr/CmrList.vue

@@ -6,13 +6,18 @@ import { useRoute } from 'vue-router';
 import { useSession } from 'src/composables/useSession';
 import { toDateHourMin } from 'filters/index';
 import { useStateStore } from 'src/stores/useStateStore';
+import { dashIfEmpty } from 'src/filters';
 
+import AgencyDescriptorProxy from '../Agency/Card/AgencyDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import RouteDescriptorProxy from '../Card/RouteDescriptorProxy.vue';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -30,39 +35,117 @@ const userParams = {
 
 const columns = computed(() => [
     {
-        align: 'left',
+        align: 'right',
         name: 'cmrFk',
-        label: t('route.cmr.params.cmrFk'),
+        label: t('cmr.params.cmrFk'),
         chip: {
             condition: () => true,
         },
         isId: true,
     },
     {
-        align: 'center',
+        align: 'right',
-        name: 'hasCmrDms',
+        label: t('cmr.params.ticketFk'),
-        label: t('route.cmr.params.hasCmrDms'),
-        component: 'checkbox',
-        cardVisible: true,
-    },
-    {
-        align: 'left',
-        label: t('route.cmr.params.ticketFk'),
         name: 'ticketFk',
     },
     {
-        align: 'left',
+        align: 'right',
-        label: t('route.cmr.params.routeFk'),
+        label: t('cmr.params.routeFk'),
         name: 'routeFk',
     },
     {
-        align: 'left',
+        label: t('cmr.params.client'),
-        label: t('route.cmr.params.clientFk'),
         name: 'clientFk',
+        component: 'select',
+        attrs: {
+            url: 'Clients',
+            fields: ['id', 'name'],
+        },
+        columnFilter: {
+            name: 'clientFk',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+            },
+        },
     },
     {
-        align: 'right',
+        label: t('cmr.params.agency'),
-        label: t('route.cmr.params.countryFk'),
+        name: 'agencyModeFk',
+        component: 'select',
+        attrs: {
+            url: 'Agencies',
+            fields: ['id', 'name'],
+        },
+        columnFilter: {
+            name: 'agencyModeFk',
+            attrs: {
+                url: 'Agencies',
+                fields: ['id', 'name'],
+            },
+        },
+        format: ({ agencyName }) => agencyName,
+    },
+    {
+        label: t('cmr.params.supplier'),
+        name: 'supplierFk',
+        component: 'select',
+        attrs: {
+            url: 'suppliers',
+            fields: ['id', 'name'],
+        },
+        columnFilter: {
+            name: 'supplierFk',
+            attrs: {
+                url: 'suppliers',
+                fields: ['id', 'name'],
+            },
+        },
+    },
+    {
+        label: t('cmr.params.sender'),
+        name: 'addressFromFk',
+        component: 'select',
+        attrs: {
+            url: 'Addresses',
+            fields: ['id', 'nickname'],
+            optionValue: 'id',
+            optionLabel: 'nickname',
+        },
+        columnFilter: {
+            name: 'addressFromFk',
+            attrs: {
+                url: 'Addresses',
+                fields: ['id', 'nickname'],
+                optionValue: 'id',
+                optionLabel: 'nickname',
+            },
+        },
+        format: ({ origin }) => origin,
+    },
+    {
+        label: t('cmr.params.destination'),
+        name: 'addressToFk',
+        component: 'select',
+        attrs: {
+            url: 'addresses',
+            fields: ['id', 'nickname'],
+            optionValue: 'id',
+            optionLabel: 'nickname',
+        },
+        columnFilter: {
+            name: 'addressToFk',
+            attrs: {
+                url: 'addresses',
+                fields: ['id', 'nickname'],
+                optionValue: 'id',
+                optionLabel: 'nickname',
+            },
+        },
+        format: ({ destination }) => destination,
+    },
+    {
+        label: t('cmr.params.country'),
         name: 'countryFk',
         component: 'select',
         attrs: {
@@ -79,16 +162,61 @@ const columns = computed(() => [
         format: ({ countryName }) => countryName,
     },
     {
-        align: 'right',
+        label: t('cmr.params.created'),
-        label: t('route.cmr.params.shipped'),
+        name: 'created',
-        name: 'shipped',
-        cardVisible: true,
         component: 'date',
-        format: ({ shipped }) => toDateHourMin(shipped),
+        format: ({ created }) => dashIfEmpty(toDateHourMin(created)),
     },
     {
-        align: 'right',
+        label: t('cmr.params.shipped'),
-        label: t('route.cmr.params.warehouseFk'),
+        name: 'shipped',
+        component: 'date',
+        format: ({ shipped }) => dashIfEmpty(toDateHourMin(shipped)),
+    },
+    {
+        label: t('cmr.params.etd'),
+        name: 'ead',
+        component: 'date',
+        format: ({ ead }) => dashIfEmpty(toDateHourMin(ead)),
+        toolTip: t('cmr.params.etdTooltip'),
+    },
+    {
+        label: t('globals.landed'),
+        name: 'landed',
+        component: 'date',
+        format: ({ landed }) => dashIfEmpty(toDateHourMin(landed)),
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.packageList'),
+        name: 'packagesList',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.observation'),
+        name: 'observation',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.senderInstructions'),
+        name: 'senderInstruccions',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.paymentInstructions'),
+        name: 'paymentInstruccions',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.vehiclePlate'),
+        name: 'truckPlate',
+    },
+    {
+        label: t('cmr.params.warehouse'),
         name: 'warehouseFk',
         component: 'select',
         attrs: {
@@ -96,7 +224,6 @@ const columns = computed(() => [
             fields: ['id', 'name'],
         },
         columnFilter: {
-            inWhere: true,
             name: 'warehouseFk',
             attrs: {
                 url: 'warehouses',
@@ -105,12 +232,23 @@ const columns = computed(() => [
         },
         format: ({ warehouseName }) => warehouseName,
     },
+    {
+        align: 'left',
+        name: 'specialAgreements',
+        label: t('cmr.params.specialAgreements'),
+        columnFilter: false,
+    },
+    {
+        name: 'hasCmrDms',
+        label: t('cmr.params.hasCmrDms'),
+        component: 'checkbox',
+    },
     {
         align: 'center',
         name: 'tableActions',
         actions: [
             {
-                title: t('route.cmr.params.viewCmr'),
+                title: t('cmr.params.viewCmr'),
                 icon: 'visibility',
                 isPrimary: true,
                 action: (row) => window.open(getCmrUrl(row?.cmrFk), '_blank'),
@@ -151,11 +289,7 @@ function downloadPdfs() {
 }
 </script>
 <template>
-    <VnSearchbar
+    <VnSearchbar :data-key :label="t('cmr.search')" :info="t('cmr.searchInfo')" />
-        :data-key
-        :label="t('route.cmr.search')"
-        :info="t('route.cmr.searchInfo')"
-    />
     <VnSubToolbar>
         <template #st-actions>
             <QBtn
@@ -165,7 +299,7 @@ function downloadPdfs() {
                 :disable="!selectedRows?.length"
                 @click="downloadPdfs"
             >
-                <QTooltip>{{ t('route.cmr.params.downloadCmrs') }}</QTooltip>
+                <QTooltip>{{ t('cmr.params.downloadCmrs') }}</QTooltip>
             </QBtn>
         </template>
     </VnSubToolbar>
@@ -191,11 +325,72 @@ function downloadPdfs() {
                 <TicketDescriptorProxy :id="row.ticketFk" />
             </span>
         </template>
+        <template #column-routeFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.routeFk }}
+                <RouteDescriptorProxy :id="row.routeFk" />
+            </span>
+        </template>
         <template #column-clientFk="{ row }">
             <span class="link" @click.stop>
-                {{ row.clientFk }}
+                {{ row.clientName }}
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </span>
         </template>
+        <template #column-agencyModeFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.agencyName }}
+                <AgencyDescriptorProxy :id="row.agencyModeFk" />
+            </span>
+        </template>
+        <template #column-supplierFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.carrierName }}
+                <SupplierDescriptorProxy :id="row.supplierFk" />
+            </span>
+        </template>
+        <template #column-observation="{ row }">
+            <VnInput
+                v-if="row.observation"
+                type="textarea"
+                v-model="row.observation"
+                readonly
+                dense
+                rows="2"
+                style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+            />
+        </template>
+        <template #column-packagesList="{ row }">
+            <span>
+                {{ row.packagesList }}
+                <QTooltip v-if="row.packagesList" :label="row.packagesList">
+                    {{ row.packagesList }}
+                </QTooltip>
+            </span>
+        </template>
+        <template #column-senderInstruccions="{ row }">
+            <span>
+                {{ row.senderInstruccions }}
+                <QTooltip v-if="row.packagesList" :label="row.packagesList">
+                    {{ row.senderInstruccions }}
+                </QTooltip>
+            </span>
+        </template>
+        <template #column-paymentInstruccions="{ row }">
+            <span>
+                {{ row.paymentInstruccions }}
+                <QTooltip v-if="row.packagesList" :label="row.packagesList">
+                    {{ row.paymentInstruccions }}
+                </QTooltip>
+            </span>
+        </template>
+        <template #column-specialAgreements="{ row }">
+            <span>
+                {{ row.specialAgreements }}
+                <QTooltip v-if="row.packagesList" :label="row.packagesList">
+                    {{ row.specialAgreements }}
+                </QTooltip>
+            </span>
+        </template>
     </VnTable>
 </template>

src/pages/Route/Cmr/locale/en.yml

@@ -0,0 +1,31 @@
+cmr:
+  search: Search Cmr
+  searchInfo: You can search Cmr by Id
+  params:
+      agency: Agency
+      client: Client
+      cmrFk: CMR id
+      country: Country
+      created: Created
+      destination: Destination
+      downloadCmrs: Download CMRs
+      etd: ETD
+      etdTooltip: Estimated Time Delivery
+      hasCmrDms: Attached in gestdoc
+      observation: Observation
+      packageList: Package List
+      paymentInstructions: Payment instructions
+      routeFk: Route id
+      results: results
+      search: General search
+      sender: Sender
+      senderInstructions: Sender instructions
+      shipped: Shipped
+      specialAgreements: Special agreements
+      supplier: Carrier
+      ticketFk: Ticket id
+      vehiclePlate: Vehicle plate
+      viewCmr: View CMR
+      warehouse: Warehouse
+      'true': 'Yes'
+      'false': 'No'

src/pages/Route/Cmr/locale/es.yml

@@ -0,0 +1,31 @@
+cmr:
+  search: Buscar Cmr
+  searchInfo: Puedes buscar cmr por id
+  params:
+      agency: Agencia
+      client: Cliente
+      cmrFk: Id cmr
+      country: País
+      created: Creado
+      destination: Destinatario
+      downloadCmrs: Descargar CMRs
+      etd: ETD
+      etdTooltip: Fecha estimada de entrega
+      hasCmrDms: Adjunto en gestdoc
+      observation: Observaciones
+      packageList: Listado embalajes
+      paymentInstructions: Instrucciones de pago
+      routeFk: Id ruta
+      results: Resultados
+      search: Busqueda general
+      sender: Remitente
+      senderInstructions: Instrucciones de envío
+      shipped: F. envío
+      specialAgreements: Acuerdos especiales
+      supplier: Transportista
+      ticketFk: Id ticket
+      vehiclePlate: Matrícula
+      viewCmr: Ver CMR
+      warehouse: Almacén
+      'true': 'Si'
+      'false': 'No'

src/pages/Route/locale/en.yml

@@ -51,6 +51,11 @@ route:
         agencyModeName: Agency route
         isOwn: Own
         isAnyVolumeAllowed: Any volume allowed
+        created: Created
+        addressFromFk: Sender
+        addressToFk: Destination
+        landed: Landed
+        ead: EAD
     Worker: Worker
     Agency: Agency
     Vehicle: Vehicle
@@ -70,21 +75,3 @@ route:
     searchInfo: You can search by route reference
     dated: Dated
     preview: Preview
-    cmr:
-        search: Search Cmr
-        searchInfo: You can search Cmr by Id
-        params:
-            results: results
-            cmrFk: CMR id
-            hasCmrDms: Attached in gestdoc
-            'true': 'Yes'
-            'false': 'No'
-            ticketFk: Ticketd id
-            routeFk: Route id
-            countryFk: Country
-            clientFk: Client id
-            warehouseFk: Warehouse
-            shipped: Preparation date
-            viewCmr: View CMR
-            downloadCmrs: Download CMRs
-            search: General search

src/pages/Route/locale/es.yml

@@ -47,11 +47,16 @@ route:
         routeFk: Id ruta
         clientFk: Id cliente
         countryFk: Pais
-        shipped: Fecha preparación
+        shipped: F. envío
         agencyModeName: Agencia Ruta
         agencyAgreement: Agencia Acuerdo
         isOwn: Propio
         isAnyVolumeAllowed: Cualquier volumen
+        created: Creado
+        addressFromFk: Remitente
+        addressToFk: Destinatario
+        landed: F. entrega
+        ead: ETD
     Worker: Trabajador
     Agency: Agencia
     Vehicle: Vehículo

test/cypress/integration/route/cmr/cmrList.spec.js

@@ -5,6 +5,9 @@ describe('Cmr list', () => {
     const selectors = {
         ticket: getLinkSelector('ticketFk'),
         client: getLinkSelector('clientFk'),
+        route: getLinkSelector('routeFk'),
+        agency: getLinkSelector('agencyModeFk'),
+        carrier: getLinkSelector('supplierFk'),
         lastRowSelectCheckBox:
             '.q-virtual-scroll__content > tr:last-child > :nth-child(1) > .q-checkbox',
         downloadBtn: '#subToolbar > .q-btn',
@@ -21,6 +24,10 @@ describe('Cmr list', () => {
     const data = {
         ticket: '1',
         client: 'Bruce Wayne',
+        route: 'first route',
+        routeId: '1',
+        agency: 'inhouse pickup',
+        carrier: 'PLANTS SL',
     };
 
     beforeEach(() => {
@@ -68,6 +75,26 @@ describe('Cmr list', () => {
         });
     });
 
+    describe('Route pop-ups', () => {
+        it('Should redirect to the route summary from the route descriptor pop-up', () => {
+            cy.get(selectors.route).should('be.visible').click();
+            cy.containContent(selectors.descriptorId, data.routeId);
+            cy.get(selectors.descriptorGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/route/1/summary');
+            cy.containContent(selectors.summaryTitle, data.route);
+        });
+
+        it('Should redirect to the route summary from summary pop-up from the route descriptor pop-up', () => {
+            cy.get(selectors.route).should('be.visible').click();
+            cy.containContent(selectors.descriptorId, data.routeId);
+            cy.get(selectors.descriptorOpenSummaryBtn).should('be.visible').click();
+            cy.containContent(selectors.summaryTitle, data.route);
+            cy.get(selectors.summaryGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/route/1/summary');
+            cy.containContent(selectors.summaryTitle, data.route);
+        });
+    });
+
     describe('Client pop-ups', () => {
         it('Should redirect to the client summary from the client descriptor pop-up', () => {
             cy.get(selectors.client).should('be.visible').click();
@@ -87,4 +114,44 @@ describe('Cmr list', () => {
             cy.containContent(selectors.summaryTitle, data.client);
         });
     });
+
+    describe('Agency pop-ups', () => {
+        it('Should redirect to the agency summary from the agency descriptor pop-up', () => {
+            cy.get(selectors.agency).should('be.visible').click();
+            cy.containContent(selectors.descriptorTitle, data.agency);
+            cy.get(selectors.descriptorGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/agency/1/summary');
+            cy.containContent(selectors.summaryTitle, data.agency);
+        });
+
+        it('Should redirect to the agency summary from summary pop-up from the agency descriptor pop-up', () => {
+            cy.get(selectors.agency).should('be.visible').click();
+            cy.containContent(selectors.descriptorTitle, data.agency);
+            cy.get(selectors.descriptorOpenSummaryBtn).should('be.visible').click();
+            cy.containContent(selectors.summaryTitle, data.agency);
+            cy.get(selectors.summaryGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/agency/1/summary');
+            cy.containContent(selectors.summaryTitle, data.agency);
+        });
+    });
+
+    describe('Carrier pop-ups', () => {
+        it('Should redirect to the supplier summary from the supplier descriptor pop-up', () => {
+            cy.get(selectors.carrier).should('be.visible').click();
+            cy.containContent(selectors.descriptorTitle, data.carrier);
+            cy.get(selectors.descriptorGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/supplier/1/summary');
+            cy.containContent(selectors.summaryTitle, data.carrier);
+        });
+
+        it('Should redirect to the supplier summary from summary pop-up from the supplier descriptor pop-up', () => {
+            cy.get(selectors.carrier).should('be.visible').click();
+            cy.containContent(selectors.descriptorTitle, data.carrier);
+            cy.get(selectors.descriptorOpenSummaryBtn).should('be.visible').click();
+            cy.containContent(selectors.summaryTitle, data.carrier);
+            cy.get(selectors.summaryGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/supplier/1/summary');
+            cy.containContent(selectors.summaryTitle, data.carrier);
+        });
+    });
 });