src/components/FormPopup.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const emit = defineEmits(['onDataSaved']);
+const emit = defineEmits(['onSubmit']);
 
 const $props = defineProps({
     title: {
@@ -13,7 +13,7 @@ const $props = defineProps({
         type: String,
         default: '',
     },
-    defaultSaveButton: {
+    defaultSubmitButton: {
         type: Boolean,
         default: true,
     },
@@ -21,6 +21,10 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    customSubmitButtonLabel: {
+        type: String,
+        default: '',
+    },
 });
 
 const { t } = useI18n();
@@ -28,8 +32,8 @@ const { t } = useI18n();
 const closeButton = ref(null);
 const isLoading = ref(false);
 
-const onDataSaved = (dataSaved) => {
+const onSubmit = () => {
-    emit('onDataSaved', dataSaved);
+    emit('onSubmit');
     closeForm();
 };
 
@@ -40,7 +44,7 @@ const closeForm = () => {
 
 <template>
     <QForm
-        @submit="onDataSaved($event)"
+        @submit="onSubmit($event)"
         class="all-pointer-events full-width"
         style="max-width: 800px"
     >
@@ -53,8 +57,8 @@ const closeForm = () => {
             <slot name="form-inputs" />
             <div class="q-mt-lg row justify-end">
                 <QBtn
-                    v-if="defaultSaveButton"
+                    v-if="defaultSubmitButton"
-                    :label="t('globals.save')"
+                    :label="customSubmitButtonLabel || t('globals.save')"
                     type="submit"
                     color="primary"
                     :disabled="isLoading"
@@ -63,7 +67,6 @@ const closeForm = () => {
                 <QBtn
                     v-if="defaultCancelButton"
                     :label="t('globals.cancel')"
-                    type="reset"
                     color="primary"
                     flat
                     class="q-ml-sm"

src/components/TransferInvoiceForm.vue

@@ -6,6 +6,8 @@ import { useRouter } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import FormPopup from './FormPopup.vue';
+
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 
@@ -25,7 +27,6 @@ const transferInvoiceParams = reactive({
     refFk: $props.invoiceOutData?.ref,
 });
 const closeButton = ref(null);
-const isLoading = ref(false);
 const clientsOptions = ref([]);
 const rectificativeTypeOptions = ref([]);
 const siiTypeInvoiceOutsOptions = ref([]);
@@ -74,12 +75,13 @@ const transferInvoice = async () => {
         @on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
         auto-load
     />
-    <QForm @submit="transferInvoice()" class="all-pointer-events">
+    <FormPopup
-        <QCard class="column" style="padding: 32px; z-index: 100">
+        @on-submit="transferInvoice()"
-            <span ref="closeButton" class="close-icon" v-close-popup>
+        :title="t('Transfer invoice')"
-                <QIcon name="close" size="sm" />
+        :custom-submit-button-label="t('Transfer client')"
-            </span>
+        :default-cancel-button="false"
-            <h1 class="title">{{ t('Transfer invoice') }}</h1>
+    >
+        <template #form-inputs>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
@@ -150,17 +152,8 @@ const transferInvoice = async () => {
                     />
                 </div>
             </VnRow>
-            <div class="q-mt-lg row justify-end">
+        </template>
-                <QBtn
+    </FormPopup>
-                    :label="t('Transfer client')"
-                    type="submit"
-                    color="primary"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                />
-            </div>
-        </QCard>
-    </QForm>
 </template>
 
 <i18n>
@@ -173,18 +166,3 @@ es:
     Type: Tipo
     Transferred invoice: Factura transferida
 </i18n>
-
-<style lang="scss" scoped>
-.title {
-    font-size: 17px;
-    font-weight: bold;
-    line-height: 20px;
-}
-
-.close-icon {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    cursor: pointer;
-}
-</style>

src/composables/useVnConfirm.js

@@ -0,0 +1,23 @@
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import { useQuasar } from 'quasar';
+
+export function useSummaryDialog() {
+    const quasar = useQuasar();
+
+    const openConfirmationModal = (title, message, promise, successFn) => {
+        quasar
+            .dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: title,
+                    message: message,
+                    promise: promise,
+                },
+            })
+            .onOk(async () => {
+                if (successFn) successFn();
+            });
+    };
+
+    return { openConfirmationModal };
+}

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -1,12 +1,17 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 
 import TransferInvoiceForm from 'src/components/TransferInvoiceForm.vue';
-import SendInvoiceForm from './SendInvoiceForm.vue';
+import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 
+import useNotify from 'src/composables/useNotify';
 import { useSession } from 'src/composables/useSession';
 import { usePrintService } from 'composables/usePrintService';
+import { useSummaryDialog } from 'composables/useVnConfirm';
+import axios from 'axios';
 
 const $props = defineProps({
     invoiceOutData: {
@@ -15,14 +20,18 @@ const $props = defineProps({
     },
 });
 
+const { notify } = useNotify();
+const router = useRouter();
 const session = useSession();
 const token = session.getToken();
 const { t } = useI18n();
-const { openReport } = usePrintService();
+const { openReport, sendEmail } = usePrintService();
+const { openConfirmationModal } = useSummaryDialog();
+const quasar = useQuasar();
 
 const transferInvoiceDialogRef = ref();
-const sendInvoiceFormRef = ref();
+const invoiceFormType = ref('pdf');
-const invoiceFormType = ref(null);
+const defaultEmailAddress = ref($props.invoiceOutData.client?.email);
 
 const showInvoicePdf = () => {
     const url = `api/InvoiceOuts/${$props.invoiceOutData.id}/download?access_token=${token}`;
@@ -35,9 +44,86 @@ const showInvoiceCsv = () => {
     });
 };
 
-const showSendInvoiceForm = (type) => {
+const showSendInvoiceDialog = (type) => {
     invoiceFormType.value = type;
-    sendInvoiceFormRef.value.show();
+    quasar.dialog({
+        component: SendEmailDialog,
+        componentProps: {
+            data: {
+                address: defaultEmailAddress.value,
+            },
+            promise: sendEmailInvoice,
+        },
+    });
+};
+
+const sendEmailInvoice = async ({ address }) => {
+    try {
+        if (!address) notify(`The email can't be empty`, 'negative');
+
+        if (invoiceFormType.value === 'pdf') {
+            return sendEmail(`InvoiceOuts/${$props.invoiceOutData.ref}/invoice-email`, {
+                recipientId: $props.invoiceOutData.client.id,
+                recipient: address,
+            });
+        } else {
+            return sendEmail(
+                `InvoiceOuts/${$props.invoiceOutData.ref}/invoice-csv-email`,
+                {
+                    recipientId: $props.invoiceOutData.client.id,
+                    recipient: address,
+                }
+            );
+        }
+    } catch (err) {
+        console.error('Error sending email', err);
+    }
+};
+
+const redirectToInvoiceOutList = () => {
+    router.push({ name: 'InvoiceOutList' });
+};
+
+const deleteInvoice = async () => {
+    try {
+        await axios.post(`InvoiceOuts/${$props.invoiceOutData.id}/delete`);
+        notify(t('InvoiceOut deleted'), 'positive');
+    } catch (err) {
+        console.error('Error deleting invoice out', err);
+    }
+};
+
+const bookInvoice = async () => {
+    try {
+        await axios.post(`InvoiceOuts/${$props.invoiceOutData.ref}/book`);
+        notify(t('InvoiceOut booked'), 'positive');
+    } catch (err) {
+        console.error('Error booking invoice out', err);
+    }
+};
+
+const generateInvoicePdf = async () => {
+    try {
+        await axios.post(`InvoiceOuts/${$props.invoiceOutData.id}/createPdf`);
+        notify(t('The invoice PDF document has been regenerated'), 'positive');
+    } catch (err) {
+        console.error('Error generating invoice out pdf', err);
+    }
+};
+
+const refundInvoice = async (withWarehouse) => {
+    try {
+        const params = { ref: $props.invoiceOutData.ref, withWarehouse: withWarehouse };
+        const { data } = await axios.post('InvoiceOuts/refund', params);
+        notify(
+            t('refundInvoiceSuccessMessage', {
+                refundTicket: data[0].id,
+            }),
+            'positive'
+        );
+    } catch (err) {
+        console.error('Error generating invoice out pdf', err);
+    }
 };
 </script>
 
@@ -68,22 +154,53 @@ const showSendInvoiceForm = (type) => {
         </QItemSection>
         <QMenu anchor="top end" self="top start">
             <QList>
-                <QItem v-ripple clickable @click="showSendInvoiceForm()">
+                <QItem v-ripple clickable @click="showSendInvoiceDialog('pdf')">
                     <QItemSection>{{ t('Send PDF') }}</QItemSection>
                 </QItem>
-                <QItem v-ripple clickable @click="showSendInvoiceForm()">
+                <QItem v-ripple clickable @click="showSendInvoiceDialog('csv')">
                     <QItemSection>{{ t('Send CSV') }}</QItemSection>
                 </QItem>
             </QList>
         </QMenu>
     </QItem>
-    <QItem v-ripple clickable>
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('Confirm deletion'),
+                t('Are you sure you want to delete this invoice?'),
+                deleteInvoice,
+                redirectToInvoiceOutList
+            )
+        "
+    >
         <QItemSection>{{ t('Delete invoice') }}</QItemSection>
     </QItem>
-    <QItem v-ripple clickable>
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                '',
+                t('Are you sure you want to book this invoice?'),
+                bookInvoice
+            )
+        "
+    >
         <QItemSection>{{ t('Book invoice') }}</QItemSection>
     </QItem>
-    <QItem v-ripple clickable>
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('Generate PDF invoice document'),
+                t('Are you sure you want to generate/regenerate the PDF invoice?'),
+                generateInvoicePdf
+            )
+        "
+    >
         <QItemSection>{{ t('Generate PDF invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
@@ -93,22 +210,22 @@ const showSendInvoiceForm = (type) => {
         </QItemSection>
         <QMenu anchor="top end" self="top start">
             <QList>
-                <QItem v-ripple clickable>
+                <QItem v-ripple clickable @click="refundInvoice(true)">
                     <QItemSection>{{ t('With warehouse') }}</QItemSection>
                 </QItem>
-                <QItem v-ripple clickable>
+                <QItem v-ripple clickable @click="refundInvoice(false)">
                     <QItemSection>{{ t('Without warehouse') }}</QItemSection>
                 </QItem>
             </QList>
         </QMenu>
+        <QTooltip>
+            {{ t('Create a single ticket with all the content of the current invoice') }}
+        </QTooltip>
     </QItem>
 
     <QDialog ref="transferInvoiceDialogRef">
         <TransferInvoiceForm :invoice-out-data="invoiceOutData" />
     </QDialog>
-    <QDialog ref="sendInvoiceFormRef">
-        <SendInvoiceForm />
-    </QDialog>
 </template>
 
 <i18n>
@@ -126,4 +243,18 @@ es:
     Send CSV: Enviar CSV
     With warehouse: Con almacén
     Without warehouse: Sin almacén
+    InvoiceOut deleted: Factura eliminada
+    Confirm deletion: Confirmar eliminación
+    Are you sure you want to delete this invoice?: Estas seguro de eliminar esta factura?
+    Are you sure you want to book this invoice?: Estas seguro de querer asentar esta factura?
+    InvoiceOut booked: Factura asentada
+    Generate PDF invoice document: Generar PDF de la factura
+    Are you sure you want to generate/regenerate the PDF invoice?: ¿Seguro que quieres generar/regenerar el PDF de la factura?
+    The invoice PDF document has been regenerated: El documento PDF de la factura ha sido regenerado
+    Create a single ticket with all the content of the current invoice: Crear un ticket único con todo el contenido de la factura actual
+    refundInvoiceSuccessMessage: Se ha creado el siguiente ticket de abono {refundTicket}
+    The email can't be empty: El email no puede estar vacío
+
+en:
+    refundInvoiceSuccessMessage: The following refund ticket have been created {refundTicket}
 </i18n>