fix: service & properties i18n

src/components/04_product-service/ServiceProperties.vue

@@ -22,25 +22,25 @@ const selection = ref(false);
 
 const typeOption = ref([
   {
-    label: 'Text',
+    label: t('text'),
     value: 'string',
     color: 'var(--pink-6-hsl)',
     icon: 'mdi-alpha-t',
   },
   {
-    label: 'Number',
+    label: t('number'),
     value: 'number',
     color: 'var(--purple-11-hsl)',
     icon: 'mdi-numeric',
   },
   {
-    label: 'Date',
+    label: t('date'),
     value: 'date',
     color: 'var(--green-9-hsl)',
     icon: 'mdi-calendar-blank-outline',
   },
   {
-    label: 'Selection',
+    label: t('selection'),
     value: 'array',
     color: 'var(--indigo-7-hsl)',
     icon: 'mdi-code-array',
@@ -117,7 +117,7 @@ function confirmDelete(items: unknown[], index: number) {
         dense
         unelevated
         color="primary"
-        label="Properties"
+        :label="$t('properties')"
         class="q-px-sm q-mb-lg"
         menu-anchor="bottom end"
       >
@@ -141,8 +141,7 @@ function confirmDelete(items: unknown[], index: number) {
                 class="q-mr-sm"
                 style="color: hsl(var(--text-mute))"
               />
-
+              {{ $t('selectAll') }}
-              เลือกทั้งหมด
             </div>
           </q-item>
           <q-separator />
@@ -239,7 +238,7 @@ function confirmDelete(items: unknown[], index: number) {
             map-options
             hide-bottom-space
             class="col q-mr-md"
-            label="Properties Name"
+            :label="$t('propertiesName')"
             option-label="label"
             option-value="value"
             :options="propertiesOption"
@@ -264,7 +263,7 @@ function confirmDelete(items: unknown[], index: number) {
             emit-value
             map-options
             hide-bottom-space
-            label="Type"
+            :label="$t('type')"
             option-value="value"
             :options="typeOption"
             v-model="p.type"
@@ -309,78 +308,59 @@ function confirmDelete(items: unknown[], index: number) {
           </q-select>
 
           <div
-            v-if="p.type === 'string'"
+            v-if="p.type !== 'date' && p.type"
             class="menu-border q-pt-md q-pb-sm"
             style="margin-top: -20px"
           >
             <q-item>
               <q-item-section class="column">
-                <span class="app-text-muted-2">เพิ่มเติม</span>
+                <span class="app-text-muted-2">{{ $t('additional') }}</span>
-                <div class="q-gutter-y-sm">
+
+                <div v-if="p.type === 'string'" class="q-gutter-y-sm">
                   <div class="row items-center">
                     <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
                       <q-checkbox v-model="tel" size="xs" />
-                      เบอร์โทร
+                      {{ $t('telephone') }}
                     </div>
                     <q-input
                       v-model="telMax"
                       class="col"
                       dense
                       outlined
-                      label="จำนวนหลัก"
+                      :label="$t('telMaxLength')"
                     />
                   </div>
                 </div>
-              </q-item-section>
-            </q-item>
-          </div>
 
-          <div
+                <div v-if="p.type === 'number'" class="q-gutter-y-sm">
-            v-if="p.type === 'number'"
-            class="menu-border q-pt-md q-pb-sm"
-            style="margin-top: -20px"
-          >
-            <q-item>
-              <q-item-section class="column">
-                <span class="app-text-muted-2">เพิ่มเติม</span>
-                <div class="q-gutter-y-sm">
                   <div class="row items-center">
                     <div class="col surface-3 rounded q-py-xs">
                       <q-checkbox v-model="comma" size="xs" />
-                      ใส่ comma
+                      {{ $t('useComma') }}
                     </div>
                   </div>
-
                   <div class="row items-center">
                     <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
                       <q-checkbox v-model="point" size="xs" />
-                      ทศนิยม
+                      {{ $t('decimal') }}
                     </div>
                     <q-input
                       v-model="pointNum"
                       class="col"
                       dense
                       outlined
-                      label="ตำแหน่ง"
+                      :label="$t('decimalPlace')"
                     />
                   </div>
                 </div>
-              </q-item-section>
-            </q-item>
-          </div>
 
-          <div
+                <div
-            v-if="p.type === 'array'"
+                  v-if="p.type === 'array'"
-            class="menu-border q-pt-md q-pb-sm"
+                  class="row items-center justify-between"
-            style="margin-top: -20px"
+                >
-          >
-            <q-item>
-              <q-item-section class="column">
-                <span class="app-text-muted-2">เพิ่มเติม</span>
-                <div class="row items-center justify-between">
                   <div class="col surface-3 rounded q-mr-sm q-py-xs">
                     <q-checkbox v-model="selection" size="xs" />
-                    เพิ่ม Selection
+                    {{ $t('addSelection') }}
                   </div>
                   <div class="col-1">
                     <q-btn
@@ -389,6 +369,7 @@ function confirmDelete(items: unknown[], index: number) {
                       icon="mdi-plus"
                       class="bordered"
                       text-color="grey"
+                      style="border-radius: 6px"
                     />
                   </div>
                 </div>

src/components/04_product-service/WorkManagementComponent.vue

@@ -101,7 +101,7 @@ defineEmits<{
             <q-menu fit anchor="bottom left" self="top left">
               <q-item>
                 <div class="full-width flex items-center justify-between">
-                  ชื่องาน
+                  {{ $t('workName') }}
                   <q-btn
                     dense
                     unelevated
@@ -113,7 +113,7 @@ defineEmits<{
                     @click.stop="$emit('manageWorkName')"
                   >
                     <q-icon name="mdi-cog" size="xs" class="q-mr-sm" />
-                    จัดการ
+                    {{ $t('manage') }}
                   </q-btn>
                 </div>
               </q-item>
@@ -153,7 +153,9 @@ defineEmits<{
             color="negative"
             class="q-ml-sm"
             @click.stop="$emit('deleteWork')"
-          />
+          >
+            <q-tooltip>{{ $t('delete') }}</q-tooltip>
+          </q-btn>
         </div>
       </template>
       <div class="surface-2">

src/components/04_product-service/WorkNameManagement.vue

@@ -3,7 +3,6 @@ import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 
-import { deleteItem, dialog } from 'src/stores/utils';
 import useProductServiceStore from 'src/stores/product-service';
 
 import NoData from '../NoData.vue';
@@ -66,6 +65,7 @@ watch(
         >
           <q-input
             ref="inputName"
+            :for="`input-work-name-${index}`"
             dense
             class="col q-mr-md"
             v-model="item.name"
@@ -85,7 +85,7 @@ watch(
             color="primary"
             @click="item.isEdit = true"
           >
-            <q-tooltip>Edit</q-tooltip>
+            <q-tooltip>{{ $t('edit') }}</q-tooltip>
           </q-btn>
           <q-btn
             v-else
@@ -102,7 +102,7 @@ watch(
               }
             "
           >
-            <q-tooltip>Save</q-tooltip>
+            <q-tooltip>{{ $t('save') }}</q-tooltip>
           </q-btn>
           <q-btn
             v-if="!item.isEdit"
@@ -116,7 +116,7 @@ watch(
             color="negative"
             @click="$emit('delete', item.id)"
           >
-            <q-tooltip>Delete</q-tooltip>
+            <q-tooltip>{{ $t('delete') }}</q-tooltip>
           </q-btn>
           <q-btn
             v-else
@@ -129,7 +129,7 @@ watch(
             color="negative"
             @click="assignClone"
           >
-            <q-tooltip>Cancel</q-tooltip>
+            <q-tooltip>{{ $t('cancel') }}</q-tooltip>
           </q-btn>
         </q-item>
       </q-list>
@@ -147,7 +147,7 @@ watch(
         >
           <span class="q-px-lg flex items-center app-text-muted-2">
             <q-icon name="mdi-plus" class="q-mr-md" />
-            เพิ่มงานใหม่
+            {{ $t('addWork') }}
           </span>
         </q-item>
       </div>

src/i18n/en-US/index.ts

@@ -48,6 +48,7 @@ export default {
   editPersonalInfo: 'Edit personal infomation',
   logout: 'Logout',
   list: 'Item',
+  manage: 'Manage',
   ...status,
   ...main,
   ...address,

src/i18n/en-US/product-service.ts

@@ -45,4 +45,20 @@ export default {
 
   totalProductWork: 'Total product of work',
   workNo: 'Work',
+
+  addWork: 'Add work',
+
+  properties: 'Properties',
+  text: 'Text',
+  number: 'Number',
+  date: 'Date',
+  selection: 'Selection',
+  propertiesName: 'Properties Name',
+  decimal: 'Decimal',
+  decimalPlace: 'Decimal Place',
+  useComma: 'use comma',
+  additional: 'Additional',
+  telMaxLength: 'Max Length',
+  addSelection: 'Add Selection',
+  selectAll: 'Select All',
 };

src/i18n/th-th/index.ts

@@ -48,6 +48,7 @@ export default {
   editPersonalInfo: 'แก้ไขข้อมูลส่วนตัว',
   logout: 'ออกจากระบบ',
   list: 'รายการ',
+  manage: 'จัดการ',
   ...status,
   ...main,
   ...address,

src/i18n/th-th/product-service.ts

@@ -45,4 +45,20 @@ export default {
 
   totalProductWork: 'รวมสินค้างาน',
   workNo: 'งานที่',
+
+  addWork: 'เพิ่มงานใหม่',
+
+  properties: 'คุณสมบัติ',
+  text: 'ข้อความ',
+  number: 'ตัวเลข',
+  date: 'วันที่',
+  selection: 'ตัวเลือก',
+  propertiesName: 'ชื่อคุณสมบัติ',
+  decimal: 'ทศนิยม',
+  decimalPlace: 'ตำแหน่ง',
+  useComma: 'ใส่ comma',
+  additional: 'เพิ่มเติม',
+  telMaxLength: 'จำนวนหลัก',
+  addSelection: 'เพิ่มตัวเลือก',
+  selectAll: 'เลือกทั้งหมด',
 };

src/pages/04_product-service/MainPage.vue

@@ -1620,7 +1620,7 @@ watch(currentStatus, async () => {
     no-app-box
     height="75vh"
     width="75%"
-    title="Properties"
+    :title="$t('properties')"
     v-model:modal="propertiesDialog"
     :submit="
       () => {
@@ -1653,7 +1653,7 @@ watch(currentStatus, async () => {
     no-footer
     height="65vh"
     width="65%"
-    title="จัดการ"
+    :title="$t('manage')"
     v-model:modal="manageWorkNameDialog"
   >
     <WorkNameManagement