refactor: refs #7274 changed CustomerNotificationsCampaignConsumption template and logic

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

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,13 +68,10 @@ 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>
+    <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"
@@ -99,13 +96,13 @@ onMounted(async () => {
                         :label="t('globals.save')"
                         type="submit"
                         color="primary"
-                            v-close-popup
+                        @click="onSubmit()"
                     />
                 </div>
-                </QForm>
-            </QCardSection>
             </QCard>
-    </QDialog>
+        </QPopupProxy>
+        <QTooltip>{{ t('Campaign consumption') }}</QTooltip>
+    </QBtn>
 </template>
 
 <i18n>