fix: new 02 ui & layout

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(
+  // const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
-    (v) => v[1] > 0,
+  //   (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,9 +574,11 @@ 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]) => ({
+              selectorLabel === 'ALL'
+                ? Object.entries(typeStats).map(([key, val]) => ({
                     count: val,
                     label: key,
                     icon: 'mdi-account',
@@ -572,6 +592,21 @@ watch(inputSearch, async () => await fetchUserList());
                         } 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="column">
-        <div class="row justify-end" style="gap: var(--size-2)">
+        <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"
-            style="width: 250px"
               outlined
               dense
+              style="width: 250px"
               :label="$t('search')"
-            debounce="500"
+              class="q-mr-md"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
-          ></q-input>
+              debounce="200"
-          <q-btn
-            id="btn-filter"
-            icon="mdi-tune-vertical-variant"
-            size="sm"
-            class="bordered rounded surface-1"
-            :class="{ 'app-text-info': statusFilter !== 'all' }"
-            unelevated
             >
-            <q-menu class="bordered">
+              <template #prepend>
-              <q-list v-close-popup dense>
+                <q-icon name="mdi-magnify" />
-                <q-item
+              </template>
-                  id="btn-filter-all"
+            </q-input>
-                  clickable
+
-                  class="flex items-center"
+            <div class="row">
-                  :class="{ 'app-text-info': statusFilter === 'all' }"
+              <q-select
-                  @click="statusFilter = 'all'"
+                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
+            v-model="selectorLabel"
+            align="left"
+            class="full-height"
+            active-color="info"
+          >
+            <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') }}
-                </q-item>
+              </div>
-                <q-item
+            </q-tab>
-                  id="btn-filter-active"
+            <q-tab
-                  clickable
+              name="employee"
-                  class="flex items-center"
+              @click="
-                  :class="{
+                async () => {
-                    'app-text-info': statusFilter === 'statusACTIVE',
+                  selectorLabel = 'USER';
-                  }"
+                  statusFilter = 'all';
-                  @click="statusFilter = 'statusACTIVE'"
+                  currentPage = 1;
+                  inputSearch = '';
+                  flowStore.rotate();
+                }
+              "
             >
-                  {{ $t('statusACTIVE') }}
+              <div
-                </q-item>
+                class="row"
-                <q-item
+                :class="
-                  id="btn-filter-inactive"
+                  selectorLabel === 'USER' ? 'text-bold' : 'app-text-muted'
-                  clickable
+                "
-                  class="flex items-center"
-                  :class="{
-                    'app-text-info': statusFilter === 'statusINACTIVE',
-                  }"
-                  @click="statusFilter = 'statusINACTIVE'"
               >
-                  {{ $t('statusINACTIVE') }}
+                {{ $t('USER') }}
-                </q-item>
+              </div>
-              </q-list>
+            </q-tab>
-            </q-menu>
+            <q-tab
-          </q-btn>
+              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
-            <div class="row">
+          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>
+
-          <div
+          <div class="col items-center flex justify-center">
-            class="col self-center"
-            style="display: flex; flex-grow: 1; align-items: 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" />

src/stores/user/types.ts

@@ -97,6 +97,7 @@ export type UserAttachmentDelete = {
 };
 
 export type UserTypeStats = {
+  [x: string]: number;
   USER: number;
   MESSENGER: number;
   DELEGATE: number;