feat: unique id attributes to UI components

src/pages/09_task-order/TableTaskOrder.vue

@@ -114,6 +114,7 @@ const emit = defineEmits<{
 </script>
 <template>
   <q-table
+    id="table-task-order"
     v-bind="props"
     :columns="column"
     bordered
@@ -133,7 +134,11 @@ const emit = defineEmits<{
         :props="props"
       >
         <q-th v-if="selection !== 'none'">
-          <q-checkbox v-model="props.selected" size="sm" />
+          <q-checkbox
+            id="checkbox-select-all-task"
+            v-model="props.selected"
+            size="sm"
+          />
         </q-th>
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           {{ col.label && $t(col.label) }}
@@ -149,13 +154,21 @@ const emit = defineEmits<{
     >
       <q-tr class="text-center" :class="{ urgent: props.row.urgent }">
         <q-td v-if="selection !== 'none'">
-          <q-checkbox v-model="props.selected" size="sm" />
+          <q-checkbox
+            :id="`checkbox-task-${props.row.code}`"
+            v-model="props.selected"
+            size="sm"
+          />
         </q-td>
         <q-td v-if="visibleColumns.includes('order')">
           {{ props.rowIndex + 1 }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('taskName')" class="text-left">
-          <div>
+        <q-td
+          v-if="visibleColumns.includes('taskName')"
+          class="text-left"
+          :id="`task-name-${props.row.code}`"
+        >
+          <div :id="`task-name-div-${props.row.code}`">
             {{ props.row.taskName || '-' }}
             <q-tooltip :delay="300">
               {{ props.row.taskName || '-' }}
@@ -170,31 +183,51 @@ const emit = defineEmits<{
             }}
           </div>
         </q-td>
-        <q-td v-if="visibleColumns.includes('issueBranch')">
+        <q-td
+          v-if="visibleColumns.includes('issueBranch')"
+          :id="`task-issue-branch-${props.row.code}`"
+        >
           {{
             $i18n.locale === 'eng'
               ? props.row.registeredBranch.nameEN || '-'
               : props.row.registeredBranch.name || '-'
           }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('institution')">
+        <q-td
+          v-if="visibleColumns.includes('institution')"
+          :id="`task-institution-${props.row.code}`"
+        >
           {{
             $i18n.locale === 'eng'
               ? props.row.institution.nameEN || '-'
               : props.row.institution.name || '-'
           }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('createdAt')">
+        <q-td
+          v-if="visibleColumns.includes('createdAt')"
+          :id="`task-created-at-${props.row.code}`"
+        >
           {{ dateFormatJS({ date: props.row.createdAt }) || '-' }}
           {{ dateFormatJS({ date: props.row.createdAt, timeOnly: true }) }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('createdBy')" class="text-left">
+        <q-td
+          v-if="visibleColumns.includes('createdBy')"
+          class="text-left"
+          :id="`task-created-by-${props.row.code}`"
+        >
           {{ getCreatedByName(props.row, $i18n) }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('contactTel')">
+        <q-td
+          v-if="visibleColumns.includes('contactTel')"
+          :id="`task-contact-tel-${props.row.code}`"
+        >
           {{ props.row.contactTel || '-' }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('contactName')" class="text-left">
+        <q-td
+          v-if="visibleColumns.includes('contactName')"
+          class="text-left"
+          :id="`task-contact-name-${props.row.code}`"
+        >
           {{ props.row.contactName || '-' }}
         </q-td>
         <q-td v-if="visibleColumns.includes('taskStatus')">
@@ -202,11 +235,12 @@ const emit = defineEmits<{
             hide-icon
             :hsla-color="taskOrderStatus(props.row.taskOrderStatus, 'color')"
             :title="$t(taskOrderStatus(props.row.taskOrderStatus, 'status'))"
+            :id="`badge-task-status-${props.row.code}`"
           />
         </q-td>
         <q-td v-if="selection === 'none'">
           <q-btn
-            :id="`btn-eye-${props.row.taskName}`"
+            :id="`btn-view-task-${props.row.code}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -221,7 +255,7 @@ const emit = defineEmits<{
               canAccess('taskOrder', 'edit')
             "
             :hide-delete="!canAccess('taskOrder', 'create')"
-            :idName="`btn-kebab-${props.row.taskName}`"
+            :idName="`btn-kebab-${props.row.code}`"
             status="'ACTIVE'"
             hide-toggle
             @view="$emit('view', props.row)"
@@ -233,6 +267,7 @@ const emit = defineEmits<{
           <q-btn
             dense
             flat
+            :id="`btn-sub-row-${props.row.code}`"
             class="rounded"
             @click.stop="
               () => {