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