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

Merge branch 'dev/phatt' into develop

Browse source
This commit is contained in:
puriphatt 2024-04-10 14:01:16 +07:00
commit 4d370b5c8f
8 changed files with 634 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/FormDialog.vue
View file

@ -123,7 +123,7 @@ watch(provinceId, (v) => {
<div class="row" style="overflow-y: auto; max-height: 50vh">
<!-- prepend -->
<q-card-section
class="column col-4"
class="column col-2"
v-if="$slots.prepend && !$slots.append"
>
<slot name="prepend"></slot>
@ -131,7 +131,7 @@ watch(provinceId, (v) => {
<!-- center -->
<q-card-section
class="column"
:class="`${$slots.prepend ? 'col-8' : $slots.append ? 'col-6' : 'col-12'}`"
:class="`${$slots.prepend ? 'col-10' : $slots.append ? 'col-6' : 'col-12'}`"
>
<div
class="row inline col-12 q-col-gutter-x-md"

2
src/components/SelectorList.vue
View file

@ -28,7 +28,7 @@ defineProps<{
@click="selector = v.label"
>
<q-item-section>{{ $t(v.label) }}</q-item-section>
<div class="dot text-weight-bold">1</div>
<div class="dot text-weight-bold">{{ v.count }}</div>
</q-item>
</q-list>
</AppBox>

12
src/components/home/PersonCard.vue
View file

@ -7,6 +7,7 @@ import { Icon } from '@iconify/vue';
defineProps<{
list: {
id: string;
name: string;
detail: { label: string; value: string }[];
male?: boolean;
@ -18,6 +19,11 @@ defineProps<{
detailColumnCount?: number;
}>();
defineEmits<{
(e: 'deleteCard', id: string): void;
(e: 'updateCard', id: string): void;
}>();
const status = ref(false);
</script>
@ -55,7 +61,11 @@ const status = ref(false);
{{ $t('edit') }}
</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item
clickable
@click="$emit('deleteCard', v.id)"
v-close-popup
>
<q-item-section class="col-4">
<q-icon
class="full-width"

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

@ -1,7 +1,13 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import useUserStore from 'stores/user';
import { ref, onMounted, watch } from 'vue';
import { api } from 'src/boot/axios';
import { storeToRefs } from 'pinia';
import useUserStore from 'stores/user';
import useBranchStore from 'src/stores/branch';
import { UserCreate, UserTypeStats } from 'src/stores/user/types';
import { BranchUserStats } from 'src/stores/branch/types';
// import { dateFormat } from 'src/utils/datetime';
import PersonCard from 'components/home/PersonCard.vue';
import AppBox from 'components/app/AppBox.vue';
@ -10,72 +16,170 @@ import SelectorList from 'components/SelectorList.vue';
import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import FormDialog from 'src/components/FormDialog.vue';
import GlobalDialog from 'components/GlobalDialog.vue';
const branchStore = useBranchStore();
const userStore = useUserStore();
const { data: userData } = storeToRefs(userStore);
onMounted(async () => {
await userStore.fetchList();
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: '',
retireDate: null,
startDate: null,
registrationNo: null,
lastNameEN: '',
lastName: '',
firstNameEN: '',
firstName: '',
userRole: '',
userType: '',
keycloakId: '',
profileImage: null,
birthDate: null,
responsibleArea: '',
};
const userId = ref('');
const modal = ref(false);
const status = ref(false);
const selectorLabel = ref('');
const hqId = ref('');
const brId = ref('');
const username = ref('');
const formData = ref<UserCreate>(structuredClone(defaultFormData));
const userStats = ref<BranchUserStats[]>();
const typeStats = ref<UserTypeStats>();
const age = ref<number>();
const confirmData = ref({
modal: false,
title: '',
message: '',
icon: '',
action: () => {},
});
const branchStat = ref([
{ label: 'Branch A', amount: 1 },
{ label: 'Branch B', amount: 5 },
{ label: 'Branch C', amount: 3 },
]);
const selectorLabel = ref('');
const modal = ref(false);
const hqId = ref('');
const branchId = ref('');
const genderOptions = ref([
{ label: 'ชาย', value: '1' },
{ label: 'หญิง', value: '2' },
]);
const hqOptions = ref([
const userTypeOpts = [
{ label: 'พนักงาน', value: 'USER' },
{ label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' },
{ label: 'ตัวแทน', value: 'DELEGATE' },
{ label: 'เอเจนซี่', value: 'AGENCY' },
];
const genderOpts = [
{ label: 'ชาย', value: 'male' },
{ label: 'หญิง', value: 'female' },
];
const hqOpts = ref([
{ label: '0000000001', value: '1' },
{ label: '0000000002', value: '2' },
]);
const branchOptions = ref([
const brOpts = ref([
{ label: '0000000001-1', value: '1' },
{ label: '0000000001-2', value: '2' },
]);
const formData = ref({
hqId: '',
branchId: '',
tel: '',
gender: '',
email: '',
addressL: {
address: '',
province: '',
district: '',
subDistrict: '',
zip: '',
},
addressEng: {
address: '',
province: '',
district: '',
subDistrict: '',
zip: '',
},
});
const selectorList = [
{ label: 'personnelSelector1', count: 0 },
{ label: 'personnelSelector2', count: 0 },
{ label: 'personnelSelector3', count: 0 },
{ label: 'personnelSelector4', count: 0 },
] satisfies InstanceType<typeof SelectorList>['$props']['list'];
];
async function createKeycloak() {
const res = await api.post('/keycloak/user', {
lastName: formData.value.lastNameEN,
firstName: formData.value.firstNameEN,
password: username.value,
username: username.value,
});
return res.data;
}
// function selectFile() {
// const fileInput = this.$refs.file;
// fileInput.pickFiles();
// }
function openDialog() {
modal.value = true;
}
function onClose() {
modal.value = false;
Object.assign(formData.value, defaultFormData);
hqId.value = '';
brId.value = '';
username.value = '';
userId.value = '';
mapUserType(selectorLabel.value);
}
function submitConfirm() {
confirmData.value.modal = true;
}
async function onSubmit(id?: string) {
try {
if (id) {
await userStore.editById(id, formData.value);
} else {
formData.value.keycloakId = await createKeycloak();
await userStore.create(formData.value);
}
} finally {
modal.value = false;
await userStore.fetchList();
}
}
async function onDelete(id: string) {
await userStore.deleteById(id);
await userStore.fetchList();
}
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';
}
}
onMounted(async () => {
await userStore.fetchList();
typeStats.value = await userStore.typeStats();
if ((await branchStore.userStats(formData.value.userType)) !== false) {
userStats.value = await branchStore.userStats(formData.value.userType);
}
});
watch(
() => selectorLabel.value,
async (label) => {
mapUserType(label);
if ((await branchStore.userStats(label)) !== false) {
userStats.value = await branchStore.userStats(label);
}
},
);
</script>
<template>
@ -108,7 +212,16 @@ function openDialog() {
/>
</div>
<div class="row col full-width" style="overflow-x: auto">
<StatCardComponent :branch="branchStat" class="no-wrap" />
<StatCardComponent
v-if="userStats"
:branch="
userStats.map((v) => ({
amount: v.count,
label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
}))
"
class="no-wrap"
/>
</div>
</AppBox>
</div>
@ -118,18 +231,21 @@ function openDialog() {
<PersonCard
:list="
userData?.result.map((v) => ({
id: v.id,
img: `${v.profileImageUrl}`,
name: `${v.firstName} ${v.lastName}`,
male: v.gender === 'male',
female: v.gender === 'female',
detail: [
{ label: 'Email', value: v.email },
{ label: 'Telephone No', value: v.telephoneNo },
{ label: 'ตำแหน่ง', value: v.userType },
{ label: 'โทรศัพท์', value: v.telephoneNo },
{ label: 'อีเมล', value: v.email },
],
badge: v.code.slice(0, 10),
badge: v.code,
disabled: v.status === 'INACTIVE',
})) || []
"
@deleteCard="onDelete"
/>
<div
class="column"
@ -156,13 +272,20 @@ function openDialog() {
</AppBox>
</div>
<!-- form -->
<FormDialog
v-model:modal="modal"
v-model:addressL="formData.addressL"
v-model:addressEng="formData.addressEng"
v-model:address="formData.address"
v-model:addressEN="formData.addressEN"
v-model:provinceId="formData.provinceId as string"
v-model:districtId="formData.districtId as string"
v-model:subDistrictId="formData.subDistrictId as string"
v-model:zipCode="formData.zipCode"
title="เพิ่มบุคลากร"
addressLocaleTitle="ที่อยู่พนักงาน"
addressEngTitle="ที่อยู่พนักงาน ENG"
addressTitle="ที่อยู่พนักงาน"
addressENTitle="ที่อยู่พนักงาน ENG"
:submit="() => submitConfirm()"
:close="() => onClose()"
>
<template #top>
<q-select
@ -170,60 +293,174 @@ function openDialog() {
outlined
emit-value
map-options
v-model="hqId"
class="col-6"
option-value="value"
option-label="label"
label="รหัสสำนักงานใหญ่"
:options="hqOptions"
bg-color="white"
option-label="label"
option-value="value"
label="รหัสสำนักงานใหญ่"
v-model="hqId"
:options="hqOpts"
:rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="branchId"
class="col-6"
label="รหัสสาขา"
bg-color="white"
option-label="label"
option-value="value"
v-model="brId"
:options="brOpts"
:rules="[(val: string) => !!val || 'กรุณาเลือกสาขา']"
/>
<q-select
dense
outlined
emit-value
map-options
class="col-3"
bg-color="white"
option-value="value"
option-label="label"
label="รหัสสาขา"
:options="branchOptions"
bg-color="white"
label="ประเภทผู้ใช้งาน"
v-model="formData.userType"
:options="userTypeOpts"
:rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
/>
<q-select
dense
outlined
emit-value
map-options
class="col-3"
bg-color="white"
label="สิทธิ์ผู้ใช้งาน"
option-label="label"
option-value="value"
v-model="formData.userRole"
:options="brOpts"
:rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
/>
<q-input
dense
outlined
class="col-3"
bg-color="white"
label="ชื่อผู้ใช้งาน (Username)"
v-model="username"
:rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
/>
<q-input
dense
outlined
readonly
class="col-3"
bg-color="white"
label="รหัสพนักงาน"
v-model="userId"
/>
<!-- :rules="[(val: string) => !!val || 'กรุณากรอกรหัสพนักงาน']"
-->
</template>
<template #prepend>
<div>asd</div>
<div class="q-pl-md text-center">
<div class="upload-img-preview">
<q-icon
name="mdi-account full-height"
size="3vw"
style="color: var(--border-color)"
/>
</div>
<q-btn
dense
unelevated
outlined
padding="8px"
class="upload-img-btn q-my-md full-width"
label="อัปโหลดรูปภาพ"
:class="{ dark: $q.dark.isActive }"
@click="selectFile()"
/>
<div class="text-left">
<q-toggle
dense
size="md"
color="primary"
v-model="status"
padding="none"
class="q-pr-md"
/>
<span>สถานะผู้ใช้งาน</span>
</div>
<q-file
dense
outlined
ref="file"
style="visibility: hidden"
v-model="formData.profileImage"
/>
</div>
</template>
<template #midTop>
<!-- <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
<q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
<q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
<q-input dense outlined label="รหัสไปรษณีย์" class="col-3" /> -->
<q-input
dense
outlined
class="col-3"
label="ชื่อ ภาษาไทย"
v-model="formData.firstName"
:rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
/>
<q-input
dense
outlined
class="col-3"
label="นามสกุล ภาษาไทย"
v-model="formData.lastName"
:rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
/>
<q-input
dense
outlined
class="col-3"
label="ชื่อ ภาษาอังกฤษ"
v-model="formData.firstNameEN"
:rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
/>
<q-input
dense
outlined
class="col-3"
label="นามสกุล ภาษาอังกฤษ"
v-model="formData.lastNameEN"
:rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
/>
</template>
<template #midBottom>
<q-input
dense
outlined
label="เบอร์โทร"
class="col-3"
v-model="formData.tel"
label="เบอร์โทร"
v-model="formData.telephoneNo"
/>
<q-select
dense
outlined
emit-value
map-options
v-model="formData.gender"
class="col-3"
option-value="value"
option-label="label"
label="เพศ"
:options="genderOptions"
class="col-3"
bg-color="white"
option-label="label"
option-value="value"
v-model="formData.gender"
:options="genderOpts"
/>
<q-input
dense
@ -232,15 +469,256 @@ function openDialog() {
class="col-6"
v-model="formData.email"
/>
</template>
<div
v-if="formData.userType === 'USER' || formData.userType === 'MESSENGER'"
class="row col-12 q-col-gutter-md"
style="margin-left: 0px; padding-left: 0px"
>
<q-input
dense
outlined
label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
class="col-12"
v-model="formData.registrationNo"
/>
<VueDatePicker
utc
autoApply
v-model="formData.startDate"
:locale="'th'"
:enableTimePicker="false"
class="col-6"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
dense
outlined
label="วันที่เริ่มงาน"
v-model="formData.startDate"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
<template v-slot:append>
<q-icon
v-if="formData.startDate"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="formData.startDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<!-- <template #append>
<div style="background-color: blue">asd</div>
</template> -->
<VueDatePicker
utc
autoApply
v-model="formData.retireDate"
:locale="'th'"
:enableTimePicker="false"
class="col-6"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
dense
outlined
label="วันที่พ้นสภาพพนักงาน"
v-model="formData.retireDate"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="primary"
/>
</template>
<template v-slot:append>
<q-icon
v-if="formData.retireDate"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="formData.retireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
utc
autoApply
v-model="formData.retireDate"
:locale="'th'"
:enableTimePicker="false"
class="col-3"
>
<template #year="{ value }">
{{ value + 543 }}
</template>
<template #trigger>
<q-input
dense
outlined
label="วันที่พ้นสภาพพนักงาน"
v-model="formData.birthDate"
>
<template v-slot:prepend>
<q-icon
size="xs"
name="mdi-calendar-blank-outline"
class="cursor-pointer"
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="formData.retireDate"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="formData.retireDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<q-input dense outlined label="อายุ" class="col-3" v-model="age" />
<q-select
v-if="formData.userType === 'MESSENGER'"
dense
outlined
emit-value
map-options
label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
class="col-12"
bg-color="white"
option-label="label"
option-value="value"
v-model="formData.responsibleArea"
:options="genderOpts"
/>
</div>
<div
v-if="formData.userType === 'DELEGATE'"
class="row col-12"
style="row-gap: 16px"
>
<q-input
dense
outlined
label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
class="col-12"
v-model="formData.discountCondition"
type="textarea"
/>
</div>
<div
v-if="formData.userType === 'AGENCY'"
class="row col-12 q-col-gutter-md"
style="margin-left: 0px; padding-left: 0px"
>
<q-select
dense
outlined
emit-value
map-options
label="สัญชาติต้นทาง"
class="col-3"
bg-color="white"
option-label="label"
option-value="value"
v-model="formData.sourceNationality"
:options="genderOpts"
/>
<q-select
dense
outlined
emit-value
map-options
label="นำเข้าสัญชาติ"
class="col-3"
bg-color="white"
option-label="label"
option-value="value"
v-model="formData.importNationality"
:options="genderOpts"
/>
<q-input
dense
outlined
label="สถานที่อบรม"
class="col-6"
v-model="formData.trainingPlace"
/>
<q-input
dense
outlined
label="ด่าน"
class="col-6"
v-model="formData.trainingPlace"
/>
<q-input
dense
outlined
label="ด่าน ENG"
class="col-6"
v-model="formData.trainingPlace"
/>
<q-input
dense
outlined
label="แบบเอกสารประจำตัว"
class="col-12"
v-model="formData.discountCondition"
type="textarea"
/>
</div>
</template>
</FormDialog>
<GlobalDialog
:v-model="confirmData.modal"
:title="confirmData.title"
:message="confirmData.message"
:icon="confirmData.icon"
:persistent="true"
:action="() => onSubmit()"
/>
</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;
}
.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;
}
}
</style>

25
src/stores/branch/index.ts
View file

@ -225,6 +225,29 @@ const useBranchStore = defineStore('api-branch', () => {
return false;
}
async function userStats(
userType: string,
flow?: {
sessionId: string;
refTransactionId: string;
transactionId: string;
},
) {
const res = await api.get(`/branch/user-stats`, {
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId,
'X-Tid': flow?.transactionId,
},
data: userType
});
if (!res) return false;
if (res.status === 200) return res.data;
return false;
}
return {
data,
fetchList,
@ -237,6 +260,8 @@ const useBranchStore = defineStore('api-branch', () => {
getUser,
addUser,
removeUser,
userStats,
};
});

7
src/stores/branch/types.ts
View file

@ -47,3 +47,10 @@ export type BranchCreate = {
provinceId?: string | null;
headOfficeId?: string | null;
};
export type BranchUserStats = {
id: string,
nameEN: string,
name: string;
count: 0
}

22
src/stores/user/index.ts
View file

@ -12,6 +12,7 @@ import {
import axios from 'axios';
const useUserStore = defineStore('api-user', () => {
const userStats = ref()
const data = ref<Pagination<User[]>>();
async function fetchAttachment(
@ -344,6 +345,25 @@ const useUserStore = defineStore('api-user', () => {
return res.data || true;
}
async function typeStats(
flow?: {
sessionId: string;
refTransactionId: string;
transactionId: string;
},) {
const res = await api.get(`/user/type-stats`, {
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId,
'X-Tid': flow?.transactionId,
},
})
if (!res) return false;
if (res.status === 200) return res.data;
return false;
}
return {
data,
fetchList,
@ -360,6 +380,8 @@ const useUserStore = defineStore('api-user', () => {
fetchAttachment,
addAttachment,
deleteAttachment,
typeStats,
};
});

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

@ -69,6 +69,8 @@ export type UserCreate = {
userType: string;
keycloakId: string;
profileImage: File;
birthDate?: Date | null;
responsibleArea: string,
};
export type UserAttachment = {
@ -83,3 +85,10 @@ export type UserAttachmentCreate = {
export type UserAttachmentDelete = {
file: string[];
};
export type UserTypeStats = {
USER: number;
MESSENGER: number;
DELEGATE: number;
AGENCY: number;
}