From 8a36fc03b840baa95b6de7c30ea1db09164ccd6b Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Thu, 21 Dec 2023 18:59:13 +0100
Subject: [PATCH 1/2] refactor(ticketsms): refs #6259 add vnSms create
 customerSms

---
 src/components/ui/VnAvatar.vue                |   3 +
 src/components/ui/VnSms.vue                   | 118 +++++++++++++++++
 src/composables/useArrayData.js               |   4 +-
 src/i18n/en/index.js                          |   1 +
 src/i18n/es/index.js                          |   1 +
 src/pages/Claim/ClaimList.vue                 |   9 --
 src/pages/Customer/Card/CustomerSms.vue       |  25 ++++
 src/pages/Ticket/Card/TicketSms.vue           | 122 ++----------------
 src/router/modules/customer.js                |  11 +-
 .../__tests__/components/common/VnSms.spec.js |  25 ++++
 10 files changed, 200 insertions(+), 119 deletions(-)
 create mode 100644 src/components/ui/VnSms.vue
 create mode 100644 src/pages/Customer/Card/CustomerSms.vue
 create mode 100644 test/vitest/__tests__/components/common/VnSms.spec.js

diff --git a/src/components/ui/VnAvatar.vue b/src/components/ui/VnAvatar.vue
index b385b684f..85bece243 100644
--- a/src/components/ui/VnAvatar.vue
+++ b/src/components/ui/VnAvatar.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { useSession } from 'src/composables/useSession';
+import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 const $props = defineProps({
     worker: { type: Number, required: true },
     description: { type: String, default: null },
+    clickable: { type: Boolean, default: false },
 });
 const session = useSession();
 const token = session.getToken();
@@ -22,5 +24,6 @@ const token = session.getToken();
                 </p>
             </slot>
         </div>
+        <WorkerDescriptorProxy :v-if="$props.clickable" :id="$props.worker" />
     </div>
 </template>
diff --git a/src/components/ui/VnSms.vue b/src/components/ui/VnSms.vue
new file mode 100644
index 000000000..98eec07a1
--- /dev/null
+++ b/src/components/ui/VnSms.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { onBeforeMount } from 'vue';
+import { date } from 'quasar';
+import { useSession } from 'src/composables/useSession';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnAvatar from '../ui/VnAvatar.vue';
+
+const $props = defineProps({
+    url: { type: String, default: null },
+    where: { type: Object, default: () => {} },
+    body: { type: Object, default: () => {} },
+});
+
+const filter = {
+    fields: ['smsFk'],
+    include: {
+        relation: 'sms',
+        scope: {
+            fields: [
+                'senderFk',
+                'sender',
+                'destination',
+                'message',
+                'statusCode',
+                'status',
+                'created',
+            ],
+            include: {
+                relation: 'sender',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        },
+    },
+};
+
+onBeforeMount(() => (filter.where = $props.where));
+
+function formatNumber(number) {
+    if (number.length <= 10) return number;
+    return number.slice(0, 4) + ' ' + number.slice(4);
+}
+</script>
+
+<template>
+    <div class="column items-center">
+        <div class="list">
+            <VnPaginate
+                :data-key="$props.url"
+                :url="$props.url"
+                :filter="filter"
+                order="smsFk DESC"
+                :offset="100"
+                :limit="5"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard
+                        flat
+                        bordered
+                        class="card q-pa-md"
+                        id="smsCard"
+                        v-for="row of rows"
+                        :key="row.smsFk"
+                    >
+                        <QItem>
+                            <QItemSection side top>
+                                <VnAvatar
+                                    class="cursor-pointer"
+                                    :worker="row.sms.senderFk"
+                                    :title="row.sms.sender.name"
+                                    :clickable="true"
+                                />
+                            </QItemSection>
+                            <QSeparator />
+                            <QItemSection>
+                                <QItemLabel caption>{{
+                                    formatNumber(row.sms.destination)
+                                }}</QItemLabel>
+                                <QItemLabel>{{ row.sms.message }}</QItemLabel>
+                            </QItemSection>
+                            <QItemSection side top class="center">
+                                <QItemLabel caption>{{
+                                    date.formatDate(
+                                        row.sms.created,
+                                        'YYYY-MM-DD HH:mm:ss'
+                                    )
+                                }}</QItemLabel>
+                                <QItemLabel>
+                                    <QChip
+                                        :color="
+                                            row.sms.status == 'OK'
+                                                ? 'positive'
+                                                : 'negative'
+                                        "
+                                    >
+                                        {{ row.sms.status }}
+                                    </QChip>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QCard>
+                </template>
+            </VnPaginate>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+#smsCard {
+    margin-bottom: 2%;
+    max-width: 80em;
+    width: 100%;
+}
+.center {
+    align-items: center;
+}
+</style>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 523340cc9..ba917a2e1 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -155,7 +155,9 @@ export function useArrayData(key, userOptions) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
+                    delete store.filter.where[
+                        Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
+                    ];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 5e7e116c5..9776ac34c 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -114,6 +114,7 @@ export default {
             createCustomer: 'Create customer',
             summary: 'Summary',
             basicData: 'Basic Data',
+            sms: 'Sms',
         },
         list: {
             phone: 'Phone',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 4e570e7b4..3518afee9 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -113,6 +113,7 @@ export default {
             createCustomer: 'Crear cliente',
             basicData: 'Datos básicos',
             summary: 'Resumen',
+            sms: 'Sms',
         },
         list: {
             phone: 'Teléfono',
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index fbf28bc8e..c4a728aa2 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -38,15 +38,6 @@ function viewSummary(id) {
         },
     });
 }
