953 lines
27 KiB
Vue
953 lines
27 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, watch, computed } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { dialog } from 'src/stores/utils';
|
|
import { useI18n } from 'vue-i18n';
|
|
import useFlowStore from 'src/stores/flow';
|
|
import useUserStore from 'stores/user';
|
|
import useBranchStore from 'src/stores/branch';
|
|
|
|
import {
|
|
User,
|
|
UserAttachmentCreate,
|
|
UserCreate,
|
|
UserTypeStats,
|
|
} from 'src/stores/user/types';
|
|
import { BranchUserStats } from 'src/stores/branch/types';
|
|
import useAddressStore from 'src/stores/address';
|
|
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
|
|
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 'components/FormDialog.vue';
|
|
import FormInformation from 'components/02_personnel-management/FormInformation.vue';
|
|
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
|
|
import FormByType from 'components/02_personnel-management/FormByType.vue';
|
|
import DrawerInfo from 'components/DrawerInfo.vue';
|
|
import InfoForm from 'components/02_personnel-management/InfoForm.vue';
|
|
import NoData from 'components/NoData.vue';
|
|
import ProfileUpload from 'components/ProfileUpload.vue';
|
|
|
|
const { locale } = useI18n();
|
|
|
|
const flowStore = useFlowStore();
|
|
const userStore = useUserStore();
|
|
const branchStore = useBranchStore();
|
|
const adrressStore = useAddressStore();
|
|
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: null,
|
|
retireDate: null,
|
|
startDate: null,
|
|
registrationNo: null,
|
|
lastNameEN: '',
|
|
lastName: '',
|
|
firstNameEN: '',
|
|
firstName: '',
|
|
userRole: '',
|
|
userType: '',
|
|
profileImage: null,
|
|
birthDate: null,
|
|
responsibleArea: null,
|
|
username: '',
|
|
status: 'CREATED',
|
|
checkpoint: null,
|
|
checkpointEN: null,
|
|
};
|
|
|
|
const userCode = ref<string>();
|
|
const currentUser = ref<User>();
|
|
const infoDrawerEdit = ref(false);
|
|
const infoPersonId = ref<string>('');
|
|
const infoPersonCard = ref();
|
|
const infoDrawer = ref(false);
|
|
const profileSubmit = ref(false);
|
|
const urlProfile = ref<string>();
|
|
const isEdit = ref(false);
|
|
const modal = ref(false);
|
|
const statusToggle = ref(true);
|
|
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
|
|
const inputSearch = ref('');
|
|
const userId = ref<string>();
|
|
const selectorLabel = ref<string>('');
|
|
const hqId = ref<string>();
|
|
const brId = ref<string>();
|
|
const formDialogRef = ref();
|
|
const userStats = ref<BranchUserStats[]>();
|
|
const sortedUserStats = computed(() => {
|
|
return userStats.value?.slice().sort((a, b) => b.count - a.count);
|
|
});
|
|
const typeStats = ref<UserTypeStats>();
|
|
const agencyFile = ref<File[]>([]);
|
|
const agencyFileList = ref<{ name: string; url: string }[]>([]);
|
|
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: null,
|
|
retireDate: null,
|
|
startDate: null,
|
|
registrationNo: null,
|
|
lastNameEN: '',
|
|
lastName: '',
|
|
firstNameEN: '',
|
|
firstName: '',
|
|
userRole: '',
|
|
userType: '',
|
|
profileImage: null,
|
|
birthDate: null,
|
|
responsibleArea: null,
|
|
checkpoint: null,
|
|
checkpointEN: null,
|
|
username: '',
|
|
status: 'CREATED',
|
|
});
|
|
|
|
const profileFile = ref<File | undefined>(undefined);
|
|
const inputFile = document.createElement('input');
|
|
inputFile.type = 'file';
|
|
inputFile.accept = 'image/*';
|
|
|
|
const reader = new FileReader();
|
|
|
|
reader.addEventListener('load', () => {
|
|
if (typeof reader.result === 'string') {
|
|
urlProfile.value = reader.result;
|
|
}
|
|
|
|
if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
|
|
});
|
|
|
|
watch(profileFile, () => {
|
|
if (profileFile.value) reader.readAsDataURL(profileFile.value);
|
|
});
|
|
|
|
inputFile.addEventListener('change', (e) => {
|
|
profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
|
|
});
|
|
|
|
const selectorList = computed(() => [
|
|
{ label: 'USER', count: typeStats.value?.USER || 0 },
|
|
{ label: 'MESSENGER', count: typeStats.value?.MESSENGER || 0 },
|
|
{ label: 'DELEGATE', count: typeStats.value?.DELEGATE || 0 },
|
|
{ label: 'AGENCY', count: typeStats.value?.AGENCY || 0 },
|
|
]);
|
|
|
|
async function openDialog(
|
|
action?: 'FORM' | 'INFO',
|
|
idEdit?: string,
|
|
isPersonEdit: boolean = false,
|
|
) {
|
|
if (userStore.userOption.hqOpts.length === 0) {
|
|
await userStore.fetchHqOption();
|
|
}
|
|
|
|
if (userStore.userOption.roleOpts.length === 0) {
|
|
await userStore.fetchRoleOption();
|
|
}
|
|
|
|
if (idEdit && userData.value) {
|
|
assignFormData(idEdit);
|
|
isEdit.value = true;
|
|
|
|
if (formData.value.userType === 'AGENCY') {
|
|
const result = await userStore.fetchAttachment(idEdit);
|
|
|
|
if (result) {
|
|
agencyFileList.value = result;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (action === 'FORM') {
|
|
modal.value = true;
|
|
} else if (action === 'INFO') {
|
|
if (!userData.value) return;
|
|
|
|
infoDrawerEdit.value = isPersonEdit ? true : false;
|
|
infoDrawer.value = true;
|
|
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;
|
|
userStore.userOption.brOpts = [];
|
|
hqId.value = userStore.userOption.hqOpts[0].value;
|
|
}
|
|
|
|
function undo() {
|
|
if (!infoPersonId.value) return;
|
|
infoDrawerEdit.value = false;
|
|
assignFormData(infoPersonId.value);
|
|
}
|
|
|
|
function onClose() {
|
|
hqId.value = '';
|
|
brId.value = '';
|
|
userId.value = '';
|
|
userCode.value = '';
|
|
urlProfile.value = undefined;
|
|
profileFile.value = undefined;
|
|
agencyFile.value = [];
|
|
modal.value = false;
|
|
isEdit.value = false;
|
|
infoDrawer.value = false;
|
|
profileSubmit.value = false;
|
|
statusToggle.value = true;
|
|
Object.assign(formData.value, defaultFormData);
|
|
mapUserType(selectorLabel.value);
|
|
flowStore.rotate();
|
|
}
|
|
|
|
async function onSubmit() {
|
|
if (profileSubmit.value) {
|
|
formData.value.profileImage = profileFile.value as File;
|
|
} else {
|
|
formData.value.profileImage = null;
|
|
}
|
|
|
|
if (isEdit.value && userId.value) {
|
|
if (!userId.value) return;
|
|
|
|
const formDataEdit = {
|
|
...formData.value,
|
|
status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
|
|
} as const;
|
|
await userStore.editById(userId.value, formDataEdit);
|
|
|
|
if (
|
|
hqId.value &&
|
|
currentUser.value?.branch[0] &&
|
|
hqId.value !== currentUser.value.branch[0].id &&
|
|
brId.value !== currentUser.value.branch[0].id
|
|
) {
|
|
await branchStore.removeUser(
|
|
currentUser.value.branch[0].id,
|
|
userId.value,
|
|
);
|
|
|
|
await branchStore.addUser(
|
|
!!brId.value ? brId.value : hqId.value,
|
|
userId.value,
|
|
);
|
|
}
|
|
|
|
if (!currentUser.value?.branch[0]) {
|
|
if (brId.value || hqId.value) {
|
|
await branchStore.addUser(
|
|
(!!brId.value ? brId.value : hqId.value)!,
|
|
userId.value,
|
|
);
|
|
}
|
|
}
|
|
|
|
if (userId.value && formDataEdit.userType === 'AGENCY') {
|
|
if (!agencyFile.value) return;
|
|
const payload: UserAttachmentCreate = {
|
|
file: agencyFile.value,
|
|
};
|
|
|
|
if (payload?.file) {
|
|
await userStore.addAttachment(userId.value, payload);
|
|
}
|
|
}
|
|
|
|
await fetchUserList();
|
|
typeStats.value = await userStore.typeStats();
|
|
const res = await branchStore.userStats(formData.value.userType);
|
|
if (res) {
|
|
userStats.value = res;
|
|
}
|
|
onClose();
|
|
} else {
|
|
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(
|
|
!!brId.value ? brId.value : hqId.value,
|
|
result.id,
|
|
);
|
|
}
|
|
|
|
if (result && formData.value.userType === 'AGENCY') {
|
|
if (!agencyFile.value) return;
|
|
|
|
const payload: UserAttachmentCreate = {
|
|
file: agencyFile.value,
|
|
};
|
|
|
|
if (payload?.file) {
|
|
await userStore.addAttachment(result.id, payload);
|
|
}
|
|
}
|
|
|
|
selectorLabel.value = formData.value.userType;
|
|
|
|
await fetchUserList();
|
|
|
|
typeStats.value = await userStore.typeStats();
|
|
const res = await branchStore.userStats(formData.value.userType);
|
|
if (res) {
|
|
userStats.value = res;
|
|
}
|
|
onClose();
|
|
}
|
|
flowStore.rotate();
|
|
}
|
|
|
|
async function onDelete(id: string) {
|
|
dialog({
|
|
color: 'negative',
|
|
icon: 'mdi-trash-can-outline',
|
|
title: 'ยืนยันการลบข้อมูล',
|
|
actionText: 'ตกลง',
|
|
persistent: true,
|
|
message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
|
|
action: async () => {
|
|
await userStore.deleteById(id);
|
|
|
|
await fetchUserList();
|
|
typeStats.value = await userStore.typeStats();
|
|
flowStore.rotate();
|
|
},
|
|
});
|
|
}
|
|
|
|
function mapUserType(label: string) {
|
|
const userTypeMap: { [key: string]: string } = {
|
|
USER: 'USER',
|
|
MESSENGER: 'MESSENGER',
|
|
DELEGATE: 'DELEGATE',
|
|
AGENCY: 'AGENCY',
|
|
};
|
|
formData.value.userType = userTypeMap[label];
|
|
}
|
|
|
|
async function toggleStatus(id: string) {
|
|
const record = userData.value?.result.find((v) => v.id === id);
|
|
|
|
if (!record) return;
|
|
|
|
const res = await userStore.editById(record.id, {
|
|
status: record.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
|
|
});
|
|
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;
|
|
infoPersonId.value = currentUser.value.id;
|
|
|
|
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,
|
|
checkpoint: foundUser.checkpoint,
|
|
checkpointEN: foundUser.checkpointEN,
|
|
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]) {
|
|
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;
|
|
}
|
|
}
|
|
|
|
userCode.value = foundUser.code;
|
|
urlProfile.value = foundUser.profileImageUrl;
|
|
|
|
isEdit.value = true;
|
|
profileSubmit.value = true;
|
|
hqId.value && (await userStore.fetchBrOption(hqId.value));
|
|
if (infoPersonCard.value) {
|
|
infoPersonCard.value[0].img = foundUser.profileImageUrl;
|
|
}
|
|
if (formData.value.districtId) {
|
|
await adrressStore.fetchSubDistrictByProvinceId(
|
|
formData.value.districtId,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchUserList();
|
|
|
|
userStore.userOption.roleOpts.length === 0
|
|
? await userStore.fetchRoleOption()
|
|
: '';
|
|
typeStats.value = await userStore.typeStats();
|
|
|
|
const firstTypeIncludeUser = Object.entries(typeStats.value || {}).find(
|
|
(v) => v[1] > 0,
|
|
);
|
|
|
|
firstTypeIncludeUser && (selectorLabel.value = firstTypeIncludeUser[0]);
|
|
|
|
const res = await branchStore.userStats(formData.value.userType);
|
|
if (res) {
|
|
userStats.value = res;
|
|
}
|
|
flowStore.rotate();
|
|
});
|
|
|
|
watch(
|
|
() => selectorLabel.value,
|
|
async (label) => {
|
|
mapUserType(label);
|
|
await fetchUserList();
|
|
const res = await branchStore.userStats(label);
|
|
if (res) {
|
|
userStats.value = res;
|
|
}
|
|
},
|
|
);
|
|
|
|
watch(
|
|
() => formData.value.userType,
|
|
async () => {
|
|
formData.value.registrationNo = null;
|
|
formData.value.startDate = null;
|
|
formData.value.retireDate = null;
|
|
formData.value.responsibleArea = null;
|
|
formData.value.discountCondition = null;
|
|
formData.value.sourceNationality = null;
|
|
formData.value.importNationality = null;
|
|
formData.value.trainingPlace = null;
|
|
formData.value.checkpoint = null;
|
|
formData.value.checkpointEN = null;
|
|
agencyFile.value = [];
|
|
},
|
|
);
|
|
|
|
const currentPage = ref(1);
|
|
const currentMaxPage = computed(() =>
|
|
userData.value
|
|
? Math.ceil(userData.value?.total / userData.value?.pageSize)
|
|
: 1,
|
|
);
|
|
|
|
async function fetchUserList() {
|
|
await userStore.fetchList({
|
|
includeBranch: true,
|
|
page: currentPage.value,
|
|
query: !!inputSearch.value ? inputSearch.value : undefined,
|
|
userType: selectorLabel.value ?? undefined,
|
|
});
|
|
}
|
|
|
|
watch(inputSearch, async () => await fetchUserList());
|
|
</script>
|
|
|
|
<template>
|
|
<ButtonAddComponent style="z-index: 999">
|
|
<q-fab-action
|
|
id="btn-add-personne"
|
|
:label="$t('personnelAdd')"
|
|
external-label
|
|
label-position="left"
|
|
@click="openDialog('FORM')"
|
|
color="primary"
|
|
padding="xs"
|
|
icon="mdi-account-plus"
|
|
></q-fab-action>
|
|
</ButtonAddComponent>
|
|
|
|
<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-3"
|
|
/>
|
|
|
|
<!-- stat -->
|
|
<AppBox bordered class="column full-width">
|
|
<div class="row q-pb-sm justify-between items-center">
|
|
<div class="text-weight-bold text-subtitle1">
|
|
{{ $t('personnelStatTitle') }}
|
|
{{ selectorLabel === '' ? '' : $t(selectorLabel) }}
|
|
</div>
|
|
</div>
|
|
<div class="row full-width" style="overflow-x: auto">
|
|
<StatCardComponent
|
|
v-if="sortedUserStats"
|
|
:branch="
|
|
sortedUserStats.map((v) => ({
|
|
count: v.count,
|
|
label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
|
|
color: v.isHeadOffice ? 'pink' : 'purple',
|
|
}))
|
|
"
|
|
:dark="$q.dark.isActive"
|
|
class="no-wrap"
|
|
/>
|
|
</div>
|
|
</AppBox>
|
|
</div>
|
|
|
|
<!-- main -->
|
|
<AppBox bordered class="column" style="width: 100%; min-height: 70vh">
|
|
<div class="row q-mb-md justify-between">
|
|
<q-btn
|
|
id="btn-filter"
|
|
icon="mdi-tune-vertical-variant"
|
|
size="sm"
|
|
class="bordered rounded"
|
|
:class="{ 'app-text-info': statusFilter !== 'all' }"
|
|
unelevated
|
|
>
|
|
<q-menu class="bordered">
|
|
<q-list v-close-popup dense>
|
|
<q-item
|
|
id="btn-filter-all"
|
|
clickable
|
|
class="flex items-center"
|
|
:class="{ 'app-text-info': statusFilter === 'all' }"
|
|
@click="statusFilter = 'all'"
|
|
>
|
|
{{ $t('all') }}
|
|
</q-item>
|
|
<q-item
|
|
id="btn-filter-active"
|
|
clickable
|
|
class="flex items-center"
|
|
:class="{
|
|
'app-text-info': statusFilter === 'statusACTIVE',
|
|
}"
|
|
@click="statusFilter = 'statusACTIVE'"
|
|
>
|
|
{{ $t('statusACTIVE') }}
|
|
</q-item>
|
|
<q-item
|
|
id="btn-filter-inactive"
|
|
clickable
|
|
class="flex items-center"
|
|
:class="{
|
|
'app-text-info': statusFilter === 'statusINACTIVE',
|
|
}"
|
|
@click="statusFilter = 'statusINACTIVE'"
|
|
>
|
|
{{ $t('statusINACTIVE') }}
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
<q-input
|
|
for="input-search"
|
|
style="width: 250px"
|
|
outlined
|
|
dense
|
|
:label="$t('search')"
|
|
debounce="500"
|
|
v-model="inputSearch"
|
|
></q-input>
|
|
</div>
|
|
<PersonCard
|
|
:list="
|
|
userData?.result
|
|
.filter((v) => {
|
|
if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
|
|
return false;
|
|
}
|
|
if (
|
|
statusFilter === 'statusINACTIVE' &&
|
|
v.status !== 'INACTIVE'
|
|
) {
|
|
return false;
|
|
}
|
|
return true;
|
|
})
|
|
.map((v) => ({
|
|
id: v.id,
|
|
img: `${v.profileImageUrl}`,
|
|
name:
|
|
$i18n.locale === 'en-US'
|
|
? `${v.firstNameEN} ${v.lastNameEN}`
|
|
: `${v.firstName} ${v.lastName}`,
|
|
male: v.gender === 'male',
|
|
female: v.gender === 'female',
|
|
detail: [
|
|
{ label: $t('personnelCardUserType'), value: $t(v.userType) },
|
|
{ label: $t('personnelCardTelephone'), value: v.telephoneNo },
|
|
{
|
|
label: $t('personnelCardAge'),
|
|
value: userStore.calculateAge(v.birthDate as Date) || '',
|
|
},
|
|
],
|
|
badge: v.code,
|
|
disabled: v.status === 'INACTIVE',
|
|
})) || []
|
|
"
|
|
@update-card="openDialog"
|
|
@delete-card="onDelete"
|
|
@enter-card="openDialog"
|
|
@toggle-status="toggleStatus"
|
|
/>
|
|
<template v-if="userData && userData.total === 0 && !inputSearch">
|
|
<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; flex-grow: 1; align-items: center"
|
|
>
|
|
<AddButton
|
|
:label="'personnelAdd'"
|
|
:cyanOn="true"
|
|
@trigger="openDialog('FORM')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<div
|
|
v-if="userData?.total === 0"
|
|
class="row full-width items-center justify-center"
|
|
style="min-height: 250px"
|
|
>
|
|
<NoData :not-found="!!inputSearch" />
|
|
</div>
|
|
<div class="row flex-center q-pt-md" v-if="currentMaxPage > 0">
|
|
<q-pagination
|
|
v-model="currentPage"
|
|
:max="currentMaxPage"
|
|
direction-links
|
|
active-color="primary"
|
|
gutter="sm"
|
|
/>
|
|
</div>
|
|
</AppBox>
|
|
</div>
|
|
|
|
<DrawerInfo
|
|
v-if="currentUser"
|
|
:category="$t('personnelTitle')"
|
|
bg-on
|
|
:badgeClass="
|
|
formData.gender === 'male'
|
|
? 'app-bg-male text-white'
|
|
: 'app-bg-female text-white'
|
|
"
|
|
:badgeLabel="userCode"
|
|
:isEdit="infoDrawerEdit"
|
|
:title="
|
|
$i18n.locale === 'en-US'
|
|
? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
|
|
: `${currentUser.firstName} ${currentUser.lastName}`
|
|
"
|
|
v-model:drawerOpen="infoDrawer"
|
|
:deleteData="() => onDelete(infoPersonId)"
|
|
:submit="() => onSubmit()"
|
|
:close="() => onClose()"
|
|
:undo="() => undo()"
|
|
:editData="() => (infoDrawerEdit = true)"
|
|
>
|
|
<template #info>
|
|
<InfoForm
|
|
:readonly="!infoDrawerEdit"
|
|
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
|
|
:can-edit-profile="infoDrawerEdit"
|
|
no-hover
|
|
no-action
|
|
no-detail
|
|
no-bg
|
|
:list="infoPersonCard"
|
|
:gridColumns="1"
|
|
@edit-profile="
|
|
() => {
|
|
inputFile.click();
|
|
}
|
|
"
|
|
/>
|
|
</AppBox>
|
|
</div>
|
|
</template>
|
|
<template #information>
|
|
<FormInformation
|
|
dense
|
|
outlined
|
|
separator
|
|
:readonly="!infoDrawerEdit"
|
|
: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="userCode"
|
|
/>
|
|
</template>
|
|
<template #person>
|
|
<FormPerson
|
|
dense
|
|
outlined
|
|
separator
|
|
:readonly="!infoDrawerEdit"
|
|
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
|
|
:readonly="!infoDrawerEdit"
|
|
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"
|
|
v-model:checkpoint="formData.checkpoint"
|
|
v-model:checkpointEN="formData.checkpointEN"
|
|
v-model:agencyFile="agencyFile"
|
|
v-model:agencyFileList="agencyFileList"
|
|
v-model:userId="userId"
|
|
/>
|
|
</template>
|
|
</InfoForm>
|
|
</template>
|
|
</DrawerInfo>
|
|
|
|
<!-- form -->
|
|
<FormDialog
|
|
removeDialog
|
|
ref="formDialogRef"
|
|
:badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
|
|
:badgeLabel="userCode"
|
|
:title="$t('personnelAdd')"
|
|
v-model:modal="modal"
|
|
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"
|
|
:addressSeparator="formData.userType !== ''"
|
|
:submit="() => onSubmit()"
|
|
:close="() => onClose()"
|
|
>
|
|
<template #prepend>
|
|
<ProfileUpload
|
|
v-model:url-profile="urlProfile"
|
|
v-model:status-toggle="statusToggle"
|
|
v-model:profile-submit="profileSubmit"
|
|
@input-file="inputFile.click()"
|
|
/>
|
|
</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="userCode"
|
|
/>
|
|
</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"
|
|
v-model:checkpoint="formData.checkpoint"
|
|
v-model:checkpointEN="formData.checkpointEN"
|
|
v-model:agencyFile="agencyFile"
|
|
/>
|
|
</template>
|
|
</FormDialog>
|
|
</template>
|
|
<style>
|
|
.upload-img-preview {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-2);
|
|
height: 12vw;
|
|
background-color: var(--surface-1);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.edit-img-btn {
|
|
color: hsl(var(--info-bg));
|
|
border: 1px solid hsl(var(--info-bg));
|
|
background-color: transparent;
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
.cancel-img-btn {
|
|
color: hsl(var(--negative-bg));
|
|
border: 1px solid hsl(var(--negative-bg));
|
|
background-color: transparent;
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
.submit-img-btn {
|
|
color: var(--surface-1);
|
|
border: 1px solid hsl(var(--positive-bg));
|
|
background-color: hsl(var(--positive-bg));
|
|
border-radius: var(--radius-2);
|
|
}
|
|
</style>
|