From 758b00576809f6bca835bbc4256dd3b7b1b3d6cd Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 18 Feb 2025 17:13:36 +0700
Subject: [PATCH] refactor: add id

---
 src/components/05_quotation/TableQuotation.vue        | 6 +++---
 src/components/shared/select/SelectCustomer.vue       | 3 +++
 src/components/shared/table/TableWorker.vue           | 7 ++++++-
 src/pages/05_quotation/MainPage.vue                   | 1 +
 src/pages/05_quotation/PaymentForm.vue                | 4 ++++
 src/pages/05_quotation/QuotationForm.vue              | 9 +++++++++
 src/pages/05_quotation/QuotationFormProductSelect.vue | 2 ++
 src/pages/05_quotation/QuotationFormWorkerSelect.vue  | 6 +++++-
 src/pages/05_quotation/TableRequest.vue               | 1 +
 src/pages/08_request-list/TableRequestList.vue        | 3 ++-
 src/pages/11_credit-note/TableCreditNote.vue          | 1 +
 src/pages/12_debit-note/TableDebitNote.vue            | 1 +
 12 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/05_quotation/TableQuotation.vue b/src/components/05_quotation/TableQuotation.vue
index e51b9979..e3d46c56 100644
--- a/src/components/05_quotation/TableQuotation.vue
+++ b/src/components/05_quotation/TableQuotation.vue
@@ -127,7 +127,7 @@ defineEmits<{
 
         <q-td class="text-right">
           <q-btn
-            :id="`btn-eye-${props.row.firstName}`"
+            :id="`btn-preview-${props.row.workName}`"
             icon="mdi-play-box-outline"
             size="sm"
             dense
@@ -137,7 +137,7 @@ defineEmits<{
           />
 
           <q-btn
-            :id="`btn-eye-${props.row.firstName}`"
+            :id="`btn-eye-${props.row.workName}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -147,7 +147,7 @@ defineEmits<{
           />
 
           <KebabAction
-            :idName="`btn-kebab-${props.row.firstName}`"
+            :idName="`btn-kebab-${props.row.workName}`"
             status="'ACTIVE'"
             hide-toggle
             hide-delete
diff --git a/src/components/shared/select/SelectCustomer.vue b/src/components/shared/select/SelectCustomer.vue
index 5644dd79..8adecb3c 100644
--- a/src/components/shared/select/SelectCustomer.vue
+++ b/src/components/shared/select/SelectCustomer.vue
@@ -72,6 +72,7 @@ onMounted(async () => {
     v-model="value"
     option-value="id"
     incremental
+    for="select-customer"
     :label
     :placeholder
     :readonly
@@ -129,6 +130,8 @@ onMounted(async () => {
         clickable
         v-close-popup
         @click.stop="$emit('create')"
+        for="select-customer-add-new"
+        id="select-customer-add-new"
       >
         <q-item-section>
           <span class="row items-center">
diff --git a/src/components/shared/table/TableWorker.vue b/src/components/shared/table/TableWorker.vue
index 73d446ac..4ec870bc 100644
--- a/src/components/shared/table/TableWorker.vue
+++ b/src/components/shared/table/TableWorker.vue
@@ -142,6 +142,7 @@ function selectedIndex(item: Employee) {
           </template>
           <template v-if="col.name === '#check'">
             <q-checkbox
+              id="select-worker-all"
               v-model="props.selected"
               @update:model-value="(v) => handleUpdate()"
               size="sm"
@@ -193,7 +194,11 @@ function selectedIndex(item: Employee) {
               !disabledWorkerId?.some((id) => id === props.row.id)
             "
           >
-            <q-checkbox v-model="props.selected" size="sm" />
+            <q-checkbox
+              v-model="props.selected"
+              size="sm"
+              :id="`select-worker-${props.row.firstName}`"
+            />
           </template>
         </q-td>
       </q-tr>
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 12fae417..410a6bbf 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -894,6 +894,7 @@ async function storeDataLocal(id: string) {
         :text="value.text"
         :icon-color="value.iconColor"
         :bg-color="value.color"
+        :id="`btn-add-new-${value.text}`"
         @trigger="
           () => {
             triggerCreateCustomerd({
diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 89ae4fd1..06566ead 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -514,6 +514,7 @@ onMounted(async () => {
 
                     <div class="q-ml-auto row" style="gap: 10px">
                       <q-btn
+                        id="btn-payment"
                         @click.stop
                         unelevated
                         padding="4px 8px"
@@ -552,6 +553,7 @@ onMounted(async () => {
                               :key="opts.status"
                             >
                               <q-item
+                                :id="`btn-payment-${opts.status}`"
                                 v-if="
                                   (p.paymentStatus === 'PaymentWait' &&
                                     opts.status !== 'PaymentRetry') ||
@@ -591,6 +593,7 @@ onMounted(async () => {
                       flat
                       rounded
                       padding="0"
+                      id="btn-show-file"
                       :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
                       @click.stop="
                         state.payExpansion[i] = !state.payExpansion[i]
@@ -625,6 +628,7 @@ onMounted(async () => {
                   }}
                   <q-btn
                     unelevated
+                    id="btn-upload-file"
                     :label="$t('general.upload')"
                     rounded
                     class="app-bg-info q-mt-sm"
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 592deee0..6a83c4ba 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1421,6 +1421,7 @@ async function formDownload() {
           >
             <button
               v-for="value in statusQuotationForm"
+              :id="`btn-status-${value.title}`"
               :key="value.title"
               class="q-pa-sm bordered status-color row items-center"
               :class="{
@@ -1553,6 +1554,8 @@ async function formDownload() {
                   </div>
                   <nav class="q-ml-auto">
                     <AddButton
+                      id="btn-add-worker"
+                      for="btn-add-worker"
                       v-if="
                         !readonly &&
                         (!quotationFormState.source ||
@@ -1565,6 +1568,8 @@ async function formDownload() {
                       @click.stop="triggerSelectEmployeeDialog"
                     />
                     <AddButton
+                      id="btn-add-worker"
+                      for="btn-add-worker"
                       v-if="
                         !!quotationFormState.source &&
                         quotationFormState.source.quotationStatus !==
@@ -1621,6 +1626,7 @@ async function formDownload() {
                       v-if="!readonly"
                       icon-only
                       class="q-ml-auto"
+                      id="trigger-product-service-dialog"
                       @click.stop="triggerProductServiceDialog"
                     />
                   </nav>
@@ -2243,6 +2249,7 @@ async function formDownload() {
           outlined
           icon="mdi-play-box-outline"
           color="207 96% 32%"
+          id="btn-view-example"
           @click="storeDataLocal"
         >
           {{ $t('general.view', { msg: $t('general.example') }) }}
@@ -2258,6 +2265,7 @@ async function formDownload() {
             solid
             icon="mdi-account-multiple-check-outline"
             color="207 96% 32%"
+            id="btn-submit-accepted"
             @click="
               () => {
                 submitAccepted();
@@ -2273,6 +2281,7 @@ async function formDownload() {
             solid
             icon="mdi-account-multiple-check-outline"
             color="207 96% 32%"
+            id="btn-select-invoice"
             @click="
               () => {
                 view = View.Invoice;
diff --git a/src/pages/05_quotation/QuotationFormProductSelect.vue b/src/pages/05_quotation/QuotationFormProductSelect.vue
index dc7868bb..0a22545b 100644
--- a/src/pages/05_quotation/QuotationFormProductSelect.vue
+++ b/src/pages/05_quotation/QuotationFormProductSelect.vue
@@ -508,6 +508,7 @@ watch(
                   flat
                   rounded
                   icon="mdi-store-plus-outline"
+                  id="trigger-add-dialog"
                   @click="triggerAddDialog"
                 />
                 <q-btn
@@ -515,6 +516,7 @@ watch(
                   flat
                   rounded
                   icon="mdi-information-outline"
+                  id="trigger-info"
                   @click="triggerInfo"
                   :color="pageState.infoDrawer ? 'info' : ''"
                   style="color: hsl(var(--text-mute))"
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index e03a02f4..90c1cc41 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@@ -289,6 +289,7 @@ watch(() => state.search, getWorkerList);
             <q-menu class="bordered" ref="refMenu">
               <q-list>
                 <q-item
+                  id="trigger-create-employee"
                   v-close-popup
                   dense
                   clickable
@@ -308,6 +309,7 @@ watch(() => state.search, getWorkerList);
                 </q-item>
 
                 <q-item
+                  id="import-worker"
                   v-close-popup
                   dense
                   clickable
@@ -470,6 +472,7 @@ watch(() => state.search, getWorkerList);
                 <template #grid="{ item: emp, index }">
                   <div :key="emp.id" class="col-md-2 col-sm-6 col-12">
                     <button
+                      :id="`select-worker-${emp.firstName}`"
                       class="selectable-item full-width"
                       :class="{
                         ['selectable-item__selected']:
@@ -520,11 +523,12 @@ watch(() => state.search, getWorkerList);
     </div>
     <template #footer>
       <div class="q-gutter-x-xs q-ml-auto">
-        <CancelButton outlined @click="clean" />
+        <CancelButton id="btn-cancel" outlined @click="clean" />
         <MainButton
           icon="mdi-check"
           color="207 96% 32%"
           solid
+          id="btn-success"
           @click="
             emits('success', {
               worker: workerSelected,
diff --git a/src/pages/05_quotation/TableRequest.vue b/src/pages/05_quotation/TableRequest.vue
index bd15da5b..60eda59e 100644
--- a/src/pages/05_quotation/TableRequest.vue
+++ b/src/pages/05_quotation/TableRequest.vue
@@ -102,6 +102,7 @@ function goToRequestList(id: string) {
           <template v-if="col.name === '#codeRequest'">
             <span
               class="cursor-pointer link"
+              :id="`go-to-request-list-${props.row.code}`"
               @click="goToRequestList(props.row.id)"
             >
               {{ props.row.code }}
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 3b8d2cdb..8bcf03a3 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -186,7 +186,7 @@ function getEmployeeName(
         </q-td>
         <q-td class="text-right">
           <q-btn
-            :id="`btn-eye-${props.row.quotation.workName}`"
+            :id="`btn-eye-${props.row.code}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -196,6 +196,7 @@ function getEmployeeName(
           />
 
           <KebabAction
+            :id-name="`btn-kebab-${props.row.code}`"
             hide-edit
             hide-toggle
             hide-view
diff --git a/src/pages/11_credit-note/TableCreditNote.vue b/src/pages/11_credit-note/TableCreditNote.vue
index 879b5fbd..ed82be7d 100644
--- a/src/pages/11_credit-note/TableCreditNote.vue
+++ b/src/pages/11_credit-note/TableCreditNote.vue
@@ -74,6 +74,7 @@ const visible = computed(() =>
 
           <template v-if="col.name === '#action'">
             <KebabAction
+              :id-name="`btn-kebab-${props.row.quotation.workName}`"
               hide-edit
               hide-toggle
               :hide-delete
diff --git a/src/pages/12_debit-note/TableDebitNote.vue b/src/pages/12_debit-note/TableDebitNote.vue
index 77d26d18..f94bf9e6 100644
--- a/src/pages/12_debit-note/TableDebitNote.vue
+++ b/src/pages/12_debit-note/TableDebitNote.vue
@@ -77,6 +77,7 @@ const visible = computed(() =>
 
           <template v-if="col.name === '#action'">
             <KebabAction
+              :id-name="`btn-kebab-${props.row.workName}`"
               hide-toggle
               hide-edit
               @edit="$emit('edit', props.row)"