feat: preview route and trigger preview

src/pages/05_quotation/MainPage.vue

@@ -275,6 +275,17 @@ async function fetchQuotationList() {
 }
 
 watch(() => pageState.currentTab, fetchQuotationList);
+
+async function storeDataLocal(id: string) {
+  await quotationFormStore.assignFormData(id, 'assign');
+
+  localStorage.setItem(
+    'quotation-preview',
+    JSON.stringify(quotationFormData.value),
+  );
+
+  window.open('/quotation/document-view', '_blank');
+}
 </script>
 
 <template>
@@ -538,6 +549,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
                     : v.createdBy.firstName + ' ' + v.createdBy.lastName
                 "
                 :total-price="v.finalPrice"
+                @preview="storeDataLocal(v.id)"
                 @view="
                   () => {
                     triggerQuotationDialog({

src/pages/05_quotation/QuotationForm.vue

@@ -621,7 +621,7 @@ function storeDataLocal() {
     JSON.stringify(quotationFormData.value),
   );
 
-  window.open('/view', '_blank');
+  window.open('/quotation/document-view', '_blank');
 }
 </script>
 

src/pages/05_quotation/form.ts

@@ -94,7 +94,10 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     currentFormData.value = structuredClone(resetFormData);
   }
 
-  async function assignFormData(id: string, mode: 'info' | 'edit' = 'info') {
+  async function assignFormData(
+    id: string,
+    mode: 'info' | 'edit' | 'assign' = 'info',
+  ) {
     const data = await quotationStore.getQuotation(id);
 
     if (!data) return; // NOTE: Error should be handled globally by axios instance
@@ -127,6 +130,9 @@ export const useQuotationForm = defineStore('form-quotation', () => {
       locale === 'eng'
         ? data.createdBy.firstNameEN + ' ' + data.createdBy.lastNameEN
         : data.createdBy.firstName + ' ' + data.createdBy.lastName;
+
+    if (mode === 'assign') return;
+
     currentFormState.value.mode = mode;
   }