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

<script setup lang="ts">
import { ref } from 'vue';

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

const selectorLabel = ref('');

const person = [
  {
    name: 'นายสันติ เมติกาญจ์',
    badge: 'CORP000001-01-240002',
    detail: [
      { label: 'สัญชาติ', value: 'ไทย' },
      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
      { label: 'โทรศัพท์', value: '0621249602' },
      { label: 'ตำแหน่ง', value: '32 ปี' },
    ],
    male: true,
    img: 'profile.png',
  },
  {
    name: 'นางสาวสุขใจ แสนดี',
    badge: 'CORP000001-01-240001',
    detail: [
      { label: 'สัญชาติ', value: 'ไทย' },
      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
      { label: 'โทรศัพท์', value: '0621249602' },
      { label: 'ตำแหน่ง', value: '32 ปี' },
    ],
    female: true,
  },
  {
    name: 'นายสันติ เมติกาญจ์',
    badge: 'CORP000001-01-240002',
    detail: [
      { label: 'สัญชาติ', value: 'ไทย' },
      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
      { label: 'โทรศัพท์', value: '0621249602' },
      { label: 'ตำแหน่ง', value: '32 ปี' },
    ],
    male: true,
    disabled: true,
    img: 'profile.png',
  },
  {
    name: 'นางสาวสุขใจ แสนดี',
    badge: 'CORP000001-01-240001',
    detail: [
      { label: 'สัญชาติ', value: 'ไทย' },
      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
      { label: 'โทรศัพท์', value: '0621249602' },
      { label: 'ตำแหน่ง', value: '32 ปี' },
    ],
    female: true,
    disabled: true,
  },
  {
    name: 'นางสาวสุขใจ แสนดี',
    badge: 'CORP000001-01-240001',
    detail: [
      { label: 'สัญชาติ', value: 'ไทย' },
      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
      { label: 'โทรศัพท์', value: '0621249602' },
      { label: 'ตำแหน่ง', value: '32 ปี' },
    ],
    female: true,
  },
] satisfies InstanceType<typeof PersonCard>['$props']['list'];

const branchStat = ref<
  {
    amount: string;
    label: string;
  }[]
>([
  {
    amount: '0',
    label: '-',
  },
  {
    amount: '0',
    label: '-',
  },
  {
    amount: '0',
    label: '-',
  },
  {
    amount: '0',
    label: '-',
  },
  {
    amount: '0',
    label: '-',
  },
]);

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" style="overflow-x: auto">
        <span class="text-weight-bold text-subtitle1">
          {{ $t('personnelStatTitle') + selectorLabel }}
        </span>
        <div class="row q-pt-lg">
          <stat-card-componet :branch="branchStat" class="no-wrap" />
        </div>
      </AppBox>
    </div>

    <!-- main -->
    <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
      <!-- <PersonCard :list="person" class="q-mb-md" /> -->

      <div class="column" style="height: 100%">
        <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'"
            @trigger="
              () => {
                console.log('test');
              }
            "
          />
        </div>
      </div>
    </AppBox>
  </div>
</template>