fix: 02-personnel management layout

src/i18n/en-US/personnel-main-page.ts

@@ -1,6 +1,8 @@
 export default {
   personnelTitle: 'Personnel',
   personnelManagement: 'Personnel Management',
+  personnelManagementCaption: 'Manage All Personnel',
+
   personnelTooltipTitle: 'No personnel yet?',
   personnelTooltipCaption: 'Click + to add a personnel',
   personnelAdd: 'Add personnel',

src/i18n/th-th/personnel-main-page.ts

@@ -1,6 +1,8 @@
 export default {
   personnelTitle: 'บุคลากร',
   personnelManagement: 'จัดการบุคลากร',
+  personnelManagementCaption: 'จัดการบุคลากรทั้งหมด',
+
   personnelTooltipTitle: 'ยังไม่มีข้อมูลบุคลากร',
   personnelTooltipCaption: 'คลิก + เพื่อเพิ่มบุคลากร',
   personnelAdd: 'เพิ่มบุคลากร',

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue';
 import { storeToRefs } from 'pinia';
-import { dialog } from 'src/stores/utils';
+import useUtilsStore, { dialog } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 import useUserStore from 'stores/user';
@@ -34,6 +34,7 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 const { locale } = useI18n();
 
+const utilsStore = useUtilsStore();
 const flowStore = useFlowStore();
 const userStore = useUserStore();
 const branchStore = useBranchStore();
@@ -466,6 +467,9 @@ async function assignFormData(idEdit: string) {
 }
 
 onMounted(async () => {
+  utilsStore.currentTitle.title = 'personnelManagement';
+  utilsStore.currentTitle.caption = 'personnelManagementCaption';
+
   await fetchUserList();
 
   userStore.userOption.roleOpts.length === 0
@@ -548,12 +552,12 @@ watch(inputSearch, async () => await fetchUserList());
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="column q-pb-lg">
-    <div class="text-h6 text-weight-bold q-mb-md">
+  <div class="column full-height">
+    <!-- <div class="text-h6 text-weight-bold q-mb-md">
       {{ $t('personnelManagement') }}
-    </div>
+    </div> -->
 
-    <div class="row full-width q-mb-md no-wrap">
+    <div class="row full-width no-wrap q-pb-md">
       <!-- selector -->
       <SelectorList
         :list="selectorList"
@@ -587,132 +591,140 @@ watch(inputSearch, async () => await fetchUserList());
     </div>
 
     <!-- main -->
-    <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
-      <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
+      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>
-        </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>
+        </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
+          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">
           {{
@@ -728,7 +740,7 @@ watch(inputSearch, async () => await fetchUserList());
           :fetch-data="async () => await fetchUserList()"
         />
       </div>
-    </AppBox>
+    </div>
   </div>
 
   <DrawerInfo

src/pages/MainPage.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import MenuItem from 'components/home/MenuItem.vue';
+import useUtilsStore from 'src/stores/utils';
+import { onMounted } from 'vue';
 
+const utilsStore = useUtilsStore();
 const menu = [
   {
     value: 'branch-management',
@@ -93,10 +96,17 @@ const menu = [
     disabled: true,
   },
 ] satisfies InstanceType<typeof MenuItem>['$props']['list'];
+
+onMounted(() => {
+  utilsStore.currentTitle.title = '';
+  utilsStore.currentTitle.caption = '';
+});
 </script>
 
 <template>
-  <MenuItem :list="menu" />
+  <div>
+    <MenuItem :list="menu" />
+  </div>
 </template>
 
 <style scoped>