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

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { api } from 'src/boot/axios';
import { storeToRefs } from 'pinia';
import { dialog } from 'src/stores/utils';
import useUserStore from 'stores/user';
import useBranchStore from 'src/stores/branch';

import { UserCreate, UserTypeStats, UserOption } from 'src/stores/user/types';
import { BranchUserStats } from 'src/stores/branch/types';
// import { dateFormat } from 'src/utils/datetime';

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 AddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import FormDialog from 'src/components/FormDialog.vue';

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

const defaultFormData = {
  provinceId: null,
  districtId: null,
  subDistrictId: null,
  telephoneNo: '',
  email: '',
  zipCode: '',
  gender: '',
  addressEN: '',
  address: '',
  trainingPlace: null,
  importNationality: null,
  sourceNationality: null,
  licenseExpireDate: null,
  licenseIssueDate: null,
  licenseNo: null,
  discountCondition: '',
  retireDate: null,
  startDate: null,
  registrationNo: null,
  lastNameEN: '',
  lastName: '',
  firstNameEN: '',
  firstName: '',
  userRole: '',
  userType: '',
  keycloakId: '',
  profileImage: null,
  birthDate: null,
  responsibleArea: '',
};

const isEdit = ref(false);
const modal = ref(false);
const status = ref(false);
const userId = ref('');
const code = ref('');
const selectorLabel = ref('');
const hqId = ref('');
const brId = ref('');
const username = ref('');
const formData = ref<UserCreate>({
  provinceId: null,
  districtId: null,
  subDistrictId: null,
  telephoneNo: '',
  email: '',
  zipCode: '',
  gender: '',
  addressEN: '',
  address: '',
  trainingPlace: null,
  importNationality: null,
  sourceNationality: null,
  licenseExpireDate: null,
  licenseIssueDate: null,
  licenseNo: null,
  discountCondition: '',
  retireDate: null,
  startDate: null,
  registrationNo: null,
  lastNameEN: '',
  lastName: '',
  firstNameEN: '',
  firstName: '',
  userRole: '',
  userType: '',
  keycloakId: '',
  profileImage: null,
  birthDate: null,
  responsibleArea: '',
});
const userStats = ref<BranchUserStats[]>();
const typeStats = ref<UserTypeStats>();
const age = ref<number>();

const profileFile = ref<File | undefined>(undefined);
const inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.accept = 'image/*';

inputFile.addEventListener('change', (e) => {
  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
});

