From 637eeab3c2eadaa174c119b790ad05634d55ec61 Mon Sep 17 00:00:00 2001
From: Aif <aif912752@gmail.com>
Date: Tue, 11 Nov 2025 10:02:13 +0700
Subject: [PATCH] feat: unique IDs to UI components for testing

---
 .../09_task-order/SelectReadyRequestWork.vue  | 10 ++++-
 src/pages/09_task-order/TableEmployee.vue     | 39 +++++++++++++++----
 .../expansion/ProductExpansion.vue            | 11 +++++-
 .../09_task-order/order_view/MainPage.vue     | 24 +++++++++++-
 4 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/src/pages/09_task-order/SelectReadyRequestWork.vue b/src/pages/09_task-order/SelectReadyRequestWork.vue
index a3cf6856..5276a1a5 100644
--- a/src/pages/09_task-order/SelectReadyRequestWork.vue
+++ b/src/pages/09_task-order/SelectReadyRequestWork.vue
@@ -295,6 +295,7 @@ function assignTempGroup() {
           class="bordered-b"
         >
           <q-expansion-item
+            :id="`expansion-product-${product.code}`"
             dense
             class="overflow-hidden"
             switch-toggle-side
@@ -348,6 +349,7 @@ function assignTempGroup() {
               </FormGroupHead>
               <div class="q-pa-md full-width">
                 <TableEmployee
+                  :id="`table-employee-${product.code}`"
                   checkbox-on
                   check-all
                   select-ready
@@ -371,9 +373,15 @@ function assignTempGroup() {
     </section>
 
     <template #footer>
-      <CancelButton class="q-ml-auto" outlined @click="close" />
+      <CancelButton
+        id="btn-dialog-cancel"
+        class="q-ml-auto"
+        outlined
+        @click="close"
+      />
       <SaveButton
         :label="$t('general.select')"
+        id="btn-dialog-select"
         class="q-ml-sm"
         icon="mdi-check"
         solid
diff --git a/src/pages/09_task-order/TableEmployee.vue b/src/pages/09_task-order/TableEmployee.vue
index e0fd0207..f8aababf 100644
--- a/src/pages/09_task-order/TableEmployee.vue
+++ b/src/pages/09_task-order/TableEmployee.vue
@@ -225,6 +225,7 @@ function disableCheckAll() {
 <template>
   <q-table
     flat
+    id="table-employee"
     bordered
     row-key="id"
     v-bind="props"
@@ -273,6 +274,7 @@ function disableCheckAll() {
       >
         <q-th v-if="checkboxOn" class="relative-position">
           <q-checkbox
+            id="checkbox-check-all"
             v-if="checkAll"
             :disable="disableCheckAll()"
             :model-value="
@@ -305,6 +307,7 @@ function disableCheckAll() {
             class="absolute-right row items-center"
           >
             <q-btn
+              id="btn-change-all-status"
               flat
               dense
               rounded
@@ -339,6 +342,7 @@ function disableCheckAll() {
                     {{ $t(`taskOrder.status.Complete`) }}
                   </q-item>
                   <q-item
+                    id="menu-item-redo"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -358,6 +362,7 @@ function disableCheckAll() {
                     {{ $t(`taskOrder.status.Redo`) }}
                   </q-item>
                   <q-item
+                    id="menu-item-restart"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -379,6 +384,7 @@ function disableCheckAll() {
                 </q-list>
                 <q-list v-if="!validate" dense>
                   <q-item
+                    id="menu-item-success"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -398,6 +404,7 @@ function disableCheckAll() {
                     {{ $t(`taskOrder.status.Success`) }}
                   </q-item>
                   <q-item
+                    id="menu-item-failed"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -480,6 +487,7 @@ function disableCheckAll() {
         <q-td>
           <span
             class="cursor-pointer link"
+            :id="`link-request-list-${props.row.request.code}`"
             @click="goToRequestList(props.row.request.id)"
           >
             {{ props.row.request.code }}
@@ -489,6 +497,7 @@ function disableCheckAll() {
         <q-td>
           <span
             class="cursor-pointer link"
+            :id="`link-quotation-${props.row.request.quotation?.code}`"
             @click="goToQuotation(props.row.request.quotation)"
           >
             {{ props.row.request.quotation?.code }}
@@ -496,7 +505,11 @@ function disableCheckAll() {
         </q-td>
 
         <q-td v-if="stepOn" class="text-left">
-          <div v-if="props.row._template" class="column text-left">
+          <div
+            v-if="props.row._template"
+            class="column text-left"
+            :id="`template-step-${props.row.request.code}`"
+          >
             <span>{{ props.row._template.templateName }}</span>
             <span class="app-text-muted text-caption">
               {{ $t('flow.stepNo', { msg: props.row._template.step }) }}
@@ -522,7 +535,10 @@ function disableCheckAll() {
                 </template>
               </q-img>
             </q-avatar>
-            <div class="column text-left q-ml-sm">
+            <div
+              class="column text-left q-ml-sm"
+              :id="`employee-name-${props.row.request.employee?.code}`"
+            >
               <div>
                 {{ getEmployeeName(props.row, { locale: $i18n.locale }) }}
               </div>
@@ -532,6 +548,7 @@ function disableCheckAll() {
               </div>
             </div>
             <Icon
+              :id="`icon-gender-${props.row.request.employee?.code}`"
               class="q-ml-md"
               :class="`app-text-${props.row.request.employee?.gender}`"
               :icon="`material-symbols:${props.row.request.employee?.gender}`"
@@ -539,13 +556,18 @@ function disableCheckAll() {
             />
           </div>
         </q-td>
-        <q-td>{{ calculateAge(props.row.request.employee?.dateOfBirth) }}</q-td>
-        <q-td>
+        <q-td :id="`employee-age-${props.row.request.employee?.code}`">
+          {{ calculateAge(props.row.request.employee?.dateOfBirth) }}
+        </q-td>
+        <q-td :id="`employee-nationality-${props.row.request.employee?.code}`">
           {{
             useOptionStore().mapOption(props.row.request.employee?.nationality)
           }}
         </q-td>
-        <q-td>
+        <q-td
+          :id="`quotation-due-date-${props.row.request.quotation?.code}`"
+          v-if="!statusOn"
+        >
           {{
             dateFormatJS({
               date: props.row.request.quotation?.dueDate,
@@ -555,13 +577,16 @@ function disableCheckAll() {
             })
           }}
         </q-td>
-        <q-td>
+        <q-td
+          :id="`expiration-date-${props.row.request.quotation?.code}`"
+          v-if="!statusOn"
+        >
           <ExpirationDate
             :expiration-date="new Date(props.row.request.quotation?.dueDate)"
           />
         </q-td>
 
-        <q-td>
+        <q-td v-if="!statusOn">
           <BadgeComponent
             v-if="props.row.request.quotation?.urgent"
             icon="mdi-fire"
diff --git a/src/pages/09_task-order/expansion/ProductExpansion.vue b/src/pages/09_task-order/expansion/ProductExpansion.vue
index 3190b966..87c31ae6 100644
--- a/src/pages/09_task-order/expansion/ProductExpansion.vue
+++ b/src/pages/09_task-order/expansion/ProductExpansion.vue
@@ -123,6 +123,7 @@ function taskOrderStatus(value: TaskStatus) {
       <span
         class="row items-center justify-between full-width"
         style="min-height: 31.01px"
+        id="header-product-list"
       >
         {{ $t('general.information', { msg: $t('taskOrder.productList') }) }}
         <AddButton
@@ -135,6 +136,7 @@ function taskOrderStatus(value: TaskStatus) {
 
     <main class="q-px-md q-py-sm surface-1">
       <q-table
+        id="table-product-list"
         :columns="
           creditNote
             ? productColumn.filter(
@@ -180,7 +182,7 @@ function taskOrderStatus(value: TaskStatus) {
           } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
         >
           <q-tr class="text-center">
-            <q-td>
+            <q-td :id="`product-order-${props.rowIndex}`">
               {{ props.rowIndex + 1 }}
             </q-td>
             <q-td>
@@ -206,6 +208,7 @@ function taskOrderStatus(value: TaskStatus) {
             </q-td>
             <q-td class="text-left" v-if="!creditNote">
               <BadgeComponent
+                :id="`badge-status-${props.row.product.code}`"
                 hide-icon
                 :hsla-color="taskOrderStatus(props.row.product.taskStatus)"
                 :title="`${$t(`taskOrder.status.${props.row.product.taskStatus}`)} ${!!props.row.product.totalNotStatusComplete ? $t('general.totalPeople', { meg: props.row.product.totalNotStatusComplete }) : ''}`"
@@ -230,6 +233,7 @@ function taskOrderStatus(value: TaskStatus) {
             <!-- TODO: display price detail -->
             <q-td align="center" v-if="!creditNote">
               <q-input
+                :id="`input-discount-${props.row.product.code}`"
                 :readonly
                 :bg-color="readonly ? 'transparent' : ''"
                 dense
@@ -311,6 +315,7 @@ function taskOrderStatus(value: TaskStatus) {
             </q-td>
             <q-td>
               <q-btn
+                :id="`btn-toggle-employee-${props.row.product.code}`"
                 dense
                 flat
                 class="rounded"
@@ -351,7 +356,9 @@ function taskOrderStatus(value: TaskStatus) {
             })
           }}
         </span>
-        <div class="surface-3 q-px-sm rounded">{{ taskList.length }}</div>
+        <div class="surface-3 q-px-sm rounded" id="total-product-count">
+          {{ taskList.length }}
+        </div>
       </div>
     </main>
   </q-expansion-item>
diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index 53ca7fba..8de2e5cd 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -814,7 +814,7 @@ watch(
     >
       <section class="banner" :class="{ dark: $q.dark.isActive }"></section>
       <div style="flex: 1" class="row items-center">
-        <RouterLink to="/task-order">
+        <RouterLink to="/task-order" id="link-task-order">
           <q-img src="/icons/favicon-512x512.png" width="3rem" />
         </RouterLink>
         <span class="column text-h6 text-bold q-ml-md">
@@ -863,6 +863,7 @@ watch(
             <!-- TODO: replace step and status -->
             <StateButton
               v-for="i in statusTabForm"
+              :id="`btn-status-${i.title}`"
               :key="i.title"
               :label="$t(`taskOrder.${i.title}`)"
               :status-active="i.active?.()"
@@ -916,6 +917,7 @@ watch(
             "
           >
             <DocumentExpansion
+              id="expansion-document"
               :readonly="!['create', 'edit'].includes(state.mode || '')"
               v-model:registered-branch-id="currentFormData.registeredBranchId"
               v-model:institution-id="currentFormData.institutionId"
@@ -935,6 +937,7 @@ watch(
             />
           </q-form>
           <ProductExpansion
+            id="expansion-product"
             ref="refProductExpansion"
             v-if="
               view === TaskOrderStatus.Pending ||
@@ -947,6 +950,7 @@ watch(
           />
 
           <PaymentExpansion
+            id="expansion-payment"
             v-model:summary-price="summaryPrice"
             :complete="view === TaskOrderStatus.Complete"
             v-if="
@@ -956,6 +960,7 @@ watch(
           />
 
           <AdditionalFileExpansion
+            id="expansion-additional-file"
             :readonly="!['create', 'edit'].includes(state.mode || '')"
             v-if="
               view === TaskOrderStatus.Pending ||
@@ -1014,6 +1019,7 @@ watch(
           />
           <!-- TODO: blind remark, urgent -->
           <RemarkExpansion
+            id="expansion-remark"
             v-if="
               view === TaskOrderStatus.Pending ||
               view === TaskOrderStatus.Complete
@@ -1038,6 +1044,7 @@ watch(
             "
           >
             <InfoMessengerExpansion
+              :id="`expansion-messenger-${messengerIndex}`"
               v-for="(v, messengerIndex) in messengerListGroup"
               :key="messengerIndex"
               :gender="getMessengerName(v.responsibleUser, { gender: true })"
@@ -1073,6 +1080,7 @@ watch(
                   class="bordered-b"
                 >
                   <q-expansion-item
+                    :id="`expansion-product-${productIndex}`"
                     dense
                     class="overflow-hidden"
                     switch-toggle-side
@@ -1246,6 +1254,7 @@ watch(
       <nav class="row justify-end">
         <MainButton
           class="q-mr-auto"
+          id="btn-view-example"
           v-if="currentFormData.id"
           outlined
           icon="mdi-play-box-outline"
@@ -1260,10 +1269,16 @@ watch(
           {{ $t('general.view', { msg: $t('general.example') }) }}
         </MainButton>
         <div class="row" style="gap: var(--size-2)">
-          <UndoButton outlined @click="undo()" v-if="state.mode === 'edit'" />
+          <UndoButton
+            id="btn-undo"
+            outlined
+            @click="undo()"
+            v-if="state.mode === 'edit'"
+          />
           <CancelButton
             v-if="state.mode !== 'edit'"
             :label="$t('dialog.action.close')"
+            id="btn-close"
             outlined
             @click="closeTab()"
           />
@@ -1275,12 +1290,14 @@ watch(
             "
           >
             <SaveButton
+              id="btn-save"
               v-if="state.mode && ['create', 'edit'].includes(state.mode)"
               @click="() => formDocument.submit()"
               solid
             />
             <EditButton
               v-else
+              id="btn-edit"
               class="no-print"
               @click="state.mode = 'edit'"
               solid
@@ -1288,6 +1305,7 @@ watch(
           </template>
           <SaveButton
             v-if="
+              canAccess('taskOrder', 'edit') &&
               state.mode !== 'create' &&
               view === TaskOrderStatus.Validate &&
               fullTaskOrder?.taskOrderStatus !== TaskOrderStatus.Pending &&
@@ -1326,6 +1344,7 @@ watch(
             "
             :label="$t('taskOrder.confirmEndWork')"
             icon="mdi-check"
+            id="btn-confirm-end-work"
             solid
           ></SaveButton>
         </div>
@@ -1335,6 +1354,7 @@ watch(
 
   <!-- SEC: Dialog -->
   <SelectReadyRequestWork
+    id="dialog-select-request-work"
     :task-list-group="taskListGroup"
     :fetch-params="{ readyToTask: true }"
     v-model:open="pageState.productDialog"