From 38089a5312ce9ce955a99c153f4a0c8a2bb9f16f Mon Sep 17 00:00:00 2001 From: puriphatt Date: Wed, 10 Apr 2024 16:59:13 +0700 Subject: [PATCH 1/2] feat: Personnel update emit --- src/components/home/PersonCard.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue index e5d576db..8bb8258e 100644 --- a/src/components/home/PersonCard.vue +++ b/src/components/home/PersonCard.vue @@ -60,7 +60,11 @@ const status = ref(false); - + Date: Wed, 10 Apr 2024 17:00:28 +0700 Subject: [PATCH 2/2] feat: Personnel => Option (type, store) --- .../02_personnel-management/MainPage.vue | 195 ++++++++++++++---- src/stores/branch/types.ts | 1 + src/stores/user/index.ts | 2 + src/stores/user/types.ts | 16 +- 4 files changed, 169 insertions(+), 45 deletions(-) diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue index b2ddaa53..03e786af 100644 --- a/src/pages/02_personnel-management/MainPage.vue +++ b/src/pages/02_personnel-management/MainPage.vue @@ -2,10 +2,11 @@ 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 } from 'src/stores/user/types'; +import { UserCreate, UserTypeStats, UserOption } from 'src/stores/user/types'; import { BranchUserStats } from 'src/stores/branch/types'; // import { dateFormat } from 'src/utils/datetime'; @@ -16,10 +17,9 @@ 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'; -import GlobalDialog from 'components/GlobalDialog.vue'; -const branchStore = useBranchStore(); const userStore = useUserStore(); +const branchStore = useBranchStore(); const { data: userData } = storeToRefs(userStore); const defaultFormData = { @@ -53,26 +53,51 @@ const defaultFormData = { birthDate: null, responsibleArea: '', }; -const userId = ref(''); + +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(structuredClone(defaultFormData)); +const formData = ref({ + 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(); const typeStats = ref(); const age = ref(); -const confirmData = ref({ - modal: false, - title: '', - message: '', - icon: '', - action: () => {}, -}); - const userTypeOpts = [ { label: 'พนักงาน', value: 'USER' }, { label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' }, @@ -83,10 +108,12 @@ const genderOpts = [ { label: 'ชาย', value: 'male' }, { label: 'หญิง', value: 'female' }, ]; -const hqOpts = ref([ - { label: '0000000001', value: '1' }, - { label: '0000000002', value: '2' }, -]); + +const userOption = ref({ + hqOpts: [], + brOpts: [], +}); + const brOpts = ref([ { label: '0000000001-1', value: '1' }, { label: '0000000001-2', value: '2' }, @@ -109,13 +136,91 @@ async function createKeycloak() { return res.data; } -// function selectFile() { -// const fileInput = this.$refs.file; -// fileInput.pickFiles(); -// } +function selectFile() { + // const fileInput = this.$refs.file; + // fileInput.pickFiles(); +} -function openDialog() { +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) { + 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].id; + brId.value = foundUser.branch; + code.value = foundUser.code; + isEdit.value = true; + } + } } function onClose() { @@ -125,17 +230,14 @@ function onClose() { brId.value = ''; username.value = ''; userId.value = ''; + code.value = ''; mapUserType(selectorLabel.value); } -function submitConfirm() { - confirmData.value.modal = true; -} - -async function onSubmit(id?: string) { +async function onSubmit() { try { - if (id) { - await userStore.editById(id, formData.value); + if (isEdit.value === true && userId.value) { + await userStore.editById(userId.value, formData.value); } else { formData.value.keycloakId = await createKeycloak(); await userStore.create(formData.value); @@ -164,7 +266,7 @@ function mapUserType(label: string) { } onMounted(async () => { - await userStore.fetchList(); + await userStore.fetchList({ includeBranch: true }); typeStats.value = await userStore.typeStats(); if ((await branchStore.userStats(formData.value.userType)) !== false) { userStats.value = await branchStore.userStats(formData.value.userType); @@ -180,6 +282,15 @@ watch( } }, ); + +watch( + () => hqId.value, + async (id) => { + fetchBrOption(id); + brId.value = ''; + userOption.value.brOpts = []; + }, +);