parent
813703ce93
commit
c2ba7bfe22
src/pages/Customer/Notifications
|
@ -1,5 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import { QBtn } from 'quasar';
|
import { QBtn } from 'quasar';
|
||||||
|
@ -9,6 +10,7 @@ import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
|
||||||
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
|
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
|
||||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
|
||||||
|
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
|
|
||||||
|
@ -17,6 +19,8 @@ const { t } = useI18n();
|
||||||
const rows = ref([]);
|
const rows = ref([]);
|
||||||
const selected = ref([]);
|
const selected = ref([]);
|
||||||
const selectedCustomerId = ref(0);
|
const selectedCustomerId = ref(0);
|
||||||
|
const quasar = useQuasar();
|
||||||
|
const dataRef = ref(null);
|
||||||
|
|
||||||
const tableColumnComponents = {
|
const tableColumnComponents = {
|
||||||
id: {
|
id: {
|
||||||
|
@ -82,6 +86,19 @@ const columns = computed(() => [
|
||||||
const selectCustomerId = (id) => {
|
const selectCustomerId = (id) => {
|
||||||
selectedCustomerId.value = id;
|
selectedCustomerId.value = id;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const campaignConsumption = () => {
|
||||||
|
quasar.dialog({
|
||||||
|
component: CustomerNotificationsCampaignConsumption,
|
||||||
|
componentProps: {
|
||||||
|
clients: selected,
|
||||||
|
promise: refreshData,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const refreshData = async () => {
|
||||||
|
await dataRef.value.fetch();
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -114,9 +131,19 @@ const selectCustomerId = (id) => {
|
||||||
<CustomerNotificationsFilter data-key="CustomerNotifications" />
|
<CustomerNotificationsFilter data-key="CustomerNotifications" />
|
||||||
</QScrollArea>
|
</QScrollArea>
|
||||||
</QDrawer>
|
</QDrawer>
|
||||||
|
<VnSubToolbar class="justify-end">
|
||||||
<VnSubToolbar />
|
<template #st-data>
|
||||||
|
<QBtn
|
||||||
|
icon="show_chart"
|
||||||
|
color="primary"
|
||||||
|
class="q-mr-sm"
|
||||||
|
:disabled="!selected.length"
|
||||||
|
@click="campaignConsumption"
|
||||||
|
>
|
||||||
|
<QTooltip>{{ t('Campaign consumption') }}</QTooltip>
|
||||||
|
</QBtn>
|
||||||
|
</template>
|
||||||
|
</VnSubToolbar>
|
||||||
<QPage class="column items-center q-pa-md">
|
<QPage class="column items-center q-pa-md">
|
||||||
<QTable
|
<QTable
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
|
@ -160,4 +187,5 @@ es:
|
||||||
Phone: Teléfono
|
Phone: Teléfono
|
||||||
City: Población
|
City: Población
|
||||||
Email: Email
|
Email: Email
|
||||||
|
Campaign consumption: Consumo campaña
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
|
@ -0,0 +1,126 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { useDialogPluginComponent } from 'quasar';
|
||||||
|
import useNotify from 'src/composables/useNotify';
|
||||||
|
import { useValidator } from 'src/composables/useValidator';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||||
|
import FetchData from 'src/components/FetchData.vue';
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
|
||||||
|
const $props = defineProps({
|
||||||
|
clients: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
promise: {
|
||||||
|
type: Function,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { dialogRef } = useDialogPluginComponent();
|
||||||
|
const { notify } = useNotify();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const validationsStore = useValidator();
|
||||||
|
const campaignParams = reactive({});
|
||||||
|
const moreFields = ref([]);
|
||||||
|
|
||||||
|
async function onSubmit() {
|
||||||
|
try {
|
||||||
|
const data = {
|
||||||
|
clients: $props.clients._value.map((item) => item.id),
|
||||||
|
from: this.campaignParams.from,
|
||||||
|
to: this.campaignParams.to,
|
||||||
|
};
|
||||||
|
|
||||||
|
const params = JSON.stringify(data);
|
||||||
|
await axios.post('ClientConsumptionQueues', { params });
|
||||||
|
|
||||||
|
notify('globals.dataSaved', 'positive');
|
||||||
|
} catch (error) {
|
||||||
|
notify(error.message, 'negative');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted(async () => {
|
||||||
|
const { models } = validationsStore;
|
||||||
|
const properties = models.Item?.properties || {};
|
||||||
|
const _moreFields = ['valentinesDay', 'mothersDay', 'allSaints'];
|
||||||
|
|
||||||
|
_moreFields.forEach((field) => {
|
||||||
|
let prop = properties[field];
|
||||||
|
const label = t(`params.${field}`);
|
||||||
|
moreFields.value.push({
|
||||||
|
name: field,
|
||||||
|
label,
|
||||||
|
type: prop ? prop.type : null,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="Campaigns/latest"
|
||||||
|
@on-fetch="(data) => (campaignsOptions = data)"
|
||||||
|
:filter="{ fields: ['id', 'code', 'dated'], order: 'code ASC', limit: 30 }"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
<QDialog ref="dialogRef">
|
||||||
|
<QCard class="q-pa-md q-mb-md">
|
||||||
|
<QCardSection>
|
||||||
|
<QForm @submit="onSubmit()" class="q-pa-sm">
|
||||||
|
<div>
|
||||||
|
{{ t('Campaign consumption') }}
|
||||||
|
</div>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<QSelect
|
||||||
|
:options="moreFields"
|
||||||
|
v-model="campaignParams.campaign"
|
||||||
|
:label="t('Campaign')"
|
||||||
|
option-label="label"
|
||||||
|
/>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<VnInputDate v-model="campaignParams.from" :label="t('From')" />
|
||||||
|
<VnInputDate v-model="campaignParams.to" :label="t('To')" />
|
||||||
|
</VnRow>
|
||||||
|
<div class="q-mt-lg row justify-end">
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.cancel')"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
class="q-mr-md"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<QBtn
|
||||||
|
:label="t('globals.save')"
|
||||||
|
type="submit"
|
||||||
|
color="primary"
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</QForm>
|
||||||
|
</QCardSection>
|
||||||
|
</QCard>
|
||||||
|
</QDialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
en:
|
||||||
|
params:
|
||||||
|
valentinesDay: Valentine's Day
|
||||||
|
mothersDay: Mother's Day
|
||||||
|
allSaints: All Saints' Day
|
||||||
|
es:
|
||||||
|
params:
|
||||||
|
valentinesDay: Día de San Valentín
|
||||||
|
mothersDay: Día de la Madre
|
||||||
|
allSaints: Día de Todos los Santos
|
||||||
|
Campaign consumption: Consumo campaña
|
||||||
|
Campaign: Campaña
|
||||||
|
From: Desde
|
||||||
|
To: Hasta
|
||||||
|
</i18n>
|
Loading…
Reference in New Issue