feat: new ticket payment dialog
This commit is contained in:
parent
788422da93
commit
a80f6f9016
|
|
@ -0,0 +1,306 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
|
||||
import { usePrintService } from 'src/composables/usePrintService';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
|
||||
import FormModelPopup from 'src/components/FormModelPopup.vue';
|
||||
import VnRow from 'src/components/ui/VnRow.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
|
||||
import { useState } from 'src/composables/useState';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { notify } = useNotify();
|
||||
const { sendEmail, openReport } = usePrintService();
|
||||
const { dialogRef } = useDialogPluginComponent();
|
||||
|
||||
const $props = defineProps({
|
||||
formData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
clientId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
promise: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const closeButton = ref(null);
|
||||
const viewReceipt = ref();
|
||||
const shouldSendEmail = ref(false);
|
||||
const maxAmount = ref();
|
||||
const accountingType = ref({});
|
||||
const isCash = ref(false);
|
||||
const formModelRef = ref(false);
|
||||
const amountToReturn = ref();
|
||||
const filterBanks = {
|
||||
fields: ['id', 'bank', 'accountingTypeFk'],
|
||||
include: { relation: 'accountingType' },
|
||||
order: 'id',
|
||||
limit: 30,
|
||||
};
|
||||
|
||||
const state = useState();
|
||||
const user = state.getUser();
|
||||
const initialData = ref({
|
||||
...$props.formData.value,
|
||||
companyFk: user.value.companyFk,
|
||||
payed: Date.vnNew(),
|
||||
});
|
||||
|
||||
function setPaymentType(data, accounting) {
|
||||
data.bankFk = accounting.id;
|
||||
if (!accounting) return;
|
||||
accountingType.value = accounting.accountingType;
|
||||
data.description = [];
|
||||
data.payed = Date.vnNew();
|
||||
isCash.value = accountingType.value.code == 'cash';
|
||||
viewReceipt.value = isCash.value;
|
||||
if (accountingType.value.daysInFuture)
|
||||
data.payed.setDate(data.payed.getDate() + accountingType.value.daysInFuture);
|
||||
maxAmount.value = accountingType.value && accountingType.value.maxAmount;
|
||||
if (accountingType.value.code == 'compensation') return (data.description = '');
|
||||
|
||||
let descriptions = [];
|
||||
if (accountingType.value.receiptDescription)
|
||||
descriptions.push(accountingType.value.receiptDescription);
|
||||
if (data.description > 0) descriptions.push(data.description);
|
||||
data.description = descriptions.join(', ');
|
||||
}
|
||||
|
||||
const calculateFromAmount = (event) => {
|
||||
initialData.value.amountToReturn = Number(
|
||||
(parseFloat(initialData.value.deliveredAmount) + parseFloat(event) * -1).toFixed(
|
||||
2,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const calculateFromDeliveredAmount = (event) => {
|
||||
amountToReturn.value = Number((event - initialData.value.amountPaid).toFixed(2));
|
||||
};
|
||||
|
||||
function onBeforeSave(data) {
|
||||
const exceededAmount = data.amountPaid > maxAmount.value;
|
||||
if (isCash.value && exceededAmount)
|
||||
return notify(t('Amount exceeded', { maxAmount: maxAmount.value }), 'negative');
|
||||
|
||||
if (isCash.value && shouldSendEmail.value && !data.email)
|
||||
return notify(t('There is no assigned email for this client'), 'negative');
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
async function onDataSaved({ email, id }) {
|
||||
try {
|
||||
debugger;
|
||||
if (shouldSendEmail.value && isCash.value)
|
||||
await sendEmail(`Receipts/${id}/receipt-email`, {
|
||||
recipient: email,
|
||||
});
|
||||
|
||||
if (viewReceipt.value) openReport(`Receipts/${id}/receipt-pdf`, {}, '_blank');
|
||||
} finally {
|
||||
if ($props.promise) $props.promise();
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
}
|
||||
}
|
||||
|
||||
async function getSupplierClientReferences(data) {
|
||||
if (!data) return (initialData.value.description = '');
|
||||
const params = { bankAccount: data.compensationAccount };
|
||||
const { data: reference } = await axios(`Clients/getClientOrSupplierReference`, {
|
||||
params,
|
||||
});
|
||||
if (reference.supplierId) {
|
||||
data.description = t('Supplier Compensation Reference', {
|
||||
supplierId: reference.supplierId,
|
||||
supplierName: reference.supplierName,
|
||||
});
|
||||
return;
|
||||
}
|
||||
data.description = t('Client Compensation Reference', {
|
||||
clientId: reference.clientId,
|
||||
clientName: reference.clientName,
|
||||
});
|
||||
}
|
||||
|
||||
async function getAmountPaid() {
|
||||
const filter = {
|
||||
where: {
|
||||
clientFk: $props.clientId,
|
||||
companyFk: initialData.value.companyFk,
|
||||
},
|
||||
};
|
||||
|
||||
const { data } = await getClientRisk(filter);
|
||||
initialData.value.amountPaid = (data?.length && data[0].amount) || undefined;
|
||||
}
|
||||
|
||||
async function onSubmit(formData) {
|
||||
const {
|
||||
data: [{ email }],
|
||||
} = await axios.get('Clients', {
|
||||
params: {
|
||||
filter: JSON.stringify({ where: { id: $props.clientFk } }),
|
||||
},
|
||||
});
|
||||
|
||||
const { data } = await axios.post(`Clients/${formData.clientFk}/createReceipt`, {
|
||||
payed: formData.payed,
|
||||
companyFk: formData.companyFk,
|
||||
bankFk: formData.bankFk,
|
||||
amountPaid: formData.amountPaid,
|
||||
description: formData.description,
|
||||
clientFk: $props.clientFk,
|
||||
email,
|
||||
});
|
||||
|
||||
if (data) notify('globals.dataSaved', 'positive');
|
||||
await onDataSaved(data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef" persistent>
|
||||
<FormModelPopup
|
||||
ref="formModelRef"
|
||||
:form-initial-data="initialData"
|
||||
:save-fn="onSubmit"
|
||||
:prevent-submit="true"
|
||||
:mapper="onBeforeSave"
|
||||
>
|
||||
<template #form-inputs="{ data, validate }">
|
||||
<h5 class="q-mt-none">{{ t('New payment') }}</h5>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
autofocus
|
||||
:label="t('Bank')"
|
||||
v-model="data.bankFk"
|
||||
url="Accountings"
|
||||
:filter="filterBanks"
|
||||
option-label="bank"
|
||||
:include="{ relation: 'accountingType' }"
|
||||
sort-by="id"
|
||||
:limit="0"
|
||||
@update:model-value="
|
||||
(value, options) => setPaymentType(data, value, options)
|
||||
"
|
||||
:emit-value="false"
|
||||
data-cy="paymentBank"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt.id }}: {{ scope.opt.bank }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelect>
|
||||
<VnInputNumber
|
||||
:label="t('Amount')"
|
||||
:required="true"
|
||||
@update:model-value="calculateFromAmount($event)"
|
||||
clearable
|
||||
v-model.number="data.amountPaid"
|
||||
data-cy="paymentAmount"
|
||||
:positive="false"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInputDate
|
||||
:label="t('Date')"
|
||||
v-model="data.payed"
|
||||
:required="true"
|
||||
/>
|
||||
<VnSelect
|
||||
url="Companies"
|
||||
:label="t('Company')"
|
||||
:required="true"
|
||||
:rules="validate('entry.companyFk')"
|
||||
hide-selected
|
||||
option-label="code"
|
||||
v-model="data.companyFk"
|
||||
@update:model-value="getAmountPaid()"
|
||||
/>
|
||||
</VnRow>
|
||||
<div v-if="accountingType.code == 'compensation'">
|
||||
<div class="text-h6">
|
||||
{{ t('Compensation') }}
|
||||
</div>
|
||||
<VnRow>
|
||||
<VnAccountNumber
|
||||
:label="t('Compensation account')"
|
||||
clearable
|
||||
v-model="data.compensationAccount"
|
||||
@blur="getSupplierClientReferences(data)"
|
||||
/>
|
||||
</VnRow>
|
||||
</div>
|
||||
<VnInput
|
||||
:label="t('Reference')"
|
||||
:required="true"
|
||||
clearable
|
||||
v-model="data.description"
|
||||
/>
|
||||
<div v-if="accountingType.code == 'cash'">
|
||||
<div class="text-h6">{{ t('Cash') }}</div>
|
||||
<VnRow>
|
||||
<VnInputNumber
|
||||
:label="t('Delivered amount')"
|
||||
@update:model-value="calculateFromDeliveredAmount($event)"
|
||||
clearable
|
||||
v-model="data.deliveredAmount"
|
||||
/>
|
||||
<VnInputNumber
|
||||
:label="t('Amount to return')"
|
||||
disable
|
||||
v-model="amountToReturn"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<QCheckbox v-model="viewReceipt" :label="t('View recipt')" />
|
||||
<QCheckbox v-model="shouldSendEmail" :label="t('Send email')" />
|
||||
</VnRow>
|
||||
</div>
|
||||
</template>
|
||||
</FormModelPopup>
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
|
||||
Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
|
||||
es:
|
||||
New payment: Añadir pago
|
||||
Date: Fecha
|
||||
Company: Empresa
|
||||
Bank: Caja
|
||||
Amount: Importe
|
||||
Reference: Referencia
|
||||
Cash: Efectivo
|
||||
Delivered amount: Cantidad entregada
|
||||
Amount to return: Cantidad a devolver
|
||||
View recipt: Ver recibido
|
||||
Send email: Enviar correo
|
||||
Compensation: Compensación
|
||||
Compensation account: Cuenta para compensar
|
||||
Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
|
||||
Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
|
||||
There is no assigned email for this client: No hay correo asignado para este cliente
|
||||
Amount exceeded: Según ley contra el fraude no se puede recibir cobros por importe igual o superior a {maxAmount}
|
||||
</i18n>
|
||||
Loading…
Reference in New Issue