From 8f4bd3478b869f247ae7ff0fef0ffe409f4cab1e Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Wed, 20 Dec 2023 10:34:14 -0500
Subject: [PATCH] Se implementa funcionalidades varias del extended list

---
 src/pages/Customer/CustomerExtendedList.vue   | 201 ++++++++++++++++++
 .../Customer/CustomerExtendedListActions.vue  |  64 ++++++
 2 files changed, 265 insertions(+)
 create mode 100644 src/pages/Customer/CustomerExtendedList.vue
 create mode 100644 src/pages/Customer/CustomerExtendedListActions.vue

diff --git a/src/pages/Customer/CustomerExtendedList.vue b/src/pages/Customer/CustomerExtendedList.vue
new file mode 100644
index 000000000..be3463867
--- /dev/null
+++ b/src/pages/Customer/CustomerExtendedList.vue
@@ -0,0 +1,201 @@
+<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';
+
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+
+onBeforeMount(async () => {
+    arrayData.value = useArrayData('CustomerExtendedList', {
+        url: 'Clients/extendedListFilter',
+        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: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectCustomerId(prop.row.id),
+    },
+    socialName: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    salesPerson: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    phone: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    city: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    email: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    actions: {
+        component: CustomerExtendedListActions,
+        props: (prop) => ({
+            id: prop.row.id,
+        }),
+        event: () => {},
+    },
+};
+
+const columns = computed(() => {
+    return [
+        {
+            align: 'left',
+            field: 'id',
+            label: t('Identifier'),
+            name: 'id',
+        },
+        {
+            align: 'left',
+            field: 'socialName',
+            label: t('Social name'),
+            name: 'socialName',
+        },
+        {
+            align: 'left',
+            field: 'salesPerson',
+            label: t('Salesperson'),
+            name: 'salesPerson',
+        },
+        {
+            align: 'left',
+            field: 'phone',
+            label: t('Phone'),
+            name: 'phone',
+        },
+        {
+            align: 'left',
+            field: 'city',
+            label: t('City'),
+            name: 'city',
+        },
+        {
+            align: 'left',
+            field: '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>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <CustomerExtendedListFilter data-key="CustomerExtendedList" />
+        </QScrollArea>
+    </QDrawer>
+
+    <QToolbar class="bg-vn-dark">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+
+    <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"
+        >
+            <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[col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[col.name].props(props)"
+                            @click="tableColumnComponents[col.name].event(props)"
+                        >
+                            {{ col.value }}
+                            <CustomerDescriptorProxy :id="selectedCustomerId" />
+                        </component>
+                    </QTd>
+                </QTr>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    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>
diff --git a/src/pages/Customer/CustomerExtendedListActions.vue b/src/pages/Customer/CustomerExtendedListActions.vue
new file mode 100644
index 000000000..1fec71ffe
--- /dev/null
+++ b/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>