Merge branch 'features/ms_64_extended_list_correcciones' of https://gitea.verdnatura.es/hyervoni/salix-front-mindshore into dev

src/pages/Customer/CustomerExtendedList.vue

@@ -1,11 +1,19 @@
 <script setup>
 import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
+import { QBtn } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
 import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
 
-import { useStateStore } from 'stores/useStateStore';
-import { useArrayData } from 'composables/useArrayData';
-
+const { t } = useI18n();
+const router = useRouter();
 const stateStore = useStateStore();
 
 const arrayData = ref(null);
@@ -16,17 +24,18 @@ onBeforeMount(async () => {
         limit: 0,
     });
     await arrayData.value.fetch({ append: false });
-
     stateStore.rightDrawer = true;
 });
 
 const rows = computed(() => arrayData.value.store.data);
 
+const selectedCustomerId = ref(0);
+
 const tableColumnComponents = {
     id: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectCustomerId(prop.row.id),
     },
     socialName: {
         component: 'span',
@@ -53,46 +62,75 @@ const tableColumnComponents = {
         props: () => {},
         event: () => {},
     },
+    actions: {
+        component: CustomerExtendedListActions,
+        props: (prop) => ({
+            id: prop.row.id,
+        }),
+        event: () => {},
+    },
 };
 
-const columns = ref([
+const columns = computed(() => {
+    return [
         {
             align: 'left',
             field: 'id',
-        label: 'Identifier',
+            label: t('Identifier'),
             name: 'id',
         },
         {
             align: 'left',
             field: 'socialName',
-        label: 'Social name',
+            label: t('Social name'),
             name: 'socialName',
         },
         {
             align: 'left',
             field: 'salesPerson',
-        label: 'Salesperson',
+            label: t('Salesperson'),
             name: 'salesPerson',
         },
         {
             align: 'left',
             field: 'phone',
-        label: 'Phone',
+            label: t('Phone'),
             name: 'phone',
         },
         {
             align: 'left',
             field: 'city',
-        label: 'City',
+            label: t('City'),
             name: 'city',
         },
         {
             align: 'left',
             field: 'email',
-        label: 'Email',
+            label: t('Email'),
             name: 'email',
         },
-]);
+        {
+            align: 'right',
+            field: 'actions',
+            label: '',
+            name: 'actions',
+        },
+    ];
+});
+
+const stopEventPropagation = (event, col) => {
+    if (!['ref', 'id', 'supplier'].includes(col.name)) return;
+    event.preventDefault();
+    event.stopPropagation();
+};
+
+const navigateToTravelId = (id) => {
+    router.push({ path: `/customer/${id}` });
+};
+
+const selectCustomerId = (id) => {
+    selectedCustomerId.value = id;
+};
 </script>
 
 <template>
@@ -111,23 +149,35 @@ const columns = ref([
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
+            :pagination="{ rowsPerPage: 0 }"
             :rows="rows"
+            class="full-width q-mt-md"
             hide-bottom
             row-key="id"
-            :pagination="{ rowsPerPage: 0 }"
-            class="full-width q-mt-md"
         >
-            <template #body-cell="props">
-                <QTd :props="props">
+            <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)"
+                    >
                         <component
-                        :is="tableColumnComponents[props.col.name].component"
+                            :is="tableColumnComponents[col.name].component"
                             class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
+                            v-bind="tableColumnComponents[col.name].props(props)"
+                            @click="tableColumnComponents[col.name].event(props)"
                         >
-                        {{ props.value }}
+                            {{ col.value }}
+                            <CustomerDescriptorProxy :id="selectedCustomerId" />
                         </component>
                     </QTd>
+                </QTr>
             </template>
         </QTable>
     </QPage>
@@ -139,3 +189,13 @@ const columns = ref([
     padding: 6px 6px 6px 6px;
 }
 </style>
+
+<i18n>
+es:
+    Identifier: Identificador
+    Social name: Razón social
+    Salesperson: Comercial
+    Phone: Teléfono
+    City: Población
+    Email: Email
+</i18n>

src/pages/Customer/CustomerExtendedListActions.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { useQuasar } from 'quasar';
+
+import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
+
+const { t } = useI18n();
+const quasar = useQuasar();
+const router = useRouter();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+const redirectToCreateView = () => {
+    router.push({
+        name: 'TicketList',
+        query: {
+            params: JSON.stringify({
+                clientFk: $props.id,
+            }),
+        },
+    });
+};
+
+const viewSummary = () => {
+    quasar.dialog({
+        component: CustomerSummaryDialog,
+        componentProps: {
+            id: $props.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <QIcon @click.stop="redirectToCreateView" color="primary" name="vn:ticket" size="sm">
+        <QTooltip>
+            {{ t('Client ticket list') }}
+        </QTooltip>
+    </QIcon>
+    <QIcon
+        @click.stop="viewSummary"
+        class="q-ml-md"
+        color="primary"
+        name="preview"
+        size="sm"
+    >
+        <QTooltip>
+            {{ t('Preview') }}
+        </QTooltip>
+    </QIcon>
+</template>
+
+<i18n>
+es:
+    Client ticket list: Listado de tickets del cliente
+    Preview: Vista previa
+</i18n>

src/pages/Customer/CustomerExtendedListFilter.vue

@@ -60,8 +60,8 @@ const workers = ref();
                             v-model="params.socialName"
                             @update:model-value="searchFn()"
                             :options="clients"
-                            option-value="id"
-                            option-label="name"
+                            option-value="socialName"
+                            option-label="socialName"
                             emit-value
                             map-options
                             use-input