From 2b1e3b12a425741b325c77572c2fc190100c1db3 Mon Sep 17 00:00:00 2001
From: net <net@chamomind.local>
Date: Fri, 7 Nov 2025 16:24:10 +0700
Subject: [PATCH] refacotr: add id

---
 src/components/08_request-list/DataDisplay.vue   |  4 ++++
 src/components/shared/SelectInput.vue            |  1 +
 src/components/shared/select/SelectUser.vue      |  2 ++
 src/pages/08_request-list/DocumentExpansion.vue  |  5 +++--
 src/pages/08_request-list/DutyExpansion.vue      |  7 ++++---
 src/pages/08_request-list/FormExpansion.vue      |  7 ++++---
 .../08_request-list/FormResponsibleUser.vue      |  7 +++++++
 src/pages/08_request-list/MessengerExpansion.vue |  8 +++++---
 src/pages/08_request-list/ProductExpansion.vue   | 16 +++++++++++-----
 .../08_request-list/PropertiesExpansion.vue      |  6 ++++--
 src/pages/08_request-list/RequestListView.vue    |  5 +++++
 src/pages/08_request-list/TableRequestList.vue   |  4 ++++
 12 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/src/components/08_request-list/DataDisplay.vue b/src/components/08_request-list/DataDisplay.vue
