refacotr: add id

2025-11-07 16:24:10 +07:00 · 2025-11-07 16:24:10 +07:00 · 2b1e3b12a4
commit 2b1e3b12a4
parent a1ed625d32
12 changed files with 54 additions and 18 deletions
--- 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>
--- 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[];
--- 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
--- 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"
--- 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"
--- 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"
--- 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>
--- 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>
--- 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;
 }

--- 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"
--- 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
--- 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(