From 3467f30b124a2a9bb14ad55dbfd6b002ae139aef Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 3 May 2024 08:40:53 +0200
Subject: [PATCH] refactor: refs #7274 changed
 CustomerNotificationsCampaignConsumption template and logic

---
 .../Notifications/CustomerNotifications.vue   | 38 ++------
 ...stomerNotificationsCampaignConsumption.vue | 89 +++++++++----------
 2 files changed, 50 insertions(+), 77 deletions(-)

diff --git a/src/pages/Customer/Notifications/CustomerNotifications.vue b/src/pages/Customer/Notifications/CustomerNotifications.vue
index 211309dc1..d19b52c2c 100644
--- a/src/pages/Customer/Notifications/CustomerNotifications.vue
+++ b/src/pages/Customer/Notifications/CustomerNotifications.vue
@@ -1,10 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-
 import { QBtn } from 'quasar';
-
 import FetchData from 'components/FetchData.vue';
 import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
 import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
@@ -13,14 +10,10 @@ import { useStateStore } from 'stores/useStateStore';
 import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
 
 const stateStore = useStateStore();
-
 const { t } = useI18n();
-
 const rows = ref([]);
 const selected = ref([]);
 const selectedCustomerId = ref(0);
-const quasar = useQuasar();
-const dataRef = ref(null);
 
 const tableColumnComponents = {
     id: {
@@ -86,19 +79,6 @@ 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>
@@ -117,8 +97,8 @@ const refreshData = async () => {
                     </QTooltip>
                 </QBtn>
             </div>
-        </Teleport></template
-    >
+        </Teleport>
+    </template>
     <FetchData
         :filter="filter"
         @on-fetch="(data) => (rows = data)"
@@ -133,15 +113,11 @@ const refreshData = async () => {
     </QDrawer>
     <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>
+            <CustomerNotificationsCampaignConsumption
+                :selected-rows="selected.length > 0"
+                :clients="selected"
+                :promise="refreshData"
+            />
         </template>
     </VnSubToolbar>
     <QPage class="column items-center q-pa-md">
diff --git a/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue b/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
index 641cdb851..d168aed6c 100644
--- a/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
+++ b/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
@@ -2,7 +2,6 @@
 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';
@@ -19,23 +18,24 @@ const $props = defineProps({
         type: Function,
         required: true,
     },
+    selectedRows: {
+        type: Boolean,
+    },
 });
 
-const { dialogRef } = useDialogPluginComponent();
 const { notify } = useNotify();
 const { t } = useI18n();
 const validationsStore = useValidator();
 const campaignParams = reactive({});
 const moreFields = ref([]);
 
-async function onSubmit() {
+const onSubmit = async () => {
     try {
         const data = {
-            clients: $props.clients._value.map((item) => item.id),
-            from: this.campaignParams.from,
-            to: this.campaignParams.to,
+            clients: $props.clients.map((item) => item.id),
+            from: campaignParams.from,
+            to: campaignParams.to,
         };
-
         const params = JSON.stringify(data);
         await axios.post('ClientConsumptionQueues', { params });
 
@@ -43,7 +43,7 @@ async function onSubmit() {
     } catch (error) {
         notify(error.message, 'negative');
     }
-}
+};
 onMounted(async () => {
     const { models } = validationsStore;
     const properties = models.Item?.properties || {};
@@ -68,44 +68,41 @@ onMounted(async () => {
         :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>
+    <QBtn color="primary" icon="show_chart" :disable="!selectedRows">
+        <QPopupProxy ref="popupProxyRef">
+            <QCard class="column q-pa-md">
+                <span class="text-body1 q-mb-sm">{{ t('Campaign consumption') }}</span>
+                <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"
+                        @click="onSubmit()"
+                    />
+                </div>
+            </QCard>
+        </QPopupProxy>
+        <QTooltip>{{ t('Campaign consumption') }}</QTooltip>
+    </QBtn>
 </template>
 
 <i18n>