From 76e35cc758f52b06a88fdfaa73a66d8e2e980719 Mon Sep 17 00:00:00 2001
From: jgallego <jgallego@verdnatura.es>
Date: Tue, 12 Nov 2024 07:28:51 +0100
Subject: [PATCH] feat: refs #7346 address ordered

---
 src/pages/InvoiceOut/InvoiceOutList.vue | 172 +++++++++++++++++++-----
 1 file changed, 139 insertions(+), 33 deletions(-)

diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 205f67cd4..728ba9442 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -31,17 +31,24 @@ const MODEL = 'InvoiceOuts';
 const { openReport } = usePrintService();
 const addressOptions = ref([]);
 const selectedOption = ref('ticket');
-
 async function fetchClientAddress(id) {
-    const { data } = await axios.get(`Clients/${id}/addresses`);
+    const { data } = await axios.get(
+        `Clients/${id}/addresses?filter[order]=isActive DESC`
+    );
     addressOptions.value = data;
 }
 
+const exprBuilder = (_, value) => {
+    return {
+        or: [{ code: value }, { description: { like: `%${value}%` } }],
+    };
+};
+
 const columns = computed(() => [
     {
         align: 'center',
         name: 'id',
-        label: t('invoiceOutList.tableVisibleColumns.id'),
+        label: t('invoice id'),
         chip: { condition: () => true },
         isId: true,
         columnFilter: { name: 'search' },
@@ -49,7 +56,7 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'ref',
-        label: t('invoiceOutList.tableVisibleColumns.ref'),
+        label: t('invoiceOut.list.ref'),
         isTitle: true,
         component: 'select',
         attrs: { url: MODEL, optionLabel: 'ref', optionValue: 'id' },
@@ -57,8 +64,8 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'Issued',
-        label: t('invoiceOutList.tableVisibleColumns.issued'),
+        name: 'issued',
+        label: t('invoiceOut.list.issued'),
         component: 'date',
         format: (row) => toDate(row.issued),
         columnField: { component: null },
@@ -66,7 +73,7 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'clientFk',
-        label: t('invoiceOutModule.customer'),
+        label: t('invoiceOut.list.client'),
         cardVisible: true,
         component: 'select',
         attrs: { url: 'Clients', fields: ['id', 'name'] },
@@ -75,7 +82,7 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'companyCode',
-        label: t('invoiceOutModule.company'),
+        label: t('invoiceOut.list.company'),
         cardVisible: true,
         component: 'select',
         attrs: { url: 'Companies', optionLabel: 'code', optionValue: 'id' },
@@ -84,14 +91,14 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'amount',
-        label: t('invoiceOutModule.amount'),
+        label: t('invoiceOut.list.amount'),
         cardVisible: true,
         format: (row) => toCurrency(row.amount),
     },
     {
         align: 'left',
         name: 'created',
-        label: t('invoiceOutList.tableVisibleColumns.created'),
+        label: t('invoiceOut.list.created'),
         component: 'date',
         columnField: { component: null },
         format: (row) => toDate(row.created),
@@ -99,7 +106,7 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'dued',
-        label: t('invoiceOutList.tableVisibleColumns.dueDate'),
+        label: t('invoiceOut.list.dued'),
         component: 'date',
         columnField: { component: null },
         format: (row) => toDate(row.dued),
@@ -109,12 +116,12 @@ const columns = computed(() => [
         name: 'tableActions',
         actions: [
             {
-                title: t('components.smartCard.viewSummary'),
+                title: t('view summary'),
                 icon: 'preview',
                 action: (row) => viewSummary(row.id, InvoiceOutSummary),
             },
             {
-                title: t('DownloadPdf'),
+                title: t('download pdf'),
                 icon: 'vn:ticket',
                 isPrimary: true,
                 action: (row) => openPdf(row.id),
@@ -163,8 +170,8 @@ watchEffect(selectedRows);
 
 <template>
     <VnSearchbar
-        :info="t('youCanSearchByInvoiceReference')"
-        :label="t('searchInvoice')"
+        :info="t('you can search by invoice reference')"
+        :label="t('search invoice')"
         data-key="invoiceOut"
     />
     <RightMenu>
@@ -180,7 +187,7 @@ watchEffect(selectedRows);
                 @click="downloadPdf()"
                 :disable="!hasSelectedCards"
             >
-                <QTooltip>{{ t('globals.downloadPdf') }}</QTooltip>
+                <QTooltip>{{ t('download pdf') }}</QTooltip>
             </QBtn>
         </template>
     </VnSubToolbar>
@@ -190,7 +197,7 @@ watchEffect(selectedRows);
         :url="`${MODEL}/filter`"
         :create="{
             urlCreate: 'InvoiceOuts/createManualInvoice',
-            title: t('createManualInvoice'),
+            title: t('create manual invoice'),
             onDataSaved: ({ id }) => tableRef.redirect(id),
             formInitialData: { active: true },
         }"
@@ -240,7 +247,21 @@ watchEffect(selectedRows);
                                 option-value="id"
                                 @update:model-value="fetchClientAddress"
                                 style="flex: 1"
-                            />
+                            >
+                                <template #option="scope">
+                                    <QItem
+                                        v-bind="scope.itemProps"
+                                        @click="selectedClient(scope.opt)"
+                                    >
+                                        <QItemSection>
+                                            <QItemLabel>
+                                                #{{ scope.opt?.id }} -
+                                                {{ scope.opt?.name }}
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </template>
+                            </VnSelect>
                         </VnRow>
                         <VnRow fixed>
                             <VnRadio
@@ -263,7 +284,21 @@ watchEffect(selectedRows);
                                         option-value="id"
                                         @update:model-value="fetchClientAddress"
                                         :disable="selectedOption !== 'consignatario'"
-                                    />
+                                    >
+                                        <template #option="scope">
+                                            <QItem
+                                                v-bind="scope.itemProps"
+                                                @click="selectedClient(scope.opt)"
+                                            >
+                                                <QItemSection>
+                                                    <QItemLabel>
+                                                        #{{ scope.opt?.id }} -
+                                                        {{ scope.opt?.name }}
+                                                    </QItemLabel>
+                                                </QItemSection>
+                                            </QItem>
+                                        </template>
+                                    </VnSelect>
                                 </div>
                                 <div class="col">
                                     <VnSelect
@@ -276,7 +311,52 @@ watchEffect(selectedRows);
                                             !data.clientFk ||
                                             selectedOption !== 'consignatario'
                                         "
-                                    />
+                                    >
+                                        <template #option="scope">
+                                            <QItem v-bind="scope.itemProps">
+                                                <QItemSection>
+                                                    <QItemLabel
+                                                        :class="{
+                                                            'color-vn-label':
+                                                                !scope.opt?.isActive,
+                                                        }"
+                                                    >
+                                                        {{
+                                                            `${
+                                                                !scope.opt?.isActive
+                                                                    ? t(
+                                                                          'basicData.inactive'
+                                                                      )
+                                                                    : ''
+                                                            } `
+                                                        }}
+                                                        <span>
+                                                            {{
+                                                                scope.opt?.nickname
+                                                            }}</span
+                                                        >
+                                                        <span
+                                                            v-if="
+                                                                scope.opt?.province ||
+                                                                scope.opt?.city ||
+                                                                scope.opt?.street
+                                                            "
+                                                            >, {{ scope.opt?.street }},
+                                                            {{ scope.opt?.city }},
+                                                            {{
+                                                                scope.opt?.province?.name
+                                                            }}
+                                                            -
+                                                            {{
+                                                                scope.opt?.agencyMode
+                                                                    ?.name
+                                                            }}</span
+                                                        >
+                                                    </QItemLabel>
+                                                </QItemSection>
+                                            </QItem>
+                                        </template>
+                                    </VnSelect>
                                 </div>
                             </div>
                         </VnRow>
@@ -287,31 +367,36 @@ watchEffect(selectedRows);
                         <VnSelect
                             url="InvoiceOutSerials"
                             v-model="data.serial"
-                            :label="
-                                t('invoiceOutList.tableVisibleColumns.invoiceOutSerial')
-                            "
+                            :label="t('invoice serial')"
                             :options="invoiceOutSerialsOptions"
                             option-label="description"
                             option-value="code"
-                        />
-                        <VnInputDate
-                            :label="t('invoiceOutList.tableVisibleColumns.dueDate')"
-                            v-model="data.maxShipped"
-                        />
+                            option-filter
+                            :expr-builder="exprBuilder"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{ scope.opt?.code }} -
+                                            {{ scope.opt?.description }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                        <VnInputDate :label="t('due date')" v-model="data.maxShipped" />
                     </VnRow>
                     <VnRow class="row q-col-gutter-xs">
                         <VnSelect
                             url="TaxAreas"
                             v-model="data.taxArea"
-                            :label="t('invoiceOutList.tableVisibleColumns.taxArea')"
+                            :label="t('tax area')"
                             :options="taxAreasOptions"
                             option-label="code"
                             option-value="code"
                         />
-                        <VnInput
-                            v-model="data.reference"
-                            :label="t('invoiceOutList.tableVisibleColumns.ref')"
-                        />
+                        <VnInput v-model="data.reference" :label="t('reference')" />
                     </VnRow>
                 </div>
             </div>
@@ -332,3 +417,24 @@ watchEffect(selectedRows);
     flex: 0.75;
 }
 </style>
+<i18n>
+    en:
+        invoice id: Invoice ID
+        view summary: View Summary
+        download pdf: Download PDF
+        you can search by invoice reference: You can search by invoice reference
+        search invoice: Search Invoice
+        create manual invoice: Create Manual Invoice
+        invoice serial: Invoice Serial
+        tax area: Tax Area
+
+    es:
+        invoice id: ID de factura
+        view summary: Ver resumen
+        download pdf: Descargar PDF
+        you can search by invoice reference: Puedes buscar por referencia de la factura
+        search invoice: Buscar factura
+        create manual invoice: Crear factura manual
+        invoice serial: Serie de factura
+        tax area: Área fiscal
+</i18n>