Merge pull request '#6904 fix customer section' (!204) from 6904-fixCustomerSection into dev

Reviewed-on: #204 Reviewed-by: Javi Gallego <jgallego@verdnatura.es> Reviewed-by: JAVIER SEGARRA MARTINEZ <jsegarra@verdnatura.es>
2024-02-26 14:24:05 +00:00 · 2024-02-26 14:24:05 +00:00 · a1a342a107
parent 5ac5f91847 f90c3d7474
commit a1a342a107
5 changed files with 96 additions and 50 deletions
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@ -1,8 +1,9 @@
 <script setup>
 import { computed } from 'vue';
 import { dashIfEmpty } from 'src/filters';
-
+import { useI18n } from 'vue-i18n';
 import { useClipboard } from 'src/composables/useClipboard';
+
 const $props = defineProps({
    label: { type: String, default: null },
    value: {
@ -13,8 +14,9 @@ const $props = defineProps({
    dash: { type: Boolean, default: true },
    copy: { type: Boolean, default: false },
 });
-const isBooleanValue = computed(() => typeof $props.value === 'boolean');

+const { t } = useI18n();
+const isBooleanValue = computed(() => typeof $props.value === 'boolean');
 const { copyText } = useClipboard();

 function copyValueText() {
@ -54,22 +56,29 @@ function copyValueText() {
            </slot>
        </div>
        <div class="info" v-if="$props.info">
-            <QIcon name="info">
+            <QIcon name="info" class="cursor-pointer" size="xs" color="grey">
                <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
                    {{ $props.info }}
                </QTooltip>
            </QIcon>
        </div>
        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
-            <QIcon name="Content_Copy" color="primary" />
+            <QIcon name="Content_Copy" color="primary">
+                <QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
+            </QIcon>
        </div>
    </div>
 </template>

 <style lang="scss" scoped>
+.vn-label-value:hover .copy {
+    visibility: visible;
+    cursor: pointer;
+}
 .copy {
-    &:hover {
-        cursor: pointer;
-    }
+    visibility: hidden;
+}
+.info {
+    margin-left: 5px;
 }
 </style>
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@ -70,6 +70,7 @@ export default {
        system: 'System',
        fieldRequired: 'Field required',
        allowedFilesText: 'Allowed file types: { allowedContentTypes }',
+        copyClipboard: 'Copy on clipboard',
    },
    errors: {
        statusUnauthorized: 'Access denied',
@ -166,7 +167,7 @@ export default {
            fiscalAddress: 'Fiscal address',
            fiscalData: 'Fiscal data',
            billingData: 'Billing data',
-            consignee: 'Consignee',
+            consignee: 'Default consignee',
            businessData: 'Business data',
            financialData: 'Financial data',
            customerId: 'Customer ID',
@ -219,6 +220,8 @@ export default {
            recoverySince: 'Recovery since',
            businessType: 'Business Type',
            city: 'City',
+            rating: 'Rating',
+            recommendCredit: 'Recommended credit',
        },
        basicData: {
            socialName: 'Fiscal name',
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@ -70,6 +70,7 @@ export default {
        system: 'Sistema',
        fieldRequired: 'Campo requerido',
        allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
+        copyClipboard: 'Copiar en portapapeles',
    },
    errors: {
        statusUnauthorized: 'Acceso denegado',
@ -165,7 +166,7 @@ export default {
            fiscalAddress: 'Dirección fiscal',
            fiscalData: 'Datos fiscales',
            billingData: 'Datos de facturación',
-            consignee: 'Consignatario',
+            consignee: 'Consignatario pred.',
            businessData: 'Datos comerciales',
            financialData: 'Datos financieros',
            customerId: 'ID cliente',
@ -218,6 +219,8 @@ export default {
            recoverySince: 'Recobro desde',
            businessType: 'Tipo de negocio',
            city: 'Población',
+            rating: 'Clasificación',
+            recommendCredit: 'Crédito recomendado',
        },
        basicData: {
            socialName: 'Nombre fiscal',
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@ -122,7 +122,7 @@ const creditWarning = computed(() => {
            </QCard>
            <QCard class="vn-one">
                <a class="header link" :href="clientUrl + `fiscal-data`" link>
-                    {{ t('customer.summary.fiscalAddress') }}
+                    {{ t('customer.summary.fiscalData') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <VnLv
@ -235,7 +235,8 @@ const creditWarning = computed(() => {
                    link
                >
                    {{ t('customer.summary.financialData') }}
-                    <QIcon name="vn:grafana" color="primary" />
+                    <QIcon name="open_in_new" color="primary" />
+                    <!-- Pendiente de añadir el icono <QIcon name="vn:grafana" color="primary" /> -->
                </a>
                <VnLv
                    :label="t('customer.summary.risk')"
@ -276,7 +277,30 @@ const creditWarning = computed(() => {
                    :label="t('customer.summary.recoverySince')"
                    :value="toDate(entity.recovery.started)"
                />
+                <VnLv
+                    :label="t('customer.summary.rating')"
+                    :value="entity.rating"
+                    :info="t('valueInfo', { min: 1, max: 20 })"
+                />
+
+                <VnLv
+                    :label="t('customer.summary.recommendCredit')"
+                    :value="entity.recommendedCredit"
+                />
            </QCard>
        </template>
    </CardSummary>
 </template>
+<style lang="scss" scoped>
+@media (min-width: $breakpoint-md) {
+    .summary .vn-one {
+        min-width: 300px;
+    }
+}
+</style>
+<i18n>
+en:
+    valueInfo: Value from {min} to {max}. The higher the better value
+es:
+    valueInfo: Valor de {min} a {max}. Cuanto más alto, mejor valor
+</i18n>
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@ -13,7 +13,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';

 import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
-import { dashIfEmpty, toDate } from 'src/filters';
+import { toDate } from 'src/filters';

 const { t } = useI18n();
 const router = useRouter();
@ -477,17 +477,11 @@ const stopEventPropagation = (event, col) => {
    event.stopPropagation();
 };

-const navigateToTravelId = (id) => {
-    router.push({ path: `/customer/${id}` });
-};
+const navigateToTravelId = (id) => router.push({ path: `/customer/${id}` });

-const selectCustomerId = (id) => {
-    selectedCustomerId.value = id;
-};
+const selectCustomerId = (id) => (selectedCustomerId.value = id);

-const selectSalesPersonId = (id) => {
-    selectedSalesPersonId.value = id;
-};
+const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
 </script>

 <template>
@ -521,37 +515,50 @@ const selectSalesPersonId = (id) => {
            class="full-width q-mt-md"
            row-key="id"
            :visible-columns="visibleColumns"
+            @row-click="(evt, row, id) => navigateToTravelId(row.id)"
        >
-            <template #body="props">
-                <QTr
-                    :props="props"
-                    @click="navigateToTravelId(props.row.id)"
-                    class="cursor-pointer"
-                >
-                    <QTd
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                        @click="stopEventPropagation($event, col)"
+            <template #body-cell="{ col, value }">
+                <QTd @click="stopEventPropagation($event, col)">
+                    {{ value }}
+                </QTd>
+            </template>
+            <template #body-cell-id="props">
+                <QTd @click="stopEventPropagation($event, props.col)">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
                    >
-                        <component
-                            :is="tableColumnComponents[col.name].component"
-                            class="col-content"
-                            v-bind="tableColumnComponents[col.name].props(props)"
-                            @click="tableColumnComponents[col.name].event(props)"
-                        >
-                            {{ dashIfEmpty(col.value) }}
-                            <WorkerDescriptorProxy
-                                v-if="props.row.salesPersonFk"
-                                :id="selectedSalesPersonId"
-                            />
-                            <CustomerDescriptorProxy
-                                v-if="props.row.id"
-                                :id="selectedCustomerId"
-                            />
-                        </component>
-                    </QTd>
-                </QTr>
+                        <CustomerDescriptorProxy :id="props.row.id" />
+                        {{ props.row.id }}
+                    </component>
+                </QTd>
+            </template>
+            <template #body-cell-salesPersonFk="props">
+                <QTd @click="stopEventPropagation($event, props.col)">
+                    <component
+                        v-if="props.row.salesPerson"
+                        class="col-content"
+                        :is="tableColumnComponents[props.col.name].component"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    >
+                        <WorkerDescriptorProxy :id="props.row.salesPersonFk" />
+                        {{ props.row.salesPerson }}
+                    </component>
+                    <span class="col-content" v-else>-</span>
+                </QTd>
+            </template>
+            <template #body-cell-actions="props">
+                <QTd @click="stopEventPropagation($event, props.col)">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    />
+                </QTd>
            </template>
        </QTable>
    </QPage>