refactor: handle title i18n

src/pages/05_quotation/QuotationForm.vue

@@ -288,19 +288,19 @@ const productService = computed(() => {
 async function fetchStatus() {
   statusQuotationForm.value = [
     {
-      title: 'ใบเสนอราคา',
+      title: 'Issued',
       status: getStatus(quotationFormData.value.quotationStatus, 0, -1),
       active: () => view.value === View.Quotation,
       handler: () => (view.value = View.Quotation),
     },
     {
-      title: 'ลูกค้าตอบรับ',
+      title: 'Accepted',
       status: getStatus(quotationFormData.value.quotationStatus, 1, 0),
       active: () => view.value === View.Accepted,
       handler: () => (view.value = View.Accepted),
     },
     {
-      title: 'ใบแจ้งหนี้',
+      title: 'Invoice',
       status:
         quotationFormData.value.payCondition === 'Full'
           ? getStatus(quotationFormData.value.quotationStatus, 3, 1)
@@ -316,7 +316,7 @@ async function fetchStatus() {
       },
     },
     {
-      title: 'ชำระเงิน',
+      title: 'PaymentInProcess',
       status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
       active: () =>
         view.value === View.Payment || view.value === View.PaymentPre,
@@ -329,7 +329,7 @@ async function fetchStatus() {
       },
     },
     {
-      title: 'ใบเสร็จรับเงิน',
+      title: 'Receipt',
       status: getStatus(quotationFormData.value.quotationStatus, 4, 1),
       active: () => view.value === View.Receipt,
       handler: () => {
@@ -338,7 +338,7 @@ async function fetchStatus() {
       },
     },
     {
-      title: 'เสร็จสิ้น',
+      title: 'ProcessComplete',
       status: getStatus(quotationFormData.value.quotationStatus, 5, 4),
       active: () => view.value === View.Complete,
       handler: () => {
@@ -1050,8 +1050,12 @@ const view = ref<View>(View.Quotation);
           <q-img src="/icons/favicon-512x512.png" width="3rem" />
         </a>
         <span class="column text-h6 text-bold q-ml-md">
-          <!-- TODO: change by current view -->
-          {{ $t('quotation.title') }}
+
+          {{
+            $t(
+              `quotation.status.${view === View.InvoicePre || view === View.Invoice ? 'Invoice' : view === View.Payment ? 'PaymentInProcess' : view === View.Receipt ? 'Receipt' : 'Issued'}`,
+            )
+          }}
           <span class="text-caption text-regular app-text-muted">
             {{
               $t('quotation.processOn', {
@@ -1148,7 +1152,9 @@ const view = ref<View>(View.Quotation);
                   :name="`${value.status === 'done' ? 'mdi-check-circle' : 'mdi-checkbox-blank-circle-outline'}`"
                 />
               </div>
-              <div class="col text-left">{{ value.title }}</div>
+              <div class="col text-left">
+                {{ $t(`quotation.status.${value.title}`) }}
+              </div>
             </button>
           </div>