fix: campaign button

src/pages/Customer/Notifications/CustomerNotifications.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
 import { QBtn } from 'quasar';
@@ -9,6 +10,7 @@ import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
 import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useStateStore } from 'stores/useStateStore';
+import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
 
 const stateStore = useStateStore();
 
@@ -17,6 +19,8 @@ const { t } = useI18n();
 const rows = ref([]);
 const selected = ref([]);
 const selectedCustomerId = ref(0);
+const quasar = useQuasar();
+const dataRef = ref(null);
 
 const tableColumnComponents = {
     id: {
@@ -82,6 +86,19 @@ const columns = computed(() => [
 const selectCustomerId = (id) => {
     selectedCustomerId.value = id;
 };
+
+const campaignConsumption = () => {
+    quasar.dialog({
+        component: CustomerNotificationsCampaignConsumption,
+        componentProps: {
+            clients: selected,
+            promise: refreshData,
+        },
+    });
+};
+const refreshData = async () => {
+    await dataRef.value.fetch();
+};
 </script>
 
 <template>
@@ -114,9 +131,19 @@ const selectCustomerId = (id) => {
             <CustomerNotificationsFilter data-key="CustomerNotifications" />
         </QScrollArea>
     </QDrawer>
-
-    <VnSubToolbar />
-
+    <VnSubToolbar class="justify-end">
+        <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">
         <QTable
             :columns="columns"
@@ -160,4 +187,5 @@ es:
     Phone: Teléfono
     City: Población
     Email: Email
+    Campaign consumption: Consumo campaña
 </i18n>

src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue

@@ -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>