From 2fd21a5ac7c67b3a6d3129bc254fefef9ee81929 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 4 Jul 2024 09:53:33 +0000
Subject: [PATCH] fix: 02-personnel layout

---
 .../02_personnel-management/MainPage.vue      | 369 +++++++++---------
 1 file changed, 188 insertions(+), 181 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 116fe095..5a06daf7 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -534,201 +534,208 @@ watch(inputSearch, async () => await fetchUserList());
   </ButtonAddComponent>
 
   <!-- stat -->
-  <div class="scroll q-mb-md">
-    <div style="display: inline-block">
-      <StatCardComponent
-        v-if="sortedUserStats"
-        :branch="
-          sortedUserStats.map((v) => ({
-            count: v.count,
-            label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
-            icon: 'mdi-account',
-            color: v.isHeadOffice ? 'pink' : 'purple',
-          }))
-        "
-        :dark="$q.dark.isActive"
-      />
-    </div>
-  </div>
-  <!-- main -->
-  <div
-    class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
-  >
-    <div>
-      <div class="row q-mb-md justify-end" style="gap: var(--size-2)">
-        <q-input
-          for="input-search"
-          style="width: 250px"
-          outlined
-          dense
-          :label="$t('search')"
-          debounce="500"
-          v-model="inputSearch"
-        ></q-input>
-        <q-btn
-          id="btn-filter"
-          icon="mdi-tune-vertical-variant"
-          size="sm"
-          class="bordered rounded"
-          :class="{ 'app-text-info': statusFilter !== 'all' }"
-          unelevated
-        >
-          <q-menu class="bordered">
-            <q-list v-close-popup dense>
-              <q-item
-                id="btn-filter-all"
-                clickable
-                class="flex items-center"
-                :class="{ 'app-text-info': statusFilter === 'all' }"
-                @click="statusFilter = 'all'"
-              >
-                {{ $t('all') }}
-              </q-item>
-              <q-item
-                id="btn-filter-active"
-                clickable
-                class="flex items-center"
-                :class="{
-                  'app-text-info': statusFilter === 'statusACTIVE',
-                }"
-                @click="statusFilter = 'statusACTIVE'"
-              >
-                {{ $t('statusACTIVE') }}
-              </q-item>
-              <q-item
-                id="btn-filter-inactive"
-                clickable
-                class="flex items-center"
-                :class="{
-                  'app-text-info': statusFilter === 'statusINACTIVE',
-                }"
-                @click="statusFilter = 'statusINACTIVE'"
-              >
-                {{ $t('statusINACTIVE') }}
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
-      </div>
-      <PersonCard
-        :list="
-          userData?.result
-            .filter((v) => {
-              if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
-                return false;
-              }
-              if (
-                statusFilter === 'statusINACTIVE' &&
-                v.status !== 'INACTIVE'
-              ) {
-                return false;
-              }
-              return true;
-            })
-            .map((v) => ({
-              id: v.id,
-              img: `${v.profileImageUrl}`,
-              name:
-                $i18n.locale === 'en-US'
-                  ? `${v.firstNameEN} ${v.lastNameEN}`
-                  : `${v.firstName} ${v.lastName}`,
-              male: v.gender === 'male',
-              female: v.gender === 'female',
-              detail: [
-                { label: $t('personnelCardUserType'), value: $t(v.userType) },
-                { label: $t('personnelCardTelephone'), value: v.telephoneNo },
-                {
-                  label: $t('personnelCardAge'),
-                  value: userStore.calculateAge(v.birthDate as Date) || '',
-                },
-              ],
-              badge: v.code,
-              disabled: v.status === 'INACTIVE',
-            })) || []
-        "
-        @update-card="openDialog"
-        @delete-card="onDelete"
-        @enter-card="openDialog"
-        @toggle-status="toggleStatus"
-      />
-      <template v-if="userData && userData.total === 0 && !inputSearch">
-        <div class="col-1 self-end">
-          <div class="row">
-            <TooltipComponent
-              title="personnelTooltipTitle"
-              caption="personnelTooltipCaption"
-              imgSrc="personnel-table-"
-            />
-          </div>
-        </div>
-        <div
-          class="col self-center"
-          style="display: flex; flex-grow: 1; align-items: center"
-        >
-          <AddButton
-            :label="'personnelAdd'"
-            :cyanOn="true"
-            @trigger="openDialog('FORM')"
-          />
-        </div>
-      </template>
-
-      <div
-        v-if="userData?.total === 0 && !!inputSearch"
-        class="row full-width items-center justify-center"
-        style="min-height: 250px"
-      >
-        <NoData :not-found="!!inputSearch" />
+  <div class="column full-height no-wrap">
+    <div class="scroll q-mb-md">
+      <div style="display: inline-block">
+        <StatCardComponent
+          v-if="sortedUserStats"
+          :branch="
+            sortedUserStats.map((v) => ({
+              count: v.count,
+              label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+              icon: 'mdi-account',
+              color: v.isHeadOffice ? 'pink' : 'purple',
+            }))
+          "
+          :dark="$q.dark.isActive"
+        />
       </div>
     </div>
 
+    <!-- main -->
     <div
-      class="row justify-between items-center q-pt-md"
-      v-if="currentMaxPage > 0"
+      class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
     >
-      <div class="col-4">
-        <div class="row items-center">
-          <div class="app-text-muted" style="width: 80px">
-            {{ $t('showing') }}
-          </div>
-          <div>
-            <q-btn-dropdown dense unelevated :label="pageSize">
-              <q-list>
+      <div>
+        <div class="row q-mb-md justify-end" style="gap: var(--size-2)">
+          <q-input
+            for="input-search"
+            style="width: 250px"
+            outlined
+            dense
+            :label="$t('search')"
+            debounce="500"
+            v-model="inputSearch"
+          ></q-input>
+          <q-btn
+            id="btn-filter"
+            icon="mdi-tune-vertical-variant"
+            size="sm"
+            class="bordered rounded"
+            :class="{ 'app-text-info': statusFilter !== 'all' }"
+            unelevated
+          >
+            <q-menu class="bordered">
+              <q-list v-close-popup dense>
                 <q-item
