From fb068c005d716fe57d36d5554a256286916b0078 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 27 Sep 2024 15:22:13 +0700
Subject: [PATCH] fix(02): profile layout

---
 .../02_personnel-management/MainPage.vue      | 376 ++++++++++--------
 1 file changed, 212 insertions(+), 164 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 27d1bf7b..31ff2e00 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1525,7 +1525,12 @@ watch(
     "
   >
     <InfoForm>
-      <div class="q-px-lg q-pt-lg surface-2">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
         <ProfileBanner
           :active="formData.status !== 'INACTIVE'"
           useToggle
@@ -1576,58 +1581,69 @@ watch(
 
       <div
         style="flex: 1; width: 100%; overflow-y: auto"
-        class="surface-2 q-pa-lg"
         id="drawer-user-form"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
       >
         <div
           class="col surface-1 full-height rounded bordered scroll row relative-position"
         >
           <div
-            class="surface-1 rounded q-my-md q-mx-lg row"
+            class="rounded row"
+            :class="{
+              'q-py-md q-px-lg': $q.screen.gt.sm,
+              'q-py-sm q-px-lg': !$q.screen.gt.sm,
+            }"
             style="position: absolute; z-index: 999; top: 0; right: 0"
-            v-if="formData.status !== 'INACTIVE'"
           >
-            <UndoButton
-              v-if="infoDrawerEdit"
-              id="btn-info-basic-undo"
-              icon-only
-              @click="
-                () => {
-                  undo();
-                }
-              "
-              type="button"
-            />
-            <SaveButton
-              v-if="infoDrawerEdit"
-              id="btn-info-basic-save"
-              icon-only
-              type="submit"
-            />
-            <EditButton
-              v-if="!infoDrawerEdit"
-              id="btn-info-basic-edit"
-              icon-only
-              @click="
-                () => {
-                  infoDrawerEdit = true;
-                  isImageEdit = true;
-                }
-              "
-              type="button"
-            />
-            <DeleteButton
-              v-if="!infoDrawerEdit"
-              id="btn-info-basic-delete"
-              icon-only
-              @click="
-                () => {
-                  if (!currentUser) return;
-                  onDelete(currentUser.id);
-                }
-              "
-              type="button"
-            />
+            <div
+              v-if="formData.status !== 'INACTIVE'"
+              class="surface-1 row rounded"
+            >
+              <UndoButton
+                v-if="infoDrawerEdit"
+                id="btn-info-basic-undo"
+                icon-only
+                @click="
+                  () => {
+                    undo();
+                  }
+                "
+                type="button"
+              />
+              <SaveButton
+                v-if="infoDrawerEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!infoDrawerEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="
+                  () => {
+                    infoDrawerEdit = true;
+                    isImageEdit = true;
+                  }
+                "
+                type="button"
+              />
+              <DeleteButton
+                v-if="!infoDrawerEdit"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="
+                  () => {
+                    if (!currentUser) return;
+                    onDelete(currentUser.id);
+                  }
+                "
+                type="button"
+              />
+            </div>
           </div>
           <div
             class="col"
@@ -1672,9 +1688,12 @@ watch(
           </div>
 
           <div
-            class="col-12 col-md-10 q-py-md q-pr-md relative-position"
+            class="col-12 col-md-10 relative-position"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-py-md q-px-lg': !$q.screen.gt.sm,
+            }"
             id="user-form-content"
-            :class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
             style="height: 100%; max-height: 100; overflow-y: auto"
           >
             <FormInformation
@@ -1781,7 +1800,12 @@ watch(
   >
     <!-- :title="formData.name"
   :caption="formData.nameEN" -->
-    <div class="q-mx-lg q-mt-lg">
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         active
         useToggle
@@ -1823,129 +1847,153 @@ watch(
     </div>
 
     <div
-      class="col surface-1 q-ma-lg rounded bordered row relative-position"
+      class="col"
       id="personnel-form"
+      :class="{
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
     >
       <div
-        class="surface-1 rounded q-my-md q-mx-lg row"
-        style="position: absolute; z-index: 999; right: 0; top: 0"
+        style="overflow-y: auto"
+        class="row full-width full-height surface-1 rounded bordered relative-position"
       >
-        <SaveButton id="btn-info-basic-save" icon-only type="submit" />
-      </div>
-      <div class="col full-height scroll" v-if="$q.screen.gt.sm">
-        <div style="position: sticky; top: 0" class="q-pa-sm">
-          <SideMenu
-            :menu="
-              [
-                {
-                  name: $t('form.field.basicInformation'),
-                  anchor: 'dialog-form-information',
-                },
-                {
-                  name: $t('personnel.form.personalInformation'),
-                  anchor: 'dialog-form-personal',
-                },
-                {
-                  name: $t('personnel.form.addressInformation'),
-                  anchor: 'dialog-form-address',
-                },
-              ].concat(
-                !!formData.userType
-                  ? [
-                      {
-                        name: $t('personnel.form.workInformation'),
-                        anchor: 'dialog-info-work',
-                      },
-                    ]
-                  : [],
-              )
-            "
-            background="transparent"
-            :active="{
-              background: 'hsla(var(--blue-6-hsl) / .2)',
-              foreground: 'var(--blue-6)',
-            }"
-            scroll-element="#personnel-form"
+        <div
+          class="rounded row"
+          style="position: absolute; z-index: 999; right: 0; top: 0"
+          :class="{
+            'q-py-md q-px-lg': $q.screen.gt.sm,
+            'q-py-sm q-px-lg': !$q.screen.gt.sm,
+          }"
+        >
+          <div
+            v-if="formData.status !== 'INACTIVE'"
+            class="surface-1 row rounded"
+          >
+            <SaveButton id="btn-info-basic-save" icon-only type="submit" />
+          </div>
+        </div>
+        <div class="col full-height scroll" v-if="$q.screen.gt.sm">
+          <div style="position: sticky; top: 0" class="q-pa-sm">
+            <SideMenu
+              :menu="
+                [
+                  {
+                    name: $t('form.field.basicInformation'),
+                    anchor: 'dialog-form-information',
+                  },
+                  {
+                    name: $t('personnel.form.personalInformation'),
+                    anchor: 'dialog-form-personal',
+                  },
+                  {
+                    name: $t('personnel.form.addressInformation'),
+                    anchor: 'dialog-form-address',
+                  },
+                ].concat(
+                  !!formData.userType
+                    ? [
+                        {
+                          name: $t('personnel.form.workInformation'),
+                          anchor: 'dialog-info-work',
+                        },
+                      ]
+                    : [],
+                )
+              "
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#personnel-form"
+            />
+          </div>
+        </div>
+        <div
+          class="col-md-10 col-12 full-height scroll"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-py-md q-px-lg': !$q.screen.gt.sm,
+          }"
+        >
+          <FormInformation
+            id="dialog-form-information"
+            dense
+            outlined
+            separator
+            :title="'form.field.basicInformation'"
+            :usernameReadonly="isEdit"
+            v-model:hqId="hqId"
+            v-model:brId="brId"
+            v-model:userType="formData.userType"
+            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
+            separator
+            :title="'personnel.form.personalInformation'"
+            v-model:firstName="formData.firstName"
+            v-model:lastName="formData.lastName"
+            v-model:midName="formData.middleName"
+            v-model:midNameEN="formData.middleNameEN"
+            v-model:prefixName="formData.namePrefix"
+            v-model:prefixNameEN="formData.namePrefix"
+            v-model:firstNameEN="formData.firstNameEN"
+            v-model:lastNameEN="formData.lastNameEN"
+            v-model:telephone-no="formData.telephoneNo"
+            v-model:email="formData.email"
+            v-model:gender="formData.gender"
+            v-model:birth-date="formData.birthDate"
+            v-model:citizen-id="formData.citizenId"
+            v-model:citizen-issue="formData.citizenIssue"
+            v-model:citizen-expire="formData.citizenExpire"
+            class="q-mb-xl"
+          />
+          <AddressForm
+            id="dialog-form-address"
+            v-model:address="formData.address"
+            v-model:addressEN="formData.addressEN"
+            v-model:moo="formData.moo"
+            v-model:mooEN="formData.mooEN"
+            v-model:soi="formData.soi"
+            v-model:soiEN="formData.soiEN"
+            v-model:street="formData.street"
+            v-model:streetEN="formData.streetEN"
+            v-model:provinceId="formData.provinceId"
+            v-model:districtId="formData.districtId"
+            v-model:subDistrictId="formData.subDistrictId"
+            v-model:zipCode="formData.zipCode"
+            prefix-id="drawer-info-personnel"
+            dense
+            class="q-mb-xl"
+          />
+          <FormByType
+            id="dialog-form-work"
+            dense
+            outlined
+            separator
+            v-model:userType="formData.userType"
+            v-model:registrationNo="formData.registrationNo"
+            v-model:startDate="formData.startDate"
+            v-model:retireDate="formData.retireDate"
+            v-model:responsibleArea="formData.responsibleArea"
+            v-model:discountCondition="formData.discountCondition"
+            v-model:sourceNationality="formData.sourceNationality"
+            v-model:importNationality="formData.importNationality"
+            v-model:trainingPlace="formData.trainingPlace"
+            v-model:checkpoint="formData.checkpoint"
+            v-model:checkpointEN="formData.checkpointEN"
+            v-model:agencyFile="agencyFile"
           />
         </div>
       </div>
