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

Merge branch 'dev/phat-2' into develop

Browse source
This commit is contained in:
puriphatt 2024-04-18 09:07:22 +07:00
commit 2869780234
8 changed files with 151 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/components/02_personnel-management/FormAddress.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { onMounted, ref, watch, reactive } from 'vue';
import useAddressStore, {
District,
Province,
@ -22,60 +22,44 @@ const addressEN = defineModel('addressEN', { default: '' });
const provinceId = defineModel<string | null | undefined>('provinceId');
const districtId = defineModel<string | null | undefined>('districtId');
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
const zipCode = defineModel<string>('zipCode', { default: '' });
const zipCode = defineModel<string | null | undefined>('zipCode');
const isOpen = defineModel<boolean>('isOpen', { default: false });
const addrOptions = ref<{
provinceOps?: Province[];
districtOps?: District[];
subDistrictOps?: SubDistrict[];
}>({});
const addrOptions = reactive<{
provinceOps: Province[];
districtOps: District[];
subDistrictOps: SubDistrict[];
}>({
provinceOps: [],
districtOps: [],
subDistrictOps: [],
});
async function fetchProvince() {
const result = await adrressStore.fetchProvince();
if (result) {
addrOptions.value.provinceOps = result;
}
if (result) addrOptions.provinceOps = result;
}
async function fetchDistrict(id: string | undefined) {
if (id) {
const result = await adrressStore.fetchDistrictByProvinceId(id);
if (result) {
addrOptions.value.districtOps = result;
}
}
async function fetchDistrict() {
if (!provinceId.value) return;
const result = await adrressStore.fetchDistrictByProvinceId(provinceId.value);
if (result) addrOptions.districtOps = result;
}
async function fetchSubDistrict(id: string | undefined) {
if (id) {
const result = await adrressStore.fetchSubDistrictByProvinceId(id);
if (result) {
addrOptions.value.subDistrictOps = result;
}
}
}
async function selectProvince(id: string) {
if (!id) return;
districtId.value = undefined;
subDistrictId.value = undefined;
addrOptions.value.districtOps = [];
addrOptions.value.subDistrictOps = [];
zipCode.value = '';
await fetchDistrict(id);
}
async function selectDistrict(id: string) {
if (!id) return;
subDistrictId.value = undefined;
zipCode.value = '';
await fetchSubDistrict(id);
async function fetchSubDistrict() {
if (!districtId.value) return;
const result = await adrressStore.fetchSubDistrictByProvinceId(
districtId.value,
);
if (result) addrOptions.subDistrictOps = result;
}
async function selectSubDistrict(id: string) {
if (!id) return;
zipCode.value =
addrOptions.value.subDistrictOps
addrOptions.subDistrictOps
?.filter((x) => x.id === id)
.map((x) => x.zipCode)[0] ?? '';
}
@ -83,6 +67,10 @@ async function selectSubDistrict(id: string) {
onMounted(async () => {
await fetchProvince();
});
watch(isOpen, fetchDistrict);
watch(provinceId, fetchDistrict);
watch(districtId, fetchSubDistrict);
</script>
<template>
<div class="col-12 app-text-muted">
@ -123,12 +111,12 @@ onMounted(async () => {
:label="$t('province')"
class="col-3"
:options="addrOptions.provinceOps"
@update:model-value="(v: string) => selectProvince(v)"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('formDialogInputProvinceValidate'),
]"
@update:model-value="districtId = subDistrictId = zipCode = null"
/>
<q-select
:dense="dense"
@ -145,12 +133,12 @@ onMounted(async () => {
:label="$t('district')"
class="col-3"
:options="addrOptions.districtOps"
@update:model-value="(v: string) => selectDistrict(v)"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('formDialogInputDistrictValidate'),
]"
@update:model-value="subDistrictId = zipCode = null"
/>
<q-select
:dense="dense"
@ -161,18 +149,22 @@ onMounted(async () => {
emit-value
map-options
id="select-sub-district"
v-model="subDistrictId"
:model-value="
addrOptions.subDistrictOps.length === 1
? (subDistrictId = addrOptions.subDistrictOps[0].id)
: ''
"
option-value="id"
option-label="name"
:label="$t('subDistrict')"
class="col-3"
:options="addrOptions.subDistrictOps"
@update:model-value="(v: string) => selectSubDistrict(v)"
lazy-rules
:rules="[
(val) =>
(val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
]"
@update:model-value="(v: string) => selectSubDistrict(v)"
/>
<q-input
:dense="dense"
@ -217,7 +209,6 @@ onMounted(async () => {
:label="$t('province')"
class="col-3"
:options="addrOptions.provinceOps"
@update:model-value="(v: string) => selectProvince(v)"
/>
<q-select
:dense="dense"
@ -233,7 +224,6 @@ onMounted(async () => {
:label="$t('district')"
class="col-3"
:options="addrOptions.districtOps"
@update:model-value="(v: string) => selectDistrict(v)"
/>
<q-select
:dense="dense"

6
src/components/02_personnel-management/FormByType.vue
View file

@ -8,7 +8,9 @@ const userType = defineModel<string>('userType');
const registrationNo = defineModel<string | null>('registrationNo');
const startDate = defineModel<Date | null>('startDate');
const retireDate = defineModel<Date | null>('retireDate');
const responsibleArea = defineModel<string>('responsibleArea');
const responsibleArea = defineModel<string | null | undefined>(
'responsibleArea',
);
const discountCondition = defineModel<string | null | undefined>(
'discountCondition',
);
@ -137,7 +139,6 @@ defineProps<{
options-dense
label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
class="col-12"
bg-color="white"
option-label="label"
option-value="value"
v-model="responsibleArea"
@ -174,7 +175,6 @@ defineProps<{
options-dense
label="สัญชาติต้นทาง"
class="col-3"
bg-color="white"
option-label="label"
option-value="label"
v-model="sourceNationality"

13
src/components/02_personnel-management/FormInformation.vue
View file

@ -7,7 +7,7 @@ const hqId = defineModel<string | null | undefined>('hqId');
const brId = defineModel<string | null | undefined>('brId');
const userType = defineModel<string>('userType');
const userRole = defineModel<string>('userRole');
const userName = defineModel<string | null | undefined>('userName');
const username = defineModel<string | null | undefined>('username');
const userCode = defineModel<string>('userCode');
defineProps<{
@ -15,6 +15,7 @@ defineProps<{
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
usernameReadonly?: boolean;
}>();
async function selectHq(id: string) {
@ -37,7 +38,6 @@ async function selectHq(id: string) {
options-dense
hide-bottom-space
class="col-6"
bg-color="white"
option-label="label"
option-value="value"
label="รหัสสำนักงานใหญ่"
@ -57,7 +57,6 @@ async function selectHq(id: string) {
hide-bottom-space
class="col-6"
label="รหัสสาขา"
bg-color="white"
option-label="label"
option-value="value"
v-model="brId"
@ -73,7 +72,6 @@ async function selectHq(id: string) {
options-dense
hide-bottom-space
class="col-3"
bg-color="white"
option-value="value"
option-label="label"
label="ประเภทผู้ใช้งาน"
@ -91,7 +89,6 @@ async function selectHq(id: string) {
options-dense
hide-bottom-space
class="col-3"
bg-color="white"
label="สิทธิ์ผู้ใช้งาน"
option-label="label"
option-value="value"
@ -102,15 +99,14 @@ async function selectHq(id: string) {
<q-input
:dense="dense"
:outlined="outlined"
:readonly="readonly"
:readonly="usernameReadonly"
emit-value
map-options
options-dense
hide-bottom-space
class="col-3"
bg-color="white"
label="ชื่อผู้ใช้งาน (Username)"
v-model="userName"
v-model="username"
:rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
/>
<q-input
@ -119,7 +115,6 @@ async function selectHq(id: string) {
readonly
hide-bottom-space
class="col-3"
bg-color="white"
label="รหัสพนักงาน"
v-model="userCode"
/>

1
src/components/02_personnel-management/FormPerson.vue
View file

@ -89,7 +89,6 @@ defineProps<{
map-options
label="เพศ"
class="col-3"
bg-color="white"
option-label="label"
option-value="value"
v-model="gender"

8
src/components/FormDialog.vue
View file

@ -31,8 +31,9 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
>
<q-form greedy @submit.prevent @validation-success="submit">
<!-- header -->
<div class="form-header q-py-sm q-pr-lg">
<div class="form-header q-py-sm q-px-lg">
<div class="row items-center">
<div style="width: 31.98px"></div>
<div class="col text-subtitle1 text-weight-bold text-center">
{{ title }}
</div>
@ -70,10 +71,10 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
bordered
class="column full-height"
:class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
style="padding-right: 0"
style="padding-right: 0; padding-bottom: 0"
>
<div
class="row col-12 q-col-gutter-y-md q-pr-md"
class="row col-12 q-col-gutter-y-md q-pr-md q-mb-md"
:style="$q.screen.gt.sm ? 'overflow-y: auto; height: 60vh' : ''"
>
<slot name="information"></slot>
@ -83,6 +84,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
dense
outlined
:separator="addressSeparator"
v-model:isOpen="modal"
v-model:address="address"
v-model:addressEN="addressEN"
v-model:provinceId="provinceId"

12
src/css/app.scss
View file

@ -23,6 +23,9 @@ html {
--negative-fg: 0 0% 100%;
--negative-bg: var(--red-9-hsl);
--positive-fg: 0 0% 100%;
--positive-bg: var(--teal-7-hsl);
--gender-male: var(--blue-5-hsl);
--gender-female: var(--pink-7-hsl);
@ -133,3 +136,12 @@ html {
color: hsl(var(--negative-fg));
background-color: hsl(var(--negative-bg));
}
.app-text-positive {
color: hsl(var(--positive-bg)) !important;
}
.app-bg-positive {
color: hsl(var(--positive-fg));
background-color: hsl(var(--positive-bg));
}

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

@ -42,7 +42,7 @@ const defaultFormData = {
licenseExpireDate: null,
licenseIssueDate: null,
licenseNo: null,
discountCondition: '',
discountCondition: null,
retireDate: null,
startDate: null,
registrationNo: null,
@ -54,9 +54,11 @@ const defaultFormData = {
userType: '',
profileImage: null,
birthDate: null,
responsibleArea: '',
responsibleArea: null,
username: '',
};
const profileSubmit = ref(false);
const urlProfile = ref<string>();
const isEdit = ref(false);
const modal = ref(false);
@ -65,7 +67,6 @@ const userId = ref('');
const selectorLabel = ref('');
const hqId = ref('');
const brId = ref('');
const username = ref('');
const code = ref('');
const formDialogRef = ref();
const userStats = ref<BranchUserStats[]>();
@ -98,7 +99,10 @@ const formData = ref<UserCreate>({
userType: '',
profileImage: null,
birthDate: null,
responsibleArea: '',
responsibleArea: null,
checkpoint: null,
checkpointEN: null,
username: '',
});
const profileFile = ref<File | undefined>(undefined);
@ -131,6 +135,7 @@ const selectorList = computed(() => [
async function openDialog(idEdit?: string) {
modal.value = true;
profileSubmit.value = false;
userStore.userOption.brOpts = [];
userStore.userOption.hqOpts.length === 0
@ -166,6 +171,7 @@ async function openDialog(idEdit?: string) {
firstName: foundUser.firstName,
userRole: foundUser.userRole,
userType: foundUser.userType,
username: foundUser.username,
responsibleArea: foundUser.responsibleArea,
licenseExpireDate:
(foundUser.licenseExpireDate &&
@ -192,9 +198,10 @@ async function openDialog(idEdit?: string) {
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);
// await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
// await formDialogRef.value.fetchDistrict(formData.value.provinceId);
}
}
}
@ -204,13 +211,13 @@ function onClose() {
hqId.value = '';
brId.value = '';
userId.value = '';
username.value = '';
urlProfile.value = '';
profileSubmit.value = false;
modal.value = false;
status.value = false;
isEdit.value = false;
mapUserType(selectorLabel.value);
Object.assign(formData.value, defaultFormData);
mapUserType(selectorLabel.value);
}
async function onSubmit() {
@ -270,15 +277,14 @@ function cardClick(id: string) {
}
function mapUserType(label: string) {
if (label === 'personnelSelector1') {
formData.value.userType = 'USER';
} else if (label === 'personnelSelector2') {
formData.value.userType = 'MESSENGER';
} else if (label === 'personnelSelector3') {
formData.value.userType = 'DELEGATE';
} else if (label === 'personnelSelector4') {
formData.value.userType = 'AGENCY';
}
const userTypeMap: { [key: string]: string } = {
USER: 'USER',
MESSENGER: 'MESSENGER',
DELEGATE: 'DELEGATE',
AGENCY: 'AGENCY',
};
formData.value.userType = userTypeMap[label];
}
onMounted(async () => {
@ -377,14 +383,6 @@ watch(
female: v.gender === 'female',
detail: [
{ label: 'ประเภท', value: $t(v.userType) },
{
label: 'ตำแหน่ง',
value: v.userRole
? userStore.userOption.roleOpts.find(
(r) => r.value === v.userRole,
)?.label || ''
: '',
},
{ label: 'โทรศัพท์', value: v.telephoneNo },
{
label: 'อายุ',
@ -427,15 +425,17 @@ watch(
<!-- form -->
<FormDialog
ref="formDialogRef"
v-model:formData="formData"
v-model:modal="modal"
v-model:hqId="hqId"
v-model:brId="brId"
v-model:username="username"
v-model:code="code"
title="เพิ่มบุคลากร"
addressTitle="ที่อยู่พนักงาน"
addressENTitle="ที่อยู่พนักงาน ENG"
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()"
>
@ -454,33 +454,61 @@ watch(
style="color: var(--border-color)"
/>
</div>
<div
v-if="urlProfile && !profileSubmit"
class="col-12 row q-mt-md q-col-gutter-x-md"
>
<div class="col-6">
<q-btn
dense
unelevated
outlined
padding="8px"
class="cancel-img-btn full-width"
label="ยกเลิก"
@click="urlProfile = ''"
/>
</div>
<div class="col-6">
<q-btn
dense
unelevated
outlined
padding="8px"
class="submit-img-btn full-width"
label="บันทึก"
@click="profileSubmit = true"
/>
</div>
</div>
<q-btn
v-if="urlProfile"
v-else-if="urlProfile && profileSubmit"
dense
unelevated
outlined
padding="8px"
icon="mdi-pencil-outline"
class="edit-img-btn q-my-md full-width"
class="edit-img-btn q-mt-md full-width"
label="แก้ไขโปรไฟล์"
@click="inputFile.click()"
@click.prevent="inputFile.click(), (profileSubmit = false)"
/>
<q-btn
v-else
dense
unelevated
outlined
padding="8px"
class="upload-img-btn q-my-md full-width"
class="upload-img-btn q-mt-md full-width"
label="อัปโหลดรูปภาพ"
:class="{ dark: $q.dark.isActive }"
@click="inputFile.click()"
/>
<div class="text-left">
<q-separator class="col-12 q-my-md" />
<div class="text-left q-pt-md">
<q-toggle
dense
size="md"
color="primary"
v-model="status"
padding="none"
class="q-pr-md"
@ -495,12 +523,12 @@ watch(
dense
outlined
separator
:addressSeparator="formData.userType"
:usernameReadonly="isEdit"
v-model:hqId="hqId"
v-model:brId="brId"
v-model:userType="formData.userType"
v-model:userRole="formData.userRole"
v-model:userName="username"
v-model:username="formData.username"
v-model:userCode="code"
/>
</template>
@ -538,14 +566,11 @@ watch(
</FormDialog>
</template>
<style>
.bg-white {
background-color: var(--surface-1) !important;
}
.upload-img-preview {
border: 1px solid var(--border-color);
border-radius: var(--radius-2);
height: 12vw;
background-color: var(--surface-1);
}
.upload-img-btn {
@ -565,4 +590,18 @@ watch(
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>

8
src/stores/user/types.ts
View file

@ -21,6 +21,7 @@ export type User = {
gender: string;
userRole: string;
userType: string;
username: string;
retireDate: Date | null;
startDate: Date | null;
registrationNo: string | null;
@ -41,6 +42,8 @@ export type User = {
code: string;
birthDate?: Date | null;
responsibleArea: string;
checkpoint?: string | null;
checkpointEN?: string | null;
branch: Branch[];
};
@ -70,9 +73,12 @@ export type UserCreate = {
firstName: string;
userRole: string;
userType: string;
username: string;
profileImage?: File | null; // required but not strict
birthDate?: Date | null;
responsibleArea: string;
responsibleArea?: string | null;
checkpoint?: string | null;
checkpointEN?: string | null;
};
export type UserAttachment = {