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

feat: Personnel info (bg, layout)

Browse source
This commit is contained in:
puriphatt 2024-04-11 15:01:02 +07:00
parent 1e680ec636
commit 0206372cef
3 changed files with 373 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/personnel-info-bg-dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/personnel-info-bg-light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

572
src/pages/02_personnel-management/person-info/MainPage.vue
View file

@ -2,6 +2,7 @@
import { useRoute } from 'vue-router';
import { onMounted, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import useUserStore from 'stores/user';
import useBranchStore from 'stores/branch';
@ -20,6 +21,7 @@ import { reactive } from 'vue';
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const addrStore = useAddressStore();
const branchStore = useBranchStore();
@ -115,6 +117,9 @@ onMounted(async () => {
getCurrentUser();
getHQ();
getProvince();
if (userStore.userOption.roleOpts.length === 0) {
userStore.fetchRoleOption();
}
});
watch(() => route.params.id, getCurrentUser);
@ -125,209 +130,358 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
</script>
<template>
<div class="text-h6 text-weight-bold q-mb-md" v-if="currentUser">
<q-btn
flat
round
padding="xs"
icon="mdi-arrow-left"
style="color: hsl(var(--info-bg))"
@click="router.go(-1)"
/>
{{
$i18n.locale === 'en-US'
? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
: `${currentUser.firstName} ${currentUser.lastName}`
}}
</div>
<div
class="info-container"
:class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
class="q-pa-md info-bg"
:style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
>
<div>
<PersonCard
:list="[
{
id: currentUser.id,
img: `${currentUser.profileImageUrl}`,
name: `${currentUser.firstName} ${currentUser.lastName}`,
male: currentUser.gender === 'male',
female: currentUser.gender === 'female',
detail: [
{ label: 'ตำแหน่ง', value: currentUser.userType },
{ label: 'โทรศัพท์', value: currentUser.telephoneNo },
{ label: 'อีเมล', value: currentUser.email },
],
badge: currentUser.code,
disabled: currentUser.status === 'INACTIVE',
},
]"
v-if="currentUser"
:grid-columns="1"
no-hover
no-action
/>
</div>
<AppBox class="surface-1" rounded bordered v-if="currentUser">
<div class="row q-col-gutter-md">
<q-select
dense
outlined
emit-value
map-options
readonly
class="col-6"
option-value="id"
option-label="code"
id="selectHQ"
v-model="currentHQ"
@update:model-value="currentBR = null"
:label="$t('branchHQLabel')"
:options="hq"
/>
<q-select
v-model="currentBR"
dense
outlined
emit-value
map-options
readonly
class="col-6"
id="selectBR"
option-value="id"
option-label="code"
:label="$t('branchLabel')"
:options="br"
/>
<q-input
dense
readonly
outlined
:label="$t('firstname')"
class="col-3"
v-model="currentUser.firstName"
/>
<div class="col-12 group-label">{{ $t('address') }}</div>
<q-input
dense
outlined
readonly
id="address"
label="ที่อยู่"
class="col-12"
v-model="currentUser.addressEN"
/>
<q-select
dense
outlined
emit-value
map-options
readonly
id="selectProvince"
v-model="currentUser.provinceId"
option-value="id"
option-label="name"
:label="$t('province')"
class="col-3"
@update:model-value="
(currentUser.districtId = null), (currentUser.subDistrictId = null)
"
:options="opts.province"
/>
<q-select
dense
outlined
emit-value
map-options
readonly
id="selectDistrict"
v-model="currentUser.districtId"
option-value="id"
option-label="name"
:label="$t('district')"
class="col-3"
@update:model-value="currentUser.subDistrictId = null"
:options="opts.district"
/>
<q-select
dense
outlined
readonly
emit-value
map-options
id="SelectSubDistrict"
v-model="currentUser.subDistrictId"
option-value="id"
option-label="name"
:label="$t('subDistrict')"
class="col-3"
:options="opts.subDistrict"
/>
<q-input
dense
readonly
outlined
:label="$t('zipCode')"
class="col-3"
v-model="currentUser.zipCode"
/>
<div class="col-12 group-label">{{ $t('address') }} EN</div>
<q-input
dense
outlined
readonly
id="addressEN"
label="ที่อยู่"
class="col-12"
v-model="currentUser.addressEN"
/>
<q-select
dense
outlined
emit-value
map-options
readonly
id="selectProvinceEN"
v-model="currentUser.provinceId"
option-value="id"
option-label="nameEN"
:label="$t('province')"
class="col-3"
@update:model-value="
(currentUser.districtId = null), (currentUser.subDistrictId = null)
"
:options="opts.province"
/>
<q-select
dense
outlined
emit-value
map-options
readonly
id="selectDistrictEN"
v-model="currentUser.districtId"
option-value="id"
option-label="nameEN"
:label="$t('district')"
class="col-3"
@update:model-value="currentUser.subDistrictId = null"
:options="opts.district"
/>
<q-select
dense
outlined
readonly
emit-value
map-options
id="SelectSubDistrictEN"
v-model="currentUser.subDistrictId"
option-value="id"
option-label="nameEN"
:label="$t('subDistrict')"
class="col-3"
:options="opts.subDistrict"
/>
<q-input
dense
readonly
outlined
zip="zipEN"
:label="$t('zipCode')"
class="col-3"
v-model="currentUser.zipCode"
<div
class="info-container"
:class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
>
<div>
<PersonCard
:list="[
{
id: currentUser.id,
img: `${currentUser.profileImageUrl}`,
name:
$i18n.locale === 'en-US'
? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
: `${currentUser.firstName} ${currentUser.lastName}`,
male: currentUser.gender === 'male',
female: currentUser.gender === 'female',
detail: [
{ label: 'ตำแหน่ง', value: currentUser.userType },
{ label: 'โทรศัพท์', value: currentUser.telephoneNo },
{ label: 'อีเมล', value: currentUser.email },
],
badge: currentUser.code,
disabled: currentUser.status === 'INACTIVE',
},
]"
v-if="currentUser"
:grid-columns="1"
no-hover
no-action
style="box-shadow: var(--shadow-2)"
/>
<div class="col-12 row items-center q-pt-md q-col-gutter-x-md">
<div class="col-6">
<q-btn class="btn-edt full-width" padding="8px 8px">
<q-icon size="16px" name="mdi-pencil-outline" class="q-pr-xs" />
<span class="text-caption">แก้ไขข้อมูล</span>
</q-btn>
</div>
<div class="col-6">
<q-btn class="btn-delete full-width" padding="8px 8px">
<q-icon
size="16px"
name="mdi-trash-can-outline"
class="q-pr-xs"
/>
<span class="text-caption">ลบข้อมูล</span>
</q-btn>
</div>
</div>
</div>
</AppBox>
<AppBox
class="surface-1"
rounded
bordered
v-if="currentUser"
style="box-shadow: var(--shadow-2)"
>
<div class="row q-col-gutter-md">
<q-select
dense
borderless
emit-value
map-options
readonly
hide-dropdown-icon
class="col-6"
option-value="id"
option-label="code"
id="selectHQ"
v-model="currentHQ"
@update:model-value="currentBR = null"
:label="$t('branchHQLabel')"
:options="hq"
/>
<q-select
v-model="currentBR"
dense
borderless
emit-value
map-options
readonly
hide-dropdown-icon
class="col-6"
id="selectBR"
option-value="id"
option-label="code"
:label="$t('branchLabel')"
:options="br"
/>
<q-select
dense
borderless
emit-value
map-options
options-dense
hide-bottom-space
readonly
hide-dropdown-icon
class="col-3"
option-value="value"
option-label="label"
:label="$t('userType')"
v-model="currentUser.userType"
:options="userStore.userOption.userTypeOpts"
:rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
/>
<q-select
dense
borderless
emit-value
map-options
options-dense
hide-bottom-space
readonly
hide-dropdown-icon
class="col-3"
:label="$t('userRole')"
option-label="label"
option-value="value"
v-model="currentUser.userRole"
:options="userStore.userOption.roleOpts"
:rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
/>
<q-input
dense
readonly
borderless
:label="$t('userCode')"
class="col-6"
v-model="currentUser.code"
/>
<q-input
dense
borderless
hide-bottom-space
readonly
class="col-3"
label="ชื่อ ภาษาไทย"
v-model="currentUser.firstName"
:rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
/>
<q-input
dense
borderless
hide-bottom-space
readonly
class="col-3"
label="นามสกุล ภาษาไทย"
v-model="currentUser.lastName"
:rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
/>
<q-input
dense
borderless
hide-bottom-space
readonly
class="col-3"
label="ชื่อ ภาษาอังกฤษ"
v-model="currentUser.firstNameEN"
:rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
/>
<q-input
dense
borderless
hide-bottom-space
readonly
class="col-3"
label="นามสกุล ภาษาอังกฤษ"
v-model="currentUser.lastNameEN"
:rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
/>
<q-input
dense
readonly
borderless
label="เบอร์โทร"
class="col-6"
v-model="currentUser.zipCode"
/>
<q-input
dense
readonly
borderless
label="อีเมล"
class="col-6"
v-model="currentUser.zipCode"
/>
<div class="col-12 group-label">{{ $t('address') }}</div>
<q-input
dense
borderless
readonly
id="address"
label="ที่อยู่"
class="col-12"
v-model="currentUser.addressEN"
/>
<q-select
dense
borderless
emit-value
map-options
readonly
hide-dropdown-icon
id="selectProvince"
v-model="currentUser.provinceId"
option-value="id"
option-label="name"
:label="$t('province')"
class="col-3"
@update:model-value="
(currentUser.districtId = null),
(currentUser.subDistrictId = null)
"
:options="opts.province"
/>
<q-select
dense
borderless
emit-value
map-options
readonly
hide-dropdown-icon
id="selectDistrict"
v-model="currentUser.districtId"
option-value="id"
option-label="name"
:label="$t('district')"
class="col-3"
@update:model-value="currentUser.subDistrictId = null"
:options="opts.district"
/>
<q-select
dense
borderless
readonly
emit-value
map-options
hide-dropdown-icon
id="SelectSubDistrict"
v-model="currentUser.subDistrictId"
option-value="id"
option-label="name"
:label="$t('subDistrict')"
class="col-3"
:options="opts.subDistrict"
/>
<q-input
dense
readonly
borderless
:label="$t('zipCode')"
class="col-3"
v-model="currentUser.zipCode"
/>
<div class="col-12 group-label">{{ $t('address') }} EN</div>
<q-input
dense
borderless
hide-dropdown-icon
readonly
id="addressEN"
label="ที่อยู่"
class="col-12"
v-model="currentUser.addressEN"
/>
<q-select
dense
borderless
emit-value
map-options
hide-dropdown-icon
readonly
id="selectProvinceEN"
v-model="currentUser.provinceId"
option-value="id"
option-label="nameEN"
:label="$t('province')"
class="col-3"
@update:model-value="
(currentUser.districtId = null),
(currentUser.subDistrictId = null)
"
:options="opts.province"
/>
<q-select
dense
emit-value
map-options
borderless
readonly
hide-dropdown-icon
id="selectDistrictEN"
v-model="currentUser.districtId"
option-value="id"
option-label="nameEN"
:label="$t('district')"
class="col-3"
@update:model-value="currentUser.subDistrictId = null"
:options="opts.district"
/>
<q-select
dense
borderless
readonly
hide-dropdown-icon
emit-value
map-options
id="SelectSubDistrictEN"
v-model="currentUser.subDistrictId"
option-value="id"
option-label="nameEN"
:label="$t('subDistrict')"
class="col-3"
:options="opts.subDistrict"
/>
<q-input
dense
readonly
borderless
zip="zipEN"
:label="$t('zipCode')"
class="col-3"
v-model="currentUser.zipCode"
/>
</div>
</AppBox>
</div>
</div>
</template>
@ -350,4 +504,24 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
grid-template-columns: 1fr 4fr;
}
}
.info-bg {
background-color: var(--surface-1);
height: 45vw;
background-repeat: no-repeat;
background-size: cover;
}
.btn-edt {
color: white;
background-color: hsl(var(--info-bg));
border-radius: var(--radius-2);
}
.btn-delete {
color: hsl(var(--info-bg));
background-color: var(--surface-1);
border-radius: var(--radius-2);
border: 1px solid hsl(var(--info-bg));
}
</style>