From ad4e85b080e43e19d7aeddef6e67d0d1cb83001e Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Fri, 10 Mar 2023 12:49:08 +0100
Subject: [PATCH] Polishing

---
 src/components/common/SendEmailDialog.vue     |  33 ++--
 src/components/common/VnSmsDialog.vue         |  23 +--
 src/components/ui/VnConfirm.vue               |  53 +++++--
 src/pages/Claim/Card/ClaimDescriptorMenu.vue  |  44 +++---
 src/pages/Claim/Card/ClaimPhoto.vue           |  12 +-
 src/pages/Claim/Card/ClaimRma.vue             |  11 +-
 src/pages/Claim/ClaimRmaList.vue              | 146 ++++++++++--------
 src/pages/Ticket/Card/TicketDescriptor.vue    |   4 +-
 .../Ticket/Card/TicketDescriptorMenu.vue      |  50 ++++--
 9 files changed, 219 insertions(+), 157 deletions(-)

diff --git a/src/components/common/SendEmailDialog.vue b/src/components/common/SendEmailDialog.vue
index 0db0af056..e22b60329 100644
--- a/src/components/common/SendEmailDialog.vue
+++ b/src/components/common/SendEmailDialog.vue
@@ -3,12 +3,13 @@ import { ref } from 'vue';
 import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
