src/pages/Customer/Card/CustomerBalance.vue

@@ -1,15 +1,16 @@
 <script setup>
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import axios from 'axios';
 import { QCheckbox, QBtn, useQuasar } from 'quasar';
 
-import { toCurrency, toDate, toDateHourMinSec } from 'src/filters';
+import { toCurrency, toDate, toDateHourMin } from 'src/filters';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
+import { usePrintService } from 'src/composables/usePrintService';
 
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -18,6 +19,7 @@ import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 
+const { sendEmail } = usePrintService();
 const { t } = useI18n();
 const { validate } = useValidator();
 const quasar = useQuasar();
@@ -28,14 +30,16 @@ const user = state.getUser();
 
 const clientRisks = ref(null);
 const clientRisksRef = ref(null);
+const closeButton = ref(null);
 const companiesOptions = ref([]);
 const companyId = ref(null);
 const receiptsRef = ref(null);
 const rows = ref([]);
+const showDialog = ref(false);
 
 const filterCompanies = { order: ['code'] };
 const params = {
-    clientId: `${route.params.id}`,
+    clientId: route.params.id,
     companyId: user.value.companyFk,
     filter: { limit: 20 },
 };
@@ -93,6 +97,11 @@ const tableColumnComponents = {
         }),
         event: () => {},
     },
+    actions: {
+        component: 'div',
+        props: () => {},
+        event: () => {},
+    },
 };
 
 const columns = computed(() => [
@@ -106,7 +115,7 @@ const columns = computed(() => [
     {
         align: 'left',
         field: 'created',
-        format: (value) => toDateHourMinSec(value),
+        format: (value) => toDateHourMin(value),
         label: t('Creation date'),
         name: 'creationDate',
     },
@@ -131,6 +140,7 @@ const columns = computed(() => [
     {
         align: 'left',
         field: 'debit',
+        format: (value) => toCurrency(value),
         label: t('Debit'),
         name: 'debit',
     },
@@ -154,6 +164,12 @@ const columns = computed(() => [
         label: t('Conciliated'),
         name: 'conciliated',
     },
+    {
+        align: 'left',
+        field: 'totalWithVat',
+        label: '',
+        name: 'actions',
+    },
 ]);
 
 onBeforeMount(() => {
@@ -161,6 +177,15 @@ onBeforeMount(() => {
     companyId.value = user.value.companyFk;
 });
 
+watch(
+    () => route.params.id,
+    (newValue) => {
+        params.clientId = newValue;
+        filter.where.clientFk = newValue;
+        getData();
+    }
+);
+
 const getData = () => {
     receiptsRef.value?.fetch();
     clientRisksRef.value?.fetch();
@@ -194,6 +219,10 @@ const saveFieldValue = async (event) => {
         return err;
     }
 };
+
+const sendEmailAction = () => {
+    sendEmail(`Suppliers/${route.params.id}/campaign-metrics-email`);
+};
 </script>
 
 <template>
@@ -266,6 +295,64 @@ const saveFieldValue = async (event) => {
                             </div>
                         </template>
 
+                        <template
+                            v-if="
+                                props.col.name === 'actions' && props.row.isCompensation
+                            "
+                        >
+                            <QIcon
+                                @click.stop="showDialog = true"
+                                class="q-ml-md"
+                                color="primary"
+                                name="add"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('Send compensation') }}
+                                </QTooltip>
+                            </QIcon>
+
+                            <QDialog v-model="showDialog">
+                                <QCard class="q-pa-sm">
+                                    <QCardSection>
+                                        <span
+                                            ref="closeButton"
+                                            class="flex justify-end color-vn-label"
+                                            v-close-popup
+                                        >
+                                            <QIcon name="close" size="sm" />
+                                        </span>
+                                        <div class="text-h6">
+                                            {{ t('Send compensation') }}
+                                        </div>
+                                    </QCardSection>
+                                    <QCardSection>
+                                        <div>
+                                            {{
+                                                t(
+                                                    'Do you want to report compensation to the client by mail?'
+                                                )
+                                            }}
+                                        </div>
+                                    </QCardSection>
+                                    <QCardActions class="flex justify-end q-mb-sm">
+                                        <QBtn
+                                            :label="t('globals.cancel')"
+                                            color="primary"
+                                            flat
+                                            v-close-popup
+                                        />
+                                        <QBtn
+                                            :label="t('globals.save')"
+                                            @click="sendEmailAction"
+                                            class="q-ml-sm"
+                                            color="primary"
+                                        />
+                                    </QCardActions>
+                                </QCard>
+                            </QDialog>
+                        </template>
+
                         <WorkerDescriptorProxy
                             :id="props.row.workerFk"
                             v-if="props.col.name === 'employee'"
@@ -345,4 +432,6 @@ es:
     Havings: Haber
     Balance: Balance
     Conciliated: Conciliado
+    Send compensation: Enviar compensación
+    Do you want to report compensation to the client by mail?: ¿Desea informar de la compensación al cliente por correo?
 </i18n>