446 lines
12 KiB
TypeScript
446 lines
12 KiB
TypeScript
"use client";
|
|
import { WARNA } from "@/module/_global";
|
|
import LayoutModal from "@/module/_global/layout/layout_modal";
|
|
import { funGetAllGroup, IDataGroup } from "@/module/group";
|
|
import { Box, Button, Select, Stack, TextInput } from "@mantine/core";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { HiUser } from "react-icons/hi2";
|
|
import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
|
|
import { funGetAllPosition } from "@/module/position/lib/api_position";
|
|
import { funCreateMember, funGetRoleUser } from "../lib/api_member";
|
|
import _ from "lodash";
|
|
|
|
export default function CreateMember() {
|
|
const router = useRouter();
|
|
const [isModal, setModal] = useState(false);
|
|
const [listGroup, setListGorup] = useState<IDataGroup[]>([]);
|
|
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([]);
|
|
const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([]);
|
|
const [touched, setTouched] = useState({
|
|
nik: false,
|
|
name: false,
|
|
phone: false,
|
|
email: false,
|
|
gender: false,
|
|
idGroup: false,
|
|
idPosition: false,
|
|
idUserRole: false
|
|
});
|
|
|
|
const [listData, setListData] = useState({
|
|
nik: "",
|
|
name: "",
|
|
phone: "",
|
|
email: "",
|
|
gender: "",
|
|
idGroup: "",
|
|
idPosition: "",
|
|
idUserRole: "",
|
|
});
|
|
|
|
async function getAllGroup() {
|
|
try {
|
|
const response = await funGetAllGroup("?active=true");
|
|
if (response.success) {
|
|
setListGorup(response.data);
|
|
} else {
|
|
toast.error(response.message);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error("Gagal mendapatkan grup, coba lagi nanti");
|
|
}
|
|
}
|
|
|
|
async function getAllPosition(val: any) {
|
|
try {
|
|
if (val != null) {
|
|
const res = await funGetAllPosition(
|
|
"?active=true" + "&group=" + `${val}`
|
|
);
|
|
setListPosition(res.data);
|
|
} else {
|
|
setListPosition([]);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
async function getAllUserRole() {
|
|
try {
|
|
const res = await funGetRoleUser();
|
|
setListUserRole(res.data);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
async function changeGrup(val: any) {
|
|
setListPosition([]);
|
|
setListData({
|
|
...listData,
|
|
idGroup: val,
|
|
idPosition: "",
|
|
});
|
|
|
|
getAllPosition(val);
|
|
}
|
|
|
|
async function onSubmit(val: boolean) {
|
|
try {
|
|
if (_.isEmpty(listData)) {
|
|
return;
|
|
}
|
|
if (val) {
|
|
const res = await funCreateMember({
|
|
nik: listData.nik,
|
|
name: listData.name,
|
|
phone: listData.phone,
|
|
email: listData.email,
|
|
gender: listData.gender,
|
|
idGroup: listData.idGroup,
|
|
idPosition: listData.idPosition,
|
|
idUserRole: listData.idUserRole,
|
|
});
|
|
if (res.success) {
|
|
toast.success(res.message);
|
|
setModal(false);
|
|
router.push("/member?active=true");
|
|
} else {
|
|
toast.error(res.message);
|
|
}
|
|
}
|
|
setModal(false);
|
|
} catch (error) {
|
|
toast.error("Error");
|
|
} finally {
|
|
setModal(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
getAllGroup();
|
|
getAllUserRole();
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<Box>
|
|
<Stack align="center" justify="center" gap="xs" pt={30} px={20}>
|
|
<Box
|
|
bg={WARNA.biruTua}
|
|
py={30}
|
|
px={50}
|
|
style={{
|
|
borderRadius: 10,
|
|
}}
|
|
>
|
|
<HiUser size={100} color={WARNA.bgWhite} />
|
|
</Box>
|
|
<Select
|
|
placeholder="Pilih Grup"
|
|
label="Grup"
|
|
w={"100%"}
|
|
size="md"
|
|
required
|
|
withAsterisk
|
|
radius={30}
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
data={
|
|
listGroup
|
|
? listGroup.map((data) => ({
|
|
value: data.id,
|
|
label: data.name,
|
|
}))
|
|
: []
|
|
}
|
|
onChange={(val: any) => {
|
|
changeGrup(val);
|
|
setTouched({ ...touched, idGroup: false })
|
|
}}
|
|
onBlur={() => setTouched({ ...touched, idGroup: true })}
|
|
error={
|
|
touched.idGroup && (
|
|
listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
<Select
|
|
placeholder="Pilih Jabatan"
|
|
label="Jabatan"
|
|
w={"100%"}
|
|
size="md"
|
|
required
|
|
withAsterisk
|
|
radius={30}
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
data={
|
|
listPosition
|
|
? listPosition.map((data) => ({
|
|
value: data.id,
|
|
label: data.name,
|
|
}))
|
|
: []
|
|
}
|
|
onChange={(val: any) => {
|
|
setListData({
|
|
...listData,
|
|
idPosition: val,
|
|
})
|
|
setTouched({ ...touched, idPosition: false })
|
|
}
|
|
}
|
|
value={listData.idPosition == "" ? null : listData.idPosition}
|
|
onBlur={() => setTouched({ ...touched, idPosition: true })}
|
|
error={
|
|
touched.idPosition && (
|
|
listData.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
<Select
|
|
placeholder="Pilih Role"
|
|
label="User Role"
|
|
w={"100%"}
|
|
size="md"
|
|
required
|
|
withAsterisk
|
|
radius={30}
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
data={
|
|
listUserRole
|
|
? listUserRole.map((data) => ({
|
|
value: data.id,
|
|
label: data.name,
|
|
}))
|
|
: []
|
|
}
|
|
onChange={(val: any) => {
|
|
setListData({
|
|
...listData,
|
|
idUserRole: val,
|
|
})
|
|
setTouched({ ...touched, idUserRole: false })
|
|
}
|
|
}
|
|
onBlur={() => setTouched({ ...touched, idUserRole: true })}
|
|
error={
|
|
touched.idUserRole && (
|
|
listData.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
<TextInput
|
|
size="md"
|
|
type="number"
|
|
radius={30}
|
|
placeholder="NIK"
|
|
withAsterisk
|
|
label="NIK"
|
|
w={"100%"}
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
onChange={(event: any) => {
|
|
setListData({ ...listData, nik: event.target.value });
|
|
setTouched({ ...touched, nik: false });
|
|
}}
|
|
onBlur={() => setTouched({ ...touched, nik: true })}
|
|
error={
|
|
touched.nik && (
|
|
listData.nik == "" ? "NIK Tidak Boleh Kosong" :
|
|
listData.nik.length < 16 ? "NIK Harus 16 Karakter" : null
|
|
)
|
|
}
|
|
/>
|
|
<TextInput
|
|
size="md"
|
|
type="text"
|
|
radius={30}
|
|
placeholder="Nama"
|
|
withAsterisk
|
|
label="Nama"
|
|
w={"100%"}
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
onChange={(event: any) => {
|
|
setListData({
|
|
...listData,
|
|
name: event.target.value,
|
|
})
|
|
setTouched({ ...touched, name: false })
|
|
}
|
|
}
|
|
onBlur={() => setTouched({ ...touched, name: true })}
|
|
error={
|
|
touched.name && (
|
|
listData.name == "" ? "Nama Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
<TextInput
|
|
size="md"
|
|
type="email"
|
|
radius={30}
|
|
placeholder="Email"
|
|
withAsterisk
|
|
label="Email"
|
|
w={"100%"}
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
onChange={(event: any) => {
|
|
setListData({
|
|
...listData,
|
|
email: event.target.value,
|
|
})
|
|
setTouched({ ...touched, email: false })
|
|
}
|
|
}
|
|
onBlur={() => setTouched({ ...touched, email: true })}
|
|
error={
|
|
touched.email && (
|
|
listData.email == "" ? "Email Tidak Boleh Kosong" :
|
|
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(listData.email) ? "Email tidak valid" : null
|
|
)
|
|
}
|
|
/>
|
|
<TextInput
|
|
size="md"
|
|
type="number"
|
|
radius={30}
|
|
placeholder="+62...."
|
|
withAsterisk
|
|
label="Nomor Telepon"
|
|
w={"100%"}
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
onChange={(event: any) => {
|
|
setListData({
|
|
...listData,
|
|
phone: event.target.value,
|
|
})
|
|
setTouched({ ...touched, phone: false })
|
|
}
|
|
}
|
|
onBlur={() => setTouched({ ...touched, phone: true })}
|
|
error={
|
|
touched.phone && (
|
|
listData.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
|
|
listData.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
|
|
)
|
|
}
|
|
/>
|
|
<Select
|
|
placeholder="Jenis Kelamin"
|
|
label="Jenis Kelamin"
|
|
w={"100%"}
|
|
size="md"
|
|
required
|
|
withAsterisk
|
|
radius={30}
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
data={[
|
|
{ value: "M", label: "Laki-laki" },
|
|
{ value: "F", label: "Perempuan" },
|
|
]}
|
|
onChange={(val: any) => {
|
|
setListData({
|
|
...listData,
|
|
gender: val,
|
|
})
|
|
setTouched({ ...touched, gender: false })
|
|
}
|
|
}
|
|
onBlur={() => setTouched({ ...touched, gender: true })}
|
|
error={
|
|
touched.gender && (
|
|
listData.gender == "" ? "Gender Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
</Stack>
|
|
<Box mt={30} mx={20} pb={20}>
|
|
<Button
|
|
c={"white"}
|
|
bg={WARNA.biruTua}
|
|
size="md"
|
|
radius={30}
|
|
fullWidth
|
|
onClick={() => {
|
|
if (
|
|
listData.nik !== "" &&
|
|
listData.name !== "" &&
|
|
listData.email !== "" &&
|
|
listData.phone !== "" &&
|
|
listData.gender !== "" &&
|
|
listData.idGroup !== "" &&
|
|
listData.idPosition !== "" &&
|
|
listData.idUserRole !== ""
|
|
) {
|
|
setModal(true);
|
|
} else {
|
|
toast.error("Mohon lengkapi semua form");
|
|
}
|
|
}}
|
|
>
|
|
Simpan
|
|
</Button>
|
|
</Box>
|
|
<LayoutModal
|
|
opened={isModal}
|
|
onClose={() => setModal(false)}
|
|
description="Apakah Anda yakin ingin menambahkan data?"
|
|
onYes={(val) => {
|
|
onSubmit(val);
|
|
}}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|