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

src/pages/05_quotation/QuotationForm.vue

@@ -331,12 +331,12 @@ async function fetchStatus() {
       title: 'Issued',
       status: getStatus(quotationFormData.value.quotationStatus, 0, -1),
       active: () => view.value === View.Quotation,
-      handler: () => (
+      handler: () => {
-        (view.value = View.Quotation),
+        view.value = View.Quotation;
-        (code.value = ''),
+        code.value = '';
-        (selectedInstallmentNo.value = []),
+        selectedInstallmentNo.value = [];
-        (selectedInstallment.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 = '';
   }
 });
 

src/pages/08_request-list/RequestListView.vue

@@ -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) {
+function goToQuotation(
-  const url = new URL(`/request-list/${id}`, window.location.origin);
+  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
+                      data.quotation?.invoice?.map((i: Invoice) => i.code)
-                        ?.map((i: Invoice) => i.code)
+                    "
-                        .join(', ') || '-'
+                    @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
+                      data.quotation?.invoice?.flatMap(
-                        ?.flatMap((i: Invoice) => i.payment?.code || [])
+                        (i: Invoice) => i.payment?.code || [],
-                        .join(', ') || '-'
+                      )
                     "
+                    @click="goToQuotation(data.quotation, { tab: 'receipt' })"
                   />
                   <div v-if="$q.screen.gt.sm" class="col"></div>
                 </div>