feat: Personnel info
This commit is contained in:
puriphatt
parent
0524b6dda1
commit
05660f5b86
4 changed files with 458 additions and 96 deletions
|
|
@ -6,8 +6,9 @@ import useUserStore from 'stores/user';
|
|||
import useBranchStore from 'src/stores/branch';
|
||||
import { dialog } from 'src/stores/utils';
|
||||
|
||||
import { UserCreate, UserTypeStats } from 'src/stores/user/types';
|
||||
import { User, UserCreate, UserTypeStats } from 'src/stores/user/types';
|
||||
import { BranchUserStats } from 'src/stores/branch/types';
|
||||
import useAddressStore from 'src/stores/address';
|
||||
|
||||
import PersonCard from 'components/home/PersonCard.vue';
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
|
|
@ -19,11 +20,16 @@ import FormDialog from 'src/components/FormDialog.vue';
|
|||
import FormInformation from 'src/components/02_personnel-management/FormInformation.vue';
|
||||
import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
|
||||
import FormByType from 'src/components/02_personnel-management/FormByType.vue';
|
||||
import DrawerInfo from 'src/components/DrawerInfo.vue';
|
||||
import infoForm from 'src/components/02_personnel-management/infoForm.vue';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { locale } = useI18n();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const branchStore = useBranchStore();
|
||||
const adrressStore = useAddressStore();
|
||||
const { data: userData } = storeToRefs(userStore);
|
||||
|
||||
const defaultFormData = {
|
||||
|
|
@ -56,20 +62,24 @@ const defaultFormData = {
|
|||
birthDate: null,
|
||||
responsibleArea: null,
|
||||
username: '',
|
||||
status: 'CREATED',
|
||||
};
|
||||
|
||||
const currentUser = ref<User>();
|
||||
const infoPersonCard = ref();
|
||||
const infoDrawer = ref(false);
|
||||
const profileSubmit = ref(false);
|
||||
const urlProfile = ref<string>();
|
||||
const isEdit = ref(false);
|
||||
const modal = ref(false);
|
||||
const status = ref(false);
|
||||
const statusToggle = ref(true);
|
||||
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
||||
const inputSearch = ref('');
|
||||
const userId = ref('');
|
||||
const selectorLabel = ref('');
|
||||
const hqId = ref('');
|
||||
const brId = ref('');
|
||||
const code = ref('');
|
||||
const userId = ref<string>();
|
||||
const selectorLabel = ref<string>('');
|
||||
const hqId = ref<string>();
|
||||
const brId = ref<string>();
|
||||
const code = ref<string>();
|
||||
const formDialogRef = ref();
|
||||
const userStats = ref<BranchUserStats[]>();
|
||||
const typeStats = ref<UserTypeStats>();
|
||||
|
|
@ -89,7 +99,7 @@ const formData = ref<UserCreate>({
|
|||
licenseExpireDate: null,
|
||||
licenseIssueDate: null,
|
||||
licenseNo: null,
|
||||
discountCondition: '',
|
||||
discountCondition: null,
|
||||
retireDate: null,
|
||||
startDate: null,
|
||||
registrationNo: null,
|
||||
|
|
@ -105,6 +115,7 @@ const formData = ref<UserCreate>({
|
|||
checkpoint: null,
|
||||
checkpointEN: null,
|
||||
username: '',
|
||||
status: 'CREATED',
|
||||
});
|
||||
|
||||
const profileFile = ref<File | undefined>(undefined);
|
||||
|
|
@ -135,76 +146,49 @@ const selectorList = computed(() => [
|
|||
{ label: 'AGENCY', count: typeStats.value?.AGENCY || 0 },
|
||||
]);
|
||||
|
||||
async function openDialog(idEdit?: string) {
|
||||
modal.value = true;
|
||||
async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
|
||||
if (action === 'FORM') {
|
||||
modal.value = true;
|
||||
} else if (action === 'INFO') {
|
||||
infoDrawer.value = true;
|
||||
if (!userData.value) return;
|
||||
const user = userData.value.result.find((x) => x.id === idEdit);
|
||||
infoPersonCard.value = user
|
||||
? [
|
||||
{
|
||||
id: user.id,
|
||||
img: `${user.profileImageUrl}`,
|
||||
name:
|
||||
locale.value === 'en-US'
|
||||
? `${user.firstNameEN} ${user.lastNameEN}`
|
||||
: `${user.firstName} ${user.lastName}`,
|
||||
male: user.gender === 'male',
|
||||
female: user.gender === 'female',
|
||||
badge: user.code,
|
||||
disabled: user.status === 'INACTIVE',
|
||||
},
|
||||
]
|
||||
: [];
|
||||
}
|
||||
|
||||
statusToggle.value = true;
|
||||
profileSubmit.value = false;
|
||||
userStore.userOption.brOpts = [];
|
||||
|
||||
userStore.userOption.hqOpts.length === 0
|
||||
? await userStore.fetchHqOption()
|
||||
: '';
|
||||
userStore.userOption.roleOpts.length === 0
|
||||
? await userStore.fetchRoleOption()
|
||||
: '';
|
||||
if (userStore.userOption.hqOpts.length === 0) {
|
||||
await userStore.fetchHqOption();
|
||||
}
|
||||
|
||||
if (userStore.userOption.hqOpts.length === 1) {
|
||||
hqId.value = userStore.userOption.hqOpts[0].value;
|
||||
}
|
||||
|
||||
if (userStore.userOption.roleOpts.length === 0) {
|
||||
await userStore.fetchRoleOption();
|
||||
}
|
||||
|
||||
if (idEdit && userData.value) {
|
||||
const foundUser = userData.value.result.find((user) => user.id === idEdit);
|
||||
|
||||
if (foundUser) {
|
||||
formData.value = {
|
||||
provinceId: foundUser.provinceId,
|
||||
districtId: foundUser.districtId,
|
||||
subDistrictId: foundUser.subDistrictId,
|
||||
telephoneNo: foundUser.telephoneNo,
|
||||
email: foundUser.email,
|
||||
zipCode: foundUser.zipCode,
|
||||
gender: foundUser.gender,
|
||||
addressEN: foundUser.addressEN,
|
||||
address: foundUser.address,
|
||||
trainingPlace: foundUser.trainingPlace,
|
||||
importNationality: foundUser.importNationality,
|
||||
sourceNationality: foundUser.sourceNationality,
|
||||
licenseNo: foundUser.licenseNo,
|
||||
discountCondition: foundUser.discountCondition,
|
||||
registrationNo: foundUser.registrationNo,
|
||||
lastNameEN: foundUser.lastNameEN,
|
||||
lastName: foundUser.lastName,
|
||||
firstNameEN: foundUser.firstNameEN,
|
||||
firstName: foundUser.firstName,
|
||||
userRole: foundUser.userRole,
|
||||
userType: foundUser.userType,
|
||||
username: foundUser.username,
|
||||
responsibleArea: foundUser.responsibleArea,
|
||||
licenseExpireDate:
|
||||
(foundUser.licenseExpireDate &&
|
||||
new Date(foundUser.licenseExpireDate)) ||
|
||||
null,
|
||||
licenseIssueDate:
|
||||
(foundUser.licenseIssueDate &&
|
||||
new Date(foundUser.licenseIssueDate)) ||
|
||||
null,
|
||||
retireDate:
|
||||
(foundUser.retireDate && new Date(foundUser.retireDate)) || null,
|
||||
startDate:
|
||||
(foundUser.startDate && new Date(foundUser.startDate)) || null,
|
||||
birthDate:
|
||||
(foundUser.birthDate && new Date(foundUser.birthDate)) || null,
|
||||
};
|
||||
|
||||
foundUser.status === 'ACTIVE'
|
||||
? (status.value = true)
|
||||
: (status.value = false);
|
||||
userId.value = foundUser.id;
|
||||
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;
|
||||
profileSubmit.value = true;
|
||||
await userStore.fetchBrOption(hqId.value);
|
||||
// await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
|
||||
// await formDialogRef.value.fetchDistrict(formData.value.provinceId);
|
||||
}
|
||||
assignFormData(idEdit);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,8 +200,9 @@ function onClose() {
|
|||
urlProfile.value = '';
|
||||
profileSubmit.value = false;
|
||||
modal.value = false;
|
||||
status.value = false;
|
||||
infoDrawer.value = false;
|
||||
isEdit.value = false;
|
||||
statusToggle.value = true;
|
||||
Object.assign(formData.value, defaultFormData);
|
||||
mapUserType(selectorLabel.value);
|
||||
}
|
||||
|
|
@ -233,16 +218,33 @@ async function onSubmit() {
|
|||
persistent: true,
|
||||
message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
|
||||
action: async () => {
|
||||
if (!userId.value) return;
|
||||
|
||||
const formDataEdit = {
|
||||
...formData.value,
|
||||
status:
|
||||
formData.value.status !== 'CREATED'
|
||||
? formData.value.status
|
||||
: undefined,
|
||||
};
|
||||
status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
|
||||
} as const;
|
||||
await userStore.editById(userId.value, formDataEdit);
|
||||
onClose();
|
||||
userStore.fetchList({ includeBranch: true });
|
||||
|
||||
if (
|
||||
hqId.value &&
|
||||
currentUser.value?.branch[0] &&
|
||||
hqId.value !== currentUser.value.branch[0].id &&
|
||||
brId.value !== currentUser.value.branch[0].id
|
||||
) {
|
||||
userStore.removeBranch(userId.value, currentUser.value.branch[0].id);
|
||||
await branchStore.addUser(
|
||||
!!brId.value ? brId.value : hqId.value,
|
||||
userId.value,
|
||||
);
|
||||
}
|
||||
|
||||
userStore.fetchList({
|
||||
includeBranch: true,
|
||||
userType: selectorLabel.value ?? undefined,
|
||||
});
|
||||
typeStats.value = await userStore.typeStats();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
|
|
@ -254,6 +256,12 @@ async function onSubmit() {
|
|||
persistent: true,
|
||||
message: 'คุณต้องการเพิ่มบุคลากร ใช่หรือไม่',
|
||||
action: async () => {
|
||||
if (!hqId.value) return;
|
||||
|
||||
statusToggle.value
|
||||
? (formData.value.status = 'CREATED')
|
||||
: (formData.value.status = 'INACTIVE');
|
||||
|
||||
const result = await userStore.create(formData.value);
|
||||
if (result) {
|
||||
await branchStore.addUser(
|
||||
|
|
@ -262,7 +270,11 @@ async function onSubmit() {
|
|||
);
|
||||
}
|
||||
onClose();
|
||||
userStore.fetchList({ includeBranch: true });
|
||||
userStore.fetchList({
|
||||
includeBranch: true,
|
||||
userType: selectorLabel.value ?? undefined,
|
||||
});
|
||||
typeStats.value = await userStore.typeStats();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -278,15 +290,15 @@ async function onDelete(id: string) {
|
|||
message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
|
||||
action: async () => {
|
||||
await userStore.deleteById(id);
|
||||
await userStore.fetchList({ includeBranch: true });
|
||||
await userStore.fetchList({
|
||||
includeBranch: true,
|
||||
userType: selectorLabel.value ?? undefined,
|
||||
});
|
||||
typeStats.value = await userStore.typeStats();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function cardClick(id: string) {
|
||||
router.push({ name: 'PersonnelInfo', params: { id } });
|
||||
}
|
||||
|
||||
function mapUserType(label: string) {
|
||||
const userTypeMap: { [key: string]: string } = {
|
||||
USER: 'USER',
|
||||
|
|
@ -309,8 +321,78 @@ async function toggleStatus(id: string) {
|
|||
if (res) record.status = res.status;
|
||||
}
|
||||
|
||||
async function assignFormData(idEdit: string) {
|
||||
if (!userData.value) return;
|
||||
const foundUser = userData.value.result.find((user) => user.id === idEdit);
|
||||
if (foundUser) {
|
||||
currentUser.value = foundUser;
|
||||
|
||||
formData.value = {
|
||||
provinceId: foundUser.provinceId,
|
||||
districtId: foundUser.districtId,
|
||||
subDistrictId: foundUser.subDistrictId,
|
||||
telephoneNo: foundUser.telephoneNo,
|
||||
email: foundUser.email,
|
||||
zipCode: foundUser.zipCode,
|
||||
gender: foundUser.gender,
|
||||
addressEN: foundUser.addressEN,
|
||||
address: foundUser.address,
|
||||
trainingPlace: foundUser.trainingPlace,
|
||||
importNationality: foundUser.importNationality,
|
||||
sourceNationality: foundUser.sourceNationality,
|
||||
licenseNo: foundUser.licenseNo,
|
||||
discountCondition: foundUser.discountCondition,
|
||||
registrationNo: foundUser.registrationNo,
|
||||
lastNameEN: foundUser.lastNameEN,
|
||||
lastName: foundUser.lastName,
|
||||
firstNameEN: foundUser.firstNameEN,
|
||||
firstName: foundUser.firstName,
|
||||
userRole: foundUser.userRole,
|
||||
userType: foundUser.userType,
|
||||
username: foundUser.username,
|
||||
responsibleArea: foundUser.responsibleArea,
|
||||
status: foundUser.status,
|
||||
licenseExpireDate:
|
||||
(foundUser.licenseExpireDate &&
|
||||
new Date(foundUser.licenseExpireDate)) ||
|
||||
null,
|
||||
licenseIssueDate:
|
||||
(foundUser.licenseIssueDate && new Date(foundUser.licenseIssueDate)) ||
|
||||
null,
|
||||
retireDate:
|
||||
(foundUser.retireDate && new Date(foundUser.retireDate)) || null,
|
||||
startDate: (foundUser.startDate && new Date(foundUser.startDate)) || null,
|
||||
birthDate: (foundUser.birthDate && new Date(foundUser.birthDate)) || null,
|
||||
};
|
||||
|
||||
formData.value.status === 'ACTIVE' || 'CREATED'
|
||||
? (statusToggle.value = true)
|
||||
: (statusToggle.value = false);
|
||||
userId.value = foundUser.id;
|
||||
if (foundUser.branch[0].isHeadOffice) {
|
||||
hqId.value = foundUser.branch[0].id as string;
|
||||
} else {
|
||||
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;
|
||||
profileSubmit.value = true;
|
||||
await userStore.fetchBrOption(hqId.value);
|
||||
if (formData.value.districtId) {
|
||||
await adrressStore.fetchSubDistrictByProvinceId(
|
||||
formData.value.districtId,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await userStore.fetchList({ includeBranch: true });
|
||||
await userStore.fetchList({
|
||||
includeBranch: true,
|
||||
userType: selectorLabel.value ?? undefined,
|
||||
});
|
||||
userStore.userOption.roleOpts.length === 0
|
||||
? await userStore.fetchRoleOption()
|
||||
: '';
|
||||
|
|
@ -370,7 +452,7 @@ watch(
|
|||
unelevated
|
||||
label="+ เพิ่มบุคลากร"
|
||||
padding="4px 16px"
|
||||
@click="openDialog()"
|
||||
@click="openDialog('FORM')"
|
||||
style="background-color: var(--cyan-6); color: white"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -478,7 +560,7 @@ watch(
|
|||
"
|
||||
@update-card="openDialog"
|
||||
@delete-card="onDelete"
|
||||
@enter-card="cardClick"
|
||||
@enter-card="openDialog"
|
||||
@toggle-status="toggleStatus"
|
||||
/>
|
||||
<div
|
||||
|
|
@ -499,15 +581,97 @@ watch(
|
|||
<AddButton
|
||||
:label="'personnelAdd'"
|
||||
:cyanOn="true"
|
||||
@trigger="openDialog"
|
||||
@trigger="openDialog('FORM')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AppBox>
|
||||
</div>
|
||||
|
||||
<DrawerInfo
|
||||
:title="
|
||||
$i18n.locale === 'en-US'
|
||||
? `${formData.firstNameEN} ${formData.lastNameEN}`
|
||||
: `${formData.firstName} ${formData.lastName}`
|
||||
"
|
||||
v-model:drawerOpen="infoDrawer"
|
||||
:close="() => onClose()"
|
||||
>
|
||||
<template #info>
|
||||
<infoForm
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
v-model:provinceId="formData.provinceId"
|
||||
v-model:districtId="formData.districtId"
|
||||
v-model:subDistrictId="formData.subDistrictId"
|
||||
v-model:zipCode="formData.zipCode"
|
||||
>
|
||||
<template #person-card>
|
||||
<div class="q-ma-md">
|
||||
<AppBox class="surface-1" style="padding: 0">
|
||||
<PersonCard
|
||||
noHover
|
||||
noAction
|
||||
noDetail
|
||||
no-bg
|
||||
:list="infoPersonCard"
|
||||
:gridColumns="1"
|
||||
/>
|
||||
</AppBox>
|
||||
</div>
|
||||
</template>
|
||||
<template #information>
|
||||
<FormInformation
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
:usernameReadonly="isEdit"
|
||||
v-model:hqId="hqId"
|
||||
v-model:brId="brId"
|
||||
v-model:userType="formData.userType"
|
||||
v-model:userRole="formData.userRole"
|
||||
v-model:username="formData.username"
|
||||
v-model:userCode="code"
|
||||
/>
|
||||
</template>
|
||||
<template #person>
|
||||
<FormPerson
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
v-model:firstName="formData.firstName"
|
||||
v-model:lastName="formData.lastName"
|
||||
v-model:firstNameEN="formData.firstNameEN"
|
||||
v-model:lastNameEN="formData.lastNameEN"
|
||||
v-model:telephoneNo="formData.telephoneNo"
|
||||
v-model:email="formData.email"
|
||||
v-model:gender="formData.gender"
|
||||
v-model:birthDate="formData.birthDate"
|
||||
/>
|
||||
</template>
|
||||
<template #by-type>
|
||||
<FormByType
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
v-model:userType="formData.userType"
|
||||
v-model:registrationNo="formData.registrationNo"
|
||||
v-model:startDate="formData.startDate"
|
||||
v-model:retireDate="formData.retireDate"
|
||||
v-model:responsibleArea="formData.responsibleArea"
|
||||
v-model:discountCondition="formData.discountCondition"
|
||||
v-model:sourceNationality="formData.sourceNationality"
|
||||
v-model:importNationality="formData.importNationality"
|
||||
v-model:trainingPlace="formData.trainingPlace"
|
||||
/>
|
||||
</template>
|
||||
</infoForm>
|
||||
</template>
|
||||
</DrawerInfo>
|
||||
|
||||
<!-- form -->
|
||||
<FormDialog
|
||||
removeDialog
|
||||
ref="formDialogRef"
|
||||
title="เพิ่มบุคลากร"
|
||||
addressTitle="ที่อยู่พนักงาน"
|
||||
|
|
@ -593,7 +757,7 @@ watch(
|
|||
<q-toggle
|
||||
dense
|
||||
size="md"
|
||||
v-model="status"
|
||||
v-model="statusToggle"
|
||||
padding="none"
|
||||
class="q-pr-md"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue