From 701d82e7a70c8c7d10de50421b7a29e6cbac8412 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Jul 2024 11:01:40 +0000
Subject: [PATCH] fix: new 02 ui & layout

---
 .../02_personnel-management/MainPage.vue      | 386 +++++++++++++-----
 src/stores/user/types.ts                      |   1 +
 2 files changed, 296 insertions(+), 91 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index c00d6310..d6cc1641 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -76,6 +76,9 @@ const defaultFormData = {
   checkpointEN: null,
 };
 
+const modeView = ref(true);
+const fieldSelected = ref();
+const fieldDisplay = ref();
 const hideStat = ref(false);
 const userCode = ref<string>();
 const currentUser = ref<User>();
@@ -91,7 +94,7 @@ const statusToggle = ref(true);
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const inputSearch = ref('');
 const userId = ref<string>();
-const selectorLabel = ref<string>('MESSENGER');
+const selectorLabel = ref<string>('ALL');
 const hqId = ref<string>();
 const brId = ref<string>();
 const formDialogRef = ref();
@@ -459,11 +462,11 @@ onMounted(async () => {
     : '';
   typeStats.value = await userStore.typeStats();
 
-  const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
-    (v) => v[1] > 0,
-  );
+  // const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
+  //   (v) => v[1] > 0,
+  // );
 
-  firstTypeIncludeUser && (selectorLabel.value = firstTypeIncludeUser[0]);
+  // firstTypeIncludeUser && (selectorLabel.value = firstTypeIncludeUser[0]);
 
   const res = await branchStore.userStats(formData.value.userType);
   if (res) {
@@ -513,7 +516,7 @@ async function fetchUserList() {
     pageSize: pageSize.value,
     page: currentPage.value,
     query: !!inputSearch.value ? inputSearch.value : undefined,
-    userType: selectorLabel.value ?? undefined,
+    userType: selectorLabel.value === 'ALL' ? undefined : selectorLabel.value,
   });
 }
 
@@ -538,8 +541,23 @@ watch(inputSearch, async () => await fetchUserList());
   <div class="column full-height no-wrap">
     <div class="text-body-2 q-mb-xs flex items-center">
       {{ $t('personnelStatTitle') }}
+      <q-badge
+        v-if="typeStats"
+        rounded
+        class="q-ml-sm"
+        style="
+          background-color: hsla(var(--info-bg) / 0.15);
+          color: hsl(var(--info-bg));
+        "
+      >
+        {{
+          selectorLabel === 'ALL'
+            ? Object.values(typeStats).reduce((acc, val) => acc + val, 0)
+            : typeStats[selectorLabel]
+        }}
+      </q-badge>
       <q-btn
-        class="q-ml-xs"
+        class="q-ml-sm"
         icon="mdi-pin"
         color="primary"
         size="sm"
@@ -556,22 +574,39 @@ watch(inputSearch, async () => await fetchUserList());
       <div v-if="!hideStat" class="scroll q-mb-md">
         <div style="display: inline-block">
           <StatCardComponent
-            v-if="typeStats"
+            v-if="typeStats && userData?.result"
+            labelI18n
             :branch="
-              Object.entries(typeStats).map(([key, val]) => ({
-                count: val,
-                label: key,
-                icon: 'mdi-account',
-                color:
-                  (
+              selectorLabel === 'ALL'
+                ? Object.entries(typeStats).map(([key, val]) => ({
+                    count: val,
+                    label: key,
+                    icon: 'mdi-account',
+                    color:
+                      (
+                        {
+                          USER: 'cyan',
+                          MESSENGER: 'yellow',
+                          DELEGATE: 'red',
+                          AGENCY: 'magenta',
+                        } as const
+                      )[key] || 'pink',
+                  }))
+                : [
                     {
-                      USER: 'cyan',
-                      MESSENGER: 'yellow',
-                      DELEGATE: 'red',
-                      AGENCY: 'magenta',
-                    } as const
-                  )[key] || 'pink',
-              }))
+                      label: selectorLabel,
+                      count: typeStats[selectorLabel],
+                      icon: 'mdi-account',
+                      color:
+                        selectorLabel === 'USER'
+                          ? 'cyan'
+                          : selectorLabel === 'MESSENGER'
+                            ? 'yellow'
+                            : selectorLabel === 'DELEGATE'
+                              ? 'red'
+                              : 'magenta',
+                    },
+                  ]
             "
             :dark="$q.dark.isActive"
           />
@@ -584,65 +619,234 @@ watch(inputSearch, async () => await fetchUserList());
       class="col surface-1 rounded justify-between column no-wrap"
       style="overflow: hidden"
     >
