From 17a0afda737ce9c736d48b120c13b3fbac5433c8 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Thu, 15 Feb 2024 21:42:29 -0500
Subject: [PATCH] Solucion a comentarios 10

---
 src/pages/Customer/Card/CustomerBalance.vue   |  97 ++++---
 src/pages/Customer/Card/CustomerSummary.vue   |   7 +
 src/pages/Customer/CustomerCreate.vue         |  25 +-
 .../components/CustomerSummaryTable.vue       | 247 ++++++++++++++++++
 .../CustomerSummaryTableActions.vue           |  53 ++++
 5 files changed, 387 insertions(+), 42 deletions(-)
 create mode 100644 src/pages/Customer/components/CustomerSummaryTable.vue
 create mode 100644 src/pages/Customer/components/CustomerSummaryTableActions.vue

diff --git a/src/pages/Customer/Card/CustomerBalance.vue b/src/pages/Customer/Card/CustomerBalance.vue
index ca21c3585..7ed90d20e 100644
--- a/src/pages/Customer/Card/CustomerBalance.vue
+++ b/src/pages/Customer/Card/CustomerBalance.vue
@@ -16,6 +16,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 
 const { t } = useI18n();
 const { validate } = useValidator();
@@ -44,28 +45,27 @@ const filter = {
 };
 
 const tableColumnComponents = {
-    payed: {
+    date: {
         component: 'span',
         props: () => {},
         event: () => {},
     },
-    created: {
+    creationDate: {
         component: 'span',
         props: () => {},
         event: () => {},
     },
-    userName: {
+    employee: {
         component: QBtn,
         props: () => ({ flat: true, color: 'blue' }),
         event: () => {},
     },
-    description: {
-        component: QField,
-        attrs: () => ({ readonly: true, dense: true }),
+    reference: {
+        component: 'div',
         props: () => {},
         event: () => {},
     },
-    bankFk: {
+    bank: {
         component: 'span',
         props: () => {},
         event: () => {},
@@ -75,7 +75,7 @@ const tableColumnComponents = {
         props: () => {},
         event: () => {},
     },
-    credit: {
+    havings: {
         component: 'span',
         props: () => {},
         event: () => {},
@@ -85,7 +85,7 @@ const tableColumnComponents = {
         props: () => {},
         event: () => {},
     },
-    isConciliate: {
+    conciliated: {
         component: QCheckbox,
         props: (prop) => ({
             disable: true,
@@ -101,32 +101,32 @@ const columns = computed(() => [
         field: 'payed',
         format: (value) => toDate(value),
         label: t('Date'),
-        name: 'payed',
+        name: 'date',
     },
     {
         align: 'left',
         field: 'created',
         format: (value) => toDateHour(value),
         label: t('Creation date'),
-        name: 'created',
+        name: 'creationDate',
     },
     {
         align: 'left',
         field: 'userName',
         label: t('Employee'),
-        name: 'userName',
+        name: 'employee',
     },
     {
         align: 'left',
         field: 'description',
         label: t('Reference'),
-        name: 'description',
+        name: 'reference',
     },
     {
         align: 'left',
         field: 'bankFk',
         label: t('Bank'),
-        name: 'bankFk',
+        name: 'bank',
     },
     {
         align: 'left',
@@ -139,7 +139,7 @@ const columns = computed(() => [
         field: 'credit',
         format: (value) => toCurrency(value),
         label: t('Havings'),
-        name: 'credit',
+        name: 'havings',
     },
     {
         align: 'left',
@@ -152,7 +152,7 @@ const columns = computed(() => [
         align: 'left',
         field: 'isConciliate',
         label: t('Conciliated'),
-        name: 'isConciliate',
+        name: 'conciliated',
     },
 ]);
 
@@ -237,36 +237,52 @@ const saveFieldValue = async (event) => {
                     >
                         <template
                             v-if="
-                                props.col.name !== 'isConciliate' &&
-                                props.col.name !== 'description'
+                                props.col.name !== 'conciliated' &&
+                                props.col.name !== 'reference'
                             "
                         >
                             {{ props.value }}
                         </template>
 
-                        <template v-if="props.col.name === 'description'" #control>
-                            <div class="self-center full-width no-outline" tabindex="0">
-                                {{ props.value }}
-                            </div>
-                            <QPopupEdit
-                                :key="props.col.name"
-                                label-cancel="Close"
-                                label-set="Save"
-                                v-model="props.field"
-                            >
-                                <VnInput
-                                    @keyup.enter="saveFieldValue(props)"
-                                    autofocus
-                                    clearable
-                                    dense
-                                    v-model="props.row.description"
+                        <template v-if="props.col.name === 'reference'">
+                            <div v-if="props.row.isInvoice">
+                                <QBtn color="blue" dense flat>
+                                    {{ t('bill', { ref: props.value }) }}
+                                </QBtn>
+                                <InvoiceOutDescriptorProxy
+                                    :id="props.row.id"
+                                    v-if="props.col.name === 'reference'"
                                 />
-                            </QPopupEdit>
+                            </div>
+
+                            <div v-else>
+                                <QBtn
+                                    :label="props.value"
+                                    flat
+                                    rounded
+                                    class="dotted-border-btn"
+                                    no-caps
+                                />
+                                <QPopupEdit
+                                    :key="props.col.name"
+                                    label-cancel="Close"
+                                    label-set="Save"
+                                    v-model="props.field"
+                                >
+                                    <VnInput
+                                        @keyup.enter="saveFieldValue(props)"
+                                        autofocus
+                                        clearable
+                                        dense
+                                        v-model="props.row.description"
+                                    />
+                                </QPopupEdit>
+                            </div>
                         </template>
 
                         <WorkerDescriptorProxy
                             :id="props.row.workerFk"
-                            v-if="props.col.name === 'userName'"
+                            v-if="props.col.name === 'employee'"
                         />
                     </component>
                 </QTr>
@@ -318,9 +334,17 @@ const saveFieldValue = async (event) => {
     border-radius: 4px;
     padding: 6px;
 }
+.dotted-border-btn {
+    border: 1px dotted var(--vn-label);
+    &:hover {
+        border: 1px dotted $primary;
+    }
+}
 </style>
 
 <i18n>
+en:
+    bill: 'N/FRA {ref}'
 es:
     Company: Empresa
     Total by company: Total por empresa
@@ -329,6 +353,7 @@ es:
     Creation date: Fecha de creación
     Employee: Empleado
     Reference: Referencia
+    bill: 'N/INV {ref}'
     Bank: Caja
     Debit: Debe
     Havings: Haber
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index c46b8a8de..c35fa3bfa 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -7,6 +7,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+import CustomerSummaryTable from 'src/pages/Customer/components/CustomerSummaryTable.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -277,6 +278,12 @@ const creditWarning = computed(() => {
                     :value="toDate(entity.recovery.started)"
                 />
             </QCard>
+            <QCard>
+                <div class="header">
+                    {{ t('Latest tickets') }}
+                </div>
+                <CustomerSummaryTable />
+            </QCard>
         </template>
     </CardSummary>
 </template>
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 63c90c9df..d57656b3f 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -32,9 +32,8 @@ const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-
-function handleLocation(data, location ) {
-    const { town, code, provinceFk, countryFk } = location ?? {}
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
     data.postcode = code;
     data.city = town;
     data.provinceFk = provinceFk;
@@ -95,7 +94,7 @@ function handleLocation(data, location ) {
                     <div class="col">
                         <QInput
                             :label="t('Business name')"
-                            :rules="validate('Client.socialName')"
+                            :rules="validate('client.socialName')"
                             v-model="data.socialName"
                         />
                     </div>
@@ -104,7 +103,7 @@ function handleLocation(data, location ) {
                     <div class="col">
                         <QInput
                             :label="t('Street')"
-                            :rules="validate('Client.street')"
+                            :rules="validate('client.street')"
                             v-model="data.street"
                         />
                     </div>
@@ -129,7 +128,21 @@ function handleLocation(data, location ) {
                         <QInput v-model="data.userName" :label="t('Web user')" />
                     </div>
                     <div class="col">
-                        <QInput v-model="data.email" :label="t('Email')" />
+                        <QInput
+                            :label="t('Email')"
+                            :rules="validate('client.email')"
+                            clearable
+                            type="email"
+                            v-model="data.email"
+                        >
+                            <template #append>
+                                <QIcon name="info" class="cursor-info">
+                                    <QTooltip>{{
+                                        t('customer.basicData.youCanSaveMultipleEmails')
+                                    }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </QInput>
                     </div>
                 </VnRow>
                 <QCheckbox
diff --git a/src/pages/Customer/components/CustomerSummaryTable.vue b/src/pages/Customer/components/CustomerSummaryTable.vue
new file mode 100644
index 000000000..4857c1d48
--- /dev/null
+++ b/src/pages/Customer/components/CustomerSummaryTable.vue
@@ -0,0 +1,247 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { QBtn, date } from 'quasar';
+
+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 RouteDescriptorProxy from 'src/pages/Route/Card/RouteDescriptorProxy.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const rows = ref([]);
+
+const filter = {
+    include: [
+        {
+            relation: 'ticketState',
+            scope: {
+                fields: ['stateFk', 'code', 'alertLevel'],
+                include: { relation: 'state' },
+            },
+        },
+        { relation: 'invoiceOut', scope: { fields: ['id'] } },
+        { relation: 'agencyMode', scope: { fields: ['name'] } },
+    ],
+    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' }),
+        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(() => [
+    {
+        align: 'left',
+        field: 'id',
+        label: t('Id'),
+        name: 'id',
+    },
+    {
+        align: 'left',
+        field: 'nickname',
+        label: t('Nickname'),
+        name: 'nickname',
+    },
+    {
+        align: 'left',
+        field: (row) => row?.agencyMode?.name,
+        label: t('Agency'),
+        name: 'agency',
+    },
+    {
+        align: 'left',
+        field: 'routeFk',
+        label: t('Route'),
+        name: 'route',
+    },
+    {
+        align: 'left',
+        field: 'packages',
+        label: t('Packages'),
+        name: 'packages',
+    },
+    {
+        align: 'left',
+        field: (row) => date.formatDate(row?.shipped, 'DD/MM/YYYY'),
+        label: t('Date'),
+        name: 'date',
+    },
+    {
+        align: 'left',
+        field: (row) => row?.ticketState?.state?.name,
+        label: t('State'),
+        name: 'state',
+    },
+    {
+        align: 'left',
+        field: 'totalWithVat',
+        label: t('Total'),
+        name: 'total',
+    },
+    {
+        align: 'left',
+        field: 'totalWithVat',
+        label: '',
+        name: 'actions',
+    },
+]);
+
+const setStateColor = (ticket) => {
+    const { ticketState } = ticket;
+    if (!ticketState) return;
+    const codeColorMap = { OK: 'success', FREE: 'notice' };
+    const alertLevelColorMap = { 0: 'alert', 1: 'warning' };
+    if (codeColorMap[ticketState.code]) return codeColorMap[ticketState.code];
+    return alertLevelColorMap[ticketState.alertLevel];
+};
+
+const setTotalPriceColor = (ticket) => {
+    const total = parseInt(ticket.totalWithVat);
+    if (total > 0 && total < 50) return 'warning';
+};
+
+const navigateToticketSummary = (id) => {
+    router.push({
+        name: 'TicketSummary',
+        params: { id },
+    });
+};
+</script>
+
+<template>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="Tickets"
+    />
+    <QTable
+        :columns="columns"
+        :pagination="{ rowsPerPage: 12 }"
+        :rows="rows"
+        class="full-width q-mt-md"
+        row-key="id"
+        v-if="rows?.length"
+    >
+        <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 q-pa-sm"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                    >
+                        <template
+                            v-if="
+                                props.col.name === 'id' ||
+                                props.col.name === 'nickname' ||
+                                props.col.name === 'agency' ||
+                                props.col.name === 'route' ||
+                                props.col.name === 'packages'
+                            "
+                        >
+                            {{ props.value }}
+                        </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>
+                        <CustomerDescriptorProxy
+                            :id="props.row.clientFk"
+                            v-if="props.col.name === 'nickname'"
+                        />
+                        <RouteDescriptorProxy
+                            :id="props.row.routeFk"
+                            v-if="props.col.name === 'route'"
+                        />
+                    </component>
+                </QTr>
+            </QTd>
+        </template>
+    </QTable>
+</template>
+
+<i18n>
+es:
+    Id: Id
+    Nickname: Alias
+    Agency: Agencia
+    Route: Ruta
+    Packages: Bultos
+    Date: Fecha
+    State: Estado
+    Total: Total
+</i18n>
diff --git a/src/pages/Customer/components/CustomerSummaryTableActions.vue b/src/pages/Customer/components/CustomerSummaryTableActions.vue
new file mode 100644
index 000000000..ea5530170
--- /dev/null
+++ b/src/pages/Customer/components/CustomerSummaryTableActions.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import { useQuasar } from 'quasar';
+
+import TicketSummaryDialog from 'src/pages/Ticket/Card/TicketSummaryDialog.vue';
+
+const { t } = useI18n();
+const quasar = useQuasar();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+const viewSummary = () => {
+    quasar.dialog({
+        component: TicketSummaryDialog,
+        componentProps: {
+            id: $props.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <div>
+        <QIcon color="primary" name="vn:lines" size="sm">
+            <QTooltip>
+                {{ t('Go to lines') }}
+            </QTooltip>
+        </QIcon>
+        <QIcon
+            @click.stop="viewSummary"
+            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>