From e7897fba32ecfdd383a872caf4280b8bce4a1813 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Mon, 17 Feb 2025 11:49:45 +0700
Subject: [PATCH] refactor: add i18n of product and service

---
 .../04_product-service/BasicInfoProduct.vue   |  1 +
 .../04_product-service/FormDocument.vue       |  3 +++
 .../04_product-service/PriceDataComponent.vue |  3 +++
 .../WorkManagementComponent.vue               | 26 +++++++++----------
 src/components/dialog/DialogProperties.vue    | 10 +++----
 src/components/shared/select/SelectFlow.vue   |  1 +
 src/pages/04_product-service/MainPage.vue     |  1 +
 7 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue
index e3de24cb..1b177da2 100644
--- a/src/components/04_product-service/BasicInfoProduct.vue
+++ b/src/components/04_product-service/BasicInfoProduct.vue
@@ -222,6 +222,7 @@ const detailEditorImageDrop = createEditorImageDrop(detail);
           dense
         >
           <q-editor
+            id="input-detail"
             dense
             :model-value="readonly ? detail || '-' : detail"
             @update:model-value="
diff --git a/src/components/04_product-service/FormDocument.vue b/src/components/04_product-service/FormDocument.vue
index f875122c..8b368e5b 100644
--- a/src/components/04_product-service/FormDocument.vue
+++ b/src/components/04_product-service/FormDocument.vue
@@ -106,6 +106,7 @@ function optionSearch(val: string | null) {
 
     <div class="col-12 row q-col-gutter-sm">
       <q-select
+        for="select-attachment"
         behavior="menu"
         :readonly
         outlined
@@ -150,6 +151,7 @@ function optionSearch(val: string | null) {
               {{ $t('general.add', { text: $t('general.attachment') }) }}
             </q-item> -->
             <q-item
+              for="select-all"
               dense
               clickable
               class="flex items-center"
@@ -172,6 +174,7 @@ function optionSearch(val: string | null) {
           </template>
           <template #option="{ opt }">
             <q-checkbox
+              :id="`select-${opt.label}`"
               :model-value="attachment.some((v) => v === opt.value)"
               class="q-pr-sm"
               size="xs"
diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index 4c3d3df9..59043144 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -260,6 +260,7 @@ withDefaults(
               </template>
               <template v-if="col.name === '#vatIncluded'">
                 <q-select
+                  for="select-vat-included"
                   :options="[
                     { label: $t('general.included'), value: true },
                     { label: $t('general.notIncluded'), value: false },
@@ -278,6 +279,7 @@ withDefaults(
                     { label: $t('general.notIncluded'), value: false },
                   ]"
                   v-if="priceDisplay?.agentPrice && props.rowIndex === 1"
+                  for="select-vat-included"
                   map-options
                   emit-value
                   flat
@@ -291,6 +293,7 @@ withDefaults(
                     { label: $t('general.notIncluded'), value: false },
                   ]"
                   v-if="priceDisplay?.serviceCharge && props.rowIndex === 2"
+                  for="select-vat-included"
                   map-options
                   emit-value
                   flat
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index ec2e9905..2bf5db83 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -127,8 +127,8 @@ watch(
           <div class="row items-center q-py-sm full-width" @click.stop>
             <q-btn
               v-if="!readonly"
-              id="btn-work-up-product"
-              for="btn-work-up-product"
+              :id="`btn-work-up-product-${workIndex}`"
+              :for="`btn-work-up-product-${workIndex}`"
               icon="mdi-arrow-up"
               dense
               flat
@@ -139,8 +139,8 @@ watch(
             />
             <q-btn
               v-if="!readonly"
-              id="btn-work-down-product"
-              for="btn-work-down-product"
+              :id="`btn-work-down-product-${workIndex}`"
+              :for="`btn-work-down-product-${workIndex}`"
               icon="mdi-arrow-down"
               dense
               flat
@@ -244,7 +244,7 @@ watch(
             <div :class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }">
               <q-btn
                 v-if="!readonly"
-                id="btn-delete-work"
+                :id="`btn-delete-work-${workIndex}`"
                 icon="mdi-trash-can-outline"
                 dense
                 flat
@@ -290,8 +290,8 @@ watch(
               <AddButton
                 v-if="!readonly"
                 icon-only
-                id="btn-add-work-product"
-                for="btn-add-work-product"
+                :id="`btn-add-work-product-${workIndex}`"
+                :for="`btn-add-work-product-${workIndex}`"
                 @click.stop="$emit('addProduct')"
               />
             </span>
@@ -317,7 +317,7 @@ watch(
                 >
                   <q-btn
                     v-if="!readonly"
-                    id="btn-product-up"
+                    :id="`btn-product-up-${index}`"
                     icon="mdi-arrow-up"
                     dense
                     flat
@@ -329,8 +329,8 @@ watch(
                   />
                   <q-btn
                     v-if="!readonly"
-                    id="btn-product-down"
-                    for="btn-product-down"
+                    :id="`btn-product-down-${index}`"
+                    :for="`btn-product-down-${index}`"
                     icon="mdi-arrow-down"
                     dense
                     flat
@@ -482,8 +482,8 @@ watch(
                 <q-btn
                   v-if="!readonly"
                   class="q-ml-md"
-                  id="btn-delete-work-product"
-                  for="btn-delete-work-product"
+                  :id="`btn-delete-work-product-${index}`"
+                  :for="`btn-delete-work-product-${index}`"
                   icon="mdi-trash-can-outline"
                   padding="0"
                   dense
@@ -521,7 +521,7 @@ watch(
                 </span>
                 <q-btn
                   v-if="!readonly"
-                  id="btn-add-work-product"
+                  :id="`btn-add-work-product-${workIndex}`"
                   class="text-capitalize rounded"
                   flat
                   dense
diff --git a/src/components/dialog/DialogProperties.vue b/src/components/dialog/DialogProperties.vue
index d8b3b65e..1e33a7f5 100644
--- a/src/components/dialog/DialogProperties.vue
+++ b/src/components/dialog/DialogProperties.vue
@@ -465,7 +465,7 @@ watch(
             >
               <div class="col-md col-12 row items-center">
                 <q-btn
-                  id="btn-move-up-product"
+                  :id="`btn-move-up-product-${propIndex}`"
                   icon="mdi-arrow-up"
                   dense
                   flat
@@ -481,7 +481,7 @@ watch(
                   "
                 />
                 <q-btn
-                  id="btn-move-down-product"
+                  :id="`btn-move-down-product-${propIndex}`"
                   icon="mdi-arrow-down"
                   dense
                   flat
@@ -515,7 +515,7 @@ watch(
                   emit-value
                   map-options
                   hide-bottom-space
-                  for="input-properties-name"
+                  :for="`input-properties-name-${propIndex}`"
                   class="col-md col-12 q-mr-md"
                   :class="{ 'q-my-sm': $q.screen.lt.md }"
                   :label="$t('productService.service.propertiesName')"
@@ -554,8 +554,8 @@ watch(
                   emit-value
                   map-options
                   hide-bottom-space
-                  for="input-properties-type"
-                  id="input-properties-type"
+                  :for="`input-properties-type-${propIndex}`"
+                  :id="`input-properties-type-${propIndex}`"
                   :label="$t('general.type')"
                   option-value="value"
                   @update:model-value="
diff --git a/src/components/shared/select/SelectFlow.vue b/src/components/shared/select/SelectFlow.vue
index 7f3aaa07..3b5d55ec 100644
--- a/src/components/shared/select/SelectFlow.vue
+++ b/src/components/shared/select/SelectFlow.vue
@@ -73,6 +73,7 @@ function setDefaultValue() {
 </script>
 <template>
   <SelectInput
+    for="select-work-flow-template"
     v-model="value"
     incremental
     :label
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 3799efc9..b8142d94 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -4347,6 +4347,7 @@ watch(
             class="split-pay q-mx-sm"
             input-class="text-caption text-right"
             type="number"
+            for="dialog-input-installments"
             v-model="formService.installments"
           />
           {{ $t('quotation.receiptDialog.installments') }}