src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -11,6 +11,8 @@ import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorP
 import InvoiceIntoBook from '../InvoiceInToBook.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import InvoiceInDescriptorMenu from './InvoiceInDescriptorMenu.vue';
+import VehicleDescriptorProxy from 'src/pages/Route/Vehicle/Card/VehicleDescriptorProxy.vue';
+import { getTotal } from 'src/composables/getTotal';
 
 const props = defineProps({ id: { type: [Number, String], default: 0 } });
 const { t } = useI18n();
@@ -161,6 +163,22 @@ const intrastatColumns = ref([
     },
 ]);
 
+const vehicleColumns = ref([
+    {
+        name: 'numberPlate',
+        label: 'globals.vehicle',
+        field: (row) => row.vehicleInvoiceIn?.numberPlate,
+        format: (value) => value,
+        align: 'left',
+    },
+    {
+        name: 'amount',
+        label: 'invoiceIn.list.amount',
+        field: (row) => toCurrency(row.vehicleInvoiceIn?.amount),
+        align: 'left',
+    },
+]);
+
 onMounted(async () => {
     invoiceInUrl.value = `${await getUrl('')}invoiceIn/${entityId.value}/`;
 });
@@ -218,6 +236,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                 <VnTitle
                     :url="getLink('basic-data')"
                     :text="t('globals.pageTitles.basicData')"
+                    data-cy="basicDataTitleLink"
                 />
                 <div class="vn-card-group">
                     <div class="vn-card-content">
@@ -282,7 +301,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             :value="entity.expenseDeductible?.name"
                         />
                         <VnLv
-                            :label="t('invoiceIn.card.company')"
+                            :label="t('globals.company')"
                             :value="entity.company?.code"
                         />
                         <VnLv
@@ -319,8 +338,12 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                 </div>
             </QCard>
             <!--Vat-->
-            <QCard v-if="entity.invoiceInTax.length" class="vat">
-                <VnTitle :url="getLink('vat')" :text="t('invoiceIn.card.vat')" />
+            <QCard v-if="entity.invoiceInTax.length" class="col-extend">
+                <VnTitle
+                    :url="getLink('vat')"
+                    :text="t('globals.pageTitles.vat')"
+                    data-cy="vatTitleLink"
+                />
                 <QTable
                     :columns="vatColumns"
                     :rows="entity.invoiceInTax"
@@ -371,13 +394,18 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                                     currency,
                                 )
                             }}</QTd>
+                            <QTd></QTd>
                         </QTr>
                     </template>
                 </QTable>
             </QCard>
             <!--Due Day-->
-            <QCard v-if="entity.invoiceInDueDay.length" class="due-day">
-                <VnTitle :url="getLink('due-day')" :text="t('invoiceIn.card.dueDay')" />
+            <QCard v-if="entity.invoiceInDueDay.length" class="col-shrink">
+                <VnTitle
+                    :url="getLink('due-day')"
+                    :text="t('globals.pageTitles.dueDay')"
+                    data-cy="dueDayTitleLink"
+                />
                 <QTable :columns="dueDayColumns" :rows="entity.invoiceInDueDay" flat>
                     <template #header="dueDayProps">
                         <QTr :props="dueDayProps" class="bg">
@@ -412,10 +440,11 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                 </QTable>
             </QCard>
             <!--Intrastat-->
-            <QCard v-if="entity.invoiceInIntrastat.length">
+            <QCard v-if="entity.invoiceInIntrastat.length" class="col-extend">
                 <VnTitle
                     :url="getLink('intrastat')"
-                    :text="t('invoiceIn.card.intrastat')"
+                    :text="t('globals.pageTitles.intrastat')"
+                    data-cy="intrastatTitleLink"
                 />
                 <QTable
                     :columns="intrastatColumns"
@@ -449,6 +478,53 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                     </template>
                 </QTable>
             </QCard>