-                  v-for="v in [10, 30, 50, 100, 500, 1000]"
+                  id="btn-filter-all"
                   clickable
-                  v-close-popup
-                  @click="
-                    async () => {
-                      pageSize = v;
-                      await fetchUserList();
-                    }
-                  "
+                  class="flex items-center"
+                  :class="{ 'app-text-info': statusFilter === 'all' }"
+                  @click="statusFilter = 'all'"
                 >
-                  <q-item-section>
-                    <q-item-label>{{ v }}</q-item-label>
-                  </q-item-section>
+                  {{ $t('all') }}
+                </q-item>
+                <q-item
+                  id="btn-filter-active"
+                  clickable
+                  class="flex items-center"
+                  :class="{
+                    'app-text-info': statusFilter === 'statusACTIVE',
+                  }"
+                  @click="statusFilter = 'statusACTIVE'"
+                >
+                  {{ $t('statusACTIVE') }}
+                </q-item>
+                <q-item
+                  id="btn-filter-inactive"
+                  clickable
+                  class="flex items-center"
+                  :class="{
+                    'app-text-info': statusFilter === 'statusINACTIVE',
+                  }"
+                  @click="statusFilter = 'statusINACTIVE'"
+                >
+                  {{ $t('statusINACTIVE') }}
                 </q-item>
               </q-list>
-            </q-btn-dropdown>
+            </q-menu>
+          </q-btn>
+        </div>
+        <PersonCard
+          :list="
+            userData?.result
+              .filter((v) => {
+                if (
+                  statusFilter === 'statusACTIVE' &&
+                  v.status === 'INACTIVE'
+                ) {
+                  return false;
+                }
+                if (
+                  statusFilter === 'statusINACTIVE' &&
+                  v.status !== 'INACTIVE'
+                ) {
+                  return false;
+                }
+                return true;
+              })
+              .map((v) => ({
+                id: v.id,
+                img: `${v.profileImageUrl}`,
+                name:
+                  $i18n.locale === 'en-US'
+                    ? `${v.firstNameEN} ${v.lastNameEN}`
+                    : `${v.firstName} ${v.lastName}`,
+                male: v.gender === 'male',
+                female: v.gender === 'female',
+                detail: [
+                  { label: $t('personnelCardUserType'), value: $t(v.userType) },
+                  { label: $t('personnelCardTelephone'), value: v.telephoneNo },
+                  {
+                    label: $t('personnelCardAge'),
+                    value: userStore.calculateAge(v.birthDate as Date) || '',
+                  },
+                ],
+                badge: v.code,
+                disabled: v.status === 'INACTIVE',
+              })) || []
+          "
+          @update-card="openDialog"
+          @delete-card="onDelete"
+          @enter-card="openDialog"
+          @toggle-status="toggleStatus"
+        />
+        <template v-if="userData && userData.total === 0 && !inputSearch">
+          <div class="col-1 self-end">
+            <div class="row">
+              <TooltipComponent
+                title="personnelTooltipTitle"
+                caption="personnelTooltipCaption"
+                imgSrc="personnel-table-"
+              />
+            </div>
           </div>
+          <div
+            class="col self-center"
+            style="display: flex; flex-grow: 1; align-items: center"
+          >
+            <AddButton
+              :label="'personnelAdd'"
+              :cyanOn="true"
+              @trigger="openDialog('FORM')"
+            />
+          </div>
+        </template>
+
+        <div
+          v-if="userData?.total === 0 && !!inputSearch"
+          class="row full-width items-center justify-center"
+          style="min-height: 250px"
+        >
+          <NoData :not-found="!!inputSearch" />
         </div>
       </div>
 
-      <div class="col-4 row justify-center app-text-muted">
-        {{
-          $t('recordsPage', {
-            resultcurrentPage: userData?.result.length,
-            total: userData?.total,
-          })
-        }}
-      </div>
-      <div class="col-4 row justify-end">
-        <PaginationComponent
-          v-model:current-page="currentPage"
-          v-model:max-page="currentMaxPage"
-          :fetch-data="async () => await fetchUserList()"
-        />
+      <div
+        class="row justify-between items-center q-pt-md"
+        v-if="currentMaxPage > 0"
+      >
+        <div class="col-4">
+          <div class="row items-center">
+            <div class="app-text-muted" style="width: 80px">
+              {{ $t('showing') }}
+            </div>
+            <div>
+              <q-btn-dropdown dense unelevated :label="pageSize">
+                <q-list>
+                  <q-item
+                    v-for="v in [10, 30, 50, 100, 500, 1000]"
+                    :key="v"
+                    clickable
+                    v-close-popup
+                    @click="
+                      async () => {
+                        pageSize = v;
+                        await fetchUserList();
+                      }
+                    "
+                  >
+                    <q-item-section>
+                      <q-item-label>{{ v }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-4 row justify-center app-text-muted">
+          {{
+            $t('recordsPage', {
+              resultcurrentPage: userData?.result.length,
+              total: userData?.total,
+            })
+          }}
+        </div>
+        <div class="col-4 row justify-end">
+          <PaginationComponent
+            v-model:current-page="currentPage"
+            v-model:max-page="currentMaxPage"
+            :fetch-data="async () => await fetchUserList()"
+          />
+        </div>
       </div>
     </div>
   </div>