salix-front/src/components/TransferInvoiceForm.vue

<script setup>
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
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 axios from 'axios';
import useNotify from 'src/composables/useNotify.js';

const $props = defineProps({
    invoiceOutData: {
        type: Object,
        default: () => {},
    },
});

const { t } = useI18n();
const router = useRouter();
const { notify } = useNotify();

const transferInvoiceParams = reactive({
    id: $props.invoiceOutData?.id,
    refFk: $props.invoiceOutData?.ref,
});
const closeButton = ref(null);
const isLoading = ref(false);
const clientsOptions = ref([]);
const rectificativeTypeOptions = ref([]);
const siiTypeInvoiceOutsOptions = ref([]);
const invoiceCorrectionTypesOptions = ref([]);

const closeForm = () => {
    if (closeButton.value) closeButton.value.click();
};

const transferInvoice = async () => {
    try {
        const { data } = await axios.post(
            'InvoiceOuts/transferInvoice',
            transferInvoiceParams
        );
        notify(t('Transferred invoice'), 'positive');
        closeForm();
        router.push('InvoiceOutSummary', { id: data.id });
    } catch (err) {
        console.error('Error transfering invoice', err);
    }
};
</script>

<template>
    <FetchData
        url="Clients"
        @on-fetch="(data) => (clientsOptions = data)"
        :filter="{ fields: ['id', 'name'], order: 'id', limit: 30 }"
        auto-load
    />
    <FetchData
        url="CplusRectificationTypes"
        :filter="{ order: 'description' }"
        @on-fetch="(data) => (rectificativeTypeOptions = data)"
        auto-load
    />
    <FetchData
        url="SiiTypeInvoiceOuts"
        :filter="{ where: { code: { like: 'R%' } } }"
        @on-fetch="(data) => (siiTypeInvoiceOutsOptions = data)"
        auto-load
    />
    <FetchData
        url="InvoiceCorrectionTypes"
        @on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
        auto-load
    />
    <QForm @submit="transferInvoice()" class="all-pointer-events">
        <QCard class="column" style="padding: 32px; z-index: 100">
            <span ref="closeButton" class="close-icon" v-close-popup>
                <QIcon name="close" size="sm" />
            </span>
            <h1 class="title">{{ t('Transfer invoice') }}</h1>
            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnSelectFilter
                        :label="t('Client')"
                        :options="clientsOptions"
                        hide-selected
                        option-label="name"
                        option-value="id"
                        v-model="transferInvoiceParams.newClientFk"
                        :required="true"
                    >
                        <template #option="scope">
                            <QItem v-bind="scope.itemProps">
                                <QItemSection>
                                    <QItemLabel>
                                        #{{ scope.opt?.id }} -
                                        {{ scope.opt?.name }}
                                    </QItemLabel>
                                </QItemSection>
                            </QItem>
                        </template>
                    </VnSelectFilter>
                </div>
                <div class="col">
                    <VnSelectFilter
                        :label="t('Rectificative type')"
                        :options="rectificativeTypeOptions"
                        hide-selected
                        option-label="description"
                        option-value="id"
                        v-model="transferInvoiceParams.cplusRectificationTypeFk"
                        :required="true"
                    />
                </div>
            </VnRow>
            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnSelectFilter
                        :label="t('Class')"
                        :options="siiTypeInvoiceOutsOptions"
                        hide-selected
                        option-label="description"
                        option-value="id"
                        v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
                        :required="true"
                    >
                        <template #option="scope">
                            <QItem v-bind="scope.itemProps">
                                <QItemSection>
                                    <QItemLabel>
                                        {{ scope.opt?.code }} -
                                        {{ scope.opt?.description }}
                                    </QItemLabel>
                                </QItemSection>
                            </QItem>
                        </template>
                    </VnSelectFilter>
                </div>
                <div class="col">
                    <VnSelectFilter
                        :label="t('Type')"
                        :options="invoiceCorrectionTypesOptions"
                        hide-selected
                        option-label="description"
                        option-value="id"
                        v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
                        :required="true"
                    />
                </div>
            </VnRow>
            <div class="q-mt-lg row justify-end">
                <QBtn
                    :label="t('Transfer client')"
                    type="submit"
                    color="primary"
                    :disabled="isLoading"
                    :loading="isLoading"
                />
            </div>
        </QCard>
    </QForm>
</template>

<i18n>
es:
    Transfer invoice: Transferir factura
    Transfer client: Transferir cliente
    Client: Cliente
    Rectificative type: Tipo rectificativa
    Class: Clase
    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>