+            <!-- Vehicle -->
+            <QCard v-if="entity?.vehicleInvoiceIn?.length" class="col-shrink">
+                <VnTitle
+                    :url="getLink('vehicle')"
+                    :text="t('globals.vehicle')"
+                    data-cy="vehicleTitleLink"
+                />
+                <QTable :columns="vehicleColumns" :rows="entity.vehicleInvoiceIn" flat>
+                    <template #header="vehicleProps">
+                        <QTr :props="vehicleProps" class="bg">
+                            <QTh
+                                v-for="col in vehicleProps.cols"
+                                :key="col.name"
+                                :props="vehicleProps"
+                            >
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                    <template #body="vehicleProps">
+                        <QTr :props="vehicleProps">
+                            <QTd>
+                                <span class="link" data-cy="invoiceInSummary_vehicle">
+                                    {{ vehicleProps.row.vehicle.numberPlate }}
+                                    <VehicleDescriptorProxy
+                                        :id="vehicleProps.row.vehicleFk"
+                                    /> </span
+                            ></QTd>
+                            <QTd align="left">{{
+                                toCurrency(vehicleProps.row.amount)
+                            }}</QTd>
+                        </QTr>
+                    </template>
+                    <template #bottom-row>
+                        <QTr class="bg">
+                            <QTd></QTd>
+                            <QTd>
+                                {{
+                                    toCurrency(
+                                        getTotal(entity.vehicleInvoiceIn, 'amount'),
+                                    )
+                                }}
+                            </QTd>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
         </template>
     </CardSummary>
 </template>
@@ -462,15 +538,15 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
 
 @media (min-width: $breakpoint-md) {
     .summaryBody {
-        .vat {
+        .col-extend {
             flex: 65%;
         }
 
-        .due-day {
+        .col-shrink {
             flex: 30%;
         }
-        .vat,
-        .due-day {
+        .col-extend,
+        .col-shrink {
             .q-table th {
                 padding-right: 0;
             }

src/pages/InvoiceIn/Card/InvoiceInVehicle.vue

@@ -0,0 +1,107 @@
+<script setup>
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import { toCurrency } from 'src/filters';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+import VehicleDescriptorProxy from 'src/pages/Route/Vehicle/Card/VehicleDescriptorProxy.vue';
+
+const tableRef = ref();
+const { t } = useI18n();
+
+const route = useRoute();
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+const dataKey = 'InvoiceInVehicleList';
+const filter = {
+    include: [{ relation: 'vehicle', scope: { fields: ['id', 'numberPlate'] } }],
+};
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'vehicleFk',
+        label: t('globals.vehicle'),
+        component: 'select',
+        attrs: {
+            url: 'vehicles',
+            fields: ['id', 'numberPlate'],
+            optionLabel: 'numberPlate',
+            optionFilterValue: 'numberPlate',
+            find: {
+                value: 'vehicleFk',
+                label: 'vehiclePlateNumber',
+            },
+        },
+        create: true,
+        format: (row) => row.vehicle?.numberPlate,
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'amount',
+        label: t('invoiceIn.list.amount'),
+        component: 'number',
+        create: true,
+        format: (row) => toCurrency(row.amount),
+        cardVisible: true,
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('invoiceIn.unlinkVehicle'),
+                icon: 'delete',
+                action: (row) =>
+                    openConfirmationModal(
+                        t('invoiceIn.unlinkVehicle'),
+                        t('invoiceIn.unlinkVehicleConfirmation'),
+                        () => unassignVehicle(row.id),
+                    ),
+                isPrimary: true,
+            },
+        ],
+    },
+]);
+
+async function unassignVehicle(id) {
+    try {
+        await axios.delete(`VehicleInvoiceIns/${id}`);
+        notify(t('invoiceIn.unlinkedVehicle'), 'positive');
+        tableRef.value.reload();
+    } catch (e) {
+        throw e;
+    }
+}
+</script>
+
+<template>
+    <VnTable
+        ref="tableRef"
+        :data-key="dataKey"
+        url="VehicleInvoiceIns"
+        :user-filter="filter"
+        :filter="{ where: { invoiceInFk: route.params.id } }"
+        :columns="columns"
+        :column-search="false"
+        :right-search="false"
+        :create="{
+            urlCreate: 'VehicleInvoiceIns',
+            title: t('invoiceIn.linkVehicleToInvoiceIn'),
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: { invoiceInFk: route.params.id },
+        }"
+        auto-load
+    >
+        <template #column-vehicleFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.vehicle?.numberPlate }}
+                <VehicleDescriptorProxy :id="row?.vehicleFk" />
+            </span>
+        </template>
+    </VnTable>
+</template>

src/pages/InvoiceIn/locale/en.yml

@@ -34,14 +34,6 @@ invoiceIn:
         originalInvoice: Original invoice
         entry: Entry
         emailEmpty: The email can't be empty
