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

@ -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>