-      <div class="col-md-10 col-12 q-pa-md full-height scroll">
-        <FormInformation
-          id="dialog-form-information"
-          dense
-          outlined
-          separator
-          :title="'form.field.basicInformation'"
-          :usernameReadonly="isEdit"
-          v-model:hqId="hqId"
-          v-model:brId="brId"
-          v-model:userType="formData.userType"
-          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
-          separator
-          :title="'personnel.form.personalInformation'"
-          v-model:firstName="formData.firstName"
-          v-model:lastName="formData.lastName"
-          v-model:midName="formData.middleName"
-          v-model:midNameEN="formData.middleNameEN"
-          v-model:prefixName="formData.namePrefix"
-          v-model:prefixNameEN="formData.namePrefix"
-          v-model:firstNameEN="formData.firstNameEN"
-          v-model:lastNameEN="formData.lastNameEN"
-          v-model:telephone-no="formData.telephoneNo"
-          v-model:email="formData.email"
-          v-model:gender="formData.gender"
-          v-model:birth-date="formData.birthDate"
-          v-model:citizen-id="formData.citizenId"
-          v-model:citizen-issue="formData.citizenIssue"
-          v-model:citizen-expire="formData.citizenExpire"
-          class="q-mb-xl"
-        />
-        <AddressForm
-          id="dialog-form-address"
-          v-model:address="formData.address"
-          v-model:addressEN="formData.addressEN"
-          v-model:moo="formData.moo"
-          v-model:mooEN="formData.mooEN"
-          v-model:soi="formData.soi"
-          v-model:soiEN="formData.soiEN"
-          v-model:street="formData.street"
-          v-model:streetEN="formData.streetEN"
-          v-model:provinceId="formData.provinceId"
-          v-model:districtId="formData.districtId"
-          v-model:subDistrictId="formData.subDistrictId"
-          v-model:zipCode="formData.zipCode"
-          prefix-id="drawer-info-personnel"
-          dense
-          class="q-mb-xl"
-        />
-        <FormByType
-          id="dialog-form-work"
-          dense
-          outlined
-          separator
-          v-model:userType="formData.userType"
-          v-model:registrationNo="formData.registrationNo"
-          v-model:startDate="formData.startDate"
-          v-model:retireDate="formData.retireDate"
-          v-model:responsibleArea="formData.responsibleArea"
-          v-model:discountCondition="formData.discountCondition"
-          v-model:sourceNationality="formData.sourceNationality"
-          v-model:importNationality="formData.importNationality"
-          v-model:trainingPlace="formData.trainingPlace"
-          v-model:checkpoint="formData.checkpoint"
-          v-model:checkpointEN="formData.checkpointEN"
-          v-model:agencyFile="agencyFile"
-        />
-      </div>
     </div>
   </DialogForm>