index a52060f3..916897bb 100644
--- a/src/components/08_request-list/DataDisplay.vue
+++ b/src/components/08_request-list/DataDisplay.vue
@@ -37,6 +37,8 @@ withDefaults(
             :class="{ 'link cursor-pointer': clickable }"
             v-if="typeof value === 'string'"
             @click="clickable ? $emit('labelClick', value, null) : undefined"
+            :id="`link-${value}`"
+            :for="`link-${value}`"
           >
             {{ value }}
             <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
@@ -47,6 +49,8 @@ withDefaults(
               :key="index"
               @click="$emit('labelClick', item, index)"
               class="link cursor-pointer"
+              :id="`link-${item}`"
+              :for="`link-${item}`"
             >
               {{ item }}
               <span v-if="index < value.length - 1">,&nbsp;</span>
diff --git a/src/components/shared/SelectInput.vue b/src/components/shared/SelectInput.vue
index 690b8642..2a89b919 100644
--- a/src/components/shared/SelectInput.vue
+++ b/src/components/shared/SelectInput.vue
@@ -13,6 +13,7 @@ let defaultFilter: (
 
 const props = withDefaults(
   defineProps<{
+    prefix?: string;
     id?: string;
     label?: string;
     option: T[];
diff --git a/src/components/shared/select/SelectUser.vue b/src/components/shared/select/SelectUser.vue
index b931d07e..5a8b89e3 100644
--- a/src/components/shared/select/SelectUser.vue
+++ b/src/components/shared/select/SelectUser.vue
@@ -26,6 +26,7 @@ defineEmits<{
 
 type ExclusiveProps = {
   selectFirstValue?: boolean;
+  prefix?: string;
 };
 
 const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
@@ -71,6 +72,7 @@ function setDefaultValue() {
   <SelectInput
     v-model="value"
     incremental
+    :id="`${prefix || 'nome'}-select-user`"
     :label
     :placeholder
     :readonly
diff --git a/src/pages/08_request-list/DocumentExpansion.vue b/src/pages/08_request-list/DocumentExpansion.vue
index d262d953..5ac5208c 100644
--- a/src/pages/08_request-list/DocumentExpansion.vue
+++ b/src/pages/08_request-list/DocumentExpansion.vue
@@ -61,6 +61,7 @@ const props = withDefaults(
     readonly?: boolean;
     listDocument: string[];
     currentId: { customer: string; employee: string };
+    prefix?: string;
   }>(),
   {
     listDocument: () => [],
@@ -244,14 +245,14 @@ function changeCustomerTab(opts: { tab: 'customer' | 'employee' }) {
       <nav class="q-ml-auto row" v-if="!readonly">
         <CancelButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-docs-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerCancel"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-docs-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
diff --git a/src/pages/08_request-list/DutyExpansion.vue b/src/pages/08_request-list/DutyExpansion.vue
index 8a19521a..3d6e364e 100644
--- a/src/pages/08_request-list/DutyExpansion.vue
+++ b/src/pages/08_request-list/DutyExpansion.vue
@@ -11,6 +11,7 @@ import { useRequestList } from 'src/stores/request-list';
 const props = defineProps<{
   readonly?: boolean;
   step: Step;
+  prefix?: string;
 }>();
 
 const requestListStore = useRequestList();
@@ -100,21 +101,21 @@ function assignToForm() {
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerUndo"
         />
         <SaveButton
           v-if="state.isEdit"
-          id="btn-info-basic-save"
+          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-save`"
           icon-only
           type="submit"
           @click.stop="triggerSubmit"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
diff --git a/src/pages/08_request-list/FormExpansion.vue b/src/pages/08_request-list/FormExpansion.vue
index 5aa75f31..7b871e04 100644
--- a/src/pages/08_request-list/FormExpansion.vue
+++ b/src/pages/08_request-list/FormExpansion.vue
@@ -12,6 +12,7 @@ const props = defineProps<{
   readonly?: boolean;
   step: Step;
   requestWorkId: string;
+  prefix?: string;
 }>();
 
 const requestListStore = useRequestList();
@@ -90,21 +91,21 @@ function assignToForm() {
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-form-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerUndo"
         />
         <SaveButton
           v-if="state.isEdit"
-          id="btn-info-basic-save"
+          :id="`btn-form-${props.prefix || 'nome'}-info-basic-save`"
           icon-only
           type="submit"
           @click.stop="triggerSubmit"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-form-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
diff --git a/src/pages/08_request-list/FormResponsibleUser.vue b/src/pages/08_request-list/FormResponsibleUser.vue
index b2bf9bb8..010aab92 100644
--- a/src/pages/08_request-list/FormResponsibleUser.vue
+++ b/src/pages/08_request-list/FormResponsibleUser.vue
@@ -12,6 +12,7 @@ const responsibleUserId = defineModel<string>('responsibleUserId', {
 defineProps<{
   readonly?: boolean;
   districtId?: string;
+  prefix?: string;
 }>();
 
 watch(responsibleUserLocal, (lhs, rhs) => {
@@ -27,6 +28,8 @@ watch(responsibleUserLocal, (lhs, rhs) => {
         :label="$t('requestList.localEmployee')"
         :disable="readonly"
         class="col"
+        :id="`${prefix || 'nome'}-radio-local-employee`"
+        :for="`${prefix || 'nome'}-radio-local-employee`"
       />
       <q-radio
         v-model="responsibleUserLocal"
@@ -34,6 +37,8 @@ watch(responsibleUserLocal, (lhs, rhs) => {
         :label="$t('requestList.nonLocalEmployee')"
         :disable="readonly"
         class="col"
+        :id="`${prefix || 'nome'}-radio-non-local-employee`"
+        :for="`${prefix || 'nome'}-radio-non-local-employee`"
       />
       <div class="col" />
       <div class="offset-md-7"></div>
@@ -52,6 +57,8 @@ watch(responsibleUserLocal, (lhs, rhs) => {
         }"
         :readonly
         :label="$t('general.select', { msg: $t('personnel.MESSENGER') })"
+        :id="`${prefix || 'nome'}-select-user`"
+        :for="`${prefix || 'nome'}-select-user`"
       />
     </div>
   </div>
diff --git a/src/pages/08_request-list/MessengerExpansion.vue b/src/pages/08_request-list/MessengerExpansion.vue
index b883afee..456aefe4 100644
--- a/src/pages/08_request-list/MessengerExpansion.vue
+++ b/src/pages/08_request-list/MessengerExpansion.vue
@@ -14,6 +14,7 @@ const props = defineProps<{
   step: Step;
   responsibleAreaDistrictId?: string;
   defaultMessenger?: string;
+  prefix?: string;
 }>();
 
 const emit = defineEmits<{
@@ -116,21 +117,21 @@ function assignToForm() {
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-messenger-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerUndo"
         />
         <SaveButton
           v-if="state.isEdit"
-          id="btn-info-basic-save"
+          :id="`btn-messenger-${props.prefix || 'nome'}-info-basic-save`"
           icon-only
           type="submit"
           @click.stop="(e) => refForm?.submit(e)"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-messenger-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
@@ -157,6 +158,7 @@ function assignToForm() {
             v-model:responsible-user-local="formData.responsibleUserLocal"
             v-model:responsible-user-id="formData.responsibleUserId"
             :district-id="responsibleAreaDistrictId"
+            :prefix
           />
         </q-form>
       </section>
diff --git a/src/pages/08_request-list/ProductExpansion.vue b/src/pages/08_request-list/ProductExpansion.vue
index d2214d03..ed5f5784 100644
--- a/src/pages/08_request-list/ProductExpansion.vue
+++ b/src/pages/08_request-list/ProductExpansion.vue
@@ -83,6 +83,8 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
 </script>
 <template>
   <q-expansion-item
+    :id="`expansion-${product?.name || name}`"
+    :for="`expansion-${product?.name || name}`"
     dense
     :class="{ 'status-unpaid': !paySuccess }"
     class="overflow-hidden"
@@ -146,6 +148,8 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
         <div class="q-ml-auto q-gutter-y-xs">
           <div class="justify-end flex">
             <q-btn-dropdown
+              :id="`btn-dropdown-${product?.name || name}`"
+              :for="`btn-dropdown-${product?.name || name}`"
               :disable="
                 readonly || changeableStatus(status?.workStatus).length === 0
               "
@@ -197,6 +201,8 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
               <q-list dense>
                 <q-item
                   v-for="(value, index) in changeableStatus(status?.workStatus)"
+                  :id="`btn-dropdown-${product?.name || name}-${value}`"
+                  :for="`btn-dropdown-${product?.name || name}-${value}`"
                   :key="index"
                   clickable
                   v-close-popup
@@ -271,15 +277,15 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 
 :deep(
-    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
-      .q-focus-helper
-  ) {
+  .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
+    .q-focus-helper
+) {
   visibility: hidden;
 }
 
diff --git a/src/pages/08_request-list/PropertiesExpansion.vue b/src/pages/08_request-list/PropertiesExpansion.vue
index b2b9baad..718a7957 100644
--- a/src/pages/08_request-list/PropertiesExpansion.vue
+++ b/src/pages/08_request-list/PropertiesExpansion.vue
@@ -28,6 +28,7 @@ const props = withDefaults(
     readonly?: boolean;
     propertiesToShow: (PropString | PropNumber | PropDate | PropOptions)[];
     requestListData: RequestData;
+    prefix?: string;
   }>(),
   {
     id: '',
@@ -128,7 +129,7 @@ defineEmits<{
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-properties-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerUndo"
@@ -136,13 +137,14 @@ defineEmits<{
         <SaveButton
           v-if="state.isEdit"
           id="btn-info-basic-save"
+          :id="`btn-properties-${props.prefix || 'nome'}-info-basic-save`"
           icon-only
           type="submit"
           @click.stop="triggerSubmit"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-properties-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index be1cecf9..afb649b8 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -881,6 +881,7 @@ function toEmployee(employee: RequestData['employee']) {
                     :readonly="value._readonly"
                     ref="refDocumentExpansion"
                     :attributes="value.attributes"
+                    :prefix="value.productService.product.name"
                     @change-status="
                       (opt) => {
                         triggerChangeStatusFile({
@@ -928,6 +929,7 @@ function toEmployee(employee: RequestData['employee']) {
                   <MessengerExpansion
                     v-if="value._messengerExpansion"
                     :readonly="value._readonly"
+                    :prefix="value.productService.product.name"
                     :default-messenger="
                       value.stepStatus[pageState.currentStep - 1]
                         ? undefined
@@ -953,6 +955,7 @@ function toEmployee(employee: RequestData['employee']) {
                   <DutyExpansion
                     v-if="value._dutyExpansion"
                     :readonly="value._readonly"
+                    :prefix="value.productService.product.name"
                     :step="{
                       step: pageState.currentStep,
                       requestWorkId: value.id || '',
@@ -966,6 +969,7 @@ function toEmployee(employee: RequestData['employee']) {
                     v-if="value._formExpansion"
                     :request-work-id="value.id"
                     :readonly="value._readonly"
+                    :prefix="value.productService.product.name"
                     :step="{
                       step: pageState.currentStep,
                       requestWorkId: value.id || '',
@@ -979,6 +983,7 @@ function toEmployee(employee: RequestData['employee']) {
                     :request-list-data="data"
                     :id="value.id"
                     :readonly="value._readonly"
+                    :prefix="value.productService.product.name"
                     :properties-to-show="
                       value.productService.work?.attributes.workflowStep[
                         pageState.currentStep - 1
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 631496d2..70e1ac59 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -190,6 +190,8 @@ function handleCheckAll() {
       >
         <q-th v-if="checkable">
           <q-checkbox
+            :for="`list-checkbox-all`"
+            :id="`list-checkbox-all`"
             v-if="selected.length > 0"
             :model-value="
               selected.length ===
@@ -229,6 +231,8 @@ function handleCheckAll() {
       >
         <q-td v-if="checkable">
           <q-checkbox
+            :for="`list-checkbox-${props.rowIndex + 1}`"
+            :id="`list-checkbox-${props.rowIndex + 1}`"
             :disable="
               selected.length > 0 &&
               !listSameArea.includes(