const userTypeOpts = [
  { label: 'พนักงาน', value: 'USER' },
  { label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' },
  { label: 'ตัวแทน', value: 'DELEGATE' },
  { label: 'เอเจนซี่', value: 'AGENCY' },
];
const genderOpts = [
  { label: 'ชาย', value: 'male' },
  { label: 'หญิง', value: 'female' },
];

const userOption = ref<UserOption>({
  hqOpts: [],
  brOpts: [],
});

const selectorList = [
  { label: 'personnelSelector1', count: 0 },
  { label: 'personnelSelector2', count: 0 },
  { label: 'personnelSelector3', count: 0 },
  { label: 'personnelSelector4', count: 0 },
];

async function createKeycloak() {
  const res = await api.post('/keycloak/user', {
    lastName: formData.value.lastNameEN,
    firstName: formData.value.firstNameEN,
    password: username.value,
    username: username.value,
  });
  return res.data;
}

async function fetchHqOption() {
  if (userOption.value.hqOpts.length === 0) {
    const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' });
    if (res) {
      res.result.map((item) => {
        userOption.value.hqOpts.push({
          label: item.code,
          value: item.id,
        });
      });
    }
  }
}

async function fetchBrOption(id: string) {
  const res = await branchStore.fetchById(id, {
    includeSubBranch: true,
  });
  if (res.branch) {
    res.branch.map((item) => {
      userOption.value.brOpts.push({
        label: item.code,
        value: item.id,
      });
    });
  }
}

async function openDialog(id?: string) {
  await fetchHqOption();
  modal.value = true;
  if (id && userData.value) {
    const foundUser = userData.value.result.find((user) => user.id === id);
    if (foundUser) {
      formData.value.provinceId = foundUser.provinceId;
      formData.value.districtId = foundUser.districtId;
      formData.value.subDistrictId = foundUser.subDistrictId;
      formData.value.telephoneNo = foundUser.telephoneNo;
      formData.value.email = foundUser.email;
      formData.value.zipCode = foundUser.zipCode;
      formData.value.gender = foundUser.gender;
      formData.value.addressEN = foundUser.addressEN;
      formData.value.address = foundUser.address;
      formData.value.trainingPlace = foundUser.trainingPlace;
      formData.value.importNationality = foundUser.importNationality;
      formData.value.sourceNationality = foundUser.sourceNationality;
      formData.value.licenseExpireDate = foundUser.licenseExpireDate
        ? new Date(foundUser.licenseExpireDate)
        : null;
      formData.value.licenseIssueDate = foundUser.licenseIssueDate
        ? new Date(foundUser.licenseIssueDate)
        : null;
      formData.value.licenseNo = foundUser.licenseNo;
      formData.value.discountCondition = foundUser.discountCondition;
      formData.value.retireDate = foundUser.retireDate
        ? new Date(foundUser.retireDate)
        : null;
      formData.value.startDate = foundUser.startDate
        ? new Date(foundUser.startDate)
        : null;
      formData.value.registrationNo = foundUser.registrationNo;
      formData.value.lastNameEN = foundUser.lastNameEN;
      formData.value.lastName = foundUser.lastName;
      formData.value.firstNameEN = foundUser.firstNameEN;
      formData.value.firstName = foundUser.firstName;
      formData.value.userRole = foundUser.userRole;
      formData.value.userType = foundUser.userType;
      formData.value.keycloakId = foundUser.keycloakId;
      formData.value.profileImage = new File([], foundUser.profileImageUrl);
      formData.value.birthDate = foundUser.birthDate
        ? new Date(foundUser.birthDate)
        : null;
      formData.value.responsibleArea = foundUser.responsibleArea;
      userId.value = foundUser.id;
      hqId.value = foundUser.branch[0].headOfficeId as string;
      brId.value = foundUser.branch[0].id;
      code.value = foundUser.code;
      isEdit.value = true;
      console.log(hqId.value);
    }
  }
}

function onClose() {
  modal.value = false;
  Object.assign(formData.value, defaultFormData);
  hqId.value = '';
  brId.value = '';
  username.value = '';
  userId.value = '';
  code.value = '';
  mapUserType(selectorLabel.value);
}

async function onSubmit() {
  console.log('enter');
  formData.value.profileImage = profileFile.value as File;
  if (isEdit.value === true && userId.value) {
    console.log('edit');
    await userStore.editById(userId.value, formData.value);
  } else {
    console.log('post');
    formData.value.keycloakId = await createKeycloak();
    if (formData.value.keycloakId !== '') {
      console.log('keycloakOk');
      const result = await userStore.create(formData.value);
      console.log('Result after create:', result);
      if (result) {
        console.log('hi3');
        console.log(result.id);
        // await branchStore.addUser(result.id, userId.value);
      }
    }
  }
  onClose();
  userStore.fetchList();
}

async function onDelete(id: string) {
  await userStore.deleteById(id);
  await userStore.fetchList();
}

function mapUserType(label: string) {
  if (label === 'personnelSelector1') {
    formData.value.userType = 'USER';
  } else if (label === 'personnelSelector2') {
    formData.value.userType = 'MESSENGER';
  } else if (label === 'personnelSelector3') {
    formData.value.userType = 'DELEGATE';
  } else if (label === 'personnelSelector4') {
    formData.value.userType = 'AGENCY';
  }
}

onMounted(async () => {
  await userStore.fetchList({ includeBranch: true });
  typeStats.value = await userStore.typeStats();
  const res = await branchStore.userStats(formData.value.userType);
  if (res) {
    userStats.value = res;
  }
});

watch(
  () => selectorLabel.value,
  async (label) => {
    mapUserType(label);
    const res = await branchStore.userStats(label);
    if (res) {
      userStats.value = res;
    }
  },
);

watch(
  () => hqId.value,
  async (id) => {
    fetchBrOption(id);
    brId.value = '';
    userOption.value.brOpts = [];
  },
);
</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') }}
            {{ selectorLabel === '' ? '' : $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
            v-if="userStats"
            :branch="
              userStats.map((v) => ({
                amount: v.count,
                label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
              }))
            "
            class="no-wrap"
          />
        </div>
      </AppBox>
    </div>

    <!-- main -->
    <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
      <PersonCard
        :list="
          userData?.result.map((v) => ({
            id: v.id,
            img: `${v.profileImageUrl}`,
            name: `${v.firstName} ${v.lastName}`,
            male: v.gender === 'male',
            female: v.gender === 'female',
            detail: [
              { label: 'ตำแหน่ง', value: v.userType },
              { label: 'โทรศัพท์', value: v.telephoneNo },
              { label: 'อีเมล', value: v.email },
            ],
            badge: v.code,
            disabled: v.status === 'INACTIVE',
          })) || []
        "
        @updateCard="openDialog"
        @deleteCard="onDelete"
      />
      <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">
          <AddButton
            :label="'personnelAdd'"
            :cyanOn="true"
            @trigger="openDialog"
          />
        </div>
      </div>
    </AppBox>
  </div>

  <!-- form -->
  <FormDialog
    v-model:modal="modal"
    v-model:address="formData.address"
    v-model:addressEN="formData.addressEN"
    v-model:provinceId="formData.provinceId as string"
    v-model:districtId="formData.districtId as string"
    v-model:subDistrictId="formData.subDistrictId as string"
    v-model:zipCode="formData.zipCode"
    title="เพิ่มบุคลากร"
    addressTitle="ที่อยู่พนักงาน"
    addressENTitle="ที่อยู่พนักงาน ENG"
    :submit="() => onSubmit()"
    :close="() => onClose()"
  >
    <template #top>
      <q-select
        dense
        outlined
        emit-value
        map-options
        options-dense
        class="col-6"
        bg-color="white"
        option-label="label"
        option-value="value"
        label="รหัสสำนักงานใหญ่"
        v-model="hqId"
        :options="userOption.hqOpts"
        :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
      />
      <q-select
        dense
        outlined
        emit-value
        map-options
        options-dense
        class="col-6"
        label="รหัสสาขา"
        bg-color="white"
        option-label="label"
        option-value="value"
        v-model="brId"
        :options="userOption.brOpts"
        :rules="[(val: string) => !!val || 'กรุณาเลือกสาขา']"
      />
      <q-select
        dense
        outlined
        emit-value
        map-options
        options-dense
        class="col-3"
        bg-color="white"
        option-value="value"
        option-label="label"
        label="ประเภทผู้ใช้งาน"
        v-model="formData.userType"
        :options="userTypeOpts"
        :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
      />
      <q-select
        dense
        outlined
        emit-value
        map-options
        options-dense
        class="col-3"
        bg-color="white"
        label="สิทธิ์ผู้ใช้งาน"
        option-label="label"
        option-value="value"
        v-model="formData.userRole"
        :options="genderOpts"
      />
      <!--         :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']" -->
      <q-input
        dense
        outlined
        class="col-3"
        bg-color="white"
        label="ชื่อผู้ใช้งาน (Username)"
        v-model="username"
        :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
      />
      <q-input
        dense
        outlined
        readonly
        class="col-3"
        bg-color="white"
        label="รหัสพนักงาน"
        v-model="code"
      />
      <!--         :rules="[(val: string) => !!val || 'กรุณากรอกรหัสพนักงาน']"
 -->
    </template>

    <template #prepend>
      <div class="q-pl-md text-center">
        <div class="upload-img-preview">
          <q-icon
            name="mdi-account full-height"
            size="3vw"
            style="color: var(--border-color)"
          />
        </div>
        <q-btn
          dense
          unelevated
          outlined
          padding="8px"
          class="upload-img-btn q-my-md full-width"
          label="อัปโหลดรูปภาพ"
          :class="{ dark: $q.dark.isActive }"
          @click="inputFile.click()"
        />
        <div class="text-left">
          <q-toggle
            dense
            size="md"
            color="primary"
            v-model="status"
            padding="none"
            class="q-pr-md"
          />
          <span>สถานะผู้ใช้งาน</span>
        </div>
        <q-file
          dense
          outlined
          ref="file"
          style="visibility: hidden"
          v-model="formData.profileImage"
        />
      </div>
    </template>

    <template #midTop>
      <q-input
        dense
        outlined
        class="col-3"
        label="ชื่อ ภาษาไทย"
        v-model="formData.firstName"
        :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
      />
      <q-input
        dense
        outlined
        class="col-3"
        label="นามสกุล ภาษาไทย"
        v-model="formData.lastName"
        :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
      />
      <q-input
        dense
        outlined
        class="col-3"
        label="ชื่อ ภาษาอังกฤษ"
        v-model="formData.firstNameEN"
        :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
      />
      <q-input
        dense
        outlined
        class="col-3"
        label="นามสกุล ภาษาอังกฤษ"
        v-model="formData.lastNameEN"
        :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
      />
    </template>

    <template #midBottom>
      <q-input
        dense
        outlined
        class="col-3"
        label="เบอร์โทร"
        v-model="formData.telephoneNo"
      />
      <q-select
        dense
        outlined
        emit-value
        map-options
        label="เพศ"
        class="col-3"
        bg-color="white"
        option-label="label"
        option-value="value"
        v-model="formData.gender"
        :options="genderOpts"
      />
      <q-input
        dense
        outlined
        label="อีเมล"
        class="col-6"
        v-model="formData.email"
      />
      <div
        v-if="formData.userType === 'USER' || formData.userType === 'MESSENGER'"
        class="row col-12 q-col-gutter-md"
        style="margin-left: 0px; padding-left: 0px"
      >
        <q-input
          dense
          outlined
          label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
          class="col-12"
          v-model="formData.registrationNo"
        />
        <VueDatePicker
          utc
          autoApply
          v-model="formData.startDate"
          :locale="'th'"
          :enableTimePicker="false"
          class="col-6"
        >
          <template #year="{ value }">
            {{ value + 543 }}
          </template>
          <template #trigger>
            <q-input
              dense
              outlined
              label="วันที่เริ่มงาน"
              v-model="formData.startDate"
            >
              <template v-slot:prepend>
                <q-icon
                  size="xs"
                  name="mdi-calendar-blank-outline"
                  class="cursor-pointer"
                  color="primary"
                />
              </template>
              <template v-slot:append>
                <q-icon
                  v-if="formData.startDate"
                  name="mdi-close"
                  class="cursor-pointer"
                  size="xs"
                  @click="formData.startDate = undefined"
                />
              </template>
            </q-input>
          </template>
        </VueDatePicker>

        <VueDatePicker
          utc
          autoApply
          v-model="formData.retireDate"
          :locale="'th'"
          :enableTimePicker="false"
          class="col-6"
        >
          <template #year="{ value }">
            {{ value + 543 }}
          </template>
          <template #trigger>
            <q-input
              dense
              outlined
              label="วันที่พ้นสภาพพนักงาน"
              v-model="formData.retireDate"
            >
              <template v-slot:prepend>
                <q-icon
                  size="xs"
                  name="mdi-calendar-blank-outline"
                  class="cursor-pointer"
                  color="primary"
                />
              </template>
              <template v-slot:append>
                <q-icon
                  v-if="formData.retireDate"
                  name="mdi-close"
                  class="cursor-pointer"
                  size="xs"
                  @click="formData.retireDate = undefined"
                />
              </template>
            </q-input>
          </template>
        </VueDatePicker>

        <VueDatePicker
          utc
          autoApply
          v-model="formData.retireDate"
          :locale="'th'"
          :enableTimePicker="false"
          class="col-3"
        >
          <template #year="{ value }">
            {{ value + 543 }}
          </template>
          <template #trigger>
            <q-input
              dense
              outlined
              label="วันที่พ้นสภาพพนักงาน"
              v-model="formData.birthDate"
            >
              <template v-slot:prepend>
                <q-icon
                  size="xs"
                  name="mdi-calendar-blank-outline"
                  class="cursor-pointer"
                  color="positive"
                />
              </template>
              <template v-slot:append>
                <q-icon
                  v-if="formData.retireDate"
                  name="mdi-close"
                  class="cursor-pointer"
                  size="xs"
                  @click="formData.retireDate = undefined"
                />
              </template>
            </q-input>
          </template>
        </VueDatePicker>
        <q-input dense outlined label="อายุ" class="col-3" v-model="age" />
        <q-select
          v-if="formData.userType === 'MESSENGER'"
          dense
          outlined
          emit-value
          map-options
          label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
          class="col-12"
          bg-color="white"
          option-label="label"
          option-value="value"
          v-model="formData.responsibleArea"
          :options="genderOpts"
        />
      </div>
      <div
        v-if="formData.userType === 'DELEGATE'"
        class="row col-12"
        style="row-gap: 16px"
      >
        <q-input
          dense
          outlined
          label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
          class="col-12"
          v-model="formData.discountCondition"
          type="textarea"
        />
      </div>
      <div
        v-if="formData.userType === 'AGENCY'"
        class="row col-12 q-col-gutter-md"
        style="margin-left: 0px; padding-left: 0px"
      >
        <q-select
          dense
          outlined
          emit-value
          map-options
          label="สัญชาติต้นทาง"
          class="col-3"
          bg-color="white"
          option-label="label"
          option-value="value"
          v-model="formData.sourceNationality"
          :options="genderOpts"
        />
        <q-select
          dense
          outlined
          emit-value
          map-options
          label="นำเข้าสัญชาติ"
          class="col-3"
          bg-color="white"
          option-label="label"
          option-value="value"
          v-model="formData.importNationality"
          :options="genderOpts"
        />
        <q-input
          dense
          outlined
          label="สถานที่อบรม"
          class="col-6"
          v-model="formData.trainingPlace"
        />
        <q-input
          dense
          outlined
          label="ด่าน"
          class="col-6"
          v-model="formData.trainingPlace"
        />
        <q-input
          dense
          outlined
          label="ด่าน ENG"
          class="col-6"
          v-model="formData.trainingPlace"
        />
        <q-input
          dense
          outlined
          label="แบบเอกสารประจำตัว"
          class="col-12"
          v-model="formData.discountCondition"
          type="textarea"
        />
      </div>
    </template>
  </FormDialog>
</template>
<style>
.bg-white {
  background-color: var(--surface-1) !important;
}

.upload-img-preview {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2);
  height: 12vw;
}

.upload-img-btn {
  color: hsl(var(--info-bg));
  border: 1px solid hsl(var(--info-bg));
  background-color: hsla(var(--info-bg) / 0.1);
  border-radius: var(--radius-2);

  &.dark {
    background-color: transparent;
  }
}
</style>