diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue index 928934c6..ca4996e0 100644 --- a/src/components/FormDialog.vue +++ b/src/components/FormDialog.vue @@ -13,6 +13,11 @@ defineProps<{ close?: (...args: unknown[]) => void; }>(); +defineExpose({ + fetchDistrict, + fetchSubDistrict, +}); + const adrressStore = useAddressStore(); const modal = defineModel('modal', { default: false }); const address = defineModel('address', { default: '' }); @@ -48,39 +53,38 @@ async function fetchSubDistrict(id: string | undefined) { if (id) { const result = await adrressStore.fetchSubDistrictByProvinceId(id); if (result) { - console.log(addrOptions.value.subDistrictOps); addrOptions.value.subDistrictOps = result; } } } -onMounted(async () => { - await fetchProvince(); -}); - -watch(provinceId, async (v) => { - await fetchDistrict(v); -}); - -watch(districtId, async (v) => { +async function selectProvince(id: string) { + if (!id) return; + districtId.value = undefined; subDistrictId.value = undefined; - await fetchSubDistrict(v); -}); + addrOptions.value.districtOps = []; + addrOptions.value.subDistrictOps = []; + zipCode.value = ''; + await fetchDistrict(id); +} -watch(subDistrictId, async (v) => { +async function selectDistrict(id: string) { + if (!id) return; + subDistrictId.value = undefined; + zipCode.value = ''; + await fetchSubDistrict(id); +} + +async function selectSubDistrict(id: string) { + if (!id) return; zipCode.value = addrOptions.value.subDistrictOps - ?.filter((x) => x.id === v) + ?.filter((x) => x.id === id) .map((x) => x.zipCode)[0] ?? ''; -}); +} -watch(provinceId, (v) => { - if (v) { - addrOptions.value.districtOps = []; - addrOptions.value.subDistrictOps = []; - districtId.value = undefined; - subDistrictId.value = undefined; - } +onMounted(async () => { + await fetchProvince(); }); diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue index 67ec0c7c..1be919bd 100644 --- a/src/components/StatCardComponent.vue +++ b/src/components/StatCardComponent.vue @@ -38,7 +38,7 @@ const color = ['pink', 'purple'];
{{ v.amount }}
-
{{ $t(v.label) }}
+
{{ v.label }}
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue index 8bb8258e..c2891c7b 100644 --- a/src/components/home/PersonCard.vue +++ b/src/components/home/PersonCard.vue @@ -119,7 +119,10 @@ const status = ref(false); class="avatar" style="border: 2px solid var(--border-color)" > - +
(); const isEdit = ref(false); const modal = ref(false); const status = ref(false); @@ -62,6 +68,10 @@ const selectorLabel = ref(''); const hqId = ref(''); const brId = ref(''); const username = ref(''); +const age = ref(); +const formDialogRef = ref(); +const userStats = ref(); +const typeStats = ref(); const formData = ref({ provinceId: null, districtId: null, @@ -93,9 +103,6 @@ const formData = ref({ birthDate: null, responsibleArea: '', }); -const userStats = ref(); -const typeStats = ref(); -const age = ref(); const profileFile = ref(undefined); const inputFile = document.createElement('input'); @@ -120,6 +127,7 @@ const genderOpts = [ const userOption = ref({ hqOpts: [], brOpts: [], + roleOpts: [], }); const selectorList = [ @@ -139,6 +147,16 @@ async function createKeycloak() { return res.data; } +async function fetchRoleOption() { + const res = await api.get('/keycloak/role'); + res.data.map((item) => { + userOption.value.roleOpts.push({ + label: item.name, + value: item.id, + }); + }); +} + async function fetchHqOption() { if (userOption.value.hqOpts.length === 0) { const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' }); @@ -169,6 +187,7 @@ async function fetchBrOption(id: string) { async function openDialog(id?: string) { await fetchHqOption(); + await fetchRoleOption(); modal.value = true; if (id && userData.value) { const foundUser = userData.value.result.find((user) => user.id === id); @@ -196,7 +215,11 @@ async function openDialog(id?: string) { hqId.value = foundUser.branch[0].headOfficeId as string; brId.value = foundUser.branch[0].id; code.value = foundUser.code; + urlProfile.value = foundUser.profileImageUrl; isEdit.value = true; + await fetchBrOption(hqId.value); + await formDialogRef.value.fetchSubDistrict(formData.value.districtId); + await formDialogRef.value.fetchDistrict(formData.value.provinceId); } } } @@ -204,31 +227,28 @@ async function openDialog(id?: string) { function onClose() { modal.value = false; Object.assign(formData.value, defaultFormData); + mapUserType(selectorLabel.value); + isEdit.value = false; hqId.value = ''; brId.value = ''; username.value = ''; userId.value = ''; code.value = ''; - mapUserType(selectorLabel.value); + urlProfile.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); + const formDataEdit = { ...formData.value }; + delete formDataEdit.keycloakId; + await userStore.editById(userId.value, formDataEdit); } else { - console.log('post'); formData.value.keycloakId = await createKeycloak(); - if (formData.value.keycloakId !== '') { - console.log('keycloakOk'); + if (formData.value.keycloakId) { 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); + await branchStore.addUser(brId.value, result.id); } } } @@ -253,6 +273,27 @@ function mapUserType(label: string) { } } +function calculateAge(birthDate: Date | null) { + if (!birthDate) return null; + const birthDateTimeStamp = new Date(birthDate).getTime(); + const now = new Date(); + const diff = now.getTime() - birthDateTimeStamp; + + const ageDate = new Date(diff); + const years = ageDate.getUTCFullYear() - 1970; + const months = ageDate.getUTCMonth(); + const days = ageDate.getUTCDate() - 1; + + age.value = `${years} ปี ${months} เดือน ${days} วัน`; +} + +async function selectHq(id: string) { + if (!id) return; + brId.value = ''; + userOption.value.brOpts = []; + await fetchBrOption(id); +} + onMounted(async () => { await userStore.fetchList({ includeBranch: true }); typeStats.value = await userStore.typeStats(); @@ -274,11 +315,11 @@ watch( ); watch( - () => hqId.value, - async (id) => { - fetchBrOption(id); - brId.value = ''; - userOption.value.brOpts = []; + () => formData.value.birthDate, + (birthDate) => { + if (birthDate) { + calculateAge(birthDate); + } }, ); @@ -377,6 +418,7 @@ watch(
+
+ สถานะผู้ใช้งาน
-
@@ -669,7 +723,7 @@ watch( - + diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts index c17d8d1a..d383f194 100644 --- a/src/stores/user/types.ts +++ b/src/stores/user/types.ts @@ -71,7 +71,7 @@ export type UserCreate = { firstName: string; userRole: string; userType: string; - keycloakId: string; + keycloakId?: string; profileImage?: File | null; // required but not strict birthDate?: Date | null; responsibleArea: string; @@ -100,9 +100,15 @@ export type UserTypeStats = { export type UserOption = { hqOpts: Option[]; brOpts: Option[]; + roleOpts: Option[]; }; export type Option = { label: string; value: string; }; + +export type RoleData = { + id: string; + name: string; +}