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 BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import FormDialog from 'src/components/FormDialog.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 modal = ref(false);

const hqId = ref('');
const branchId = ref('');

const genderOptions = ref([
  { label: 'ชาย', value: '1' },
  { label: 'หญิง', value: '2' },
]);

const hqOptions = ref([
  { label: '0000000001', value: '1' },
  { label: '0000000002', value: '2' },
]);
const branchOptions = ref([
  { label: '0000000001-1', value: '1' },
  { label: '0000000001-2', value: '2' },
]);

const formData = ref({
  hqId: '',
  branchId: '',
  tel: '',
  gender: '',
  email: '',
  addressL: {
    address: '',
    province: '',
    district: '',
    subDistrict: '',
    zip: '',
  },
  addressEng: {
    address: '',
    province: '',
    district: '',
    subDistrict: '',
    zip: '',
  },
});

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

function openDialog() {
  modal.value = true;
}
</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">
        <div class="row q-pb-lg justify-between items-center">
          <div class="text-weight-bold text-subtitle1">
            {{ $t('personnelStatTitle') + $t(selectorLabel) }}
          </div>
          <q-btn
            dense
            unelevated
            label="+ เพิ่มบุคลากร"
            padding="4px 16px"
            @click="openDialog"
            style="background-color: var(--cyan-6); color: white"
          />
        </div>
        <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">
            <TooltipComponent
              title="personnelTooltipTitle"
              caption="personnelTooltipCaption"
              imgSrc="personnel-table-"
            />
          </div>
        </div>
        <div class="col self-center" style="display: flex; align-items: center">
          <BtnAddComponent
            :label="'personnelAdd'"
            :cyanOn="true"
            @trigger="openDialog"
          />
        </div>
      </div>
    </AppBox>
  </div>

  <FormDialog
    v-model:modal="modal"
    v-model:addressL="formData.addressL"
    v-model:addressEng="formData.addressEng"
    title="เพิ่มบุคลากร"
    addressLocaleTitle="ที่อยู่พนักงาน"
    addressEngTitle="ที่อยู่พนักงาน ENG"
  >
    <template #top>
      <q-select
        dense
        outlined
        emit-value
        map-options
        v-model="hqId"
        class="col-6"
        option-value="value"
        option-label="label"
        label="รหัสสำนักงานใหญ่"
        :options="hqOptions"
        bg-color="white"
      />
      <q-select
        dense
        outlined
        emit-value
        map-options
        v-model="branchId"
        class="col-6"
        option-value="value"
        option-label="label"
        label="รหัสสาขา"
        :options="branchOptions"
        bg-color="white"
      />
    </template>

    <template #prepend>
      <div>asd</div>
    </template>

    <template #midTop>
      <!-- <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" /> -->
    </template>

    <template #midBottom>
      <q-input
        dense
        outlined
        label="เบอร์โทร"
        class="col-3"
        v-model="formData.tel"
      />
      <q-select
        dense
        outlined
        emit-value
        map-options
        v-model="formData.gender"
        class="col-3"
        option-value="value"
        option-label="label"
        label="เพศ"
        :options="genderOptions"
        bg-color="white"
      />
      <q-input
        dense
        outlined
        label="อีเมล"
        class="col-6"
        v-model="formData.email"
      />
    </template>

    <!-- <template #append>
      <div style="background-color: blue">asd</div>
    </template> -->
  </FormDialog>
</template>
<style>
.bg-white {
  background-color: var(--surface-1) !important;
}
</style>