feat: hide stat 02-personnel

src/pages/02_personnel-management/MainPage.vue

@@ -76,6 +76,7 @@ const defaultFormData = {
   checkpointEN: null,
 };
 
+const hideStat = ref(false);
 const userCode = ref<string>();
 const currentUser = ref<User>();
 const infoDrawerEdit = ref(false);
@@ -535,23 +536,41 @@ watch(inputSearch, async () => await fetchUserList());
 
   <!-- stat -->
   <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 class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('personnelStatTitle') }}
+      <q-btn
+        class="q-ml-xs"
+        icon="mdi-pin"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="hideStat = !hideStat"
+        :style="hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
     </div>
 
+    <transition name="slide">
+      <div v-if="!hideStat" 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>
+    </transition>
+
     <!-- main -->
     <div
       class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
@@ -968,4 +987,18 @@ watch(inputSearch, async () => await fetchUserList());
   background-color: hsl(var(--positive-bg));
   border-radius: var(--radius-2);
 }
+
+.slide-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
 </style>