Polishing

2023-03-10 12:49:08 +01:00 · 2023-03-10 12:49:08 +01:00 · ad4e85b080
parent f7c9da6ad1
commit ad4e85b080
9 changed files with 219 additions and 157 deletions
--- 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>
--- 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>
--- 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>
--- 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>
--- 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',
--- 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>
--- 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;
 }
--- 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>
+</i18n>
--- 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
                >