From 16bd9d03c5f57fc2d1aa47f0e7f00887d617bc6b Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:14:21 +0700
Subject: [PATCH] refactor: change layout of stat card

---
 src/pages/01_branch-management/MainPage.vue   |   1 -
 .../02_personnel-management/MainPage.vue      | 331 ++++++++----------
 src/pages/03_customer-management/MainPage.vue |  11 +-
 src/pages/04_product-service/MainPage.vue     |   4 +-
 4 files changed, 158 insertions(+), 189 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 8c23e2d1..8f1b3685 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -441,7 +441,6 @@ watch(locale, () => {
       label-i18n
       :branch="stats"
       :dark="$q.dark.isActive"
-      nowrap
     />
 
     <div
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 07e925c4..bfd49313 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -533,190 +533,169 @@ watch(inputSearch, async () => await fetchUserList());
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="column full-height">
-    <div class="row full-width q-pb-md q-gutter-y-md">
-      <!-- selector -->
-      <div class="col-sm-5 col-md-3 col-12 q-mr-md">
-        <SelectorList :list="selectorList" v-model:selector="selectorLabel" />
+  <!-- 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>
-
-      <!-- stat -->
-      <div class="col-12 col-sm bordered surface-1 rounded">
-        <div class="text-weight-bold text-subtitle1 q-pa-md">
-          {{ $t('personnelStatTitle') }}
-          {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
-        </div>
-
-        <div class="scroll">
-          <div class="q-mx-md" style="display: inline-block">
-            <StatCardComponent
-              v-if="sortedUserStats"
-              :branch="
-                sortedUserStats.map((v) => ({
-                  count: v.count,
-                  label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
-                  color: v.isHeadOffice ? 'pink' : 'purple',
-                }))
-              "
-              :dark="$q.dark.isActive"
-              nowrap
-              class="q-mb-md"
+      <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>
 
-    <!-- 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-between">
-          <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>
-          <q-input
-            for="input-search"
-            style="width: 250px"
-            outlined
-            dense
-            :label="$t('search')"
-            debounce="500"
-            v-model="inputSearch"
-          ></q-input>
-        </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="row justify-between q-pt-md" v-if="currentMaxPage > 0">
-        <div class="app-text-muted">
-          {{
-            $t('recordsPage', {
-              resultcurrentPage: userData?.result.length,
-              total: userData?.total,
-            })
-          }}
-        </div>
-        <PaginationComponent
-          v-model:current-page="currentPage"
-          v-model:max-page="currentMaxPage"
-          :fetch-data="async () => await fetchUserList()"
-        />
+    <div class="row justify-between q-pt-md" v-if="currentMaxPage > 0">
+      <div class="app-text-muted">
+        {{
+          $t('recordsPage', {
+            resultcurrentPage: userData?.result.length,
+            total: userData?.total,
+          })
+        }}
       </div>
+      <PaginationComponent
+        v-model:current-page="currentPage"
+        v-model:max-page="currentMaxPage"
+        :fetch-data="async () => await fetchUserList()"
+      />
     </div>
   </div>
 
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 01b761a0..17e170ba 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1332,16 +1332,7 @@ watch([inputSearch, currentStatus], async () => {
 
   <div class="column full-height no-wrap">
     <div v-if="isMainPage" class="column full-height">
-      <div class="row full-width q-pb-md q-gutter-y-md">
-        <div class="col-sm-5 col-md-3 col-12 q-mr-md">
-          <SelectorList
-            clickable
-            :list="selectorList"
-            v-model:selector="selectorLabel"
-            class="full-height"
-          />
-        </div>
-
+      <div class="row full-width">
         <!-- stat -->
         <div class="col-12 col-sm bordered surface-1 rounded">
           <div class="text-weight-bold text-subtitle1 q-pa-md">
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 6ab97a91..4cd81135 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1183,9 +1183,9 @@ watch(inputSearchProductAndService, async () => {
 
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="q-mb-md bordered rounded surface-1 scroll"
+        class="scroll q-mb-md"
       >
-        <div class="q-ma-md" style="display: inline-block">
+        <div style="display: inline-block">
           <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
         </div>
       </div>