From d64421f48bcdd24b48c44cee3a9a2c439164ea84 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 5 Jul 2024 13:10:37 +0700
Subject: [PATCH] feat: scroll inside

---
 src/pages/01_branch-management/MainPage.vue | 349 +++++++++++---------
 1 file changed, 184 insertions(+), 165 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 15a6d792..f17ef2d4 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -537,7 +537,7 @@ watch(locale, () => {
             style="width: 100%"
           >
             <template v-slot:before>
-              <div class="rounded surface-1 scroll">
+              <div class="rounded surface-1 column" style="height: 100%">
                 <div
                   class="row bordered-b q-pl-sm text-weight-bold surface-2 items-center"
                   style="height: 50px"
@@ -573,174 +573,193 @@ watch(locale, () => {
                   </q-btn>
                 </div>
 
-                <q-tree
-                  :nodes="treeData"
-                  node-key="id"
-                  label-key="name"
-                  children-key="branch"
-                  style="color: var(--foreground)"
-                >
-                  <template #default-header="{ node }">
-                    <div
-                      class="row items-center justify-between full-width no-wrap"
+                <div class="col" style="position: relative">
+                  <div class="scroll" style="position: absolute; inset: 0">
+                    <q-tree
+                      :nodes="treeData"
+                      node-key="id"
+                      label-key="name"
+                      children-key="branch"
+                      style="color: var(--foreground)"
                     >
-                      <span>{{ node.name }}</span>
-                      <div
-                        class="row q-gutter-xs items-center no-wrap"
-                        @click.stop
-                      >
-                        <q-btn
-                          v-if="node.isHeadOffice"
-                          :id="`create-sub-branch-btn-${node.name}`"
-                          @click.stop="
-                            triggerCreate('subBranch', node.id, node.code)
-                          "
-                          icon="mdi-file-plus-outline"
-                          size="sm"
-                          dense
-                          round
-                          flat
-                        />
-
-                        <q-btn
-                          :id="`view-detail-btn-${node.name}`"
-                          icon="mdi-dots-vertical"
-                          size="sm"
-                          dense
-                          round
-                          flat
+                      <template #default-header="{ node }">
+                        <div
+                          class="row items-center justify-between full-width no-wrap"
                         >
-                          <q-menu class="bordered">
-                            <q-list v-close-popup>
-                              <q-item
-                                :id="`view-detail-btn-${node.name}-view`"
-                                @click.stop="
-                                  if (node.isHeadOffice) {
-                                    triggerEdit(
-                                      'drawer',
-                                      node.id,
-                                      'headOffice',
-                                      node.code,
-                                    );
-                                  } else {
-                                    triggerEdit('drawer', node.id, 'subBranch');
-                                  }
-                                "
-                                clickable
-                                dense
-                                class="row q-py-sm"
-                                style="white-space: nowrap"
-                              >
-                                <q-icon
-                                  name="mdi-eye-outline"
-                                  class="col-3"
-                                  size="xs"
-                                  style="color: hsl(var(--green-6-hsl))"
-                                />
-                                <span class="col-9 q-px-md flex items-center">
-                                  {{ $t('viewDetail') }}
-                                </span>
-                              </q-item>
+                          <span>{{ node.name }}</span>
+                          <div
+                            class="row q-gutter-xs items-center no-wrap"
+                            @click.stop
+                          >
+                            <q-btn
+                              v-if="node.isHeadOffice"
+                              :id="`create-sub-branch-btn-${node.name}`"
+                              @click.stop="
+                                triggerCreate('subBranch', node.id, node.code)
+                              "
+                              icon="mdi-file-plus-outline"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                            />
 
-                              <q-item
-                                :id="`view-detail-btn-${node.name}-edit`"
-                                clickable
-                                dense
-                                class="row q-py-sm"
-                                style="white-space: nowrap"
-                                @click="
-                                  () => {
-                                    if (node.isHeadOffice) {
-                                      triggerEdit(
-                                        'form',
-                                        node.id,
-                                        'headOffice',
-                                        node.code,
-                                      );
-                                    } else {
-                                      triggerEdit('form', node.id, 'subBranch');
-                                    }
-                                  }
-                                "
-                              >
-                                <q-icon
-                                  name="mdi-pencil-outline"
-                                  class="col-3"
-                                  size="xs"
-                                  style="color: hsl(var(--cyan-6-hsl))"
-                                />
-                                <span class="col-9 q-px-md flex items-center">
-                                  {{ $t('edit') }}
-                                </span>
-                              </q-item>
-                              <q-item
-                                :id="`view-detail-btn-${node.name}-delete`"
-                                dense
-                                :clickable="node.status === 'CREATED'"
-                                class="row"
-                                :class="{
-                                  'surface-3': node.status !== 'CREATED',
-                                  'app-text-muted': node.status !== 'CREATED',
-                                }"
-                                style="white-space: nowrap"
-                                @click="triggerDelete(node.id)"
-                              >
-                                <q-icon
-                                  name="mdi-trash-can-outline"
-                                  size="xs"
-                                  class="col-3"
-                                  :class="{
-                                    'app-text-negative':
-                                      node.status === 'CREATED',
-                                  }"
-                                />
-                                <span class="col-9 q-px-md flex items-center">
-                                  {{ $t('delete') }}
-                                </span>
-                              </q-item>
-
-                              <q-item dense>
-                                <q-item-section class="q-py-sm">
-                                  <div class="q-pa-sm surface-2 rounded">
-                                    <q-toggle
-                                      :id="`view-detail-btn-${node.name}-status`"
-                                      dense
-                                      size="sm"
-                                      :label="
-                                        node.status !== 'INACTIVE'
-                                          ? $t('switchOnLabel')
-                                          : $t('switchOffLabel')
-                                      "
-                                      @click="
-                                        async () => {
-                                          const res =
-                                            await branchStore.editById(
-                                              node.id,
-                                              {
-                                                status:
-                                                  node.status !== 'INACTIVE'
-                                                    ? 'INACTIVE'
-                                                    : 'ACTIVE',
-                                              },
-                                            );
-                                          if (res) node.status = res.status;
-                                        }
-                                      "
-                                      :model-value="
-                                        node.status === 'CREATED' ||
-                                        node.status === 'ACTIVE'
-                                      "
+                            <q-btn
+                              :id="`view-detail-btn-${node.name}`"
+                              icon="mdi-dots-vertical"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                            >
+                              <q-menu class="bordered">
+                                <q-list v-close-popup>
+                                  <q-item
+                                    :id="`view-detail-btn-${node.name}-view`"
+                                    @click.stop="
+                                      if (node.isHeadOffice) {
+                                        triggerEdit(
+                                          'drawer',
+                                          node.id,
+                                          'headOffice',
+                                          node.code,
+                                        );
+                                      } else {
+                                        triggerEdit(
+                                          'drawer',
+                                          node.id,
+                                          'subBranch',
+                                        );
+                                      }
+                                    "
+                                    clickable
+                                    dense
+                                    class="row q-py-sm"
+                                    style="white-space: nowrap"
+                                  >
+                                    <q-icon
+                                      name="mdi-eye-outline"
+                                      class="col-3"
+                                      size="xs"
+                                      style="color: hsl(var(--green-6-hsl))"
                                     />
-                                  </div>
-                                </q-item-section>
-                              </q-item>
-                            </q-list>
-                          </q-menu>
-                        </q-btn>
-                      </div>
-                    </div>
-                  </template>
-                </q-tree>
+                                    <span
+                                      class="col-9 q-px-md flex items-center"
+                                    >
+                                      {{ $t('viewDetail') }}
+                                    </span>
+                                  </q-item>
+
+                                  <q-item
+                                    :id="`view-detail-btn-${node.name}-edit`"
+                                    clickable
+                                    dense
+                                    class="row q-py-sm"
+                                    style="white-space: nowrap"
+                                    @click="
+                                      () => {
+                                        if (node.isHeadOffice) {
+                                          triggerEdit(
+                                            'form',
+                                            node.id,
+                                            'headOffice',
+                                            node.code,
+                                          );
+                                        } else {
+                                          triggerEdit(
+                                            'form',
+                                            node.id,
+                                            'subBranch',
+                                          );
+                                        }
+                                      }
+                                    "
+                                  >
+                                    <q-icon
+                                      name="mdi-pencil-outline"
+                                      class="col-3"
+                                      size="xs"
+                                      style="color: hsl(var(--cyan-6-hsl))"
+                                    />
+                                    <span
+                                      class="col-9 q-px-md flex items-center"
+                                    >
+                                      {{ $t('edit') }}
+                                    </span>
+                                  </q-item>
+                                  <q-item
+                                    :id="`view-detail-btn-${node.name}-delete`"
+                                    dense
+                                    :clickable="node.status === 'CREATED'"
+                                    class="row"
+                                    :class="{
+                                      'surface-3': node.status !== 'CREATED',
+                                      'app-text-muted':
+                                        node.status !== 'CREATED',
+                                    }"
+                                    style="white-space: nowrap"
+                                    @click="triggerDelete(node.id)"
+                                  >
+                                    <q-icon
+                                      name="mdi-trash-can-outline"
+                                      size="xs"
+                                      class="col-3"
+                                      :class="{
+                                        'app-text-negative':
+                                          node.status === 'CREATED',
+                                      }"
+                                    />
+                                    <span
+                                      class="col-9 q-px-md flex items-center"
+                                    >
+                                      {{ $t('delete') }}
+                                    </span>
+                                  </q-item>
+
+                                  <q-item dense>
+                                    <q-item-section class="q-py-sm">
+                                      <div class="q-pa-sm surface-2 rounded">
+                                        <q-toggle
+                                          :id="`view-detail-btn-${node.name}-status`"
+                                          dense
+                                          size="sm"
+                                          :label="
+                                            node.status !== 'INACTIVE'
+                                              ? $t('switchOnLabel')
+                                              : $t('switchOffLabel')
+                                          "
+                                          @click="
+                                            async () => {
+                                              const res =
+                                                await branchStore.editById(
+                                                  node.id,
+                                                  {
+                                                    status:
+                                                      node.status !== 'INACTIVE'
+                                                        ? 'INACTIVE'
+                                                        : 'ACTIVE',
+                                                  },
+                                                );
+                                              if (res) node.status = res.status;
+                                            }
+                                          "
+                                          :model-value="
+                                            node.status === 'CREATED' ||
+                                            node.status === 'ACTIVE'
+                                          "
+                                        />
+                                      </div>
+                                    </q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-menu>
+                            </q-btn>
+                          </div>
+                        </div>
+                      </template>
+                    </q-tree>
+                  </div>
+                </div>
               </div>
             </template>