-const $props = defineProps({
-    address: {
-        type: String,
-        default: '',
+const props = defineProps({
+    data: {
+        type: Object,
+        requied: true,
+        default: null,
     },
-    send: {
+    promise: {
         type: Function,
         required: true,
     },
@@ -19,24 +20,27 @@ defineEmits(['confirm', ...useDialogPluginComponent.emits]);
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t } = useI18n();
 
-const address = ref($props.address);
+const address = ref(props.data.address);
 const isLoading = ref(false);
 
 async function confirm() {
-    isLoading.value = true;
-    await $props.send(address.value);
-    isLoading.value = false;
+    const response = { address };
 
-    onDialogOK();
+    if (props.promise) {
+        isLoading.value = true;
+        Object.assign(response, props.data);
+        await props.send(response);
+        isLoading.value = false;
+    }
+
+    onDialogOK(response);
 }
 </script>
 <template>
     <q-dialog ref="dialogRef" persistent>
         <q-card class="q-pa-sm">
             <q-card-section class="row items-center q-pb-none">
-                <span class="text-h6 text-grey">{{
-                    t('Send email notification: Send email notification')
-                }}</span>
+                <span class="text-h6 text-grey">{{ t('Send email notification') }}</span>
                 <q-space />
                 <q-btn icon="close" flat round dense v-close-popup />
             </q-card-section>
@@ -53,6 +57,7 @@ async function confirm() {
                     color="primary"
                     :loading="isLoading"
                     @click="confirm"
+                    unelevated
                 />
             </q-card-actions>
         </q-card>
@@ -67,6 +72,6 @@ async function confirm() {
 
 <i18n>
     es:
-        Send email notification: Enviar notificación por correo,
+        Send email notification: Enviar notificación por correo
         The notification will be sent to the following address: La notificación se enviará a la siguiente dirección
 </i18n>
diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index acfb704d6..ff7f075c3 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -26,15 +26,15 @@ const props = defineProps({
         required: false,
         default: 'es',
     },
-    send: {
-        type: Function,
-        required: true,
-    },
     data: {
         type: Object,
         required: false,
         default: null,
     },
+    promise: {
+        type: Function,
+        required: true,
+    },
 });
 
 const maxLength = 160;
@@ -63,14 +63,18 @@ const languages = availableLocales.map((locale) => ({ label: t(locale), value: l
 
 const isLoading = ref(false);
 async function send() {
-    isLoading.value = true;
-    await props.send({
+    const response = {
         destination: phone.value,
         message: message.value,
-    });
-    isLoading.value = false;
+    };
+    if (props.promise) {
+        isLoading.value = true;
+        Object.assign(response, props.data);
+        await props.promise(response);
+        isLoading.value = false;
+    }
 
-    onDialogOK();
+    onDialogOK(response);
 }
 </script>
 
@@ -170,6 +174,7 @@ async function send() {
                     @click="send()"
                     :loading="isLoading"
                     color="primary"
+                    unelevated
                 />
             </q-card-actions>
         </q-card>
diff --git a/src/components/ui/VnConfirm.vue b/src/components/ui/VnConfirm.vue
index 1b92477eb..26ebbdc79 100644
--- a/src/components/ui/VnConfirm.vue
+++ b/src/components/ui/VnConfirm.vue
@@ -10,7 +10,7 @@ const props = defineProps({
         type: String,
         default: null,
     },
-    question: {
+    title: {
         type: String,
         default: null,
     },
@@ -18,15 +18,34 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    data: {
+        type: Object,
+        required: false,
+        default: null,
+    },
+    promise: {
+        type: Function,
+        required: false,
+        default: null,
+    },
 });
 
 defineEmits(['confirm', ...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 
-const question = props.question || t('question');
-const message = props.message || t('message');
+const title = props.title || t('Confirm');
+const message = props.message || t('Are you sure you want to continue?');
 const isLoading = ref(false);
+
+async function confirm() {
+    isLoading.value = true;
+    if (props.promise) {
+        await props.promise(props.data);
+    }
+    isLoading.value = false;
+    onDialogOK(props.data);
+}
 </script>
 <template>
     <q-dialog ref="dialogRef" persistent>
@@ -39,20 +58,26 @@ const isLoading = ref(false);
                     size="xl"
                     v-if="icon"
                 />
-                <span class="text-h6 text-grey">{{ message }}</span>
+                <span class="text-h6 text-grey">{{ title }}</span>
                 <q-space />
-                <q-btn icon="close" flat round dense v-close-popup />
+                <q-btn icon="close" :disable="isLoading" flat round dense v-close-popup />
             </q-card-section>
             <q-card-section class="row items-center">
-                {{ question }}
+                {{ message }}
             </q-card-section>
             <q-card-actions align="right">
-                <q-btn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <q-btn
+                    :label="t('globals.cancel')"
+                    color="primary"
+                    :disable="isLoading"
+                    flat
+                    v-close-popup
+                />
                 <q-btn
                     :label="t('globals.confirm')"
                     color="primary"
                     :loading="isLoading"
-                    @click="onDialogOK()"
+                    @click="confirm()"
                 />
             </q-card-actions>
         </q-card>
@@ -66,13 +91,7 @@ const isLoading = ref(false);
 </style>
 
 <i18n>
-    "en": {
-        "question": "Are you sure you want to continue?",
-        "message": "Confirm"
-    }
-
-    "es": {
-        "question": "¿Seguro que quieres continuar?",
-        "message": "Confirmar"
-    }
+es:
+    Confirm: Confirmar
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
 </i18n>
diff --git a/src/pages/Claim/Card/ClaimDescriptorMenu.vue b/src/pages/Claim/Card/ClaimDescriptorMenu.vue
index 4753fab3a..bd1efe0ce 100644
--- a/src/pages/Claim/Card/ClaimDescriptorMenu.vue
+++ b/src/pages/Claim/Card/ClaimDescriptorMenu.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { usePrintService } from 'composables/usePrintService';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
 
 const $props = defineProps({
     claim: {
@@ -33,13 +34,15 @@ function confirmPickupOrder() {
     quasar.dialog({
         component: SendEmailDialog,
         componentProps: {
-            address: customer.email,
+            data: {
+                address: customer.email,
+            },
             send: sendPickupOrder,
         },
     });
 }
 
-function sendPickupOrder(address) {
+function sendPickupOrder({ address }) {
     const id = claim.value.id;
     const customer = claim.value.client;
     return sendEmail(`Claims/${id}/claim-pickup-email`, {
@@ -48,16 +51,26 @@ function sendPickupOrder(address) {
     });
 }
 
-const showConfirmDialog = ref(false);
-async function deleteClaim() {
+function confirmRemove() {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('confirmDeletion'),
+                message: t('confirmDeletionMessage'),
+                promise: remove,
+            },
+        })
+        .onOk(async () => await router.push({ name: 'ClaimList' }));
+}
+
+async function remove() {
     const id = claim.value.id;
     await axios.delete(`Claims/${id}`);
     quasar.notify({
         message: t('globals.dataDeleted'),
-        type: 'positive',
-        icon: 'check',
+        type: 'positive'
     });
-    await router.push({ name: 'ClaimList' });
 }
 </script>
 <template>
@@ -87,27 +100,12 @@ async function deleteClaim() {
         </q-menu>
     </q-item>
     <q-separator />
-    <q-item @click="showConfirmDialog = true" v-ripple clickable>
+    <q-item @click="confirmRemove()" v-ripple clickable>
         <q-item-section avatar>
             <q-icon name="delete" />
         </q-item-section>
         <q-item-section>{{ t('deleteClaim') }}</q-item-section>
     </q-item>
-
-    <q-dialog v-model="showConfirmDialog">
-        <q-card class="q-pa-sm">
-            <q-card-section class="row items-center q-pb-none">
-                <span class="text-h6 text-grey">{{ t('confirmDeletion') }}</span>
-                <q-space />
-                <q-btn icon="close" flat round dense v-close-popup />
-            </q-card-section>
-            <q-card-section class="row items-center">{{ t('confirmDeletionMessage') }}</q-card-section>
-            <q-card-actions align="right">
-                <q-btn :label="t('globals.cancel')" color="primary" flat v-close-popup />
-                <q-btn :label="t('globals.confirm')" color="primary" @click="deleteClaim" />
-            </q-card-actions>
-        </q-card>
-    </q-dialog>
 </template>
 
 <i18n>
diff --git a/src/pages/Claim/Card/ClaimPhoto.vue b/src/pages/Claim/Card/ClaimPhoto.vue
index f825f00d1..385471ef2 100644
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@@ -64,23 +64,23 @@ function openDialog(dmsId) {
     multimediaDialog.value = true;
 }
 
-function viewDeleteDms(dmsId) {
+function viewDeleteDms(index) {
     quasar
         .dialog({
             component: VnConfirm,
             componentProps: {
-                message: t('This file will be deleted'),
+                title: t('This file will be deleted'),
                 icon: 'delete',
+                data: { index },
+                promise: deleteDms,
             },
         })
-        .onOk(() => deleteDms(dmsId));
+        .onOk(() => claimDms.value.splice(index, 1));
 }
 
-async function deleteDms(index) {
+async function deleteDms({ index }) {
     const dmsId = claimDms.value[index].dmsFk;
     await axios.post(`ClaimDms/${dmsId}/removeFile`);
-
-    claimDms.value.splice(index, 1);
     quasar.notify({
         message: t('globals.dataDeleted'),
         type: 'positive',
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index e51de16fd..2c0fdf428 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -69,18 +69,19 @@ function confirmRemove(id) {
     quasar
         .dialog({
             component: VnConfirm,
+            componentProps: {
+                data: { id },
+                promise: remove,
+            },
         })
-        .onOk(() => remove(id));
+        .onOk(async () => await arrayData.refresh());
 }
 
-async function remove(id) {
+async function remove({ id }) {
     await axios.delete(`ClaimRmas/${id}`);
-    await arrayData.refresh();
-
     quasar.notify({
         type: 'positive',
         message: t('globals.rowRemoved'),
-        icon: 'check',
     });
 }
 </script>
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index d4ef1fcf0..2dbe113be 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -43,23 +43,25 @@ function confirm(id) {
     quasar
         .dialog({
             component: VnConfirm,
+            componentProps: {
+                data: { id },
+                promise: remove,
+            },
         })
-        .onOk(() => remove(id));
+        .onOk(async () => await arrayData.refresh());
 }
 
-async function remove(id) {
+async function remove({ id }) {
     await axios.delete(`ClaimRmas/${id}`);
-    await arrayData.refresh();
     quasar.notify({
         type: 'positive',
         message: t('globals.rowRemoved'),
-        icon: 'check',
     });
 }
 </script>
 
 <template>
-    <q-page class="q-pa-md sticky">
+    <q-page class="column items-center q-pa-md sticky">
         <q-page-sticky expand position="top" :offset="[16, 16]">
             <q-card class="card q-pa-md">
                 <q-form @submit="submit">
@@ -79,68 +81,76 @@ async function remove(id) {
                 </q-form>
             </q-card>
         </q-page-sticky>
-        <paginate
-            data-key="ClaimRmaList"
-            url="ClaimRmas"
-            order="id DESC"
-            :offset="50"
-            auto-load
-        >
-            <template #body="{ rows }">
-                <q-card class="card">
-                    <template v-if="isLoading">
-                        <q-item class="q-pa-none items-start">
-                            <q-item-section class="q-pa-md">
-                                <q-list>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
-                                                <q-skeleton />
-                                            </q-item-label>
-                                            <q-item-label
-                                                ><q-skeleton type="text"
-                                            /></q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-item-section>
-                            <q-card-actions vertical class="justify-between">
-                                <q-skeleton type="circle" class="q-mb-md" size="40px" />
-                            </q-card-actions>
-                        </q-item>
-                        <q-separator />
-                    </template>
-                    <template v-for="row of rows" :key="row.id">
-                        <q-item class="q-pa-none items-start">
-                            <q-item-section class="q-pa-md">
-                                <q-list>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>{{
-                                                t('claim.rmaList.code')
-                                            }}</q-item-label>
-                                            <q-item-label>{{ row.code }}</q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-item-section>
-                            <q-card-actions vertical class="justify-between">
-                                <q-btn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="vn:bin"
-                                    @click="confirm(row.id)"
-                                >
-                                    <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
-                                </q-btn>
-                            </q-card-actions>
-                        </q-item>
-                        <q-separator />
-                    </template>
-                </q-card>
-            </template>
-        </paginate>
+        <div class="card-list">
+            <paginate
+                data-key="ClaimRmaList"
+                url="ClaimRmas"
+                order="id DESC"
+                :offset="50"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <q-card class="card">
+                        <template v-if="isLoading">
+                            <q-item class="q-pa-none items-start">
+                                <q-item-section class="q-pa-md">
+                                    <q-list>
+                                        <q-item class="q-pa-none">
+                                            <q-item-section>
+                                                <q-item-label caption>
+                                                    <q-skeleton />
+                                                </q-item-label>
+                                                <q-item-label
+                                                    ><q-skeleton type="text"
+                                                /></q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                    </q-list>
+                                </q-item-section>
+                                <q-card-actions vertical class="justify-between">
+                                    <q-skeleton
+                                        type="circle"
+                                        class="q-mb-md"
+                                        size="40px"
+                                    />
+                                </q-card-actions>
+                            </q-item>
+                            <q-separator />
+                        </template>
+                        <template v-for="row of rows" :key="row.id">
+                            <q-item class="q-pa-none items-start">
+                                <q-item-section class="q-pa-md">
+                                    <q-list>
+                                        <q-item class="q-pa-none">
+                                            <q-item-section>
+                                                <q-item-label caption>{{
+                                                    t('claim.rmaList.code')
+                                                }}</q-item-label>
+                                                <q-item-label>{{
+                                                    row.code
+                                                }}</q-item-label>
+                                            </q-item-section>
+                                        </q-item>
+                                    </q-list>
+                                </q-item-section>
+                                <q-card-actions vertical class="justify-between">
+                                    <q-btn
+                                        flat
+                                        round
+                                        color="primary"
+                                        icon="vn:bin"
+                                        @click="confirm(row.id)"
+                                    >
+                                        <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
+                                    </q-btn>
+                                </q-card-actions>
+                            </q-item>
+                            <q-separator />
+                        </template>
+                    </q-card>
+                </template>
+            </paginate>
+        </div>
     </q-page>
 </template>
 
@@ -149,7 +159,7 @@ async function remove(id) {
     padding-top: 156px;
 }
 
-.card {
+.card-list, .card {
     width: 100%;
     max-width: 60em;
 }
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 91f00d761..33bd9614b 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -33,7 +33,7 @@ const filter = {
         {
             relation: 'client',
             scope: {
-                fields: ['id', 'name', 'salesPersonFk', 'phone', 'mobile'],
+                fields: ['id', 'name', 'salesPersonFk', 'phone', 'mobile', 'email'],
                 include: [
                     {
                         relation: 'user',
@@ -167,4 +167,4 @@ function stateColor(state) {
 <i18n>
 es:
     This ticket is deleted: Este ticket está eliminado
-</i18n>
\ No newline at end of file
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketDescriptorMenu.vue b/src/pages/Ticket/Card/TicketDescriptorMenu.vue
index e7045c6f5..e816ac5af 100644
--- a/src/pages/Ticket/Card/TicketDescriptorMenu.vue
+++ b/src/pages/Ticket/Card/TicketDescriptorMenu.vue
@@ -5,7 +5,7 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
 import { usePrintService } from 'composables/usePrintService';
-// import SendEmailDialog from 'components/common/SendEmailDialog.vue';
+import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import VnSmsDialog from 'components/common/VnSmsDialog.vue';
 import toDate from 'filters/toDate';
@@ -33,7 +33,22 @@ function openDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
     });
 }
 
-function sendDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
+function sendDeliveryNoteConfirmation(type = 'deliveryNote', documentType = 'pdf') {
+    const customer = ticket.value.client;
+    quasar.dialog({
+        component: SendEmailDialog,
+        componentProps: {
+            data: {
+                address: customer.email,
+                type: type,
+                documentType: documentType,
+            },
+            send: sendDeliveryNote,
+        },
+    });
+}
+
+async function sendDeliveryNote({ address, type, documentType }) {
     const id = ticket.value.id;
     const customer = ticket.value.client;
     let pathName = 'delivery-note-email';
@@ -42,15 +57,15 @@ function sendDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
     const path = `Tickets/${id}/${pathName}`;
     return sendEmail(path, {
         recipientId: customer.id,
+        recipient: address,
         type: type,
     });
 }
 
 const shipped = toDate(ticket.value.shipped);
 function showSmsDialog(template, customData) {
-    const ticket = props.ticket;
-    const address = ticket.address;
-    const client = ticket.client;
+    const address = ticket.value.address;
+    const client = ticket.value.client;
     const phone =
         route.params.phone ||
         address.mobile ||
@@ -59,12 +74,11 @@ function showSmsDialog(template, customData) {
         client.phone;
 
     const data = {
-        orderId: ticket.id,
+        orderId: ticket.value.id,
         shipped: shipped,
     };
 
     if (typeof customData === 'object') {
-        console.log('merge');
         Object.assign(data, customData);
     }
 
@@ -74,8 +88,8 @@ function showSmsDialog(template, customData) {
             phone: phone,
             template: template,
             locale: client.user.lang,
-            send: sendSms,
             data: data,
+            promise: sendSms,
         },
     });
 }
@@ -99,8 +113,11 @@ function confirmDelete() {
     quasar
         .dialog({
             component: VnConfirm,
+            componentProps: {
+                promise: remove,
+            },
         })
-        .onOk(() => remove());
+        .onOk(async () => await router.push({ name: 'TicketList' }));
 }
 
 async function remove() {
@@ -115,7 +132,6 @@ async function remove() {
         message: t('You can undo this action within the first hour'),
         icon: 'info',
     });
-    await router.push({ name: 'TicketList' });
 }
 </script>
 <template>
@@ -155,14 +171,22 @@ async function remove() {
         </q-item-section>
         <q-menu anchor="top end" self="top start" auto-close>
             <q-list>
-                <q-item @click="sendDeliveryNote('deliveryNote')" v-ripple clickable>
+                <q-item
+                    @click="sendDeliveryNoteConfirmation('deliveryNote')"
+                    v-ripple
+                    clickable
+                >
                     <q-item-section>{{ t('With prices') }}</q-item-section>
                 </q-item>
-                <q-item @click="sendDeliveryNote('withoutPrices')" v-ripple clickable>
+                <q-item
+                    @click="sendDeliveryNoteConfirmation('withoutPrices')"
+                    v-ripple
+                    clickable
+                >
                     <q-item-section>{{ t('Without prices') }}</q-item-section>
                 </q-item>
                 <q-item
-                    @click="sendDeliveryNote('deliveryNote', 'csv')"
+                    @click="sendDeliveryNoteConfirmation('deliveryNote', 'csv')"
                     v-ripple
                     clickable
                 >