wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Polishing

This commit is contained in:
Joan Sanchez 2023-03-10 12:49:08 +01:00
parent f7c9da6ad1
commit ad4e85b080
9 changed files with 219 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/common/SendEmailDialog.vue
View File

@ -3,12 +3,13 @@ import { ref } from 'vue';
import { useDialogPluginComponent } from 'quasar'; import { useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const $props = defineProps({ const props = defineProps({
address: { data: {
type: String, type: Object,
default: '', requied: true,
default: null,
}, },
send: { promise: {
type: Function, type: Function,
required: true, required: true,
}, },
@ -19,24 +20,27 @@ defineEmits(['confirm', ...useDialogPluginComponent.emits]);
const { dialogRef, onDialogOK } = useDialogPluginComponent(); const { dialogRef, onDialogOK } = useDialogPluginComponent();
const { t } = useI18n(); const { t } = useI18n();
const address = ref($props.address); const address = ref(props.data.address);
const isLoading = ref(false); const isLoading = ref(false);
async function confirm() { async function confirm() {
isLoading.value = true; const response = { address };
await $props.send(address.value);
isLoading.value = false;
onDialogOK(); if (props.promise) {
isLoading.value = true;
Object.assign(response, props.data);
await props.send(response);
isLoading.value = false;
}
onDialogOK(response);
} }
</script> </script>
<template> <template>
<q-dialog ref="dialogRef" persistent> <q-dialog ref="dialogRef" persistent>
<q-card class="q-pa-sm"> <q-card class="q-pa-sm">
<q-card-section class="row items-center q-pb-none"> <q-card-section class="row items-center q-pb-none">
<span class="text-h6 text-grey">{{ <span class="text-h6 text-grey">{{ t('Send email notification') }}</span>
t('Send email notification: Send email notification')
}}</span>
<q-space /> <q-space />
<q-btn icon="close" flat round dense v-close-popup /> <q-btn icon="close" flat round dense v-close-popup />
</q-card-section> </q-card-section>
@ -53,6 +57,7 @@ async function confirm() {
color="primary" color="primary"
:loading="isLoading" :loading="isLoading"
@click="confirm" @click="confirm"
unelevated
/> />
</q-card-actions> </q-card-actions>
</q-card> </q-card>
@ -67,6 +72,6 @@ async function confirm() {
<i18n> <i18n>
es: 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 The notification will be sent to the following address: La notificación se enviará a la siguiente dirección
</i18n> </i18n>

23
src/components/common/VnSmsDialog.vue
View File

@ -26,15 +26,15 @@ const props = defineProps({
required: false, required: false,
default: 'es', default: 'es',
}, },
send: {
type: Function,
required: true,
},
data: { data: {
type: Object, type: Object,
required: false, required: false,
default: null, default: null,
}, },
promise: {
type: Function,
required: true,
},
}); });
const maxLength = 160; const maxLength = 160;
@ -63,14 +63,18 @@ const languages = availableLocales.map((locale) => ({ label: t(locale), value: l
const isLoading = ref(false); const isLoading = ref(false);
async function send() { async function send() {
isLoading.value = true; const response = {
await props.send({
destination: phone.value, destination: phone.value,
message: message.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> </script>
@ -170,6 +174,7 @@ async function send() {
@click="send()" @click="send()"
:loading="isLoading" :loading="isLoading"
color="primary" color="primary"
unelevated
/> />
</q-card-actions> </q-card-actions>
</q-card> </q-card>

53
src/components/ui/VnConfirm.vue
View File

@ -10,7 +10,7 @@ const props = defineProps({
type: String, type: String,
default: null, default: null,
}, },
question: { title: {
type: String, type: String,
default: null, default: null,
}, },
@ -18,15 +18,34 @@ const props = defineProps({
type: String, type: String,
default: null, default: null,
}, },
data: {
type: Object,
required: false,
default: null,
},
promise: {
type: Function,
required: false,
default: null,
},
}); });
defineEmits(['confirm', ...useDialogPluginComponent.emits]); defineEmits(['confirm', ...useDialogPluginComponent.emits]);
const { dialogRef, onDialogOK } = useDialogPluginComponent(); const { dialogRef, onDialogOK } = useDialogPluginComponent();
const question = props.question || t('question'); const title = props.title || t('Confirm');
const message = props.message || t('message'); const message = props.message || t('Are you sure you want to continue?');
const isLoading = ref(false); 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> </script>
<template> <template>
<q-dialog ref="dialogRef" persistent> <q-dialog ref="dialogRef" persistent>
@ -39,20 +58,26 @@ const isLoading = ref(false);
size="xl" size="xl"
v-if="icon" v-if="icon"
/> />
<span class="text-h6 text-grey">{{ message }}</span> <span class="text-h6 text-grey">{{ title }}</span>
<q-space /> <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>
<q-card-section class="row items-center"> <q-card-section class="row items-center">
{{ question }} {{ message }}
</q-card-section> </q-card-section>
<q-card-actions align="right"> <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 <q-btn
:label="t('globals.confirm')" :label="t('globals.confirm')"
color="primary" color="primary"
:loading="isLoading" :loading="isLoading"
@click="onDialogOK()" @click="confirm()"
/> />
</q-card-actions> </q-card-actions>
</q-card> </q-card>
@ -66,13 +91,7 @@ const isLoading = ref(false);
</style> </style>
<i18n> <i18n>
"en": { es:
"question": "Are you sure you want to continue?", Confirm: Confirmar
"message": "Confirm" Are you sure you want to continue?: ¿Seguro que quieres continuar?
}
"es": {
"question": "¿Seguro que quieres continuar?",
"message": "Confirmar"
}
</i18n> </i18n>

44
src/pages/Claim/Card/ClaimDescriptorMenu.vue
View File

@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { usePrintService } from 'composables/usePrintService'; 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';
const $props = defineProps({ const $props = defineProps({
claim: { claim: {
@ -33,13 +34,15 @@ function confirmPickupOrder() {
quasar.dialog({ quasar.dialog({
component: SendEmailDialog, component: SendEmailDialog,
componentProps: { componentProps: {
address: customer.email, data: {
address: customer.email,
},
send: sendPickupOrder, send: sendPickupOrder,
}, },
}); });
} }
function sendPickupOrder(address) { function sendPickupOrder({ address }) {
const id = claim.value.id; const id = claim.value.id;
const customer = claim.value.client; const customer = claim.value.client;
return sendEmail(`Claims/${id}/claim-pickup-email`, { return sendEmail(`Claims/${id}/claim-pickup-email`, {
@ -48,16 +51,26 @@ function sendPickupOrder(address) {
}); });
} }
const showConfirmDialog = ref(false); function confirmRemove() {
async function deleteClaim() { 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; const id = claim.value.id;
await axios.delete(`Claims/${id}`); await axios.delete(`Claims/${id}`);
quasar.notify({ quasar.notify({
message: t('globals.dataDeleted'), message: t('globals.dataDeleted'),
type: 'positive', type: 'positive'
icon: 'check',
}); });
await router.push({ name: 'ClaimList' });
} }
</script> </script>
<template> <template>
@ -87,27 +100,12 @@ async function deleteClaim() {
</q-menu> </q-menu>
</q-item> </q-item>
<q-separator /> <q-separator />
<q-item @click="showConfirmDialog = true" v-ripple clickable> <q-item @click="confirmRemove()" v-ripple clickable>
<q-item-section avatar> <q-item-section avatar>
<q-icon name="delete" /> <q-icon name="delete" />
</q-item-section> </q-item-section>
<q-item-section>{{ t('deleteClaim') }}</q-item-section> <q-item-section>{{ t('deleteClaim') }}</q-item-section>
</q-item> </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> </template>
<i18n> <i18n>

12
src/pages/Claim/Card/ClaimPhoto.vue
View File

@ -64,23 +64,23 @@ function openDialog(dmsId) {
multimediaDialog.value = true; multimediaDialog.value = true;
} }
function viewDeleteDms(dmsId) { function viewDeleteDms(index) {
quasar quasar
.dialog({ .dialog({
component: VnConfirm, component: VnConfirm,
componentProps: { componentProps: {
message: t('This file will be deleted'), title: t('This file will be deleted'),
icon: 'delete', 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; const dmsId = claimDms.value[index].dmsFk;
await axios.post(`ClaimDms/${dmsId}/removeFile`); await axios.post(`ClaimDms/${dmsId}/removeFile`);
claimDms.value.splice(index, 1);
quasar.notify({ quasar.notify({
message: t('globals.dataDeleted'), message: t('globals.dataDeleted'),
type: 'positive', type: 'positive',

11
src/pages/Claim/Card/ClaimRma.vue
View File

@ -69,18 +69,19 @@ function confirmRemove(id) {
quasar quasar
.dialog({ .dialog({
component: VnConfirm, 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 axios.delete(`ClaimRmas/${id}`);
await arrayData.refresh();
quasar.notify({ quasar.notify({
type: 'positive', type: 'positive',
message: t('globals.rowRemoved'), message: t('globals.rowRemoved'),
icon: 'check',
}); });
} }
</script> </script>

146
src/pages/Claim/ClaimRmaList.vue
View File

@ -43,23 +43,25 @@ function confirm(id) {
quasar quasar
.dialog({ .dialog({
component: VnConfirm, 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 axios.delete(`ClaimRmas/${id}`);
await arrayData.refresh();
quasar.notify({ quasar.notify({
type: 'positive', type: 'positive',
message: t('globals.rowRemoved'), message: t('globals.rowRemoved'),
icon: 'check',
}); });
} }
</script> </script>
<template> <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-page-sticky expand position="top" :offset="[16, 16]">
<q-card class="card q-pa-md"> <q-card class="card q-pa-md">
<q-form @submit="submit"> <q-form @submit="submit">
@ -79,68 +81,76 @@ async function remove(id) {
</q-form> </q-form>
</q-card> </q-card>
</q-page-sticky> </q-page-sticky>
<paginate <div class="card-list">
data-key="ClaimRmaList" <paginate
url="ClaimRmas" data-key="ClaimRmaList"
order="id DESC" url="ClaimRmas"
:offset="50" order="id DESC"
auto-load :offset="50"
> auto-load
<template #body="{ rows }"> >
<q-card class="card"> <template #body="{ rows }">
<template v-if="isLoading"> <q-card class="card">
<q-item class="q-pa-none items-start"> <template v-if="isLoading">
<q-item-section class="q-pa-md"> <q-item class="q-pa-none items-start">
<q-list> <q-item-section class="q-pa-md">
<q-item class="q-pa-none"> <q-list>
<q-item-section> <q-item class="q-pa-none">
<q-item-label caption> <q-item-section>
<q-skeleton /> <q-item-label caption>
</q-item-label> <q-skeleton />
<q-item-label </q-item-label>
><q-skeleton type="text" <q-item-label
/></q-item-label> ><q-skeleton type="text"
</q-item-section> /></q-item-label>
</q-item> </q-item-section>
</q-list> </q-item>
</q-item-section> </q-list>
<q-card-actions vertical class="justify-between"> </q-item-section>
<q-skeleton type="circle" class="q-mb-md" size="40px" /> <q-card-actions vertical class="justify-between">
</q-card-actions> <q-skeleton
</q-item> type="circle"
<q-separator /> class="q-mb-md"
</template> size="40px"
<template v-for="row of rows" :key="row.id"> />
<q-item class="q-pa-none items-start"> </q-card-actions>
<q-item-section class="q-pa-md"> </q-item>
<q-list> <q-separator />
<q-item class="q-pa-none"> </template>
<q-item-section> <template v-for="row of rows" :key="row.id">
<q-item-label caption>{{ <q-item class="q-pa-none items-start">
t('claim.rmaList.code') <q-item-section class="q-pa-md">
}}</q-item-label> <q-list>
<q-item-label>{{ row.code }}</q-item-label> <q-item class="q-pa-none">
</q-item-section> <q-item-section>
</q-item> <q-item-label caption>{{
</q-list> t('claim.rmaList.code')
</q-item-section> }}</q-item-label>
<q-card-actions vertical class="justify-between"> <q-item-label>{{
<q-btn row.code
flat }}</q-item-label>
round </q-item-section>
color="primary" </q-item>
icon="vn:bin" </q-list>
@click="confirm(row.id)" </q-item-section>
> <q-card-actions vertical class="justify-between">
<q-tooltip>{{ t('globals.remove') }}</q-tooltip> <q-btn
</q-btn> flat
</q-card-actions> round
</q-item> color="primary"
<q-separator /> icon="vn:bin"
</template> @click="confirm(row.id)"
</q-card> >
</template> <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
</paginate> </q-btn>
</q-card-actions>
</q-item>
<q-separator />
</template>
</q-card>
</template>
</paginate>
</div>
</q-page> </q-page>
</template> </template>
@ -149,7 +159,7 @@ async function remove(id) {
padding-top: 156px; padding-top: 156px;
} }
.card { .card-list, .card {
width: 100%; width: 100%;
max-width: 60em; max-width: 60em;
} }

4
src/pages/Ticket/Card/TicketDescriptor.vue
View File

@ -33,7 +33,7 @@ const filter = {
{ {
relation: 'client', relation: 'client',
scope: { scope: {
fields: ['id', 'name', 'salesPersonFk', 'phone', 'mobile'], fields: ['id', 'name', 'salesPersonFk', 'phone', 'mobile', 'email'],
include: [ include: [
{ {
relation: 'user', relation: 'user',
@ -167,4 +167,4 @@ function stateColor(state) {
<i18n> <i18n>
es: es:
This ticket is deleted: Este ticket está eliminado This ticket is deleted: Este ticket está eliminado
</i18n> </i18n>

50
src/pages/Ticket/Card/TicketDescriptorMenu.vue
View File

@ -5,7 +5,7 @@ import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { usePrintService } from 'composables/usePrintService'; 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 VnConfirm from 'components/ui/VnConfirm.vue';
import VnSmsDialog from 'components/common/VnSmsDialog.vue'; import VnSmsDialog from 'components/common/VnSmsDialog.vue';
import toDate from 'filters/toDate'; 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 id = ticket.value.id;
const customer = ticket.value.client; const customer = ticket.value.client;
let pathName = 'delivery-note-email'; let pathName = 'delivery-note-email';
@ -42,15 +57,15 @@ function sendDeliveryNote(type = 'deliveryNote', documentType = 'pdf') {
const path = `Tickets/${id}/${pathName}`; const path = `Tickets/${id}/${pathName}`;
return sendEmail(path, { return sendEmail(path, {
recipientId: customer.id, recipientId: customer.id,
recipient: address,
type: type, type: type,
}); });
} }
const shipped = toDate(ticket.value.shipped); const shipped = toDate(ticket.value.shipped);
function showSmsDialog(template, customData) { function showSmsDialog(template, customData) {
const ticket = props.ticket; const address = ticket.value.address;
const address = ticket.address; const client = ticket.value.client;
const client = ticket.client;
const phone = const phone =
route.params.phone || route.params.phone ||
address.mobile || address.mobile ||
@ -59,12 +74,11 @@ function showSmsDialog(template, customData) {
client.phone; client.phone;
const data = { const data = {
orderId: ticket.id, orderId: ticket.value.id,
shipped: shipped, shipped: shipped,
}; };
if (typeof customData === 'object') { if (typeof customData === 'object') {
console.log('merge');
Object.assign(data, customData); Object.assign(data, customData);
} }
@ -74,8 +88,8 @@ function showSmsDialog(template, customData) {
phone: phone, phone: phone,
template: template, template: template,
locale: client.user.lang, locale: client.user.lang,
send: sendSms,
data: data, data: data,
promise: sendSms,
}, },
}); });
} }
@ -99,8 +113,11 @@ function confirmDelete() {
quasar quasar
.dialog({ .dialog({
component: VnConfirm, component: VnConfirm,
componentProps: {
promise: remove,
},
}) })
.onOk(() => remove()); .onOk(async () => await router.push({ name: 'TicketList' }));
} }
async function remove() { async function remove() {
@ -115,7 +132,6 @@ async function remove() {
message: t('You can undo this action within the first hour'), message: t('You can undo this action within the first hour'),
icon: 'info', icon: 'info',
}); });
await router.push({ name: 'TicketList' });
} }
</script> </script>
<template> <template>
@ -155,14 +171,22 @@ async function remove() {
</q-item-section> </q-item-section>
<q-menu anchor="top end" self="top start" auto-close> <q-menu anchor="top end" self="top start" auto-close>
<q-list> <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-section>{{ t('With prices') }}</q-item-section>
</q-item> </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-section>{{ t('Without prices') }}</q-item-section>
</q-item> </q-item>
<q-item <q-item
@click="sendDeliveryNote('deliveryNote', 'csv')" @click="sendDeliveryNoteConfirmation('deliveryNote', 'csv')"
v-ripple v-ripple
clickable clickable
> >