feat: userOption
This commit is contained in:
puriphatt
parent
0206372cef
commit
81b74ebe5d
3 changed files with 117 additions and 82 deletions
|
|
@ -7,12 +7,7 @@ import useUserStore from 'stores/user';
|
|||
import useBranchStore from 'src/stores/branch';
|
||||
import { dialog } from 'src/stores/utils';
|
||||
|
||||
import {
|
||||
UserCreate,
|
||||
UserTypeStats,
|
||||
UserOption,
|
||||
RoleData,
|
||||
} from 'src/stores/user/types';
|
||||
import { UserCreate, UserTypeStats, RoleData } from 'src/stores/user/types';
|
||||
import { BranchUserStats } from 'src/stores/branch/types';
|
||||
|
||||
import PersonCard from 'components/home/PersonCard.vue';
|
||||
|
|
@ -116,23 +111,6 @@ inputFile.addEventListener('change', (e) => {
|
|||
profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
|
||||
});
|
||||
|
||||
const userTypeOpts = [
|
||||
{ label: 'พนักงาน', value: 'USER' },
|
||||
{ label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' },
|
||||
{ label: 'ตัวแทน', value: 'DELEGATE' },
|
||||
{ label: 'เอเจนซี่', value: 'AGENCY' },
|
||||
];
|
||||
const genderOpts = [
|
||||
{ label: 'ชาย', value: 'male' },
|
||||
{ label: 'หญิง', value: 'female' },
|
||||
];
|
||||
|
||||
const userOption = ref<UserOption>({
|
||||
hqOpts: [],
|
||||
brOpts: [],
|
||||
roleOpts: [],
|
||||
});
|
||||
|
||||
const selectorList = [
|
||||
{ label: 'personnelSelector1', count: 0 },
|
||||
{ label: 'personnelSelector2', count: 0 },
|
||||
|
|
@ -150,28 +128,12 @@ async function createKeycloak() {
|
|||
return res.data;
|
||||
}
|
||||
|
||||
async function fetchRoleOption() {
|
||||
const res = await api.get<RoleData[]>('/keycloak/role');
|
||||
res.data.map((item) => {
|
||||
const formattedName = item.name
|
||||
.replace(/_/g, ' ')
|
||||
.toLowerCase()
|
||||
.split(' ')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ');
|
||||
userOption.value.roleOpts.push({
|
||||
label: formattedName,
|
||||
value: item.id,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchHqOption() {
|
||||
if (userOption.value.hqOpts.length === 0) {
|
||||
if (userStore.userOption.hqOpts.length === 0) {
|
||||
const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' });
|
||||
if (res) {
|
||||
res.result.map((item) => {
|
||||
userOption.value.hqOpts.push({
|
||||
userStore.userOption.hqOpts.push({
|
||||
label: item.code,
|
||||
value: item.id,
|
||||
});
|
||||
|
|
@ -186,7 +148,7 @@ async function fetchBrOption(id: string) {
|
|||
});
|
||||
if (res && res?.branch) {
|
||||
res.branch.map((item) => {
|
||||
userOption.value.brOpts.push({
|
||||
userStore.userOption.brOpts.push({
|
||||
label: item.code,
|
||||
value: item.id,
|
||||
});
|
||||
|
|
@ -194,13 +156,17 @@ async function fetchBrOption(id: string) {
|
|||
}
|
||||
}
|
||||
|
||||
async function openDialog(id?: string) {
|
||||
await fetchHqOption();
|
||||
await fetchRoleOption();
|
||||
async function openDialog(idEdit?: string) {
|
||||
modal.value = true;
|
||||
age.value = '';
|
||||
if (id && userData.value) {
|
||||
const foundUser = userData.value.result.find((user) => user.id === id);
|
||||
if (userStore.userOption.hqOpts.length === 0) {
|
||||
await fetchHqOption();
|
||||
}
|
||||
if (userStore.userOption.roleOpts.length === 0) {
|
||||
await userStore.fetchRoleOption();
|
||||
}
|
||||
if (idEdit && userData.value) {
|
||||
const foundUser = userData.value.result.find((user) => user.id === idEdit);
|
||||
|
||||
if (foundUser) {
|
||||
formData.value = {
|
||||
|
|
@ -249,7 +215,9 @@ async function openDialog(id?: string) {
|
|||
code.value = foundUser.code;
|
||||
urlProfile.value = foundUser.profileImageUrl;
|
||||
isEdit.value = true;
|
||||
await fetchBrOption(hqId.value);
|
||||
if (userStore.userOption.brOpts.length === 0) {
|
||||
await fetchBrOption(hqId.value);
|
||||
}
|
||||
await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
|
||||
await formDialogRef.value.fetchDistrict(formData.value.provinceId);
|
||||
}
|
||||
|
|
@ -283,7 +251,7 @@ async function onSubmit() {
|
|||
action: async () => {
|
||||
const formDataEdit = { ...formData.value };
|
||||
delete formDataEdit.keycloakId;
|
||||
delete formDataEdit.profileImage;
|
||||
// delete formDataEdit.profileImage;
|
||||
await userStore.editById(userId.value, formDataEdit);
|
||||
onClose();
|
||||
userStore.fetchList({ includeBranch: true });
|
||||
|
|
@ -361,7 +329,7 @@ function calculateAge(birthDate: Date | null): string {
|
|||
async function selectHq(id: string) {
|
||||
if (!id) return;
|
||||
brId.value = '';
|
||||
userOption.value.brOpts = [];
|
||||
userStore.userOption.brOpts = [];
|
||||
await fetchBrOption(id);
|
||||
}
|
||||
|
||||
|
|
@ -450,7 +418,10 @@ watch(
|
|||
userData?.result.map((v) => ({
|
||||
id: v.id,
|
||||
img: `${v.profileImageUrl}`,
|
||||
name: `${v.firstName} ${v.lastName}`,
|
||||
name:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
male: v.gender === 'male',
|
||||
female: v.gender === 'female',
|
||||
detail: [
|
||||
|
|
@ -522,7 +493,7 @@ watch(
|
|||
option-value="value"
|
||||
label="รหัสสำนักงานใหญ่"
|
||||
v-model="hqId"
|
||||
:options="userOption.hqOpts"
|
||||
:options="userStore.userOption.hqOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
|
||||
@update:model-value="(val: string) => selectHq(val)"
|
||||
/>
|
||||
|
|
@ -539,7 +510,7 @@ watch(
|
|||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="brId"
|
||||
:options="userOption.brOpts"
|
||||
:options="userStore.userOption.brOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสาขา']"
|
||||
/>
|
||||
<q-select
|
||||
|
|
@ -555,7 +526,7 @@ watch(
|
|||
option-label="label"
|
||||
label="ประเภทผู้ใช้งาน"
|
||||
v-model="formData.userType"
|
||||
:options="userTypeOpts"
|
||||
:options="userStore.userOption.userTypeOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
|
||||
/>
|
||||
<q-select
|
||||
|
|
@ -571,7 +542,7 @@ watch(
|
|||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="formData.userRole"
|
||||
:options="userOption.roleOpts"
|
||||
:options="userStore.userOption.roleOpts"
|
||||
:rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
|
||||
/>
|
||||
<q-input
|
||||
|
|
@ -708,7 +679,7 @@ watch(
|
|||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="formData.gender"
|
||||
:options="genderOpts"
|
||||
:options="userStore.userOption.genderOpts"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
|
|
@ -865,13 +836,14 @@ watch(
|
|||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
|
||||
class="col-12"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="formData.responsibleArea"
|
||||
:options="genderOpts"
|
||||
:options="userStore.userOption.responsibleAreaOpts"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -898,48 +870,43 @@ watch(
|
|||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="สัญชาติต้นทาง"
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
option-value="label"
|
||||
v-model="formData.sourceNationality"
|
||||
:options="genderOpts"
|
||||
:options="userStore.userOption.nationalityOpts"
|
||||
/>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="นำเข้าสัญชาติ"
|
||||
class="col-3"
|
||||
bg-color="white"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
option-value="label"
|
||||
v-model="formData.importNationality"
|
||||
:options="genderOpts"
|
||||
:options="userStore.userOption.nationalityOpts"
|
||||
/>
|
||||
<q-input
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
options-dense
|
||||
label="สถานที่อบรม"
|
||||
class="col-6"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="formData.trainingPlace"
|
||||
:options="userStore.userOption.trainingPlaceOpts"
|
||||
/>
|
||||
<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-6" />
|
||||
<q-input dense outlined label="ด่าน ENG" class="col-6" />
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
|
|||
|
|
@ -3,18 +3,77 @@ import { defineStore } from 'pinia';
|
|||
import { Pagination } from '../types';
|
||||
import { api } from 'src/boot/axios';
|
||||
import {
|
||||
RoleData,
|
||||
User,
|
||||
UserAttachment,
|
||||
UserAttachmentCreate,
|
||||
UserAttachmentDelete,
|
||||
UserCreate,
|
||||
UserOption,
|
||||
} from './types';
|
||||
import axios from 'axios';
|
||||
import { Branch } from '../branch/types';
|
||||
|
||||
const useUserStore = defineStore('api-user', () => {
|
||||
const userOption = ref<UserOption>({
|
||||
hqOpts: [],
|
||||
brOpts: [],
|
||||
roleOpts: [],
|
||||
userTypeOpts: [
|
||||
{ label: 'พนักงาน', value: 'USER' },
|
||||
{ label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' },
|
||||
{ label: 'ตัวแทน', value: 'DELEGATE' },
|
||||
{ label: 'เอเจนซี่', value: 'AGENCY' },
|
||||
],
|
||||
genderOpts: [
|
||||
{ label: 'ชาย', value: 'male' },
|
||||
{ label: 'หญิง', value: 'female' },
|
||||
],
|
||||
responsibleAreaOpts: [
|
||||
{ label: 'เขตพื้นที่ 1 บางรัก ปทุมวัน ยานนาวสาทร และบางคอแหลม' },
|
||||
{ label: 'เขตพื้นที่ 2 จอมทอง ทุ่งครุ บางขุนเทียน บางบอน และราษฎร์บูรณะ' },
|
||||
{ label: 'เขตพื้นที่ 3 คลองเตย บางนา ประเวศ พระโขนง วัฒนา และสวนหลวง' },
|
||||
{ label: 'เขตพื้นที่ 4 คันนายาว บางกะปิ ลาดพร้าว บึงกุ่ม และวังทางหลาง' },
|
||||
{ label: 'เขตพื้นที่ 5 คลองสามวา มีนบุรี ลาดกระบัง สะพานสูง หนองจอก และสายไหม' },
|
||||
{ label: 'เขตพื้นที่ 6 คลองสาน ธนบุรี บางกอกน้อย บางกอกใหญ่ และบางพลัด' },
|
||||
{ label: 'เขตพื้นที่ 7 ตลิ่งชัน ทวีวัฒนา บางแค ภาษีเจริญ และหนองแขม' },
|
||||
{ label: 'เขตพื้นที่ 8 ดุสิต พระนครป้อมปราบศัตรูพ่าย และสัมพันธวงศ์' },
|
||||
{ label: 'เขตพื้นที่ 9 จตุจักร ดอนเมือง บางชื่อ บางเขน และหลักส' },
|
||||
{ label: 'เขตพื้นที่ 10 ดินแดง พญาไท ราชเทวี และห้วยขวาง' },
|
||||
],
|
||||
nationalityOpts: [
|
||||
{ label: 'ไทย', value: 'th' },
|
||||
{ label: 'เมียนมา', value: 'mm' },
|
||||
{ label: 'ลาว', value: 'lo' },
|
||||
{ label: 'กัมพูชา', value: 'kh' },
|
||||
{ label: 'เวียดนาม', value: 'vn' },
|
||||
],
|
||||
trainingPlaceOpts: [
|
||||
{ label: 'สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก' },
|
||||
{ label: 'สถานที่อบรมแรงงานเมียนมา- เกาะสอง จ.ระนอง' },
|
||||
{ label: 'สถานที่อบรมแรงงานลาว-หนองคาย จ.หนองคาย' },
|
||||
{ label: 'สถานที่อบรมแรงงานกัมพูชา- อรัญประเทศ จ.สระแก้ว' },
|
||||
{ label: 'สถานที่อบรมแรงงานกัมพูชา-บ้านแหลม จ.จันทบุร' },
|
||||
],
|
||||
});
|
||||
const data = ref<Pagination<User[]>>();
|
||||
|
||||
async function fetchRoleOption() {
|
||||
const res = await api.get<RoleData[]>('/keycloak/role');
|
||||
res.data.map((item) => {
|
||||
const formattedName = item.name
|
||||
.replace(/_/g, ' ')
|
||||
.toLowerCase()
|
||||
.split(' ')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ');
|
||||
userOption.value.roleOpts.push({
|
||||
label: formattedName,
|
||||
value: item.id,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchAttachment(
|
||||
userId: string,
|
||||
flow?: {
|
||||
|
|
@ -228,9 +287,10 @@ const useUserStore = defineStore('api-user', () => {
|
|||
transactionId: string;
|
||||
},
|
||||
) {
|
||||
const { profileImage, ...payload } = data
|
||||
const res = await api.put<User & { profileImageUploadUrl: string }>(
|
||||
`/user/${id}`,
|
||||
data,
|
||||
payload,
|
||||
{
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
|
|
@ -240,10 +300,10 @@ const useUserStore = defineStore('api-user', () => {
|
|||
},
|
||||
);
|
||||
|
||||
if (data.profileImage)
|
||||
if (profileImage)
|
||||
await axios
|
||||
.put(res.data.profileImageUploadUrl, data.profileImage, {
|
||||
headers: { 'Content-Type': data.profileImage.type },
|
||||
.put(res.data.profileImageUploadUrl, profileImage, {
|
||||
headers: { 'Content-Type': profileImage.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
|
|
@ -368,6 +428,9 @@ const useUserStore = defineStore('api-user', () => {
|
|||
|
||||
return {
|
||||
data,
|
||||
userOption,
|
||||
fetchRoleOption,
|
||||
|
||||
fetchList,
|
||||
fetchById,
|
||||
|
||||
|
|
|
|||
|
|
@ -100,12 +100,17 @@ export type UserTypeStats = {
|
|||
export type UserOption = {
|
||||
hqOpts: Option[];
|
||||
brOpts: Option[];
|
||||
genderOpts: Option[];
|
||||
userTypeOpts: Option[];
|
||||
roleOpts: Option[];
|
||||
responsibleAreaOpts: Option[];
|
||||
nationalityOpts: Option[];
|
||||
trainingPlaceOpts: Option[];
|
||||
};
|
||||
|
||||
export type Option = {
|
||||
label: string;
|
||||
value: string;
|
||||
value?: string;
|
||||
};
|
||||
|
||||
export type RoleData = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue