From a934f6cd83a7200f3f64ebc657ee16eaccdaaf15 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 12:09:45 +0700
Subject: [PATCH] refactor: scroll inside

---
 src/pages/01_branch-management/MainPage.vue | 393 ++++++++++----------
 1 file changed, 198 insertions(+), 195 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 21b3bc20..25e6805c 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -498,10 +498,7 @@ watch(locale, () => {
       />
     </transition>
 
-    <div
-      class="column col surface-1 rounded scroll"
-      :no-padding="!!branchData.total"
-    >
+    <div class="column col surface-1 rounded" :no-padding="!!branchData.total">
       <template v-if="!branchData.total">
         <TooltipComponent
           class="self-end"
@@ -525,7 +522,7 @@ watch(locale, () => {
             style="width: 100%"
           >
             <template v-slot:before>
-              <div class="rounded surface-1 full-height">
+              <div class="rounded surface-1 scroll">
                 <div
                   class="row bordered-b q-pl-sm text-weight-bold surface-2 items-center"
                   style="height: 50px"
@@ -733,7 +730,7 @@ watch(locale, () => {
             </template>
 
             <template v-slot:after>
-              <div class="full-width">
+              <div class="column" style="height: 100%">
                 <div
                   class="row justify-between q-pl-md items-center surface-2 bordered-b q-pr-md"
                   style="height: 50px"
@@ -905,160 +902,77 @@ watch(locale, () => {
                     </q-btn-toggle>
                   </div>
                 </div>
-                <div class="q-pa-md">
-                  <q-table
-                    flat
-                    bordered
-                    :rows="
-                      treeData
-                        .flatMap((v) => [v, ...v.branch])
-                        .filter((v) => {
-                          if (
-                            statusFilter === 'statusACTIVE' &&
-                            v.status === 'INACTIVE'
-                          ) {
-                            return false;
-                          }
-                          if (
-                            statusFilter === 'statusINACTIVE' &&
-                            v.status !== 'INACTIVE'
-                          ) {
-                            return false;
-                          }
-
-                          const terms = `${v.code} ${$i18n.locale === 'en-US' ? v.nameEN : v.name} ${v.telephoneNo}`;
-                          if (inputSearch && !terms.includes(inputSearch)) {
-                            return false;
-                          }
-
-                          if (
-                            !!currentHq.id &&
-                            currentHq.id === v.headOfficeId
-                          ) {
-                            return true;
-                          }
-                          if (fieldSelectedBranch.value === 'all') return true;
-                          if (fieldSelectedBranch.value === 'branchHQLabel')
-                            return v.isHeadOffice;
-                          if (fieldSelectedBranch.value === 'branchLabel')
-                            return !v.isHeadOffice;
-
-                          return false;
-                        })
-                    "
-                    :columns="columns"
-                    :grid="modeView"
-                    card-container-class="row q-col-gutter-md"
-                    row-key="name"
-                    hide-pagination
+                <div style="position: relative; flex: 1">
+                  <div
+                    style="position: absolute; inset: 0"
+                    class="scroll q-pa-md"
                   >
-                    <template v-slot:header="props">
-                      <q-tr class="surface-2" :props="props">
-                        <q-th
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          {{ $t(col.label) }}
-                        </q-th>
-                        <q-th auto-width />
-                      </q-tr>
-                    </template>
-
-                    <template v-slot:body="props">
-                      <q-tr
-                        :class="{
-                          'app-text-muted': props.row.status === 'INACTIVE',
-                        }"
-                        :props="props"
-                        @click="
-                          () => {
-                            if (props.row.isHeadOffice) {
-                              fieldSelectedBranch.value = '';
-                              inputSearch = '';
-                              currentHq = {
-                                id: props.row.id,
-                                code: props.row.code,
-                              };
-                              beforeBranch = {
-                                id: '',
-                                code: '',
-                              };
+                    <q-table
+                      flat
+                      bordered
+                      :rows="
+                        treeData
+                          .flatMap((v) => [v, ...v.branch])
+                          .filter((v) => {
+                            if (
+                              statusFilter === 'statusACTIVE' &&
+                              v.status === 'INACTIVE'
+                            ) {
+                              return false;
+                            }
+                            if (
+                              statusFilter === 'statusINACTIVE' &&
+                              v.status !== 'INACTIVE'
+                            ) {
+                              return false;
                             }
-                          }
-                        "
-                      >
-                        <q-td>
-                          <div class="row items-center">
-                            <div
-                              :class="{
-                                'status-active':
-                                  props.row.status !== 'INACTIVE',
-                                'status-inactive':
-                                  props.row.status === 'INACTIVE',
-                                'branch-card__hq': props.row.isHeadOffice,
-                                'branch-card__br': !props.row.isHeadOffice,
-                              }"
-                              style="
-                                width: 50px;
-                                display: flex;
-                                margin-bottom: var(--size-2);
-                              "
-                            >
-                              <div class="branch-card__icon">
-                                <q-icon
-                                  size="md"
-                                  style="scale: 0.8"
-                                  name="mdi-office-building-outline"
-                                />
-                              </div>
-                            </div>
-                            <div class="col">
-                              <div class="col">{{ props.row.name }}</div>
-                              <div class="col app-text-muted">
-                                {{ props.row.code }}
-                              </div>
-                            </div>
-                          </div>
-                        </q-td>
-                        <q-td>
-                          {{ props.row.address }}
-                        </q-td>
-                        <q-td>
-                          {{ props.row.contact[0].telephoneNo }}
-                        </q-td>
-                        <q-td>
-                          {{
-                            props.row.isHeadOffice
-                              ? $t('branchHQLabel')
-                              : $t('branchLabel')
-                          }}
-                        </q-td>
-                        <q-td>
-                          <q-btn
-                            icon="mdi-eye"
-                            size="sm"
-                            dense
-                            round
-                            flat
-                            @click.stop
-                          />
-                          <q-btn
-                            icon="mdi-dots-vertical"
-                            size="sm"
-                            dense
-                            round
-                            flat
-                            @click.stop
-                          />
-                        </q-td>
-                      </q-tr>
-                    </template>
 
-                    <template v-slot:item="props">
-                      <div class="col-6">
-                        <BranchCard
-                          :id="`branch-card-${props.row.name}`"
+                            const terms = `${v.code} ${$i18n.locale === 'en-US' ? v.nameEN : v.name} ${v.telephoneNo}`;
+                            if (inputSearch && !terms.includes(inputSearch)) {
+                              return false;
+                            }
+
+                            if (
+                              !!currentHq.id &&
+                              currentHq.id === v.headOfficeId
+                            ) {
+                              return true;
+                            }
+                            if (fieldSelectedBranch.value === 'all')
+                              return true;
+                            if (fieldSelectedBranch.value === 'branchHQLabel')
+                              return v.isHeadOffice;
+                            if (fieldSelectedBranch.value === 'branchLabel')
+                              return !v.isHeadOffice;
+
+                            return false;
+                          })
+                      "
+                      :columns="columns"
+                      :grid="modeView"
+                      card-container-class="row q-col-gutter-md"
+                      row-key="name"
+                      hide-pagination
+                    >
+                      <template v-slot:header="props">
+                        <q-tr class="surface-2" :props="props">
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            {{ $t(col.label) }}
+                          </q-th>
+                          <q-th auto-width />
+                        </q-tr>
+                      </template>
+
+                      <template v-slot:body="props">
+                        <q-tr
+                          :class="{
+                            'app-text-muted': props.row.status === 'INACTIVE',
+                          }"
+                          :props="props"
                           @click="
                             () => {
                               if (props.row.isHeadOffice) {
@@ -1075,45 +989,134 @@ watch(locale, () => {
                               }
                             }
                           "
-                          :metadata="props.row"
-                          :color="props.row.isHeadOffice ? 'hq' : 'br'"
-                          :key="props.row.id"
-                          :data="{
-                            branchLabelCode: props.row.code,
-                            branchLabelName:
-                              $i18n.locale === 'en-US'
-                                ? props.row.nameEN
-                                : props.row.name,
-                            branchLabelTel: props.row.contact
-                              .map((c: BranchContact) => c.telephoneNo)
-                              .join(','),
-                            branchLabelAddress:
-                              $i18n.locale === 'en-US'
-                                ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
-                                : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
-                            branchLabelType: $t(
+                        >
+                          <q-td>
+                            <div class="row items-center">
+                              <div
+                                :class="{
+                                  'status-active':
+                                    props.row.status !== 'INACTIVE',
+                                  'status-inactive':
+                                    props.row.status === 'INACTIVE',
+                                  'branch-card__hq': props.row.isHeadOffice,
+                                  'branch-card__br': !props.row.isHeadOffice,
+                                }"
+                                style="
+                                  width: 50px;
+                                  display: flex;
+                                  margin-bottom: var(--size-2);
+                                "
+                              >
+                                <div class="branch-card__icon">
+                                  <q-icon
+                                    size="md"
+                                    style="scale: 0.8"
+                                    name="mdi-office-building-outline"
+                                  />
+                                </div>
+                              </div>
+                              <div class="col">
+                                <div class="col">{{ props.row.name }}</div>
+                                <div class="col app-text-muted">
+                                  {{ props.row.code }}
+                                </div>
+                              </div>
+                            </div>
+                          </q-td>
+                          <q-td>
+                            {{ props.row.address }}
+                          </q-td>
+                          <q-td>
+                            {{ props.row.contact[0].telephoneNo }}
+                          </q-td>
+                          <q-td>
+                            {{
                               props.row.isHeadOffice
-                                ? 'branchHQLabel'
-                                : 'branchLabel',
-                            ),
-                          }"
-                          :field-selected="fieldSelected"
-                          :badge-field="['branchLabelStatus']"
-                          :inactive="props.row.status === 'INACTIVE'"
-                          @view-detail="
-                            (v) => {
-                              triggerEdit(
-                                'drawer',
-                                v.id,
-                                v.isHeadOffice ? 'headOffice' : 'subBranch',
-                                v.code,
-                              );
-                            }
-                          "
-                        />
-                      </div>
-                    </template>
-                  </q-table>
+                                ? $t('branchHQLabel')
+                                : $t('branchLabel')
+                            }}
+                          </q-td>
+                          <q-td>
+                            <q-btn
+                              icon="mdi-eye"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                              @click.stop
+                            />
+                            <q-btn
+                              icon="mdi-dots-vertical"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                              @click.stop
+                            />
+                          </q-td>
+                        </q-tr>
+                      </template>
+
+                      <template v-slot:item="props">
+                        <div class="col-6">
+                          <BranchCard
+                            :id="`branch-card-${props.row.name}`"
+                            @click="
+                              () => {
+                                if (props.row.isHeadOffice) {
+                                  fieldSelectedBranch.value = '';
+                                  inputSearch = '';
+                                  currentHq = {
+                                    id: props.row.id,
+                                    code: props.row.code,
+                                  };
+                                  beforeBranch = {
+                                    id: '',
+                                    code: '',
+                                  };
+                                }
+                              }
+                            "
+                            :metadata="props.row"
+                            :color="props.row.isHeadOffice ? 'hq' : 'br'"
+                            :key="props.row.id"
+                            :data="{
+                              branchLabelCode: props.row.code,
+                              branchLabelName:
+                                $i18n.locale === 'en-US'
+                                  ? props.row.nameEN
+                                  : props.row.name,
+                              branchLabelTel: props.row.contact
+                                .map((c: BranchContact) => c.telephoneNo)
+                                .join(','),
+                              branchLabelAddress:
+                                $i18n.locale === 'en-US'
+                                  ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
+                                  : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
+                              branchLabelType: $t(
+                                props.row.isHeadOffice
+                                  ? 'branchHQLabel'
+                                  : 'branchLabel',
+                              ),
+                            }"
+                            :field-selected="fieldSelected"
+                            :badge-field="['branchLabelStatus']"
+                            :inactive="props.row.status === 'INACTIVE'"
+                            @view-detail="
+                              (v) => {
+                                triggerEdit(
+                                  'drawer',
+                                  v.id,
+                                  v.isHeadOffice ? 'headOffice' : 'subBranch',
+                                  v.code,
+                                );
+                              }
+                            "
+                          />
+                        </div>
+                      </template>
+                    </q-table>
+                  </div>
 
                   <!-- <BranchCard
                     class="col-6"