feat: update QuotationForm and RequestListView to enhance navigation and data handling

This commit is contained in:
puriphatt 2024-12-26 09:25:01 +07:00
parent 7071ecbf5c
commit cc916b663d
2 changed files with 81 additions and 15 deletions

View file

@ -331,12 +331,12 @@ async function fetchStatus() {
title: 'Issued',
status: getStatus(quotationFormData.value.quotationStatus, 0, -1),
active: () => view.value === View.Quotation,
handler: () => (
(view.value = View.Quotation),
(code.value = ''),
(selectedInstallmentNo.value = []),
(selectedInstallment.value = [])
),
handler: () => {
view.value = View.Quotation;
code.value = '';
selectedInstallmentNo.value = [];
selectedInstallment.value = [];
},
},
{
title: 'Accepted',
@ -353,6 +353,7 @@ async function fetchStatus() {
active: () =>
view.value === View.Invoice || view.value === View.InvoicePre,
handler: () => {
code.value = '';
selectedInstallmentNo.value = [];
selectedInstallment.value = [];
view.value =
@ -375,6 +376,7 @@ async function fetchStatus() {
active: () =>
view.value === View.Payment || view.value === View.PaymentPre,
handler: () => {
code.value = '';
view.value =
quotationFormData.value.payCondition === 'Full' ||
quotationFormData.value.payCondition === 'BillFull'
@ -1009,14 +1011,40 @@ onMounted(async () => {
pageState.isLoaded = true;
if (route.query['tab'] === 'invoice') {
if (route.query['id']) {
const queryInvoiceId = route.query['id'] as string;
const queryInvoiceAmount = Number(route.query['amount']) || 0;
await getInvoiceCode(queryInvoiceId);
selectedInstallmentNo.value =
quotationFormState.value.source?.paySplit
.filter((v) => v.invoiceId === queryInvoiceId)
.map((v) => v.no) || [];
installmentAmount.value = queryInvoiceAmount;
view.value = View.Invoice;
return;
}
selectedInstallmentNo.value = [];
selectedInstallment.value = [];
view.value =
quotationFormData.value.payCondition === 'Full' ||
quotationFormData.value.payCondition === 'BillFull'
? View.Invoice
: View.InvoicePre;
if (
quotationFormData.value.payCondition === 'Full' ||
quotationFormData.value.payCondition === 'BillFull'
) {
getInvoiceCodeFullPay();
}
}
if (route.query['tab'] === 'receipt') {
await fetchReceipt();
view.value = View.Receipt;
code.value = '';
}
});

View file

@ -4,7 +4,7 @@ import { onMounted, reactive, ref, watch, computed, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
// NOTE: Components
import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
import DataDisplay from 'components/08_request-list/DataDisplay.vue';
import DocumentExpansion from './DocumentExpansion.vue';
import FormExpansion from './FormExpansion.vue';
import PropertiesExpansion from './PropertiesExpansion.vue';
@ -40,6 +40,7 @@ import { Invoice } from 'src/stores/payment/types';
import { CreatedBy } from 'src/stores/types';
import { getUserId } from 'src/services/keycloak';
import { QuotationFull } from 'src/stores/quotations/types';
const { locale } = useI18n();
@ -336,8 +337,32 @@ function isInstallmentPaySuccess(installmentNo: number) {
return !!(invoice?.payment?.paymentStatus === 'PaymentSuccess');
}
function goToRequestList(id: string) {
const url = new URL(`/request-list/${id}`, window.location.origin);
function goToQuotation(
quotation: QuotationFull,
opt?: { tab?: string; id?: string; amount?: number },
) {
const { tab, id, amount } = opt || {};
const url = new URL('/quotation/view', window.location.origin);
if (tab) {
url.searchParams.append('tab', tab);
}
if (id) {
url.searchParams.append('id', id);
}
if (amount) {
url.searchParams.append('amount', amount.toString());
}
localStorage.setItem(
'new-quotation',
JSON.stringify({
customerBranchId: quotation.customerBranchId,
agentPrice: quotation.agentPrice,
statusDialog: 'info',
quotationId: quotation.id,
}),
);
window.open(url.toString(), '_blank');
}
</script>
@ -515,32 +540,45 @@ function goToRequestList(id: string) {
}"
>
<DataDisplay
clickable
class="col"
icon="mdi-file-document-outline"
:label="$t('requestList.quotationCode')"
:value="data.quotation.code || '-'"
@label-click="goToQuotation(data.quotation)"
/>
<DataDisplay
clickable
class="col"
icon="mdi-file-document-outline"
tooltip
:label="$t('requestList.invoiceCode')"
:value="
data.quotation?.invoice
?.map((i: Invoice) => i.code)
.join(', ') || '-'
data.quotation?.invoice?.map((i: Invoice) => i.code)
"
@label-click="
(_: string, i: number) => {
if (!data) return;
goToQuotation(data.quotation, {
tab: 'invoice',
id: data.quotation.invoice?.[i]?.id,
amount: data.quotation.invoice?.[i]?.amount,
});
}
"
/>
<DataDisplay
clickable
class="col"
icon="mdi-file-document-outline"
tooltip
:label="$t('requestList.receiptCode')"
:value="
data.quotation?.invoice
?.flatMap((i: Invoice) => i.payment?.code || [])
.join(', ') || '-'
data.quotation?.invoice?.flatMap(
(i: Invoice) => i.payment?.code || [],
)
"
@click="goToQuotation(data.quotation, { tab: 'receipt' })"
/>
<div v-if="$q.screen.gt.sm" class="col"></div>
</div>