fix: Drawer info layout

src/components/02_personnel-management/InfoForm.vue

@@ -53,28 +53,19 @@ const employeeTab = defineModel<string>('employeeTab');
     </div>
 
     <div
-      class="full-width no-wrap col"
+      class="col full-height q-pa-md"
-      :class="$q.screen.gt.xs ? 'row' : 'column'"
+      :class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
     >
-      <div class="col-3" v-if="$slots['person-card']">
+      <div class="col-md-2" v-if="$slots['person-card']">
         <slot name="person-card"></slot>
       </div>
+
       <div
+        class="bordered surface-1 rounded q-pa-md scroll full-height col"
         :class="{
-          'col-9': $slots['person-card'],
+          'q-ml-md': $q.screen.gt.sm && $slots['person-card'],
-          'col-12': !$slots['person-card'],
+          'q-mt-md': $q.screen.lt.md,
-          'q-ml-md': $q.screen.xs,
         }"
-        class="relative-position"
-      >
-        <AppBox
-          bordered
-          :noPadding="noPaddingTab"
-          :class="{
-            'q-my-md q-mr-md': $slots['person-card'],
-            'q-ma-md': !$slots['person-card'],
-          }"
-          style="position: absolute; overflow-y: auto; inset: 0"
       >
         <div class="row q-col-gutter-y-md">
           <slot name="information"></slot>
@@ -105,7 +96,6 @@ const employeeTab = defineModel<string>('employeeTab');
           <slot name="location"></slot>
           <slot name="by-type"></slot>
         </div>
-        </AppBox>
       </div>
     </div>
   </div>
@@ -126,6 +116,5 @@ const employeeTab = defineModel<string>('employeeTab');
 .content-tab {
   border-top-left-radius: var(--radius-2);
   border-top-right-radius: var(--radius-2);
-  position: relative;
 }
 </style>

src/components/DrawerInfo.vue

@@ -43,17 +43,7 @@ function reset() {
     no-swipe-open
     @before-hide="reset"
     @hide="close"
-    :width="
+    :width="$q.screen.gt.xs ? windowSize * 0.85 : windowSize"
-      $q.screen.gt.xs
-        ? $q.screen.gt.sm
-          ? $q.screen.gt.md
-            ? $q.screen.gt.lg
-              ? 1400
-              : 1200
-            : 1000
-          : 700
-        : windowSize
-    "
     v-model="drawerOpen"
     behavior="mobile"
     side="right"
@@ -70,7 +60,8 @@ function reset() {
         class="column justify-between full-height"
         style="padding: 0; border-radius: var(--radius-2)"
       >
-        <div class="form-header col q-px-lg row items-center">
+        <!-- header -->
+        <div class="bordered-b q-pa-lg row items-center">
           <div v-if="showEdit">
             <div v-if="isEdit" class="row">
               <q-btn
@@ -154,17 +145,18 @@ function reset() {
           />
         </div>
 
+        <!-- body -->
         <div
-          class="col-10 form-body full-width"
+          class="col form-body full-width"
-          style="position: relative"
           :class="`${bgColor || 'surface-0'} ${$q.dark.isActive && 'dark'}`"
         >
           <slot></slot>
           <slot name="info"></slot>
         </div>
 
+        <!-- footer -->
         <div
-          class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
+          class="bordered-t q-pr-lg row items-center justify-end q-gutter-x-lg q-py-md"
         >
           <q-btn
             v-if="isEdit"
@@ -214,10 +206,6 @@ function reset() {
   }
 }
 
-.form-header {
-  border-bottom: 1px solid var(--border-color);
-}
-
 .form-body {
   --_body-bg: var(--sand-0);
   background-color: var(--_body-bg);
@@ -228,10 +216,6 @@ function reset() {
   }
 }
 
-.form-footer {
-  border-top: 1px solid var(--border-color);
-}
-
 .branch-badge {
   --_branch-badge-fg: var(--green-8-hsl);
   --_branch-badge-bg: var(--green-6-hsl);

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

@@ -1469,7 +1469,6 @@ watch(
         v-model:zipCode="formData.zipCode"
       >
         <template #person-card>
-          <div class="q-ma-md">
           <ProfileUpload
             prefix-id="drawer-info-personnel"
             v-model:url-profile="profileUrl"
@@ -1498,7 +1497,6 @@ watch(
                 @edit-profile="inputFile.click()"
               />
             </AppBox> -->
-          </div>
         </template>
         <template #information>
           <FormInformation

src/pages/03_customer-management/MainPage.vue

@@ -2916,6 +2916,7 @@ watch(isMainPage, () => {
       <CustomerInfoComponent
         :customer-type="customerType"
         :customer-id="currentCustomerId"
+        v-model:mode-view="modeView"
         @back="
           () => {
             isMainPage = true;
@@ -3598,8 +3599,6 @@ watch(isMainPage, () => {
     <template #info>
       <InfoForm>
         <template #person-card>
-          <div class="q-ma-md">
-            <AppBox class="surface-1 bordered-b" style="padding: 0">
           <UsersDetailCardComponent
             :can-edit-profile="infoDrawerEdit"
             :hideButton="true"
@@ -3628,8 +3627,6 @@ watch(isMainPage, () => {
               }
             "
           />
-            </AppBox>
-          </div>
         </template>
         <template #information>
           <BasicInformation
@@ -3823,8 +3820,6 @@ watch(isMainPage, () => {
     <template #info>
       <InfoForm>
         <template #person-card>
-          <div class="q-ma-md">
-            <AppBox class="surface-1" style="padding: 0">
           <UsersDetailCardComponent
             :hideButton="true"
             v-if="!!currentCustomer"
@@ -3847,7 +3842,6 @@ watch(isMainPage, () => {
               code: 'HQ006',
             }"
           />
-            </AppBox>
 
           <div class="text-left q-pt-md" v-if="infoDrawerEdit">
             <q-toggle
@@ -3860,7 +3854,6 @@ watch(isMainPage, () => {
             />
             <span>สถานะสาขา</span>
           </div>
-          </div>
         </template>
         <template #information>
           <BasicInformation
@@ -3888,8 +3881,8 @@ watch(isMainPage, () => {
             <TabComponent
               :stat-branch-no="statBranchNo"
               prefix-id="drawer-info-customer-branch"
-              :edit="true"
+              :edit="infoDrawerEdit"
-              :readonly="true"
+              :readonly="!infoDrawerEdit"
               v-model:customer-branch="formData.customerBranch"
               v-model:tab-index="indexTab"
             >
@@ -4067,16 +4060,14 @@ watch(isMainPage, () => {
       employee
     >
       <template #person-card>
-        <div class="q-pa-md full-height" style="overflow: hidden">
         <PersonCard
           :can-edit-profile="infoDrawerEmployeeEdit"
+          prefix-id="drawer-edit"
           no-hover
           no-action
           no-detail
-            prefix-id="drawer-edit"
           :data="{
-              name:
+            name: formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
-                formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
             code: formDataEmployee.code,
             male: formDataEmployee.gender === 'male',
             female: formDataEmployee.gender === 'female',
@@ -4090,7 +4081,6 @@ watch(isMainPage, () => {
             }
           "
         />
-        </div>
       </template>
       <template #information>
         <BasicInformation