feat: detect quotation status

src/pages/05_quotation/QuotationForm.vue

@@ -690,33 +690,61 @@ function storeDataLocal() {
 
   window.open('/quotation/document-view', '_blank');
 }
+const QUOTATION_STATUS = [
+  'Issued',
+  'Accepted',
+  'PaymentPending',
+  'PaymentInProcess',
+  'PaymentSuccess',
+  'ProcessComplete',
+  'Canceled',
+];
 
+function getStatus(
+  status: typeof quotationFormData.value.quotationStatus,
+  doneIndex: number,
+  doingIndex: number,
+) {
+  return QUOTATION_STATUS.findIndex((v) => v === status) > doneIndex
+    ? 'done'
+    : QUOTATION_STATUS.findIndex((v) => v === status) > doingIndex
+      ? 'doing'
+      : 'waiting';
+}
+
+// TODO: check for payment type and decide wether to change view to pre or not
 const statusQuotationForm = ref<
-  { title: string; status: 'done' | 'doing' | 'waiting' }[]
+  { title: string; status: 'done' | 'doing' | 'waiting'; handler: () => void }[]
 >([
   {
     title: 'ใบเสนอราคา',
-    status: 'doing',
+    status: getStatus(quotationFormData.value.quotationStatus, 0, 0),
+    handler: () => (view.value = View.Quotation),
   },
   {
     title: 'ลูกค้าตอบรับ',
-    status: 'waiting',
+    status: getStatus(quotationFormData.value.quotationStatus, 1, 0),
+    handler: () => (view.value = View.Accepted),
   },
   {
     title: 'ใบแจ้งหนี้',
-    status: 'waiting',
+    status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
+    handler: () => (view.value = View.InvoicePre),
   },
   {
     title: 'ชำระเงิน',
-    status: 'waiting',
+    status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
+    handler: () => (view.value = View.PaymentPre),
   },
   {
     title: 'ใบเสร็จรับเงิน',
-    status: 'waiting',
+    status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
+    handler: () => (view.value = View.ReceiptPre),
   },
   {
     title: 'เสร็จสิ้น',
-    status: 'waiting',
+    status: getStatus(quotationFormData.value.quotationStatus, 5, 4),
+    handler: () => (view.value = View.Complete),
   },
 ]);
 
@@ -725,8 +753,11 @@ enum View {
   Accepted,
   InvoicePre,
   Invoice,
+  PaymentPre,
+  Payment,
   ReceiptPre,
   Receipt,
+  Complete,
 }
 
 const view = ref<View>(View.Quotation);
@@ -822,19 +853,20 @@ const view = ref<View>(View.Quotation);
             class="surface-1 q-pa-sm row"
             style="border-radius: var(--radius-2); gap: 10px"
           >
-            <div
+            <button
               v-for="value in statusQuotationForm"
               :key="value.title"
               class="q-pa-sm bordered status-color"
               :class="`status-color-${value.status}`"
-              style="min-width: 120px"
+              @click="value.status !== 'waiting' && value.handler()"
+              style="min-width: 120px; cursor: pointer"
             >
               <q-icon
                 class="icon-color"
                 :name="`${value.status === 'done' ? 'mdi-check-circle' : 'mdi-checkbox-blank-circle-outline'}`"
               />
               {{ value.title }}
-            </div>
+            </button>
             <div class="col">
               <MainButton
                 color="red"