fix: Drawer info layout

2024-07-30 09:44:21 +00:00 · 2024-07-30 09:44:21 +00:00 · 6f501da99b
commit 6f501da99b
parent ac171b1379
4 changed files with 136 additions and 175 deletions
--- a/src/components/02_personnel-management/InfoForm.vue
+++ b/src/components/02_personnel-management/InfoForm.vue
@ -53,59 +53,49 @@ const employeeTab = defineModel<string>('employeeTab');
    </div>

    <div
-      class="full-width no-wrap col"
-      :class="$q.screen.gt.xs ? 'row' : 'column'"
+      class="col full-height q-pa-md"
+      :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'],
-          'col-12': !$slots['person-card'],
-          'q-ml-md': $q.screen.xs,
+          'q-ml-md': $q.screen.gt.sm && $slots['person-card'],
+          'q-mt-md': $q.screen.lt.md,
        }"
-        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>
-            <slot name="person"></slot>
-            <slot name="address" v-if="!noAddress">
-              <FormAddress
-                dense
-                outlined
-                separator
-                prefix-id="default"
-                :employee="employee"
-                :readonly="readonly"
-                :disabledRule="disabledRule"
-                v-model:address="address"
-                v-model:addressEN="addressEN"
-                v-model:provinceId="provinceId"
-                v-model:districtId="districtId"
-                v-model:subDistrictId="subDistrictId"
-                v-model:zipCode="zipCode"
-                v-model:same-with-employer="sameWithEmployer"
-                :title="titleFormAddress"
-                :addressTitle="addressTitle || ''"
-                :addressTitleEN="addressTitleEN || ''"
-                v-if="!$slots.address"
-              />
-            </slot>
-            <slot name="qr-code"></slot>
-            <slot name="location"></slot>
-            <slot name="by-type"></slot>
-          </div>
-        </AppBox>
+        <div class="row q-col-gutter-y-md">
+          <slot name="information"></slot>
+          <slot name="person"></slot>
+          <slot name="address" v-if="!noAddress">
+            <FormAddress
+              dense
+              outlined
+              separator
+              prefix-id="default"
+              :employee="employee"
+              :readonly="readonly"
+              :disabledRule="disabledRule"
+              v-model:address="address"
+              v-model:addressEN="addressEN"
+              v-model:provinceId="provinceId"
+              v-model:districtId="districtId"
+              v-model:subDistrictId="subDistrictId"
+              v-model:zipCode="zipCode"
+              v-model:same-with-employer="sameWithEmployer"
+              :title="titleFormAddress"
+              :addressTitle="addressTitle || ''"
+              :addressTitleEN="addressTitleEN || ''"
+              v-if="!$slots.address"
+            />
+          </slot>
+          <slot name="qr-code"></slot>
+          <slot name="location"></slot>
+          <slot name="by-type"></slot>
+        </div>
      </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>
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@ -43,17 +43,7 @@ function reset() {
    no-swipe-open
    @before-hide="reset"
    @hide="close"
-    :width="
-      $q.screen.gt.xs
-        ? $q.screen.gt.sm
-          ? $q.screen.gt.md
-            ? $q.screen.gt.lg
-              ? 1400
-              : 1200
-            : 1000
-          : 700
-        : windowSize
-    "
+    :width="$q.screen.gt.xs ? windowSize * 0.85 : 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"
-          style="position: relative"
+          class="col form-body full-width"
          :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);
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@ -1469,17 +1469,16 @@ 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"
-              v-model:status-toggle="statusToggle"
-              v-model:profile-submit="profileSubmit"
-              @input-file="inputFile.click()"
-              @cancel-file="inputFile.value = ''"
-            />
+          <ProfileUpload
+            prefix-id="drawer-info-personnel"
+            v-model:url-profile="profileUrl"
+            v-model:status-toggle="statusToggle"
+            v-model:profile-submit="profileSubmit"
+            @input-file="inputFile.click()"
+            @cancel-file="inputFile.value = ''"
+          />

-            <!-- <AppBox class="surface-1" style="padding: 0">
+          <!-- <AppBox class="surface-1" style="padding: 0">
              <PersonCard
                :can-edit-profile="infoDrawerEdit"
                :data="{