-    card:
-        client: Client
-        company: Company
-        customerCard: Customer card
-        ticketList: Ticket List
-        vat: Vat
-        dueDay: Due day
-        intrastat: Intrastat
     summary:
         currency: Currency
         issued: Expedition date
@@ -70,3 +62,7 @@ invoiceIn:
         account: Ledger account
         correctingFk: Rectificative
     noMatch: No match with the vat({totalTaxableBase})
+    linkVehicleToInvoiceIn: Link vehicle to invoice
+    unlinkedVehicle: Unlinked vehicle
+    unlinkVehicle: Unlink vehicle
+    unlinkVehicleConfirmation: This vehicle will be unlinked from this invoice! Continue anyway?

src/pages/InvoiceIn/locale/es.yml

@@ -33,13 +33,6 @@ invoiceIn:
         originalInvoice: Factura origen
         entry: Entrada
         emailEmpty: El email no puede estar vacío
-    card:
-        client: Cliente
-        company: Empresa
-        customerCard: Ficha del cliente
-        ticketList: Listado de tickets
-        vat: Iva
-        dueDay: Fecha de vencimiento
     summary:
         currency: Divisa
         docNumber: Número documento
@@ -52,7 +45,7 @@ invoiceIn:
         expense: Gasto
         taxableBase: Base imp.
         rate: Tasa
-        sageTransaction: Sage transación
+        sageTransaction: Sage transacción
         dueDay: Fecha
         bank: Caja
         foreignValue: Divisa
@@ -68,3 +61,7 @@ invoiceIn:
         account: Cuenta contable
         correctingFk: Rectificativa
     noMatch: No cuadra con el iva({totalTaxableBase})
+    linkVehicleToInvoiceIn: Vincular vehículo a factura
+    unlinkedVehicle: Vehículo desvinculado
+    unlinkVehicle: Desvincular vehículo
+    unlinkVehicleConfirmation: Este vehículo se desvinculará de esta factura! ¿Continuar de todas formas?

src/router/modules/invoiceIn.js

@@ -18,6 +18,7 @@ const invoiceInCard = {
             'InvoiceInIntrastat',
             'InvoiceInCorrective',
             'InvoiceInLog',
+            'InvoiceInVehicle',
         ],
     },
     children: [
@@ -75,6 +76,15 @@ const invoiceInCard = {
             },
             component: () => import('src/pages/InvoiceIn/Card/InvoiceInCorrective.vue'),
         },
