1770 lines
52 KiB
Vue
1770 lines
52 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, watch, computed } from 'vue';
|
|
import useUtilsStore, { dialog } from 'src/stores/utils';
|
|
import { calculateAge } from 'src/utils/datetime';
|
|
import { useQuasar, type QTableProps } from 'quasar';
|
|
import { storeToRefs } from 'pinia';
|
|
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 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';
|
|
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
|
import useOptionStore from 'src/stores/options';
|
|
|
|
const { locale, t } = useI18n();
|
|
const $q = useQuasar();
|
|
|
|
const optionStore = useOptionStore();
|
|
const utilsStore = useUtilsStore();
|
|
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 modeView = ref(false);
|
|
|
|
const fieldSelectedOption = ref<{ label: string; value: string }[]>([
|
|
{
|
|
label: 'fullname',
|
|
value: 'name',
|
|
},
|
|
{
|
|
label: 'type',
|
|
value: 'type',
|
|
},
|
|
{
|
|
label: 'telephone',
|
|
value: 'telephoneNo',
|
|
},
|
|
{
|
|
label: 'personnelCardAge',
|
|
value: 'birthDate',
|
|
},
|
|
{
|
|
label: 'formDialogInputEmail',
|
|
value: 'email',
|
|
},
|
|
{
|
|
label: 'userRole',
|
|
value: 'userRole',
|
|
},
|
|
]);
|
|
|
|
const fieldSelected = ref<
|
|
('name' | 'type' | 'telephoneNo' | 'birthDate' | 'email' | 'userRole')[]
|
|
>(['name', 'type', 'telephoneNo', 'birthDate', 'email', 'userRole']);
|
|
const fieldDisplay = ref();
|
|
const hideStat = ref(false);
|
|
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>('ALL');
|
|
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>({
|
|
branchId: '',
|
|
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 profileUrl = ref<string | null>('');
|
|
const profileFile = ref<File | undefined>(undefined);
|
|
|
|
const inputFile = (() => {
|
|
const element = document.createElement('input');
|
|
element.type = 'file';
|
|
element.accept = 'image/*';
|
|
|
|
const reader = new FileReader();
|
|
reader.addEventListener('load', () => {
|
|
if (typeof reader.result === 'string') profileUrl.value = reader.result;
|
|
|
|
if (infoDrawerEdit.value && currentUser.value)
|
|
currentUser.value.profileImageUrl = profileUrl.value as string;
|
|
// profileUrl.value = currentUser.value?.profileImageUrl as string;
|
|
|
|
// if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
|
|
// infoEmployeePersonCard.value[0].img = profileUrl.value as string;
|
|
});
|
|
|
|
element.addEventListener('change', () => {
|
|
profileFile.value = element.files?.[0];
|
|
if (profileFile.value) {
|
|
reader.readAsDataURL(profileFile.value);
|
|
}
|
|
});
|
|
|
|
return element;
|
|
})();
|
|
|
|
// const inputFile = document.createElement('input');
|
|
// inputFile.type = 'file';
|
|
// inputFile.accept = 'image/*';
|
|
|
|
const reader = new FileReader();
|
|
|
|
const columns = [
|
|
{
|
|
name: 'name',
|
|
align: 'left',
|
|
label: 'fullname',
|
|
field: 'firstName',
|
|
},
|
|
{
|
|
name: 'type',
|
|
align: 'left',
|
|
label: 'type',
|
|
field: 'type',
|
|
},
|
|
{
|
|
name: 'telephoneNo',
|
|
align: 'left',
|
|
label: 'telephone',
|
|
field: 'telephoneNo',
|
|
},
|
|
{
|
|
name: 'birthDate',
|
|
align: 'left',
|
|
label: 'personnelCardAge',
|
|
field: 'birthDate',
|
|
},
|
|
{
|
|
name: 'email',
|
|
align: 'left',
|
|
label: 'formDialogInputEmail',
|
|
field: 'email',
|
|
},
|
|
|
|
{
|
|
name: 'userRole',
|
|
align: 'left',
|
|
label: 'userRole',
|
|
field: 'userRole',
|
|
},
|
|
] satisfies QTableProps['columns'];
|
|
|
|
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',
|
|
id?: string,
|
|
isPersonEdit: boolean = false,
|
|
) {
|
|
if (userStore.userOption.hqOpts.length === 0) {
|
|
await userStore.fetchHqOption();
|
|
}
|
|
|
|
if (userStore.userOption.roleOpts.length === 0) {
|
|
await userStore.fetchRoleOption();
|
|
}
|
|
|
|
if (id && userData.value) {
|
|
isEdit.value = true;
|
|
await assignFormData(id);
|
|
|
|
if (formData.value.userType === 'AGENCY') {
|
|
const result = await userStore.fetchAttachment(id);
|
|
|
|
if (result) {
|
|
agencyFileList.value = result;
|
|
}
|
|
}
|
|
}
|
|
if (userStore.userOption.hqOpts.length !== 0 && !id) {
|
|
hqId.value = userStore.userOption.hqOpts[0].value;
|
|
}
|
|
if (userStore.userOption.hqOpts.length === 0) {
|
|
console.log('no hq');
|
|
|
|
dialog({
|
|
color: 'warning',
|
|
icon: 'mdi-alert',
|
|
title: t('warning'),
|
|
actionText: t('agree'),
|
|
persistent: true,
|
|
message: t('headquartersNotEstablished'),
|
|
action: async () => {},
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
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 === id);
|
|
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 = [];
|
|
}
|
|
|
|
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;
|
|
infoDrawerEdit.value = false;
|
|
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;
|
|
|
|
formData.value.branchId = brId.value
|
|
? brId.value
|
|
: hqId.value
|
|
? hqId.value
|
|
: '';
|
|
const formDataEdit = {
|
|
...formData.value,
|
|
status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
|
|
} as const;
|
|
|
|
await userStore.editById(userId.value, formDataEdit);
|
|
|
|
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');
|
|
|
|
formData.value.branchId = brId.value
|
|
? brId.value
|
|
: hqId.value
|
|
? hqId.value
|
|
: '';
|
|
|
|
const result = await userStore.create(formData.value);
|
|
|
|
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: t('deleteConfirmTitle'),
|
|
actionText: t('agree'),
|
|
persistent: true,
|
|
message: t('deleteConfirmMessage'),
|
|
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 triggerChangeStatus(id: string, status: string) {
|
|
return await new Promise((resolve, reject) => {
|
|
dialog({
|
|
color: status !== 'INACTIVE' ? 'warning' : 'info',
|
|
icon: status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-comment-alert',
|
|
title: t('confirmChangeStatusTitle'),
|
|
actionText:
|
|
status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
|
|
message:
|
|
status !== 'INACTIVE'
|
|
? t('confirmChangeStatusOffMessage')
|
|
: t('confirmChangeStatusOnMessage'),
|
|
action: async () => {
|
|
await toggleStatus(id).then(resolve).catch(reject);
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
});
|
|
}
|
|
|
|
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;
|
|
profileUrl.value = currentUser.value.profileImageUrl;
|
|
formData.value = {
|
|
branchId: foundUser.branch[0]?.id,
|
|
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) {
|
|
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 () => {
|
|
utilsStore.currentTitle.title = 'personnelManagement';
|
|
utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
|
|
modeView.value = $q.screen.lt.md ? true : false;
|
|
|
|
await fetchUserList();
|
|
if (optionStore.globalOption) {
|
|
userStore.userOption.genderOpts = optionStore.globalOption.gender;
|
|
userStore.userOption.responsibleAreaOpts = optionStore.globalOption.area;
|
|
userStore.userOption.nationalityOpts = optionStore.globalOption.nationality;
|
|
userStore.userOption.trainingPlaceOpts = optionStore.globalOption.training;
|
|
}
|
|
|
|
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 () => {
|
|
if (!infoDrawerEdit.value) return;
|
|
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 pageSize = ref(30);
|
|
const currentMaxPage = computed(() =>
|
|
userData.value ? Math.ceil(userData.value?.total / pageSize.value) : 1,
|
|
);
|
|
|
|
async function fetchUserList() {
|
|
await userStore.fetchList({
|
|
includeBranch: true,
|
|
pageSize: pageSize.value,
|
|
page: currentPage.value,
|
|
query: !!inputSearch.value ? inputSearch.value : undefined,
|
|
userType: selectorLabel.value === 'ALL' ? undefined : selectorLabel.value,
|
|
});
|
|
}
|
|
|
|
watch(inputSearch, async () => await fetchUserList());
|
|
|
|
watch(
|
|
() => $q.screen.lt.md,
|
|
(v) => {
|
|
if (v) modeView.value = true;
|
|
},
|
|
);
|
|
</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>
|
|
|
|
<!-- stat -->
|
|
<div class="column full-height no-wrap">
|
|
<div class="text-body-2 q-mb-xs flex items-center">
|
|
{{ $t('personnelStatTitle') }}
|
|
<q-badge
|
|
v-if="typeStats"
|
|
rounded
|
|
class="q-ml-sm"
|
|
style="
|
|
background-color: hsla(var(--info-bg) / 0.15);
|
|
color: hsl(var(--info-bg));
|
|
"
|
|
>
|
|
{{
|
|
selectorLabel === 'ALL'
|
|
? Object.values(typeStats).reduce((acc, val) => acc + val, 0)
|
|
: typeStats[selectorLabel]
|
|
}}
|
|
</q-badge>
|
|
<q-btn
|
|
class="q-ml-sm"
|
|
icon="mdi-pin"
|
|
color="primary"
|
|
size="sm"
|
|
flat
|
|
dense
|
|
rounded
|
|
@click="hideStat = !hideStat"
|
|
:style="hideStat ? 'rotate: 90deg' : ''"
|
|
style="transition: 0.1s ease-in-out"
|
|
/>
|
|
</div>
|
|
|
|
<transition name="slide">
|
|
<div v-if="!hideStat" class="scroll q-mb-md">
|
|
<div style="display: inline-block">
|
|
<StatCardComponent
|
|
v-if="typeStats && userData?.result"
|
|
labelI18n
|
|
:branch="
|
|
selectorLabel === 'ALL'
|
|
? Object.entries(typeStats).map(([key, val]) => ({
|
|
count: val,
|
|
label: key,
|
|
icon: 'mdi-account',
|
|
color:
|
|
(
|
|
{
|
|
USER: 'cyan',
|
|
MESSENGER: 'yellow',
|
|
DELEGATE: 'red',
|
|
AGENCY: 'magenta',
|
|
} as const
|
|
)[key] || 'pink',
|
|
}))
|
|
: [
|
|
{
|
|
label: selectorLabel,
|
|
count: typeStats[selectorLabel],
|
|
icon: 'mdi-account',
|
|
color:
|
|
selectorLabel === 'USER'
|
|
? 'cyan'
|
|
: selectorLabel === 'MESSENGER'
|
|
? 'yellow'
|
|
: selectorLabel === 'DELEGATE'
|
|
? 'red'
|
|
: 'magenta',
|
|
},
|
|
]
|
|
"
|
|
:dark="$q.dark.isActive"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<!-- main -->
|
|
<div
|
|
class="col surface-2 rounded justify-between column no-wrap bordered"
|
|
style="overflow: hidden"
|
|
>
|
|
<div class="column">
|
|
<div
|
|
class="row surface-3 justify-between full-width items-center bordered-b"
|
|
style="z-index: 1"
|
|
>
|
|
<div class="row q-py-sm q-px-md justify-between full-width">
|
|
<q-input
|
|
lazy-rules="ondemand"
|
|
for="input-search"
|
|
outlined
|
|
dense
|
|
:label="$t('search')"
|
|
class="q-mr-md col-12 col-md-3"
|
|
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
|
v-model="inputSearch"
|
|
debounce="200"
|
|
>
|
|
<template #prepend>
|
|
<q-icon name="mdi-magnify" />
|
|
</template>
|
|
</q-input>
|
|
|
|
<div
|
|
class="row col-12 col-md-5"
|
|
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
|
style="white-space: nowrap"
|
|
>
|
|
<q-select
|
|
lazy-rules="ondemand"
|
|
v-model="statusFilter"
|
|
outlined
|
|
dense
|
|
option-value="value"
|
|
option-label="label"
|
|
class="col"
|
|
map-options
|
|
emit-value
|
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
|
:options="[
|
|
{ label: $t('all'), value: 'all' },
|
|
{ label: $t('statusACTIVE'), value: 'statusACTIVE' },
|
|
{ label: $t('statusINACTIVE'), value: 'statusINACTIVE' },
|
|
]"
|
|
></q-select>
|
|
|
|
<q-select
|
|
lazy-rules="ondemand"
|
|
v-if="!modeView"
|
|
id="select-field"
|
|
for="select-field"
|
|
class="col q-ml-sm"
|
|
:options="
|
|
fieldSelectedOption.map((v) => ({
|
|
...v,
|
|
label: $t(v.label),
|
|
}))
|
|
"
|
|
:display-value="$t('displayField')"
|
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
|
v-model="fieldSelected"
|
|
option-label="label"
|
|
option-value="value"
|
|
map-options
|
|
emit-value
|
|
outlined
|
|
multiple
|
|
dense
|
|
/>
|
|
|
|
<q-btn-toggle
|
|
id="btn-mode"
|
|
v-model="modeView"
|
|
dense
|
|
class="no-shadow bordered rounded surface-1 q-ml-sm"
|
|
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
|
size="xs"
|
|
:options="[
|
|
{ value: true, slot: 'folder' },
|
|
{ value: false, slot: 'list' },
|
|
]"
|
|
>
|
|
<template v-slot:folder>
|
|
<q-icon
|
|
name="mdi-view-grid-outline"
|
|
size="16px"
|
|
class="q-px-sm q-py-xs rounded"
|
|
:style="{
|
|
color: $q.dark.isActive
|
|
? modeView
|
|
? '#C9D3DB '
|
|
: '#787B7C'
|
|
: modeView
|
|
? '#787B7C'
|
|
: '#C9D3DB',
|
|
}"
|
|
/>
|
|
</template>
|
|
<template v-slot:list>
|
|
<q-icon
|
|
name="mdi-format-list-bulleted"
|
|
class="q-px-sm q-py-xs rounded"
|
|
size="16px"
|
|
:style="{
|
|
color: $q.dark.isActive
|
|
? modeView === false
|
|
? '#C9D3DB'
|
|
: '#787B7C'
|
|
: modeView === false
|
|
? '#787B7C'
|
|
: '#C9D3DB',
|
|
}"
|
|
/>
|
|
</template>
|
|
</q-btn-toggle>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="surface-2 bordered-b q-px-md full-width">
|
|
<q-tabs
|
|
inline-label
|
|
mobile-arrows
|
|
dense
|
|
v-model="selectorLabel"
|
|
align="left"
|
|
class="full-width"
|
|
active-color="info"
|
|
>
|
|
<q-tab
|
|
name="ALL"
|
|
@click="
|
|
async () => {
|
|
currentPage = 1;
|
|
inputSearch = '';
|
|
selectorLabel = 'ALL';
|
|
statusFilter = 'all';
|
|
flowStore.rotate();
|
|
}
|
|
"
|
|
>
|
|
<div
|
|
class="row"
|
|
:class="
|
|
selectorLabel === 'ALL' ? 'text-bold' : 'app-text-muted'
|
|
"
|
|
>
|
|
{{ $t('all') }}
|
|
</div>
|
|
</q-tab>
|
|
<q-tab
|
|
name="USER"
|
|
@click="
|
|
async () => {
|
|
selectorLabel = 'USER';
|
|
statusFilter = 'all';
|
|
currentPage = 1;
|
|
inputSearch = '';
|
|
flowStore.rotate();
|
|
}
|
|
"
|
|
>
|
|
<div
|
|
class="row"
|
|
:class="
|
|
selectorLabel === 'USER' ? 'text-bold' : 'app-text-muted'
|
|
"
|
|
>
|
|
{{ $t('USER') }}
|
|
</div>
|
|
</q-tab>
|
|
<q-tab
|
|
name="MESSENGER"
|
|
@click="
|
|
async () => {
|
|
selectorLabel = 'MESSENGER';
|
|
statusFilter = 'all';
|
|
currentPage = 1;
|
|
inputSearch = '';
|
|
flowStore.rotate();
|
|
}
|
|
"
|
|
>
|
|
<div
|
|
class="row"
|
|
:class="
|
|
selectorLabel === 'MESSENGER' ? 'text-bold' : 'app-text-muted'
|
|
"
|
|
>
|
|
{{ $t('MESSENGER') }}
|
|
</div>
|
|
</q-tab>
|
|
<q-tab
|
|
name="DELEGATE"
|
|
@click="
|
|
async () => {
|
|
selectorLabel = 'DELEGATE';
|
|
statusFilter = 'all';
|
|
currentPage = 1;
|
|
inputSearch = '';
|
|
flowStore.rotate();
|
|
}
|
|
"
|
|
>
|
|
<div
|
|
class="row"
|
|
:class="
|
|
selectorLabel === 'DELEGATE' ? 'text-bold' : 'app-text-muted'
|
|
"
|
|
>
|
|
{{ $t('DELEGATE') }}
|
|
</div>
|
|
</q-tab>
|
|
<q-tab
|
|
name="AGENCY"
|
|
@click="
|
|
async () => {
|
|
selectorLabel = 'AGENCY';
|
|
statusFilter = 'all';
|
|
currentPage = 1;
|
|
inputSearch = '';
|
|
flowStore.rotate();
|
|
}
|
|
"
|
|
>
|
|
<div
|
|
class="row"
|
|
:class="
|
|
selectorLabel === 'AGENCY' ? 'text-bold' : 'app-text-muted'
|
|
"
|
|
>
|
|
{{ $t('AGENCY') }}
|
|
</div>
|
|
</q-tab>
|
|
</q-tabs>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col scroll q-pa-md full-width">
|
|
<div v-if="userData && userData.total > 0 && !inputSearch">
|
|
<q-table
|
|
flat
|
|
bordered
|
|
:grid="modeView"
|
|
:rows="
|
|
userData.result.filter((v) => {
|
|
if (
|
|
statusFilter === 'statusACTIVE' &&
|
|
v.status === 'INACTIVE'
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
if (
|
|
statusFilter === 'statusINACTIVE' &&
|
|
v.status !== 'INACTIVE'
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
})
|
|
"
|
|
:columns="columns"
|
|
class="full-width"
|
|
card-container-class="q-col-gutter-md"
|
|
row-key="name"
|
|
:rows-per-page-options="[0]"
|
|
hide-pagination
|
|
:visible-columns="fieldSelected"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr class="surface-2" :props="props">
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
{{ $t(col.label) }}
|
|
</q-th>
|
|
<q-th auto-width />
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template v-slot:body="props">
|
|
<q-tr
|
|
:class="{
|
|
'app-text-muted': props.row.status === 'INACTIVE',
|
|
'status-active': props.row.status !== 'INACTIVE',
|
|
'status-inactive': props.row.status === 'INACTIVE',
|
|
}"
|
|
:props="props"
|
|
>
|
|
<q-td v-if="fieldSelected.includes('name')">
|
|
<div class="row items-center">
|
|
<div
|
|
style="
|
|
width: 50px;
|
|
display: flex;
|
|
margin-bottom: var(--size-2);
|
|
"
|
|
>
|
|
<div class="branch-card__icon">
|
|
<q-avatar size="md">
|
|
<q-img
|
|
:src="
|
|
props.row.profileImageUrl ?? '/no-profile.png'
|
|
"
|
|
>
|
|
<template #error>
|
|
<q-img src="/no-profile.png" />
|
|
</template>
|
|
</q-img>
|
|
</q-avatar>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="col">
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
|
|
: `${props.row.firstName} ${props.row.lastName}`.trim()
|
|
}}
|
|
|
|
<q-icon
|
|
class="q-pl-xs"
|
|
:class="{
|
|
'symbol-gender': props.row.gender,
|
|
'symbol-gender__male': props.row.gender === 'male',
|
|
'symbol-gender__female':
|
|
props.row.gender === 'female',
|
|
}"
|
|
:name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
|
|
width="24px"
|
|
/>
|
|
</div>
|
|
<div class="col app-text-muted">
|
|
{{ props.row.code || '-' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-td>
|
|
<q-td v-if="fieldSelected.includes('type')">
|
|
<span
|
|
class="tags"
|
|
:class="{
|
|
[`tags__${
|
|
{
|
|
USER: 'cyan',
|
|
MESSENGER: 'yellow',
|
|
DELEGATE: 'red',
|
|
AGENCY: 'magenta',
|
|
}[props.row.userType as string] || 'pink'
|
|
} }`]: true,
|
|
}"
|
|
>
|
|
{{
|
|
$t(
|
|
{
|
|
USER: 'USER',
|
|
MESSENGER: 'MESSENGER',
|
|
DELEGATE: 'DELEGATE',
|
|
AGENCY: 'AGENCY',
|
|
}[props.row.userType as string] || 'USER',
|
|
)
|
|
}}
|
|
</span>
|
|
</q-td>
|
|
|
|
<q-td v-if="fieldSelected.includes('telephoneNo')">
|
|
{{ props.row.telephoneNo || '-' }}
|
|
</q-td>
|
|
|
|
<q-td v-if="fieldSelected.includes('birthDate')">
|
|
{{ calculateAge(props.row.birthDate) || '-' }}
|
|
</q-td>
|
|
|
|
<q-td v-if="fieldSelected.includes('email')">
|
|
{{ props.row.email || '-' }}
|
|
</q-td>
|
|
|
|
<q-td v-if="fieldSelected.includes('userRole')">
|
|
{{ props.row.userRole || '-' }}
|
|
</q-td>
|
|
|
|
<q-td>
|
|
<q-btn
|
|
icon="mdi-eye-outline"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click.stop="
|
|
() => {
|
|
openDialog('INFO', props.row.id);
|
|
}
|
|
"
|
|
/>
|
|
|
|
<q-btn
|
|
:id="`btn-dots-${props.row.code}`"
|
|
icon="mdi-dots-vertical"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click.stop
|
|
:key="props.row.id"
|
|
>
|
|
<q-menu class="bordered">
|
|
<q-list v-close-popup>
|
|
<q-item
|
|
:id="`view-detail-btn-${props.row.username}-view`"
|
|
@click.stop="
|
|
() => {
|
|
openDialog('INFO', props.row.id);
|
|
}
|
|
"
|
|
v-close-popup
|
|
clickable
|
|
dense
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
>
|
|
<q-icon
|
|
name="mdi-eye-outline"
|
|
class="col-3"
|
|
size="xs"
|
|
style="color: hsl(var(--green-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('viewDetail') }}
|
|
</span>
|
|
</q-item>
|
|
|
|
<q-item
|
|
:id="`view-detail-btn-${props.row.username}-edit`"
|
|
v-close-popup
|
|
clickable
|
|
dense
|
|
class="row q-py-sm"
|
|
style="white-space: nowrap"
|
|
@click="
|
|
() => {
|
|
openDialog('INFO', props.row.id, true);
|
|
}
|
|
"
|
|
>
|
|
<q-icon
|
|
name="mdi-pencil-outline"
|
|
class="col-3"
|
|
size="xs"
|
|
style="color: hsl(var(--cyan-6-hsl))"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('edit') }}
|
|
</span>
|
|
</q-item>
|
|
<q-item
|
|
:id="`view-detail-btn-${props.row.username}-delete`"
|
|
dense
|
|
v-close-popup
|
|
:clickable="props.row.status === 'CREATED'"
|
|
class="row"
|
|
:class="{
|
|
'surface-3': props.row.status !== 'CREATED',
|
|
'app-text-muted': props.row.status !== 'CREATED',
|
|
}"
|
|
style="white-space: nowrap"
|
|
@click="onDelete(props.row.id)"
|
|
>
|
|
<q-icon
|
|
name="mdi-trash-can-outline"
|
|
size="xs"
|
|
class="col-3"
|
|
:class="{
|
|
'app-text-negative':
|
|
props.row.status === 'CREATED',
|
|
}"
|
|
/>
|
|
<span class="col-9 q-px-md flex items-center">
|
|
{{ $t('delete') }}
|
|
</span>
|
|
</q-item>
|
|
|
|
<q-item dense>
|
|
<q-item-section class="q-py-sm">
|
|
<div class="q-pa-sm surface-2 rounded">
|
|
<q-toggle
|
|
:id="`view-detail-btn-${props.row.username}-status`"
|
|
dense
|
|
size="sm"
|
|
:label="
|
|
props.row.status !== 'INACTIVE'
|
|
? $t('switchOnLabel')
|
|
: $t('switchOffLabel')
|
|
"
|
|
@click="
|
|
async () => {
|
|
triggerChangeStatus(
|
|
props.row.id,
|
|
props.row.status,
|
|
);
|
|
}
|
|
"
|
|
:model-value="props.row.status !== 'INACTIVE'"
|
|
/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template v-slot:item="props">
|
|
<div class="col-md-3 col-sm-6 col-12">
|
|
<PersonCard
|
|
:data="{
|
|
code: props.row.code,
|
|
name:
|
|
$i18n.locale === 'en-US'
|
|
? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
|
|
: `${props.row.firstName} ${props.row.lastName}`.trim(),
|
|
img: props.row.profileImageUrl,
|
|
male: props.row.gender === 'male',
|
|
female: props.row.gender === 'female',
|
|
detail: [
|
|
{
|
|
icon: 'mdi-phone',
|
|
value: props.row.telephoneNo,
|
|
},
|
|
{
|
|
icon: 'mdi-clock-outline',
|
|
value:
|
|
(props.row.birthDate &&
|
|
calculateAge(props.row.birthDate)) ||
|
|
'-',
|
|
},
|
|
],
|
|
}"
|
|
:tag="[
|
|
{
|
|
color:
|
|
{
|
|
USER: 'cyan',
|
|
MESSENGER: 'yellow',
|
|
DELEGATE: 'red',
|
|
AGENCY: 'magenta',
|
|
}[props.row.userType as string] || 'pink',
|
|
value: $t(props.row.userType),
|
|
},
|
|
]"
|
|
:disabled="props.row.status === 'INACTIVE'"
|
|
@update-card="(a, b) => openDialog(a, props.row.id, b)"
|
|
@delete-card="onDelete(props.row.id)"
|
|
@enter-card="(a) => openDialog(a, props.row.id)"
|
|
@toggle-status="
|
|
triggerChangeStatus(props.row.id, props.row.status)
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
|
|
<div
|
|
v-if="userData && userData.total === 0 && !inputSearch"
|
|
class="full-height column"
|
|
>
|
|
<div class="flex justify-end">
|
|
<TooltipComponent
|
|
title="personnelTooltipTitle"
|
|
caption="personnelTooltipCaption"
|
|
imgSrc="personnel-table-"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col items-center flex justify-center">
|
|
<AddButton
|
|
:label="'personnelAdd'"
|
|
:cyanOn="true"
|
|
@trigger="openDialog('FORM')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="userData?.total === 0 && !!inputSearch"
|
|
class="row col full-width items-center justify-center"
|
|
style="min-height: 250px"
|
|
>
|
|
<NoData :not-found="!!inputSearch" />
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="row justify-between items-center q-px-md q-py-sm"
|
|
v-if="currentMaxPage > 0"
|
|
>
|
|
<div class="col-4">
|
|
<div class="row items-center no-wrap">
|
|
<div
|
|
class="app-text-muted"
|
|
style="width: 80px"
|
|
v-if="$q.screen.gt.sm"
|
|
>
|
|
{{ $t('showing') }}
|
|
</div>
|
|
<div>
|
|
<q-btn-dropdown
|
|
dense
|
|
unelevated
|
|
:label="pageSize"
|
|
class="bordered q-pl-md"
|
|
>
|
|
<q-list>
|
|
<q-item
|
|
v-for="v in [10, 30, 50, 100, 500, 1000]"
|
|
:key="v"
|
|
clickable
|
|
v-close-popup
|
|
@click="
|
|
async () => {
|
|
pageSize = v;
|
|
await fetchUserList();
|
|
}
|
|
"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>{{ v }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-4 row justify-center app-text-muted">
|
|
{{
|
|
$t('recordsPage', {
|
|
resultcurrentPage: userData?.result.length,
|
|
total: userData?.total,
|
|
})
|
|
}}
|
|
</div>
|
|
<div class="col-4 row justify-end">
|
|
<PaginationComponent
|
|
v-model:current-page="currentPage"
|
|
v-model:max-page="currentMaxPage"
|
|
:fetch-data="async () => await fetchUserList()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DrawerInfo
|
|
v-if="currentUser"
|
|
:category="$t('personnelTitle')"
|
|
bg-on
|
|
:badgeClass="
|
|
formData.gender === 'male'
|
|
? 'app-bg-male text-white'
|
|
: formData.gender === 'female'
|
|
? '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">
|
|
<ProfileUpload
|
|
prefix-id="drawer-info-personnel"
|
|
v-model:url-profile="profileUrl"
|
|
v-model:status-toggle="statusToggle"
|
|
v-model:profile-submit="profileSubmit"
|
|
@input-file="inputFile.click()"
|
|
@cancel-file="inputFile.value = ''"
|
|
/>
|
|
|
|
<!-- <AppBox class="surface-1" style="padding: 0">
|
|
<PersonCard
|
|
:can-edit-profile="infoDrawerEdit"
|
|
:data="{
|
|
code: currentUser.code,
|
|
name:
|
|
$i18n.locale === 'en-US'
|
|
? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`.trim()
|
|
: `${currentUser.firstName} ${currentUser.lastName}`.trim(),
|
|
img: currentUser.profileImageUrl,
|
|
male: currentUser.gender === 'male',
|
|
female: currentUser.gender === 'female',
|
|
}"
|
|
no-hover
|
|
no-action
|
|
no-bg
|
|
@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
|
|
prefix-id="drawer-info-personnel"
|
|
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
|
|
prefix-id="form-dialog-personnel"
|
|
v-model:url-profile="urlProfile"
|
|
v-model:status-toggle="statusToggle"
|
|
v-model:profile-submit="profileSubmit"
|
|
@input-file="inputFile.click()"
|
|
@cancel-file="inputFile.value = ''"
|
|
/>
|
|
</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
|
|
prefix-id="form-dialog-personnel"
|
|
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 scoped>
|
|
.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);
|
|
}
|
|
|
|
.slide-enter-active {
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
|
|
.slide-leave-active {
|
|
transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
|
|
}
|
|
|
|
.slide-enter-from,
|
|
.slide-leave-to {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.status-active {
|
|
--_branch-status-color: var(--green-6-hsl);
|
|
}
|
|
|
|
.status-inactive {
|
|
--_branch-status-color: var(--red-4-hsl);
|
|
--_branch-badge-bg: var(--red-4-hsl);
|
|
filter: grayscale(0.5);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.branch-card__icon {
|
|
background-color: hsla(var(--_branch-card-bg) / 0.15);
|
|
border-radius: 50%;
|
|
padding: var(--size-1);
|
|
position: relative;
|
|
transform: rotate(45deg);
|
|
|
|
&::after {
|
|
content: ' ';
|
|
display: block;
|
|
block-size: 0.5rem;
|
|
aspect-ratio: 1;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
right: -0.1rem;
|
|
top: calc(50% - 0.25rem);
|
|
bottom: calc(50% - 0.25rem);
|
|
background-color: hsla(var(--_branch-status-color) / 1);
|
|
}
|
|
|
|
& :deep(.q-avatar) {
|
|
transform: rotate(-45deg);
|
|
color: hsla(var(--_branch-card-bg) / 1);
|
|
}
|
|
}
|
|
|
|
.tags {
|
|
display: inline-block;
|
|
color: hsla(var(--_color) / 1);
|
|
background: hsla(var(--_color) / 0.15);
|
|
border-radius: var(--radius-2);
|
|
padding-inline: var(--size-2);
|
|
}
|
|
|
|
.tags__cyan {
|
|
--_color: var(--cyan-7-hsl);
|
|
}
|
|
|
|
.tags__yellow {
|
|
--_color: var(--orange-4-hsl);
|
|
}
|
|
|
|
.tags__red {
|
|
--_color: var(--red-6-hsl);
|
|
}
|
|
|
|
.tags__magenta {
|
|
--_color: var(--pink-8-hsl);
|
|
}
|
|
|
|
.tags__pink {
|
|
--_color: var(--pink-6-hsl);
|
|
}
|
|
|
|
.dark .tags__magenta {
|
|
--_color: var(--pink-7-hsl);
|
|
}
|
|
|
|
& .symbol-gender {
|
|
color: hsla(var(--_fg));
|
|
|
|
&.symbol-gender__male {
|
|
--_fg: var(--gender-male);
|
|
}
|
|
|
|
&.symbol-gender__female {
|
|
--_fg: var(--gender-female);
|
|
}
|
|
}
|
|
</style>
|