@ -1498,7 +1497,6 @@ watch(
                @edit-profile="inputFile.click()"
              />
            </AppBox> -->
-          </div>
        </template>
        <template #information>
          <FormInformation
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/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,38 +3599,34 @@ 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"
-                v-if="!!currentCustomer"
-                no-bg
-                no-detail
-                no-hover
-                :color="
-                  currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
-                "
-                :metadata="{
-                  id: '1',
-                  disabled: currentCustomer.status === 'ACTIVE',
-                }"
-                :list="{
-                  id: '1',
-                  type: currentCustomer.customerType,
-                  name: currentCustomer.customerName,
-                  imageUrl: currentCustomer.imageUrl,
-                  status: currentCustomer.status,
-                  code: 'HQ006',
-                }"
-                @edit-profile="
-                  () => {
-                    inputFile.click();
-                  }
-                "
-              />
-            </AppBox>
-          </div>
+          <UsersDetailCardComponent
+            :can-edit-profile="infoDrawerEdit"
+            :hideButton="true"
+            v-if="!!currentCustomer"
+            no-bg
+            no-detail
+            no-hover
+            :color="
+              currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
+            "
+            :metadata="{
+              id: '1',
+              disabled: currentCustomer.status === 'ACTIVE',
+            }"
+            :list="{
+              id: '1',
+              type: currentCustomer.customerType,
+              name: currentCustomer.customerName,
+              imageUrl: currentCustomer.imageUrl,
+              status: currentCustomer.status,
+              code: 'HQ006',
+            }"
+            @edit-profile="
+              () => {
+                inputFile.click();
+              }
+            "
+          />
        </template>
        <template #information>
          <BasicInformation
@ -3823,43 +3820,39 @@ 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"
-                no-bg
-                no-detail
-                no-hover
-                :color="
-                  currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
-                "
-                :metadata="{
-                  id: '1',
-                  disabled: currentCustomer.status === 'ACTIVE',
-                }"
-                :list="{
-                  id: '1',
-                  type: currentCustomer.customerType,
-                  name: currentCustomer.customerName,
-                  imageUrl: currentCustomer.imageUrl,
-                  status: currentCustomer.status,
-                  code: 'HQ006',
-                }"
-              />
-            </AppBox>
+          <UsersDetailCardComponent
+            :hideButton="true"
+            v-if="!!currentCustomer"
+            no-bg
+            no-detail
+            no-hover
+            :color="
+              currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
+            "
+            :metadata="{
+              id: '1',
+              disabled: currentCustomer.status === 'ACTIVE',
+            }"
+            :list="{
+              id: '1',
+              type: currentCustomer.customerType,
+              name: currentCustomer.customerName,
+              imageUrl: currentCustomer.imageUrl,
+              status: currentCustomer.status,
+              code: 'HQ006',
+            }"
+          />

-            <div class="text-left q-pt-md" v-if="infoDrawerEdit">
-              <q-toggle
-                id="toggle-status"
-                dense
-                size="md"
-                v-model="statusToggle"
-                padding="none"
-                class="q-pr-md"
-              />
-              <span>สถานะสาขา</span>
-            </div>
+          <div class="text-left q-pt-md" v-if="infoDrawerEdit">
+            <q-toggle
+              id="toggle-status"
+              dense
+              size="md"
+              v-model="statusToggle"
+              padding="none"
+              class="q-pr-md"
+            />
+            <span>สถานะสาขา</span>
          </div>
        </template>
        <template #information>
@ -3888,8 +3881,8 @@ watch(isMainPage, () => {
            <TabComponent
              :stat-branch-no="statBranchNo"
              prefix-id="drawer-info-customer-branch"
-              :edit="true"
-              :readonly="true"
+              :edit="infoDrawerEdit"
+              :readonly="!infoDrawerEdit"
              v-model:customer-branch="formData.customerBranch"
              v-model:tab-index="indexTab"
            >
@ -4067,30 +4060,27 @@ watch(isMainPage, () => {
      employee
    >
      <template #person-card>
-        <div class="q-pa-md full-height" style="overflow: hidden">
-          <PersonCard
-            :can-edit-profile="infoDrawerEmployeeEdit"
-            no-hover
-            no-action
-            no-detail
-            prefix-id="drawer-edit"
-            :data="{
-              name:
-                formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
-              code: formDataEmployee.code,
-              male: formDataEmployee.gender === 'male',
-              female: formDataEmployee.gender === 'female',
-              img: profileUrl || undefined,
-            }"
-            :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
-            :gridColumns="1"
-            @edit-profile="
-              () => {
-                inputFile.click();
-              }
-            "
-          />
-        </div>
+        <PersonCard
+          :can-edit-profile="infoDrawerEmployeeEdit"
+          prefix-id="drawer-edit"
+          no-hover
+          no-action
+          no-detail
+          :data="{
+            name: formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
+            code: formDataEmployee.code,
+            male: formDataEmployee.gender === 'male',
+            female: formDataEmployee.gender === 'female',
+            img: profileUrl || undefined,
+          }"
+          :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
+          :gridColumns="1"
+          @edit-profile="
+            () => {
+              inputFile.click();
+            }
+          "
+        />
      </template>
      <template #information>
        <BasicInformation