refactor: add id

src/components/05_quotation/TableQuotation.vue

@@ -127,7 +127,7 @@ defineEmits<{
 
         <q-td class="text-right">
           <q-btn
-            :id="`btn-eye-${props.row.firstName}`"
+            :id="`btn-preview-${props.row.workName}`"
             icon="mdi-play-box-outline"
             size="sm"
             dense
@@ -137,7 +137,7 @@ defineEmits<{
           />
 
           <q-btn
-            :id="`btn-eye-${props.row.firstName}`"
+            :id="`btn-eye-${props.row.workName}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -147,7 +147,7 @@ defineEmits<{
           />
 
           <KebabAction
-            :idName="`btn-kebab-${props.row.firstName}`"
+            :idName="`btn-kebab-${props.row.workName}`"
             status="'ACTIVE'"
             hide-toggle
             hide-delete

src/components/shared/select/SelectCustomer.vue

@@ -72,6 +72,7 @@ onMounted(async () => {
     v-model="value"
     option-value="id"
     incremental
+    for="select-customer"
     :label
     :placeholder
     :readonly
@@ -129,6 +130,8 @@ onMounted(async () => {
         clickable
         v-close-popup
         @click.stop="$emit('create')"
+        for="select-customer-add-new"
+        id="select-customer-add-new"
       >
         <q-item-section>
           <span class="row items-center">

src/components/shared/table/TableWorker.vue

@@ -142,6 +142,7 @@ function selectedIndex(item: Employee) {
           </template>
           <template v-if="col.name === '#check'">
             <q-checkbox
+              id="select-worker-all"
               v-model="props.selected"
               @update:model-value="(v) => handleUpdate()"
               size="sm"
@@ -193,7 +194,11 @@ function selectedIndex(item: Employee) {
               !disabledWorkerId?.some((id) => id === props.row.id)
             "
           >
-            <q-checkbox v-model="props.selected" size="sm" />
+            <q-checkbox
+              v-model="props.selected"
+              size="sm"
+              :id="`select-worker-${props.row.firstName}`"
+            />
           </template>
         </q-td>
       </q-tr>

src/pages/05_quotation/MainPage.vue

@@ -894,6 +894,7 @@ async function storeDataLocal(id: string) {
         :text="value.text"
         :icon-color="value.iconColor"
         :bg-color="value.color"
+        :id="`btn-add-new-${value.text}`"
         @trigger="
           () => {
             triggerCreateCustomerd({

src/pages/05_quotation/PaymentForm.vue

@@ -514,6 +514,7 @@ onMounted(async () => {
 
                     <div class="q-ml-auto row" style="gap: 10px">
                       <q-btn
+                        id="btn-payment"
                         @click.stop
                         unelevated
                         padding="4px 8px"
@@ -552,6 +553,7 @@ onMounted(async () => {
                               :key="opts.status"
                             >
                               <q-item
+                                :id="`btn-payment-${opts.status}`"
                                 v-if="
                                   (p.paymentStatus === 'PaymentWait' &&
                                     opts.status !== 'PaymentRetry') ||
@@ -591,6 +593,7 @@ onMounted(async () => {
                       flat
                       rounded
                       padding="0"
+                      id="btn-show-file"
                       :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
                       @click.stop="
                         state.payExpansion[i] = !state.payExpansion[i]
@@ -625,6 +628,7 @@ onMounted(async () => {
                   }}
                   <q-btn
                     unelevated
+                    id="btn-upload-file"
                     :label="$t('general.upload')"
                     rounded
                     class="app-bg-info q-mt-sm"

src/pages/05_quotation/QuotationForm.vue

@@ -1421,6 +1421,7 @@ async function formDownload() {
           >
             <button
               v-for="value in statusQuotationForm"
+              :id="`btn-status-${value.title}`"
               :key="value.title"
               class="q-pa-sm bordered status-color row items-center"
               :class="{
@@ -1553,6 +1554,8 @@ async function formDownload() {
                   </div>
                   <nav class="q-ml-auto">
                     <AddButton
+                      id="btn-add-worker"
+                      for="btn-add-worker"
                       v-if="
                         !readonly &&
                         (!quotationFormState.source ||
@@ -1565,6 +1568,8 @@ async function formDownload() {
                       @click.stop="triggerSelectEmployeeDialog"
                     />
                     <AddButton
+                      id="btn-add-worker"
+                      for="btn-add-worker"
                       v-if="
                         !!quotationFormState.source &&
                         quotationFormState.source.quotationStatus !==
@@ -1621,6 +1626,7 @@ async function formDownload() {
                       v-if="!readonly"
                       icon-only
                       class="q-ml-auto"
+                      id="trigger-product-service-dialog"
                       @click.stop="triggerProductServiceDialog"
                     />
                   </nav>
@@ -2243,6 +2249,7 @@ async function formDownload() {
           outlined
           icon="mdi-play-box-outline"
           color="207 96% 32%"
+          id="btn-view-example"
           @click="storeDataLocal"
         >
           {{ $t('general.view', { msg: $t('general.example') }) }}
@@ -2258,6 +2265,7 @@ async function formDownload() {
             solid
             icon="mdi-account-multiple-check-outline"
             color="207 96% 32%"
+            id="btn-submit-accepted"
             @click="
               () => {
                 submitAccepted();
@@ -2273,6 +2281,7 @@ async function formDownload() {
             solid
             icon="mdi-account-multiple-check-outline"
             color="207 96% 32%"
+            id="btn-select-invoice"
             @click="
               () => {
                 view = View.Invoice;

src/pages/05_quotation/QuotationFormProductSelect.vue

@@ -508,6 +508,7 @@ watch(
                   flat
                   rounded
                   icon="mdi-store-plus-outline"
+                  id="trigger-add-dialog"
                   @click="triggerAddDialog"
                 />
                 <q-btn
@@ -515,6 +516,7 @@ watch(
                   flat
                   rounded
                   icon="mdi-information-outline"
+                  id="trigger-info"
                   @click="triggerInfo"
                   :color="pageState.infoDrawer ? 'info' : ''"
                   style="color: hsl(var(--text-mute))"

src/pages/05_quotation/QuotationFormWorkerSelect.vue

@@ -289,6 +289,7 @@ watch(() => state.search, getWorkerList);
             <q-menu class="bordered" ref="refMenu">
               <q-list>
                 <q-item
+                  id="trigger-create-employee"
                   v-close-popup
                   dense
                   clickable
@@ -308,6 +309,7 @@ watch(() => state.search, getWorkerList);
                 </q-item>
 
                 <q-item
+                  id="import-worker"
                   v-close-popup
                   dense
                   clickable
@@ -470,6 +472,7 @@ watch(() => state.search, getWorkerList);
                 <template #grid="{ item: emp, index }">
                   <div :key="emp.id" class="col-md-2 col-sm-6 col-12">
                     <button
+                      :id="`select-worker-${emp.firstName}`"
                       class="selectable-item full-width"
                       :class="{
                         ['selectable-item__selected']:
@@ -520,11 +523,12 @@ watch(() => state.search, getWorkerList);
     </div>
     <template #footer>
       <div class="q-gutter-x-xs q-ml-auto">
-        <CancelButton outlined @click="clean" />
+        <CancelButton id="btn-cancel" outlined @click="clean" />
         <MainButton
           icon="mdi-check"
           color="207 96% 32%"
           solid
+          id="btn-success"
           @click="
             emits('success', {
               worker: workerSelected,

src/pages/05_quotation/TableRequest.vue

@@ -102,6 +102,7 @@ function goToRequestList(id: string) {
           <template v-if="col.name === '#codeRequest'">
             <span
               class="cursor-pointer link"
+              :id="`go-to-request-list-${props.row.code}`"
               @click="goToRequestList(props.row.id)"
             >
               {{ props.row.code }}

src/pages/08_request-list/TableRequestList.vue

@@ -186,7 +186,7 @@ function getEmployeeName(
         </q-td>
         <q-td class="text-right">
           <q-btn
-            :id="`btn-eye-${props.row.quotation.workName}`"
+            :id="`btn-eye-${props.row.code}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -196,6 +196,7 @@ function getEmployeeName(
           />
 
           <KebabAction
+            :id-name="`btn-kebab-${props.row.code}`"
             hide-edit
             hide-toggle
             hide-view

src/pages/11_credit-note/TableCreditNote.vue

@@ -74,6 +74,7 @@ const visible = computed(() =>
 
           <template v-if="col.name === '#action'">
             <KebabAction
+              :id-name="`btn-kebab-${props.row.quotation.workName}`"
               hide-edit
               hide-toggle
               :hide-delete

src/pages/12_debit-note/TableDebitNote.vue

@@ -77,6 +77,7 @@ const visible = computed(() =>
 
           <template v-if="col.name === '#action'">
             <KebabAction
+              :id-name="`btn-kebab-${props.row.workName}`"
               hide-toggle
               hide-edit
               @edit="$emit('edit', props.row)"