feat: Personnel =>addrOption, roleOption, profileImg
This commit is contained in:
puriphatt
parent
f422d00d23
commit
f28b68bcee
1 changed files with 101 additions and 33 deletions
|
|
@ -5,7 +5,12 @@ import { storeToRefs } from 'pinia';
|
|||
import useUserStore from 'stores/user';
|
||||
import useBranchStore from 'src/stores/branch';
|
||||
|
||||
import { UserCreate, UserTypeStats, UserOption } from 'src/stores/user/types';
|
||||
import {
|
||||
UserCreate,
|
||||
UserTypeStats,
|
||||
UserOption,
|
||||
RoleData,
|
||||
} from 'src/stores/user/types';
|
||||
import { BranchUserStats } from 'src/stores/branch/types';
|
||||
|
||||
import PersonCard from 'components/home/PersonCard.vue';
|
||||
|
|
@ -53,6 +58,7 @@ const defaultFormData = {
|
|||
responsibleArea: '',
|
||||
};
|
||||
|
||||
const urlProfile = ref<string>();
|
||||
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<string>();
|
||||
const formDialogRef = ref();
|
||||
const userStats = ref<BranchUserStats[]>();
|
||||
const typeStats = ref<UserTypeStats>();
|
||||
const formData = ref<UserCreate>({
|
||||
provinceId: null,
|
||||
districtId: null,
|
||||
|
|
@ -93,9 +103,6 @@ const formData = ref<UserCreate>({
|
|||
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');
|
||||
|
|
@ -120,6 +127,7 @@ const genderOpts = [
|
|||
const userOption = ref<UserOption>({
|
||||
hqOpts: [],
|
||||
brOpts: [],
|
||||
roleOpts: [],
|
||||
});
|
||||
|
||||
const selectorList = [
|
||||
|
|
@ -139,6 +147,16 @@ async function createKeycloak() {
|
|||
return res.data;
|
||||
}
|
||||
|
||||
async function fetchRoleOption() {
|
||||
const res = await api.get<RoleData[]>('/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);
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
|
@ -377,6 +418,7 @@ watch(
|
|||
|
||||
<!-- form -->
|
||||
<FormDialog
|
||||
ref="formDialogRef"
|
||||
v-model:modal="modal"
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
|
|
@ -405,6 +447,7 @@ watch(
|
|||
v-model="hqId"
|
||||
:options="userOption.hqOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
|
||||
@update:model-value="(val: string) => selectHq(val)"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
|
|
@ -448,7 +491,7 @@ watch(
|
|||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="formData.userRole"
|
||||
:options="genderOpts"
|
||||
:options="userOption.roleOpts"
|
||||
/>
|
||||
<!-- :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']" -->
|
||||
<q-input
|
||||
|
|
@ -476,13 +519,31 @@ watch(
|
|||
<template #prepend>
|
||||
<div class="q-pl-md text-center">
|
||||
<div class="upload-img-preview">
|
||||
<q-img
|
||||
v-if="urlProfile"
|
||||
:src="urlProfile"
|
||||
style="object-fit: cover; width: 100%; height: 100%"
|
||||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
name="mdi-account full-height"
|
||||
size="3vw"
|
||||
style="color: var(--border-color)"
|
||||
/>
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="urlProfile"
|
||||
dense
|
||||
unelevated
|
||||
outlined
|
||||
padding="8px"
|
||||
icon="mdi-pencil-outline"
|
||||
class="edit-img-btn q-my-md full-width"
|
||||
label="แก้ไขโปรไฟล์"
|
||||
@click="inputFile.click()"
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
dense
|
||||
unelevated
|
||||
outlined
|
||||
|
|
@ -503,13 +564,6 @@ watch(
|
|||
/>
|
||||
<span>สถานะผู้ใช้งาน</span>
|
||||
</div>
|
||||
<q-file
|
||||
dense
|
||||
outlined
|
||||
ref="file"
|
||||
style="visibility: hidden"
|
||||
v-model="formData.profileImage"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -669,7 +723,7 @@ watch(
|
|||
<VueDatePicker
|
||||
utc
|
||||
autoApply
|
||||
v-model="formData.retireDate"
|
||||
v-model="formData.birthDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
class="col-3"
|
||||
|
|
@ -681,7 +735,7 @@ watch(
|
|||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="วันที่พ้นสภาพพนักงาน"
|
||||
label="วันเดือนปีเกิด"
|
||||
:model-value="dateFormat(formData.birthDate)"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -694,17 +748,24 @@ watch(
|
|||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="formData.retireDate"
|
||||
v-if="formData.birthDate"
|
||||
name="mdi-close"
|
||||
class="cursor-pointer"
|
||||
size="xs"
|
||||
@click="formData.retireDate = undefined"
|
||||
@click="formData.birthDate = undefined"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input dense outlined label="อายุ" class="col-3" v-model="age" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
label="อายุ"
|
||||
class="col-3"
|
||||
v-model="age"
|
||||
/>
|
||||
<q-select
|
||||
v-if="formData.userType === 'MESSENGER'"
|
||||
dense
|
||||
|
|
@ -819,4 +880,11 @@ watch(
|
|||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-img-btn {
|
||||
color: hsl(var(--info-bg));
|
||||
border: 1px solid hsl(var(--info-bg));
|
||||
background-color: transparent;
|
||||
border-radius: var(--radius-2);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue