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

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import useUserStore from 'stores/user';
import { storeToRefs } from 'pinia';

import PersonCard from 'components/home/PersonCard.vue';
import AppBox from 'components/app/AppBox.vue';
import StatCardComponent from 'components/StatCardComponent.vue';
import SelectorList from 'components/SelectorList.vue';
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
import TooltipComponet from 'components/TooltipComponet.vue';

const userStore = useUserStore();
const { data: userData } = storeToRefs(userStore);

onMounted(async () => {
  await userStore.fetchList();
});

const branchStat = ref([
  { label: 'Branch A', amount: 1 },
  { label: 'Branch B', amount: 5 },
  { label: 'Branch C', amount: 3 },
]);

const selectorLabel = ref('');
const selectorList = [
  { label: 'personnelSelector1', count: 0 },
  { label: 'personnelSelector2', count: 0 },
  { label: 'personnelSelector3', count: 0 },
  { label: 'personnelSelector4', count: 0 },
] satisfies InstanceType<typeof SelectorList>['$props']['list'];
</script>

<template>
  <div class="column q-pb-lg">
    <div class="text-h6 text-weight-bold q-mb-md">
      {{ $t('personnelManagement') }}
    </div>

    <div class="row full-width q-mb-md no-wrap">
      <!-- selector -->
      <SelectorList
        :list="selectorList"
        v-model:selector="selectorLabel"
        class="q-mr-md col-4"
      />

      <!-- stat -->
      <AppBox bordered class="column full-width">
        <span class="q-pb-lg text-weight-bold text-subtitle1">
          {{ $t('personnelStatTitle') + $t(selectorLabel) }}
        </span>
        <div class="row col full-width" style="overflow-x: auto">
          <StatCardComponent :branch="branchStat" class="no-wrap" />
        </div>
      </AppBox>
    </div>

    <!-- main -->
    <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
      <PersonCard
        :list="
          userData?.result.map((v) => ({
            img: `${v.profileImageUrl}`,
            name: `${v.firstName} ${v.lastName}`,
            male: v.gender === 'male',
            female: v.gender === 'female',
            detail: [
              { label: 'Email', value: v.email },
              { label: 'Telephone No', value: v.telephoneNo },
            ],
            badge: v.code.slice(0, 10),
            disabled: v.status === 'INACTIVE',
          })) || []
        "
      />
      <div
        class="column"
        style="height: 100%"
        v-if="userData && userData.total === 0"
      >
        <div class="col-1 self-end">
          <div class="row">
            <tooltip-componet
              title="personnelTooltipTitle"
              caption="personnelTooltipCaption"
              imgSrc="personnel-table-"
            />
          </div>
        </div>

        <div class="col self-center" style="display: flex; align-items: center">
          <btn-add-componet
            :label="'personnelAdd'"
            :cyanOn="true"
            @trigger="
              () => {
                console.log('test');
              }
            "
          />
        </div>
      </div>
    </AppBox>
  </div>
</template>