feat: add preview template text

src/pages/05_quotation/QuotationForm.vue

@@ -86,6 +86,7 @@ import PaymentForm from './PaymentForm.vue';
 import { api } from 'src/boot/axios';
 import { RouterLink, useRoute } from 'vue-router';
 import { initLang, initTheme } from 'src/utils/ui';
+import { convertTemplate } from 'src/utils/string-template';
 
 type Node = {
   [key: string]: any;
@@ -962,6 +963,7 @@ function storeDataLocal() {
           workName: quotationFormData.value.workName,
           dueDate: quotationFormData.value.dueDate,
         },
+        selectedWorker: selectedWorker.value,
         createdBy: quotationFormState.value.createdBy('tha'),
       },
     }),
@@ -1525,8 +1527,25 @@ async function getWorkerFromCriteria(
               <div class="surface-1 q-pa-md full-width">
                 <q-editor
                   dense
-                  :readonly="readonly"
+                  :readonly="readonly || !pageState.remarkWrite"
-                  :model-value="quotationFormData.remark || ''"
+                  :model-value="
+                    !pageState.remarkWrite
+                      ? convertTemplate(quotationFormData.remark || '', {
+                          'quotation-payment': {
+                            paymentType: quotationFormData.payCondition,
+                            amount: getPrice(productServiceList).finalPrice,
+                            installments: quotationFormData.paySplit,
+                          },
+                          'quotation-labor': {
+                            name: selectedWorker.map(
+                              (v, i) =>
+                                `${i + 1}. ` +
+                                `${v.namePrefix}. ${v.firstNameEN} ${v.lastNameEN}`.toUpperCase(),
+                            ),
+                          },
+                        })
+                      : quotationFormData.remark || ''
+                  "
                   min-height="5rem"
                   class="full-width"
                   :content-class="{

src/pages/05_quotation/preview/ViewForm.vue

@@ -28,6 +28,7 @@ import ViewHeader from './ViewHeader.vue';
 import ViewFooter from './ViewFooter.vue';
 import BankComponents from './BankComponents.vue';
 import PrintButton from 'src/components/button/PrintButton.vue';
+import { convertTemplate } from 'src/utils/string-template';
 
 const quotationForm = useQuotationForm();
 const optionStore = useOptionStore();
@@ -164,6 +165,7 @@ onMounted(async () => {
       contactTel: parsed.meta.source.contactTel,
       workName: parsed.meta.source.workName,
       dueDate: parsed.meta.source.dueDate,
+      worker: parsed.meta.selectedWorker,
     };
 
     const resBranch = await branchStore.fetchById(
@@ -437,7 +439,25 @@ function print() {
         class="border-5 surface-0 detail-note q-mb-md"
         style="width: 100%; padding: 8px 16px; white-space: pre-wrap"
       >
-        <div v-html="data?.remark || '-'"></div>
+        <div
+          v-html="
+            convertTemplate(data?.remark || '', {
+              'quotation-payment': {
+                paymentType: data?.payCondition || 'Full',
+                amount: summaryPrice.finalPrice,
+                installments: data?.paySplit,
+              },
+              'quotation-labor': {
+                name:
+                  details?.worker.map(
+                    (v, i) =>
+                      `${i + 1}. ` +
+                      `${v.namePrefix}. ${v.firstNameEN} ${v.lastNameEN}`.toUpperCase(),
+                  ) || [],
+              },
+            }) || '-'
+          "
+        ></div>
       </div>
     </section>
 

src/stores/quotations/types.ts

@@ -432,6 +432,7 @@ export type Details = {
   contactTel: string;
   workName: string;
   dueDate: Date;
+  worker: EmployeeWorker[];
 };
 
 export type PaymentPayload = {