feat: refs #8441 add VehicleInvoiceIn component with invoice management functionality

src/pages/Route/Vehicle/Card/VehicleInvoiceIn.vue

@@ -0,0 +1,143 @@
+<script setup>
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import InvoiceInDescriptorProxy from 'pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import { toDate, toCurrency } from 'src/filters/index';
+import { useRoute } from 'vue-router';
+import { ref, computed } from 'vue';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useI18n } from 'vue-i18n';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const tableRef = ref();
+const { t } = useI18n();
+const route = useRoute();
+const { notify } = useNotify();
+const dataKey = 'VehicleInvoiceIn';
+const { openConfirmationModal } = useVnConfirm();
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'issued',
+        label: t('invoiceIn.list.issued'),
+        columnFilter: {
+            component: 'date',
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.issued)),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'supplierFk',
+        label: t('invoiceIn.list.supplier'),
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Suppliers',
+                fields: ['id', 'name'],
+            },
+        },
+        format: ({supplierName}) => supplierName,
+        columnClass: 'expand',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'supplierRef',
+        label: t('invoiceIn.supplierRef'),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'amount',
+        label: t('invoiceIn.list.amount'),
+        format: ({ amount }) => toCurrency(amount),
+        columnFilter: false,
+        cardVisible: true,
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('vehicle.ticket.unassignInvoice'),
+                icon: 'delete',
+                action: (row) =>
+                    openConfirmationModal(
+                        t('vehicle.ticket.unassignInvoice'),
+                        t('vehicle.ticket.unassignInvoiceConfirmation'),
+                        () => unassignInvoice(row.id),
+                    ),
+                isPrimary: true,
+            },
+        ],
+    },
+]);
+
+async function unassignInvoice(id) {
+    await axios.delete(`VehicleInvoiceIns/${id}`);
+    notify(t('globals.dataSaved'), 'positive');
+    tableRef.value.reload();
+}
+</script>
+
+<template>
+    <VnTable
+        ref="tableRef"
+        :data-key="dataKey"
+        :url="`vehicles/${route.params.id}/getInvoices`"
+        :columns="columns"
+        :order="['issued DESC', 'supplierRef ASC']"
+        :create="{
+            urlCreate: 'VehicleInvoiceIns/assignInvoice',
+            title: t('vehicle.ticket.assignInvoice'),
+            formInitialData: {
+                vehicleFk: parseInt(route.params.id, 10),
+            },
+            onDataSaved: ({ id }) => tableRef.reload(),
+        }"
+        auto-load
+    >
+        <template #column-supplierFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.supplierName }}
+                <SupplierDescriptorProxy :id="row.supplierId" />
+            </span>
+        </template>
+        <template #column-supplierRef="{ row }">
+            <span class="link" @click.stop>
+                {{ row.supplierRef }}
+                <InvoiceInDescriptorProxy :id="row.invoiceInFk" />
+            </span>
+        </template>
+        <template #more-create-dialog="{ data }">
+            <VnSelect
+                url="invoiceIns"
+                :label="t('invoiceIn.supplierRef')"
+                v-model="data.invoiceInFk"
+                :required="true"
+            />
+            <!-- <VnSelect
+                url="vehicles"
+                :label="t('vehicle.numberPlate')"
+                :field="['id', 'numberPlate']"
+                v-model="data.vehicleFk"
+                option-value="id"
+                option-label="numberPlate"
+                :required="true"
+            /> -->
+        </template>
+    </VnTable>
+</template>
+
+<i18n>
+    es:
+        unassignInvoice: Desvincular factura
+        unassignInvoiceConfirmation: Esta factura se desvinculará de este vehículo! ¿Continuar de todas formas?
+    en:
+        unassignInvoice: Unassign invoice
+        unassignInvoiceConfirmation: This invoice will be unassigned from this vehicle! Continue anyway?
+</i18n>

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

@@ -18,3 +18,7 @@ vehicle:
     params:
         vehicleTypeFk: Type
         vehicleStateFk: State
+    ticket:
+        assignInvoice: Assign invoice
+        unassignInvoice: Unassign invoice
+        unassignInvoiceConfirmation: Are you sure you want to unassign the invoice?

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

@@ -18,3 +18,7 @@ vehicle:
     params:
         vehicleTypeFk: Tipo
         vehicleStateFk: Estado
+    ticket:
+        assignInvoice: Asignar factura
+        unassignInvoice: Desasignar factura
+        unassignInvoiceConfirmation: Seguro que quieres desasignar esta factura?

src/pages/Route/locale/en.yml

@@ -16,6 +16,7 @@ route:
         shipped: Shipped
         agencyAgreement: Agency agreement
         agencyModeName: Agency route
+        issued: Issued
     Worker: Worker
     Agency: Agency
     Vehicle: Vehicle

src/pages/Route/locale/es.yml

@@ -16,6 +16,7 @@ route:
         ticketFk: Id ticket
         routeFK: Id ruta
         shipped: Fecha preparación
+        issued: F. emisión
     Worker: Trabajador
     Agency: Agencia
     Vehicle: Vehículo

src/router/modules/route.js

@@ -166,7 +166,7 @@ const vehicleCard = {
     component: () => import('src/pages/Route/Vehicle/Card/VehicleCard.vue'),
     redirect: { name: 'VehicleSummary' },
     meta: {
-        menu: ['VehicleBasicData'],
+        menu: ['VehicleBasicData', 'VehicleInvoiceIn'],
     },
     children: [
         {
@@ -187,6 +187,15 @@ const vehicleCard = {
             },
             component: () => import('src/pages/Route/Vehicle/Card/VehicleBasicData.vue'),
         },
+        {
+            name: 'VehicleInvoiceIn',
+            path: 'invoice-in',
+            meta: {
+                title: 'invoiceIns',
+                icon: 'vn:ticket',
+            },
+            component: () => import('src/pages/Route/Vehicle/Card/VehicleInvoiceIn.vue'),
+        },
     ],
 };