refactor(02): add id

src/pages/02_personnel-management/MainPage.vue

@@ -1657,7 +1657,7 @@ watch(
             style="height: 100%; max-height: 100; overflow-y: auto"
           >
             <div
-              class="q-pt-sm row"
+              class="surface-1 rounded q-pt-sm row"
               style="position: absolute; z-index: 999; right: 4%"
             >
               <UndoButton
@@ -1712,6 +1712,7 @@ watch(
               :title="'formDialogTitleInformation'"
               :readonly="!infoDrawerEdit"
               :usernameReadonly="isEdit"
+              class="q-mb-xl"
             />
 
             <FormPerson
@@ -1734,6 +1735,7 @@ watch(
               outlined
               separator
               :readonly="!infoDrawerEdit"
+              class="q-mb-xl"
             />
 
             <AddressForm
@@ -1747,6 +1749,7 @@ watch(
               :readonly="!infoDrawerEdit"
               prefix-id="drawer-info-personnel"
               dense
+              class="q-mb-xl"
             />
             <FormByType
               dense
@@ -1768,6 +1771,7 @@ watch(
               v-model:agencyFile="agencyFile"
               v-model:agencyFileList="agencyFileList"
               v-model:userId="userId"
+              class="q-mb-xl"
             />
           </div>
         </div>
@@ -1835,22 +1839,22 @@ watch(
               [
                 {
                   name: $t('formDialogTitleInformation'),
-                  anchor: 'form-information',
+                  anchor: 'dialog-form-information',
                 },
                 {
                   name: $t('formDialogTitlePersonal'),
-                  anchor: 'form-personal',
+                  anchor: 'dialog-form-personal',
                 },
                 {
                   name: $t('formDialogTitleAddressPersonnel'),
-                  anchor: 'form-address',
+                  anchor: 'dialog-form-address',
                 },
               ].concat(
                 !!formData.userType
                   ? [
                       {
                         name: $t('formDialogTitleByType'),
-                        anchor: 'info-work',
+                        anchor: 'dialog-info-work',
                       },
                     ]
                   : [],
@@ -1865,15 +1869,16 @@ watch(
           />
         </div>
       </div>
-      <div class="col-10 q-pa-md q-gutter-y-xl">
+      <div class="col-10 q-pa-md">
         <div
-          class="q-pt-sm row"
+          class="surface-1 rounded q-pt-sm row"
           style="position: absolute; z-index: 999; right: 4%"
         >
           <SaveButton id="btn-info-basic-save" icon-only type="submit" />
         </div>
 
         <FormInformation
+          id="dialog-form-information"
           dense
           outlined
           separator
@@ -1885,8 +1890,10 @@ watch(
           v-model:userRole="formData.userRole"
           v-model:username="formData.username"
           v-model:userCode="userCode"
+          class="q-mb-xl"
         />
         <FormPerson
+          id="dialog-form-personal"
           prefix-id="form-dialog-personnel"
           dense
           outlined
@@ -1900,9 +1907,10 @@ watch(
           v-model:email="formData.email"
           v-model:gender="formData.gender"
           v-model:birthDate="formData.birthDate"
+          class="q-mb-xl"
         />
         <AddressForm
-          id="form-address"
+          id="dialog-form-address"
           v-model:address="formData.address"
           v-model:addressEN="formData.addressEN"
           v-model:provinceId="formData.provinceId"
@@ -1911,8 +1919,10 @@ watch(
           v-model:zipCode="formData.zipCode"
           prefix-id="drawer-info-personnel"
           dense
+          class="q-mb-xl"
         />
         <FormByType
+          id="dialog-form-work"
           dense
           outlined
           separator
@@ -1928,6 +1938,7 @@ watch(
           v-model:checkpoint="formData.checkpoint"
           v-model:checkpointEN="formData.checkpointEN"
           v-model:agencyFile="agencyFile"
+          class="q-mb-xl"
         />
       </div>
     </div>