chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: edit layout ui input

Browse source
This commit is contained in:
Net 2024-08-02 15:32:51 +07:00
parent 2be948dcfa
commit d1b9b95d97
3 changed files with 496 additions and 285 deletions
Download patch file Download diff file Expand all files Collapse all files

173
src/pages/02_personnel-management/MainPage.vue
View file

@ -32,7 +32,8 @@ 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';
status;
import ProfileBanner from 'src/components/ProfileBanner.vue';
import SideMenu from 'src/components/SideMenu.vue';
const { locale, t } = useI18n();
const $q = useQuasar();
@ -109,9 +110,29 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
},
]);
const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
{
icon: 'mdi-account',
color: 'hsl(var(--info-bg))',
bgColor: 'var(--surface-1)',
},
{
icon: 'mdi-map-marker-radius',
color: 'hsl(var(--info-bg))',
bgColor: 'var(--surface-1)',
},
{
icon: 'mdi-briefcase',
color: 'hsl(var(--info-bg))',
bgColor: 'var(--surface-1)',
},
]);
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>();
@ -175,20 +196,22 @@ const formData = ref<UserCreate>({
status: 'CREATED',
});
const profileUrl = ref<string | null>('');
const profileFile = ref<File | undefined>(undefined);
const isImageEdit = ref<boolean>(false);
const imageUrl = ref<string | null>('');
const profileFileImg = ref<File | null>(null);
const imageDialog = ref(false);
const inputFile = (() => {
const inputFileImg = (() => {
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 (typeof reader.result === 'string') imageUrl.value = reader.result;
if (infoDrawerEdit.value && currentUser.value)
currentUser.value.profileImageUrl = profileUrl.value as string;
currentUser.value.profileImageUrl = imageUrl.value as string;
// profileUrl.value = currentUser.value?.profileImageUrl as string;
// if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
@ -196,9 +219,9 @@ const inputFile = (() => {
});
element.addEventListener('change', () => {
profileFile.value = element.files?.[0];
if (profileFile.value) {
reader.readAsDataURL(profileFile.value);
profileFileImg.value = element.files?.[0];
if (profileFileImg.value) {
reader.readAsDataURL(profileFileImg.value);
}
});
@ -259,12 +282,12 @@ reader.addEventListener('load', () => {
if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
});
watch(profileFile, () => {
if (profileFile.value) reader.readAsDataURL(profileFile.value);
watch(profileFileImg, () => {
if (profileFileImg.value) reader.readAsDataURL(profileFileImg.value);
});
inputFile.addEventListener('change', (e) => {
profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
inputFileImg.addEventListener('change', (e) => {
profileFileImg.value = (e.currentTarget as HTMLInputElement).files?.[0];
});
const selectorList = computed(() => [
@ -360,7 +383,7 @@ function onClose() {
userId.value = '';
userCode.value = '';
urlProfile.value = undefined;
profileFile.value = undefined;
profileFileImg.value = null;
infoDrawerEdit.value = false;
agencyFile.value = [];
modal.value = false;
@ -375,7 +398,7 @@ function onClose() {
async function onSubmit() {
if (profileSubmit.value) {
formData.value.profileImage = profileFile.value as File;
formData.value.profileImage = profileFileImg.value as File;
} else {
formData.value.profileImage = null;
}
@ -520,7 +543,7 @@ async function assignFormData(idEdit: string) {
if (foundUser) {
currentUser.value = foundUser;
infoPersonId.value = currentUser.value.id;
profileUrl.value = currentUser.value.profileImageUrl;
imageUrl.value = currentUser.value.profileImageUrl;
formData.value = {
branchId: foundUser.branch[0]?.id,
provinceId: foundUser.provinceId,
@ -568,7 +591,7 @@ async function assignFormData(idEdit: string) {
userId.value = foundUser.id;
if (foundUser.branch) {
if (foundUser.branch[0].isHeadOffice) {
if (foundUser.branch?.[0].isHeadOffice) {
hqId.value = foundUser.branch[0].id as string;
} else {
hqId.value = foundUser.branch[0].headOfficeId as string;
@ -593,6 +616,12 @@ async function assignFormData(idEdit: string) {
}
}
function openImageDialog(isEdit?: boolean) {
if (isEdit) isImageEdit.value = true;
else isImageEdit.value = false;
imageDialog.value = true;
}
onMounted(async () => {
utilsStore.currentTitle.title = 'personnelManagement';
utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
@ -1472,11 +1501,111 @@ watch(
v-model:subDistrictId="formData.subDistrictId"
v-model:zipCode="formData.zipCode"
>
<div class="q-mx-lg q-mt-lg">
<ProfileBanner
active
hideFade
:img="
imageUrl ||
{
male: '/no-img-man.png',
female: '/no-img-female.png',
}[formData.gender]
"
:cover="imageUrl || null"
:title="`${formData.firstName} ${formData.lastName}`"
:caption="`${formData.firstNameEN} ${formData.lastNameEN}`"
color="hsla(var(--pink-6-hsl)/1)"
bgColor="hsla(var(--pink-6-hsl)/0.15)"
@view="openImageDialog"
@edit="inputFileImg.click()"
:readonly="!infoDrawerEdit"
:menu="formMenuIcon"
/>
</div>
<!-- ย้อนกลับ -->
<div
class="col surface-1 q-ma-lg rounded bordered scroll row"
id="personnel-form"
>
<div class="col">
<div style="position: sticky; top: 0" class="q-pa-sm">
<SideMenu
:menu="[
{
name: $t('formDialogTitleInformation'),
anchor: 'form-information',
},
{
name: $t('formDialogTitlePersonal'),
anchor: 'form-personal',
},
{
name: $t('formDialogTitleAddressPersonnel'),
anchor: 'form-address',
},
{
name: $t('formDialogTitleByType'),
anchor: 'form-work',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#personnel-form"
/>
</div>
</div>
<div class="col-10 q-pa-md q-gutter-y-xl">
<FormInformation
id="form-information"
v-model:hq-id="hqId"
v-model:br-id="brId"
v-model:user-type="formData.userType"
v-model:user-role="formData.userRole"
v-model:username="formData.username"
v-model:user-code="userCode"
dense
outlined
separator
:title="$t('formDialogTitleInformation')"
:readonly="!infoDrawerEdit"
:usernameReadonly="isEdit"
/>
<FormPerson
id="form-personal"
v-model:first-name="formData.firstName"
v-model:last-name="formData.lastName"
v-model:first-name-en="formData.firstNameEN"
v-model:last-name-en="formData.lastNameEN"
v-model:telephone-no="formData.telephoneNo"
v-model:email="formData.email"
v-model:gender="formData.gender"
v-model:birth-date="formData.birthDate"
:title="$t('formDialogTitlePersonal')"
prefix-id="drawer-info-personnel"
dense
outlined
separator
:readonly="!infoDrawerEdit"
/>
</div>
</div>
<!-- <div
class="col surface-1 q-ma-lg rounded bordered scroll row"
id="branch-info"
>
<div class="col-10 q-pa-md q-gutter-y-xl">
<ProfileUpload
prefix-id="drawer-info-personnel"
v-model:url-profile="profileUrl"
@ -1485,7 +1614,7 @@ watch(
@input-file="inputFile.click()"
@cancel-file="inputFile.value = ''"
/>
<!-- <AppBox class="surface-1" style="padding: 0">
<AppBox class="surface-1" style="padding: 0">
<PersonCard
:can-edit-profile="infoDrawerEdit"
:data="{
@ -1503,7 +1632,7 @@ watch(
no-bg
@edit-profile="inputFile.click()"
/>
</AppBox> -->
</AppBox>
<FormInformation
dense
outlined
@ -1553,7 +1682,7 @@ watch(
v-model:userId="userId"
/>
</div>
</div>
</div> -->
</InfoForm>
</DrawerInfo>
@ -1581,8 +1710,8 @@ watch(
v-model:url-profile="urlProfile"
v-model:status-toggle="statusToggle"
v-model:profile-submit="profileSubmit"
@input-file="inputFile.click()"
@cancel-file="inputFile.value = ''"
@input-file="inputFileImg.click()"
@cancel-file="inputFileImg.value = ''"
/>
</template>