-      <div class="surface-2 bordered-b q-px-md q-py-sm">
-        <div class="row justify-end" style="gap: var(--size-2)">
-          <q-input
-            for="input-search"
-            style="width: 250px"
-            outlined
+      <div class="column">
+        <div
+          class="row surface-3 bordered-b justify-between full-width items-center surface-1"
+          style="z-index: 1"
+        >
+          <div class="row q-py-sm q-px-md justify-between full-width">
+            <q-input
+              for="input-search"
+              outlined
+              dense
+              style="width: 250px"
+              :label="$t('search')"
+              class="q-mr-md"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+            </q-input>
+
+            <div class="row">
+              <q-select
+                v-model="statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="q-pr-md"
+                map-options
+                emit-value
+                :options="[
+                  { label: $t('all'), value: 'all' },
+                  { label: $t('statusACTIVE'), value: 'statusACTIVE' },
+                  { label: $t('statusINACTIVE'), value: 'statusINACTIVE' },
+                ]"
+              ></q-select>
+
+              <q-select
+                id="select-field"
+                for="select-field"
+                :options="[
+                  { label: 'กันว่าง 1', value: 'กันว่าง 1' },
+                  { label: 'กันว่าง 2', value: 'กันว่าง 2' },
+                ]"
+                :display-value="$t('displayField')"
+                v-model="fieldSelected"
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+
+              <q-btn-toggle
+                id="btn-mode"
+                v-model="modeView"
+                dense
+                class="no-shadow bordered rounded surface-1 q-ml-md"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                size="xs"
+                :options="[
+                  { value: true, slot: 'folder' },
+                  { value: false, slot: 'list' },
+                ]"
+              >
+                <template v-slot:folder>
+                  <q-icon
+                    name="mdi-view-grid-outline"
+                    size="16px"
+                    class="q-px-sm q-py-xs rounded"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? modeView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : modeView
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+                <template v-slot:list>
+                  <q-icon
+                    name="mdi-format-list-bulleted"
+                    class="q-px-sm q-py-xs rounded"
+                    size="16px"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? modeView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : modeView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
+          </div>
+        </div>
+
+        <div class="surface-2 bordered-b q-px-md">
+          <q-tabs
             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 surface-1"
-            :class="{ 'app-text-info': statusFilter !== 'all' }"
-            unelevated
+            v-model="selectorLabel"
+            align="left"
+            class="full-height"
+            active-color="info"
           >
-            <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-tab
+              name="employer"
+              @click="
+                async () => {
+                  currentPage = 1;
+                  inputSearch = '';
+                  selectorLabel = 'ALL';
+                  statusFilter = 'all';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'ALL' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('all') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="employee"
+              @click="
+                async () => {
+                  selectorLabel = 'USER';
+                  statusFilter = 'all';
+                  currentPage = 1;
+                  inputSearch = '';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'USER' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('USER') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="MESSENGER"
+              @click="
+                async () => {
+                  selectorLabel = 'MESSENGER';
+                  statusFilter = 'all';
+                  currentPage = 1;
+                  inputSearch = '';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'MESSENGER' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('MESSENGER') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="DELEGATE"
+              @click="
+                async () => {
+                  selectorLabel = 'DELEGATE';
+                  statusFilter = 'all';
+                  currentPage = 1;
+                  inputSearch = '';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'DELEGATE' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('DELEGATE') }}
+              </div>
+            </q-tab>
+            <q-tab
+              name="AGENCY"
+              @click="
+                async () => {
+                  selectorLabel = 'AGENCY';
+                  statusFilter = 'all';
+                  currentPage = 1;
+                  inputSearch = '';
+                  flowStore.rotate();
+                }
+              "
+            >
+              <div
+                class="row"
+                :class="
+                  selectorLabel === 'AGENCY' ? 'text-bold' : 'app-text-muted'
+                "
+              >
+                {{ $t('AGENCY') }}
+              </div>
+            </q-tab>
+          </q-tabs>
         </div>
       </div>
-      <div class="col scroll">
-        <div class="q-pa-md q-col-gutter-md row">
+
+      <div class="col scroll column">
+        <div
+          v-if="userData && userData.total > 0 && !inputSearch"
+          class="q-pa-md q-col-gutter-md row"
+        >
           <div
             v-for="v in userData?.result.filter((v) => {
               if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
@@ -704,31 +908,31 @@ watch(inputSearch, async () => await fetchUserList());
             />
           </div>
         </div>
-        <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
+          v-if="userData && userData.total === 0 && !inputSearch"
+          class="col column"
+        >
+          <div class="flex justify-end q-pa-md">
+            <TooltipComponent
+              title="personnelTooltipTitle"
+              caption="personnelTooltipCaption"
+              imgSrc="personnel-table-"
+            />
           </div>
-          <div
-            class="col self-center"
-            style="display: flex; flex-grow: 1; align-items: center"
-          >
+
+          <div class="col items-center flex justify-center">
             <AddButton
               :label="'personnelAdd'"
               :cyanOn="true"
               @trigger="openDialog('FORM')"
             />
           </div>
-        </template>
+        </div>
 
         <div
           v-if="userData?.total === 0 && !!inputSearch"
-          class="row full-width items-center justify-center"
+          class="row col full-width items-center justify-center"
           style="min-height: 250px"
         >
           <NoData :not-found="!!inputSearch" />
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 754e7d84..cbc45b57 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -97,6 +97,7 @@ export type UserAttachmentDelete = {
 };
 
 export type UserTypeStats = {
+  [x: string]: number;
   USER: number;
   MESSENGER: number;
   DELEGATE: number;