+        {
+            name: 'InvoiceInVehicle',
+            path: 'vehicle',
+            meta: {
+                title: 'vehicle',
+                icon: 'directions_car',
+            },
+            component: () => import('src/pages/InvoiceIn/Card/InvoiceInVehicle.vue'),
+        },
         {
             name: 'InvoiceInLog',
             path: 'log',

test/cypress/integration/invoiceIn/invoiceInSummary.spec.js

@@ -1,7 +1,100 @@
 describe('InvoiceInSummary', () => {
+    const url = '/#/invoice-in/1/summary';
+
+    const selectors = {
+        supplierLink: '[data-cy="invoiceInSummary_supplier"]',
+        vehicleLink: '[data-cy="invoiceInSummary_vehicle"]',
+        descriptorOpenSummaryBtn: '.q-menu .descriptor [data-cy="openSummaryBtn"]',
+        descriptorGoToSummaryBtn: '.q-menu .descriptor [data-cy="goToSummaryBtn"]',
+        summaryGoToSummaryBtn: '.summaryHeader [data-cy="goToSummaryBtn"]',
+        supplierDescriptorTitle: '[data-cy="vnDescriptor_description"]',
+        vehicleDescriptorTitle: '[data-cy="vnDescriptor_title"]',
+    };
+
+    const sectionSelectors = {
+        basicDataIcon: 'InvoiceInBasicData-menu-item',
+        vatIcon: 'InvoiceInVat-menu-item',
+        dueDayIcon: 'InvoiceInDueDay-menu-item',
+        intrastatIcon: 'InvoiceInIntrastat-menu-item',
+        vehicleIcon: 'InvoiceInVehicle-menu-item',
+        logIcon: 'InvoiceInLog-menu-item',
+    };
+
+    const titlesLinks = {
+        basicData: '[data-cy="basicDataTitleLink"].link',
+        vat: '[data-cy="vatTitleLink"].link',
+        dueDay: '[data-cy="dueDayTitleLink"].link',
+        intrastat: '[data-cy="intrastatTitleLink"].link',
+        vehicle: '[data-cy="vehicleTitleLink"].link',
+    };
+
+    const basePath = 'invoice-in/1/';
+    const sectionRegex = {
+        basicData: new RegExp(`${basePath}basic-data`),
+        vat: new RegExp(`${basePath}vat`),
+        dueDay: new RegExp(`${basePath}due-day`),
+        intrastat: new RegExp(`${basePath}intrastat`),
+        vehicle: new RegExp(`${basePath}vehicle`),
+        log: new RegExp(`${basePath}log`),
+    };
+
+    const supplierSummaryUrlRegex = /supplier\/\d+\/summary/;
+    const vehicleSummaryUrlRegex = /vehicle\/\d+\/summary/;
     beforeEach(() => {
         cy.login('administrative');
-        cy.visit('/#/invoice-in/3/summary');
+        cy.visit(url);
+    });
+
+    it('Should redirect to the corresponding section when clicking on the icons in the left menu', () => {
+        cy.dataCy(sectionSelectors.basicDataIcon).click();
+        cy.location().should('match', sectionRegex.basicData);
+
+        cy.visit(url);
+        cy.dataCy(sectionSelectors.vatIcon).click();
+        cy.location().should('match', sectionRegex.vat);
+
+        cy.visit(url);
+        cy.dataCy(sectionSelectors.dueDayIcon).click();
+        cy.location().should('match', sectionRegex.dueDay);
+
+        cy.visit(url);
+        cy.dataCy(sectionSelectors.intrastatIcon).click();
+        cy.location().should('match', sectionRegex.intrastat);
+
+        cy.visit(url);
+        cy.dataCy(sectionSelectors.vehicleIcon).click();
+        cy.location().should('match', sectionRegex.vehicle);
+
+        cy.visit(url);
+        cy.dataCy(sectionSelectors.logIcon).click();
+        cy.location().should('match', sectionRegex.log);
+    });
+
+    describe('Title links redirections', () => {
+        it('Should redirect to invoiceIn basic-data when clicking on basic-data title link', () => {
+            cy.get(titlesLinks.basicData).click();
+            cy.location().should('match', sectionRegex.basicData);
+        });
+
+        it('Should redirect to invoiceIn vat when clicking on vat title link', () => {
+            cy.get(titlesLinks.vat).click();
+            cy.location().should('match', sectionRegex.vat);
+        });
+
+        it('Should redirect to invoiceIn due-day when clicking on due-day title link', () => {
+            cy.get(titlesLinks.dueDay).click();
+            cy.location().should('match', sectionRegex.dueDay);
+        });
+
+        it('Should redirect to invoiceIn intrastat when clicking on intrastat title link', () => {
+            cy.get(titlesLinks.intrastat).click();
+            cy.location().should('match', sectionRegex.intrastat);
+        });
+
+        it('Should redirect to invoiceIn vehicle when clicking on vehicle title link', () => {
+            cy.get(titlesLinks.vehicle).click();
+            cy.location().should('match', sectionRegex.vehicle);
+        });
     });
 
     it('should booking and unbooking the invoice properly', () => {
@@ -9,16 +102,53 @@ describe('InvoiceInSummary', () => {
         cy.dataCy('invoiceInSummary_book').click();
         cy.dataCy('VnConfirm_confirm').click();
         cy.validateCheckbox(checkbox);
+        cy.selectDescriptorOption();
+        cy.dataCy('VnConfirm_confirm').click();
     });
 
-    it('should open the supplier descriptor popup', () => {
-        cy.intercept('GET', /Suppliers\/\d+/).as('getSupplier');
-        cy.dataCy('invoiceInSummary_supplier').then(($el) => {
-            const description = $el.text().trim();
-            $el.click();
-            cy.wait('@getSupplier').then(() =>
-                cy.validateDescriptor({ description, popup: true }),
-            );
+    describe('Supplier pop-ups', () => {
+        it('Should redirect to the supplier summary from the supplier descriptor pop-up', () => {
+            cy.checkRedirectionFromPopUp({
+                selectorToClick: selectors.supplierLink,
+                steps: [selectors.descriptorGoToSummaryBtn],
+                expectedUrlRegex: supplierSummaryUrlRegex,
+                expectedTextSelector: selectors.supplierDescriptorTitle,
+            });
+        });
+
+        it('Should redirect to the supplier summary from summary pop-up from the supplier descriptor pop-up', () => {
+            cy.checkRedirectionFromPopUp({
+                selectorToClick: selectors.supplierLink,
+                steps: [
+                    selectors.descriptorOpenSummaryBtn,
+                    selectors.summaryGoToSummaryBtn,
+                ],
+                expectedUrlRegex: supplierSummaryUrlRegex,
+                expectedTextSelector: selectors.supplierDescriptorTitle,
+            });
+        });
+    });
+
+    describe('Vehicle pop-ups', () => {
+        it('Should redirect to the vehicle summary from the vehicle descriptor pop-up', () => {
+            cy.checkRedirectionFromPopUp({
+                selectorToClick: selectors.vehicleLink,
+                steps: [selectors.descriptorGoToSummaryBtn],
+                expectedUrlRegex: vehicleSummaryUrlRegex,
+                expectedTextSelector: selectors.vehicleDescriptorTitle,
+            });
+        });
+
+        it('Should redirect to the vehicle summary from summary pop-up from the vehicle descriptor pop-up', () => {
+            cy.checkRedirectionFromPopUp({
+                selectorToClick: selectors.vehicleLink,
+                steps: [
+                    selectors.descriptorOpenSummaryBtn,
+                    selectors.summaryGoToSummaryBtn,
+                ],
+                expectedUrlRegex: vehicleSummaryUrlRegex,
+                expectedTextSelector: selectors.vehicleDescriptorTitle,
+            });
         });
     });
 });

test/cypress/integration/invoiceIn/invoiceInVehicle.spec.js

@@ -0,0 +1,57 @@
+describe('InvoiceInVehicle', () => {
+    const selectors = {
+        tableActionUnlink: 'tableAction-0',
+        firstVehicleLink:
+            'tr:first-child > [data-col-field="vehicleFk"] > .no-padding > .link',
+        descriptorOpenSummaryBtn: '.q-menu .descriptor [data-cy="openSummaryBtn"]',
+        descriptorGoToSummaryBtn: '.q-menu .descriptor [data-cy="goToSummaryBtn"]',
+        summaryGoToSummaryBtn: '.summaryHeader [data-cy="goToSummaryBtn"]',
+        descriptorTitle: '[data-cy="vnDescriptor_title"]',
+    };
+    const vehicleSummaryUrlRegex = /vehicle\/\d+\/summary/;
+
+    beforeEach(() => {
+        cy.login('administrative');
+        cy.visit(`/#/invoice-in/1/vehicle`);
+    });
+
+    it('should link vehicle to the invoice', () => {
+        const data = {
+            Vehicle: { val: '2222-IMK', type: 'select' },
+            Amount: { val: 125 },
+        };
+        cy.addBtnClick();
+        cy.fillInForm(data);
+        cy.dataCy('FormModelPopup_save').click();
+        cy.checkNotification('Data created');
+    });
+
+    it('should unlink vehicle to the invoice', () => {
+        cy.dataCy(selectors.tableActionUnlink).last().click();
+        cy.clickConfirm();
+        cy.checkNotification('Unlinked vehicle');
+    });
+
+    describe('Vehicle pop-ups', () => {
+        it('Should redirect to the vehicle summary from the vehicle descriptor pop-up', () => {
+            cy.checkRedirectionFromPopUp({
+                selectorToClick: selectors.firstVehicleLink,
+                steps: [selectors.descriptorGoToSummaryBtn],
+                expectedUrlRegex: vehicleSummaryUrlRegex,
+                expectedTextSelector: selectors.descriptorTitle,
+            });
+        });
+
+        it('Should redirect to the vehicle summary from summary pop-up from the vehicle descriptor pop-up', () => {
+            cy.checkRedirectionFromPopUp({
+                selectorToClick: selectors.firstVehicleLink,
+                steps: [
+                    selectors.descriptorOpenSummaryBtn,
+                    selectors.summaryGoToSummaryBtn,
+                ],
+                expectedUrlRegex: vehicleSummaryUrlRegex,
+                expectedTextSelector: selectors.descriptorTitle,
+            });
+        });
+    });
+});