From 79d6482caa681f01ccd28acd9ce85c1567305268 Mon Sep 17 00:00:00 2001
From: Aif <aif912752@gmail.com>
Date: Tue, 11 Nov 2025 15:02:36 +0700
Subject: [PATCH] Add unique id and for attributes to status elements

Introduces dynamic id and for attributes to readonly status, dropdown, menu items, and failed remark button for improved accessibility and testability in TaskStatusComponent.vue.
---
 .../09_task-order/TaskStatusComponent.vue     | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/pages/09_task-order/TaskStatusComponent.vue b/src/pages/09_task-order/TaskStatusComponent.vue
index 30a7195b..5b223cbd 100644
--- a/src/pages/09_task-order/TaskStatusComponent.vue
+++ b/src/pages/09_task-order/TaskStatusComponent.vue
@@ -60,16 +60,25 @@ function inactiveCheck() {
 </script>
 <template>
   <div
+    :id="`readonly-status-${status}`"
+    :for="`readonly-status-${status}`"
     v-if="readonly"
     class="row rounded bordered surface-2 items-center justify-center q-pa-xs no-wrap"
     :style="`color: hsl(var(--${currStatus?.color}-bg))`"
   >
-    <q-icon :name="currStatus?.icon" class="q-pr-xs" size="xs" />
-    {{ $t(`taskOrder.status.${status}`) }}
+    <q-icon
+      :id="`readonly-status-icon-${status}`"
+      :name="currStatus?.icon"
+      class="q-pr-xs"
+      size="xs"
+    />
+    <span :id="`readonly-status-label-${status}`">{{ $t(`taskOrder.status.${status}`) }}</span>
   </div>
 
   <div v-else class="row items-center justify-center no-wrap">
     <q-btn-dropdown
+      :id="`btn-dropdown-status-${status}`"
+      :for="`btn-dropdown-status-${status}`"
       dense
       unelevated
       :label="
@@ -110,6 +119,8 @@ function inactiveCheck() {
     >
       <q-list v-if="!noAction" dense>
         <q-item
+          :for="`menu-item-status-${v.value}`"
+          :id="`menu-item-status-${v.value}`"
           v-for="(v, index) in type === 'order'
             ? {
                 Success: taskStatusOrderToggle.filter(
@@ -147,6 +158,8 @@ function inactiveCheck() {
     </q-btn-dropdown>
 
     <q-btn
+      :id="`btn-failed-remark-${status}`"
+      :for="`btn-failed-remark-${status}`"
       v-if="currStatus?.value === TaskStatus.Failed"
       flat
       dense
@@ -186,9 +199,9 @@ function inactiveCheck() {
 }
 
 :deep(
-    .hide-icon
-      i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
-  ) {
+  .hide-icon
+    i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
+) {
   display: none;
 }
 </style>