From 10747d7a4ff49d7057e3d49425e5075871dc2958 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 27 Aug 2024 07:00:28 +0200
Subject: [PATCH] perf: customerSummaryTable

---
 src/components/VnTable/VnTable.vue            |  16 +-
 src/i18n/locale/en.yml                        |   1 +
 src/i18n/locale/es.yml                        |   2 +
 src/pages/Customer/Card/CustomerSummary.vue   |  32 ++-
 .../components/CustomerSummaryTable.vue       | 249 ++++++++----------
 .../CustomerSummaryTableActions.vue           |  52 ----
 6 files changed, 139 insertions(+), 213 deletions(-)
 delete mode 100644 src/pages/Customer/components/CustomerSummaryTableActions.vue

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 6c77d44df..1708f9b6c 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -65,6 +65,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    disableInfiniteScroll: {
+        type: Boolean,
+        default: false,
+    },
     hasSubToolbar: {
         type: Boolean,
         default: true,
@@ -335,11 +339,13 @@ defineExpose({
     <div class="q-px-md">
         <CrudModel
             v-bind="$attrs"
-            :limit="20"
+            :limit="$attrs['limit'] ?? 20"
             ref="CrudModelRef"
             @on-fetch="(...args) => emit('onFetch', ...args)"
             :search-url="searchUrl"
-            :disable-infinite-scroll="isTableMode"
+            :disable-infinite-scroll="
+                $attrs['disableInfiniteScroll'] ? isTableMode : disableInfiniteScroll
+            "
             @save-changes="reload"
             :has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
             :auto-load="hasParams || $attrs['auto-load']"
@@ -486,11 +492,7 @@ defineExpose({
                                 :icon="btn.icon"
                                 class="q-px-sm"
                                 flat
-                                :class="
-                                    btn.isPrimary
-                                        ? 'text-primary-light'
-                                        : 'color-vn-text '
-                                "
+                                :class="'text-primary-light'"
                                 :style="`visibility: ${
                                     (btn.show && btn.show(row)) ?? true
                                         ? 'visible'
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 0c0ede5f7..7bb4dcd64 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -375,6 +375,7 @@ customer:
         averageInvoiced: Average invoiced
         claimRate: Claming rate
         risk: Risk
+        maximumRisk: Solunion's maximum risk
         riskInfo: Invoices minus payments plus orders not yet invoiced
         credit: Credit
         creditInfo: Company's maximum risk
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index e4392627c..bc0934e6d 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -373,6 +373,8 @@ customer:
         priceIncreasingRate: Ratio de incremento de precio
         averageInvoiced: Facturación media
         claimRate: Ratio de reclamaciones
+        maximumRisk: Riesgo máximo asumido por Solunion
+
         risk: Riesgo
         riskInfo: Facturas menos recibos mas pedidos sin facturar
         credit: Crédito
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 15bf19b48..cee8b7c0a 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -2,6 +2,8 @@
 import { computed, ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+
 import { toCurrency, toPercentage, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import { getUrl } from 'src/composables/getUrl';
@@ -40,11 +42,11 @@ const balanceDue = computed(() => {
 const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
 
 const claimRate = computed(() => {
-    return customer.value.claimsRatio.claimingRate;
+    return customer.value.claimsRatio?.claimingRate ?? 0;
 });
 
 const priceIncreasingRate = computed(() => {
-    return customer.value.claimsRatio.priceIncreasing / 100;
+    return customer.value.claimsRatio?.priceIncreasing ?? 0 / 100;
 });
 
 const debtWarning = computed(() => {
@@ -91,7 +93,13 @@ const creditWarning = computed(() => {
                 <VnLv
                     :label="t('customer.summary.salesPerson')"
                     :value="entity?.salesPersonUser?.name"
-                />
+                >
+                    <template #value>
+                        <VnUserLink
+                            :name="entity.salesPersonUser?.name"
+                            :worker-id="entity.salesPersonFk"
+                        /> </template
+                ></VnLv>
                 <VnLv
                     :label="t('customer.summary.contactChannel')"
                     :value="entity?.contactChannel?.name"
@@ -131,7 +139,7 @@ const creditWarning = computed(() => {
                     :url="`#/customer/${entityId}/fiscal-data`"
                     :text="t('customer.summary.fiscalData')"
                 />
-                <VnRow>
+                <VnRow class="block">
                     <VnLv
                         :label="t('customer.summary.isEqualizated')"
                         :value="entity.isEqualizated"
@@ -140,8 +148,8 @@ const creditWarning = computed(() => {
                         :label="t('customer.summary.isActive')"
                         :value="entity.isActive"
                     />
-                </VnRow>
-                <VnRow>
+                    <!-- </VnRow>
+                <VnRow> -->
                     <VnLv
                         :label="t('customer.summary.verifiedData')"
                         :value="entity.isTaxDataChecked"
@@ -150,8 +158,8 @@ const creditWarning = computed(() => {
                         :label="t('customer.summary.hasToInvoice')"
                         :value="entity.hasToInvoice"
                     />
-                </VnRow>
-                <VnRow>
+                    <!-- </VnRow>
+                <VnRow> -->
                     <VnLv
                         :label="t('customer.summary.notifyByEmail')"
                         :value="entity.isToBeMailed"
@@ -170,7 +178,7 @@ const creditWarning = computed(() => {
                 />
                 <VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
                 <VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
-                <VnRow class="q-mt-sm" wrap>
+                <VnRow class="q-mt-sm block">
                     <VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
                     <VnLv
                         :label="t('customer.summary.hasCoreVnl')"
@@ -227,7 +235,6 @@ const creditWarning = computed(() => {
                     :value="toCurrency(entity?.mana?.mana)"
                 />
                 <VnLv
-                    v-if="entity.claimsRatio"
                     :label="t('customer.summary.priceIncreasingRate')"
                     :value="toPercentage(priceIncreasingRate)"
                 />
@@ -236,7 +243,6 @@ const creditWarning = computed(() => {
                     :value="toCurrency(entity?.averageInvoiced?.invoiced)"
                 />
                 <VnLv
-                    v-if="entity.claimsRatio"
                     :label="t('customer.summary.claimRate')"
                     :value="toPercentage(claimRate)"
                 />
@@ -262,12 +268,10 @@ const creditWarning = computed(() => {
                 />
 
                 <VnLv
-                    v-if="entity.creditInsurance"
                     :label="t('customer.summary.securedCredit')"
                     :value="toCurrency(entity.creditInsurance)"
                     :info="t('customer.summary.securedCreditInfo')"
                 />
-
                 <VnLv
                     :label="t('customer.summary.balance')"
                     :value="toCurrency(entity.sumRisk) || toCurrency(0)"
@@ -297,7 +301,7 @@ const creditWarning = computed(() => {
                     :value="entity.recommendedCredit"
                 />
             </QCard>
-            <QCard class="vn-one">
+            <QCard>
                 <VnTitle :text="t('Latest tickets')" />
                 <CustomerSummaryTable />
             </QCard>
diff --git a/src/pages/Customer/components/CustomerSummaryTable.vue b/src/pages/Customer/components/CustomerSummaryTable.vue
index c25870fd8..da310934d 100644
--- a/src/pages/Customer/components/CustomerSummaryTable.vue
+++ b/src/pages/Customer/components/CustomerSummaryTable.vue
@@ -1,22 +1,25 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import { QBtn, date } from 'quasar';
+import { date } from 'quasar';
+import { toDateFormat } from 'src/filters/date.js';
 
 import { toCurrency } from 'src/filters';
 
-import FetchData from 'components/FetchData.vue';
-import CustomerSummaryTableActions from './CustomerSummaryTableActions.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
+
+import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
+// import FetchData from 'components/FetchData.vue';
 import RouteDescriptorProxy from 'src/pages/Route/Card/RouteDescriptorProxy.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-
-const rows = ref([]);
+const { viewSummary } = useSummaryDialog();
 
 const filter = {
     include: [
@@ -32,57 +35,6 @@ const filter = {
     ],
     where: { clientFk: route.params.id },
     order: ['shipped DESC', 'id'],
-    limit: 10,
-};
-
-const tableColumnComponents = {
-    id: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    nickname: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue', noCaps: true }),
-        event: () => {},
-    },
-    agency: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    route: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: () => {},
-    },
-    packages: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    date: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    state: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    total: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    actions: {
-        component: CustomerSummaryTableActions,
-        props: (prop) => ({
-            id: prop.row.id,
-        }),
-        event: () => {},
-    },
 };
 
 const columns = computed(() => [
@@ -94,21 +46,18 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'nickname',
         label: t('Nickname'),
         name: 'nickname',
     },
     {
         align: 'left',
-        field: (row) => row?.agencyMode?.name,
+        format: (row) => row.agencyMode.name,
         label: t('Agency'),
-        name: 'agency',
     },
     {
         align: 'left',
-        field: 'routeFk',
+        name: 'routeFk',
         label: t('Route'),
-        name: 'route',
     },
     {
         align: 'left',
@@ -118,13 +67,12 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: (row) => date.formatDate(row?.shipped, 'DD/MM/YYYY'),
+        format: ({ shipped }) => date.formatDate(shipped, 'DD/MM/YYYY'),
         label: t('Date'),
-        name: 'date',
+        name: 'shipped',
     },
     {
         align: 'left',
-        field: (row) => row?.ticketState?.state?.name,
         label: t('State'),
         name: 'state',
     },
@@ -134,11 +82,26 @@ const columns = computed(() => [
         label: t('Total'),
         name: 'total',
     },
+
     {
-        align: 'left',
-        field: 'totalWithVat',
+        align: 'right',
         label: '',
-        name: 'actions',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Client ticket list'),
+                icon: 'vn:lines',
+                action: ({ id }) =>
+                    router.push({ params: { id }, name: 'TicketSummary' }),
+                isPrimary: true,
+            },
+            {
+                title: t('Client ticket list'),
+                icon: 'preview',
+                isPrimary: true,
+                action: (row) => viewSummary(row.id, TicketSummary),
+            },
+        ],
     },
 ]);
 
@@ -156,83 +119,89 @@ const setTotalPriceColor = (ticket) => {
     if (total > 0 && total < 50) return 'warning';
 };
 
-const navigateToticketSummary = (id) => {
-    router.push({
-        name: 'TicketSummary',
-        params: { id },
-    });
+const setShippedColor = (date) => {
+    const today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    const ticketShipped = new Date(date);
+    ticketShipped.setHours(0, 0, 0, 0);
+
+    const difference = today - ticketShipped;
+
+    if (difference == 0) return 'warning';
+    if (difference < 0) return 'success';
 };
-const commonColumns = (col) =>
-    ['date', 'state', 'total', 'route', 'nickname'].includes(col);
 </script>
 
 <template>
-    <FetchData
+    <VnTable
+        data-key="CustomerTickets"
         :filter="filter"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
         url="Tickets"
-    />
-    <QCard class="vn-one q-py-sm flex justify-between">
-        <QTable
-            :columns="columns"
-            :pagination="{ rowsPerPage: 12 }"
-            :rows="rows"
-            class="full-width"
-            row-key="id"
-        >
-            <template #body-cell="props">
-                <QTd :props="props" @click="navigateToticketSummary(props.row.id)">
-                    <QTr :props="props" class="cursor-pointer">
-                        <component
-                            :is="tableColumnComponents[props.col.name].component"
-                            @click="tableColumnComponents[props.col.name].event(props)"
-                            class="rounded-borders"
-                            v-bind="tableColumnComponents[props.col.name].props(props)"
-                        >
-                            <template v-if="!commonColumns(props.col.name)">
-                                <span>
-                                    {{ props.value }}
-                                </span>
-                            </template>
-                            <template v-if="props.col.name === 'route'">
-                                <span class="link" @click.stop>
-                                    <RouteDescriptorProxy :id="props.row.routeFk" />
-                                    {{ props.value }}
-                                </span>
-                            </template>
-                            <template v-if="props.col.name === 'nickname'">
-                                <span class="link" @click.stop>
-                                    <CustomerDescriptorProxy :id="props.row.clientFk" />
-                                    {{ props.value }}
-                                </span>
-                            </template>
-                            <template v-if="props.col.name === 'date'">
-                                <QBadge class="q-pa-sm" color="warning">
-                                    {{ props.value }}
-                                </QBadge>
-                            </template>
-                            <template v-if="props.col.name === 'state'">
-                                <QBadge :color="setStateColor(props.row)" class="q-pa-sm">
-                                    {{ props.value }}
-                                </QBadge>
-                            </template>
-                            <template v-if="props.col.name === 'total'">
-                                <QBadge
-                                    :color="setTotalPriceColor(props.row)"
-                                    class="q-pa-sm"
-                                    v-if="setTotalPriceColor(props.row)"
-                                >
-                                    {{ toCurrency(props.value) }}
-                                </QBadge>
-                                <div v-else>{{ toCurrency(props.value) }}</div>
-                            </template>
-                        </component>
-                    </QTr>
-                </QTd>
-            </template>
-        </QTable>
-    </QCard>
+        :columns="columns"
+        search-url="tickets"
+        :without-header="true"
+        auto-load
+        order="shipped DESC, id"
+        limit="5"
+    >
+        <template #column-nickname="{ row }">
+            <span class="link">
+                {{ row.nickname }}
+                <TicketDescriptorProxy :id="row.nickname" />
+            </span>
+        </template>
+        <template #column-ticketFk="{ row }">
+            <span class="link">
+                {{ row.ticketFk }}
+                <TicketDescriptorProxy :id="row.ticketFk" />
+            </span>
+        </template>
+
+        <template #column-routeFk="{ row }">
+            <span class="link">
+                {{ row.routeFk }}
+                <RouteDescriptorProxy :id="row.ticketFk" />
+            </span>
+        </template>
+        <template #column-total="{ row }">
+            <QBadge
+                class="q-pa-sm"
+                v-if="setTotalPriceColor(row)"
+                :color="setTotalPriceColor(row)"
+            >
+                <!-- {{ setTotalPriceColor(row) }} -->
+                {{ toCurrency(row.totalWithVat) }}
+            </QBadge>
+            <span v-else> {{ toCurrency(row.totalWithVat) }}</span>
+        </template>
+        <template #column-state="{ row }">
+            <span v-if="row.invoiceOut">
+                <span :class="{ link: row.invoiceOut.ref }">
+                    {{ row.invoiceOut.ref }}
+                    <InvoiceOutDescriptorProxy :id="row.invoiceOut.id" />
+                </span>
+            </span>
+            <QBadge
+                class="q-pa-sm"
+                :color="setStateColor(row)"
+                v-else-if="setStateColor(row)"
+            >
+                {{ row?.ticketState?.state.name }}
+            </QBadge>
+            <span v-else> {{ row?.ticketState?.state.name }}</span>
+        </template>
+        <template #column-shipped="{ row }">
+            <QBadge
+                class="q-pa-sm"
+                :color="setShippedColor(row.shipped)"
+                v-if="setShippedColor(row.shipped)"
+            >
+                {{ toDateFormat(row.shipped) }}
+            </QBadge>
+            <span v-else> {{ toDateFormat(row.shipped) }}</span>
+        </template>
+    </VnTable>
 </template>
 
 <i18n>
diff --git a/src/pages/Customer/components/CustomerSummaryTableActions.vue b/src/pages/Customer/components/CustomerSummaryTableActions.vue
deleted file mode 100644
index 154a37d22..000000000
--- a/src/pages/Customer/components/CustomerSummaryTableActions.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
-
-const { t } = useI18n();
-const router = useRouter();
-
-defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-const { viewSummary } = useSummaryDialog();
-</script>
-
-<template>
-    <div>
-        {{ id }}
-        <QIcon
-            color="primary"
-            name="vn:lines"
-            size="sm"
-            @click.stop="router.push({ params: { id }, name: 'TicketSale' })"
-        >
-            <QTooltip>
-                {{ t('Go to lines') }}
-            </QTooltip>
-        </QIcon>
-        <QIcon
-            @click.stop="viewSummary(id, TicketSummary)"
-            class="q-ml-md"
-            color="primary"
-            name="preview"
-            size="sm"
-        >
-            <QTooltip>
-                {{ t('Preview') }}
-            </QTooltip>
-        </QIcon>
-    </div>
-</template>
-
-<i18n>
-es:
-    Go to lines: Ir a lineas
-    Preview: Vista previa
-</i18n>