-
-function viewDescriptor(id) {
-    quasar.dialog({
-        component: CustomerDescriptorProxy,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
diff --git a/src/pages/Customer/Card/CustomerSms.vue b/src/pages/Customer/Card/CustomerSms.vue
new file mode 100644
index 000000000..42bd39ec9
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerSms.vue
@@ -0,0 +1,25 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useState } from 'src/composables/useState';
+import VnSms from 'src/components/ui/VnSms.vue';
+
+const route = useRoute();
+const state = useState();
+const user = state.getUser();
+const id = route.params.id;
+
+const where = {
+    clientFk: id,
+    ticketFk: null,
+};
+
+const body = {
+    claimFk: id,
+    workerFk: user.value.id,
+};
+</script>
+<template>
+    <div class="column items-center">
+        <VnSms url="clientSms" :where="where" :body="body" />
+    </div>
+</template>
diff --git a/src/pages/Ticket/Card/TicketSms.vue b/src/pages/Ticket/Card/TicketSms.vue
index b145be50e..0146b93ec 100644
--- a/src/pages/Ticket/Card/TicketSms.vue
+++ b/src/pages/Ticket/Card/TicketSms.vue
@@ -1,118 +1,24 @@
 <script setup>
-import { date } from 'quasar';
-import { computed } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import { useState } from 'src/composables/useState';
+import VnSms from 'src/components/ui/VnSms.vue';
 
-import { useSession } from 'src/composables/useSession';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+const route = useRoute();
+const state = useState();
+const user = state.getUser();
+const id = route.params.id;
 
-const router = useRouter();
-const session = useSession();
-const token = session.getToken();
-
-const entityId = computed(function () {
-    return router.currentRoute.value.params.id;
-});
-
-const filter = {
-    fields: ['ticketFk', 'smsFk'],
-    include: {
-        relation: 'sms',
-        scope: {
-            fields: [
-                'senderFk',
-                'sender',
-                'destination',
-                'message',
-                'statusCode',
-                'status',
-                'created',
-            ],
-            include: {
-                relation: 'sender',
-                scope: {
-                    fields: ['name'],
-                },
-            },
-        },
-    },
-    where: {
-        ticketFk: entityId,
-    },
+const where = {
+    ticketFk: id,
 };
 
-function formatNumer(number) {
-    if (number.length <= 10) return number;
-    return number.slice(0, 4) + ' ' + number.slice(4);
-}
+const body = {
+    claimFk: id,
+    workerFk: user.value.id,
+};
 </script>
-
 <template>
     <div class="column items-center">
-        <div class="list">
-            <VnPaginate
-                data-key="TicketSms"
-                url="TicketSms"
-                :filter="filter"
-                order="smsFk DESC"
-                :offset="100"
-                :limit="5"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <QCard
-                        flat
-                        bordered
-                        class="card q-pa-md"
-                        v-for="row of rows"
-                        :key="row.smsFk"
-                    >
-                        <QItem>
-                            <QItmSection top avatar>
-                                <QItemLabel class="column items-center">
-                                    <QAvatar>
-                                        <QImg
-                                            :src="`/api/Images/user/160x160/${row.sms.senderFk}/download?access_token=${token}`"
-                                            spinner-color="white"
-                                        />
-                                    </QAvatar>
-                                    <span class="link">
-                                        {{ row.sms.sender.name }}
-                                        <WorkerDescriptorProxy :id="row.sms.senderFk" />
-                                    </span>
-                                </QItemLabel>
-                            </QItmSection>
-                            <QSeparator spaced inset="item" />
-                            <QItemSection>
-                                <QItemLabel caption>{{
-                                    formatNumer(row.sms.destination)
-                                }}</QItemLabel>
-                                <QItemLabel>{{ row.sms.message }}</QItemLabel>
-                            </QItemSection>
-                            <QItemSection side top>
-                                <QItemLabel caption>{{
-                                    date.formatDate(
-                                        row.sms.created,
-                                        'YYYY-MM-DD HH:mm:ss'
-                                    )
-                                }}</QItemLabel>
-                                <QItemLabel>
-                                    <QChip
-                                        :color="
-                                            row.sms.status == 'OK'
-                                                ? 'positive'
-                                                : 'negative'
-                                        "
-                                    >
-                                        {{ row.sms.status }}
-                                    </QChip>
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QCard>
-                </template>
-            </VnPaginate>
-        </div>
+        <VnSms url="clientSms" :where="where" :body="body" />
     </div>
 </template>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 832a1e0fd..b8be4f3ac 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'CustomerMain' },
     menus: {
         main: ['CustomerList', 'CustomerPayments'],
-        card: ['CustomerBasicData'],
+        card: ['CustomerBasicData', 'CustomerSms'],
     },
     children: [
         {
@@ -66,6 +66,15 @@ export default {
                     component: () =>
                         import('src/pages/Customer/Card/CustomerBasicData.vue'),
                 },
+                {
+                    path: 'sms',
+                    name: 'CustomerSms',
+                    meta: {
+                        title: 'sms',
+                        icon: 'sms',
+                    },
+                    component: () => import('src/pages/Customer/Card/CustomerSms.vue'),
+                },
             ],
         },
     ],
diff --git a/test/vitest/__tests__/components/common/VnSms.spec.js b/test/vitest/__tests__/components/common/VnSms.spec.js
new file mode 100644
index 000000000..e0f8c1868
--- /dev/null
+++ b/test/vitest/__tests__/components/common/VnSms.spec.js
@@ -0,0 +1,25 @@
+import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import VnSms from 'src/components/ui/VnSms.vue';
+
+describe('VnSms', () => {
+    let vm;
+
+    beforeAll(() => {
+        vm = createWrapper(VnSms, {
+            global: {
+                stubs: ['VnPaginate'],
+                mocks: {},
+            },
+        }).vm;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should format number correctly', () => {
+        const formattedNumber = vm.formatNumber('123456789012');
+        expect(formattedNumber).toBe('1234 56789012');
+    });
+});

From f9b2faf9188bacba8ab639b1aa4132dc90f9ebff Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Tue, 26 Dec 2023 09:53:47 +0100
Subject: [PATCH 2/2] feat(VnSms): refs #6259 unify ticket and customer sms

---
 src/components/ui/VnSms.vue             | 16 ++++------------
 src/pages/Customer/Card/CustomerSms.vue | 10 +---------
 src/pages/Ticket/Card/TicketSms.vue     | 10 +---------
 3 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/components/ui/VnSms.vue b/src/components/ui/VnSms.vue
index 98eec07a1..625fdec77 100644
--- a/src/components/ui/VnSms.vue
+++ b/src/components/ui/VnSms.vue
@@ -1,14 +1,12 @@
 <script setup>
 import { onBeforeMount } from 'vue';
 import { date } from 'quasar';
-import { useSession } from 'src/composables/useSession';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnAvatar from '../ui/VnAvatar.vue';
 
 const $props = defineProps({
     url: { type: String, default: null },
     where: { type: Object, default: () => {} },
-    body: { type: Object, default: () => {} },
 });
 
 const filter = {
@@ -59,8 +57,7 @@ function formatNumber(number) {
                     <QCard
                         flat
                         bordered
-                        class="card q-pa-md"
-                        id="smsCard"
+                        class="card q-pa-md q-mb-sm smsCard"
                         v-for="row of rows"
                         :key="row.smsFk"
                     >
@@ -80,14 +77,14 @@ function formatNumber(number) {
                                 }}</QItemLabel>
                                 <QItemLabel>{{ row.sms.message }}</QItemLabel>
                             </QItemSection>
-                            <QItemSection side top class="center">
+                            <QItemSection side>
                                 <QItemLabel caption>{{
                                     date.formatDate(
                                         row.sms.created,
                                         'YYYY-MM-DD HH:mm:ss'
                                     )
                                 }}</QItemLabel>
-                                <QItemLabel>
+                                <QItemLabel class="row center">
                                     <QChip
                                         :color="
                                             row.sms.status == 'OK'
@@ -107,12 +104,7 @@ function formatNumber(number) {
     </div>
 </template>
 <style lang="scss" scoped>
-#smsCard {
-    margin-bottom: 2%;
-    max-width: 80em;
-    width: 100%;
-}
-.center {
+.q-item__section--side {
     align-items: center;
 }
 </style>
diff --git a/src/pages/Customer/Card/CustomerSms.vue b/src/pages/Customer/Card/CustomerSms.vue
index 42bd39ec9..a567f6b47 100644
--- a/src/pages/Customer/Card/CustomerSms.vue
+++ b/src/pages/Customer/Card/CustomerSms.vue
@@ -1,25 +1,17 @@
 <script setup>
 import { useRoute } from 'vue-router';
-import { useState } from 'src/composables/useState';
 import VnSms from 'src/components/ui/VnSms.vue';
 
 const route = useRoute();
-const state = useState();
-const user = state.getUser();
 const id = route.params.id;
 
 const where = {
     clientFk: id,
     ticketFk: null,
 };
-
-const body = {
-    claimFk: id,
-    workerFk: user.value.id,
-};
 </script>
 <template>
     <div class="column items-center">
-        <VnSms url="clientSms" :where="where" :body="body" />
+        <VnSms url="clientSms" :where="where" />
     </div>
 </template>
diff --git a/src/pages/Ticket/Card/TicketSms.vue b/src/pages/Ticket/Card/TicketSms.vue
index 0146b93ec..ff7de6611 100644
--- a/src/pages/Ticket/Card/TicketSms.vue
+++ b/src/pages/Ticket/Card/TicketSms.vue
@@ -1,24 +1,16 @@
 <script setup>
 import { useRoute } from 'vue-router';
-import { useState } from 'src/composables/useState';
 import VnSms from 'src/components/ui/VnSms.vue';
 
 const route = useRoute();
-const state = useState();
-const user = state.getUser();
 const id = route.params.id;
 
 const where = {
     ticketFk: id,
 };
-
-const body = {
-    claimFk: id,
-    workerFk: user.value.id,
-};
 </script>
 <template>
     <div class="column items-center">
-        <VnSms url="clientSms" :where="where" :body="body" />
+        <VnSms url="clientSms" :where="where" />
     </div>
 </template>