From 42bb43f61829d893de429097052ebf93b6295415 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Thu, 12 Sep 2024 15:43:53 +0700
Subject: [PATCH] refactor: add id

---
 .../04_product-service/ServiceProperties.vue  | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/04_product-service/ServiceProperties.vue b/src/components/04_product-service/ServiceProperties.vue
index 3a60712f..235180b1 100644
--- a/src/components/04_product-service/ServiceProperties.vue
+++ b/src/components/04_product-service/ServiceProperties.vue
@@ -223,7 +223,8 @@ function confirmDelete(items: unknown[], index: number) {
   <div class="full-width full-height column no-wrap">
     <div class="row">
       <q-btn-dropdown
-        icon="mdi-plus"
+        id="btn-dropdow-properties"
+        for="btn-dropdow-properties"
         dense
         unelevated
         color="primary"
@@ -232,7 +233,12 @@ function confirmDelete(items: unknown[], index: number) {
         menu-anchor="bottom end"
       >
         <q-list dense v-if="formServiceProperties && propertiesOption">
-          <q-item clickable @click="manageProperties('all')">
+          <q-item
+            for="list-all"
+            id="list-all"
+            clickable
+            @click="manageProperties('all')"
+          >
             <div class="full-width flex items-center">
               <q-icon
                 v-if="
@@ -260,6 +266,8 @@ function confirmDelete(items: unknown[], index: number) {
             clickable
             :key="index"
             @click="manageProperties(ops.value, ops.type)"
+            :for="`list-${ops.value}`"
+            :id="`list-${ops.value}`"
           >
             <div class="full-width flex items-center no-wrap">
               <q-icon
@@ -349,6 +357,7 @@ function confirmDelete(items: unknown[], index: number) {
             emit-value
             map-options
             hide-bottom-space
+            for="input-properties-name"
             class="col-md col-12 q-mr-md"
             :class="{ 'q-my-sm': $q.screen.lt.md }"
             :label="$t('productService.service.propertiesName')"
@@ -378,6 +387,8 @@ function confirmDelete(items: unknown[], index: number) {
             emit-value
             map-options
             hide-bottom-space
+            for="input-properties-type"
+            id="input-properties-type"
             :label="$t('general.type')"
             option-value="value"
             @update:model-value="
@@ -426,6 +437,7 @@ function confirmDelete(items: unknown[], index: number) {
                 v-if="scope.opt"
                 v-bind="scope.itemProps"
                 class="row items-center col-12"
+                :id="`type-${scope.itemProps}`"
               >
                 <q-avatar
                   size="sm"
@@ -474,6 +486,7 @@ function confirmDelete(items: unknown[], index: number) {
                   <div class="row items-center">
                     <div class="col-7 surface-3 rounded q-mr-sm q-py-xs">
                       <q-checkbox
+                        :for="`checkbox-is-phone-number-${p.fieldName}`"
                         v-if="p.type === 'string'"
                         v-model="p.isPhoneNumber"
                         size="xs"
@@ -482,6 +495,7 @@ function confirmDelete(items: unknown[], index: number) {
                     </div>
                     <q-input
                       v-if="p.type === 'string'"
+                      :for="`input-max-length-${p.fieldName}`"
                       v-model="p.phoneNumberLength"
                       input-class="text-caption"
                       class="col additional-label"
@@ -495,7 +509,12 @@ function confirmDelete(items: unknown[], index: number) {
                 <div v-if="p.type === 'number'" class="q-gutter-y-sm">
                   <div class="row items-center">
                     <div class="col-md-4 col-12 surface-3 rounded">
-                      <q-checkbox v-model="p.comma" size="xs" class="q-py-xs" />
+                      <q-checkbox
+                        v-model="p.comma"
+                        size="xs"
+                        class="q-py-xs"
+                        :for="`checkbox-is-comma-${p.fieldName}`"
+                      />
                       {{ $t('form.useComma') }}
                     </div>
                     <div
@@ -509,10 +528,12 @@ function confirmDelete(items: unknown[], index: number) {
                         v-model="p.decimal"
                         size="xs"
                         class="q-py-xs"
+                        :for="`checkbox-is-decimal-${p.fieldName}`"
                       />
                       {{ $t('form.decimal') }}
                     </div>
                     <q-input
+                      :for="`input-decimal-place-${p.fieldName}`"
                       v-model="p.decimalPlace"
                       class="col additional-label"
                       :class="{ 'q-mt-xs': $q.screen.lt.md }"
@@ -533,6 +554,7 @@ function confirmDelete(items: unknown[], index: number) {
                     <div class="col rounded">
                       <q-input
                         v-model="p.options[i]"
+                        :for="`input-selection-${p.fieldName}-${i}`"
                         class="col additional-label"
                         dense
                         outlined
@@ -544,6 +566,8 @@ function confirmDelete(items: unknown[], index: number) {
                     </div>
                     <div class="col-1 q-pl-sm">
                       <q-btn
+                        :id="`btn-delete-selection-${p.fieldName}-${i}`"
+                        :for="`btn-delete-selection-${p.fieldName}-${i}`"
                         @click="
                           () => {
                             p.options.splice(i, 1);
@@ -560,6 +584,8 @@ function confirmDelete(items: unknown[], index: number) {
                   </div>
                   <div class="row">
                     <q-btn
+                      :for="`btn-add-selection-${p.fieldName}`"
+                      :id="`btn-add-selection-${p.fieldName}`"
                       @click="
                         () => {
                           p.options.push('');