refactor: handle title i18n

src/components/05_quotation/TableQuotation.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { QuotationPayload } from 'src/stores/quotations/types';
+import { QTableProps } from 'quasar';
+
+const props = withDefaults(
+  defineProps<{
+    rows: QTableProps['rows'];
+    columns: QTableProps['columns'];
+    grid?: boolean;
+    fieldSelected?: string[];
+  }>(),
+  {
+    row: () => [],
+    column: () => [],
+    grid: false,
+    fieldSelected: () => [],
+  },
+);
+</script>
+
+<template>
+  <q-table v-bind="props">
+    <template v-slot:header="props">
+      <q-tr style="background-color: #f0fff1" :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          {{ col.label }}
+        </q-th>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<style scoped></style>

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>