96084b22c0
Deskripsi: - tambah input select jabatan pada edit profile - tambah loading pada input select jabatan halaman edit profile - tambah loading pada input select jabatan halaman edit member No Issues
419 lines
13 KiB
TypeScript
419 lines
13 KiB
TypeScript
"use client";
|
|
import { LayoutNavbarNew, TEMA } from "@/module/_global";
|
|
import LayoutModal from "@/module/_global/layout/layout_modal";
|
|
import { useHookstate } from "@hookstate/core";
|
|
import { Avatar, Box, Button, Indicator, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
|
|
import { Dropzone } from "@mantine/dropzone";
|
|
import { useShallowEffect } from "@mantine/hooks";
|
|
import _ from "lodash";
|
|
import { useRouter } from "next/navigation";
|
|
import { useRef, useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { FaCamera } from "react-icons/fa6";
|
|
import { funEditProfileByCookies, funGetProfileByCookies, } from "../lib/api_profile";
|
|
import { IEditDataProfile, IProfileById } from "../lib/type_profile";
|
|
import { IDataPositionMember } from "../../member/lib/type_member";
|
|
import { funGetAllPosition } from "@/module/position/lib/api_position";
|
|
|
|
export default function EditProfile() {
|
|
const [isValModal, setValModal] = useState(false);
|
|
const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]);
|
|
const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
|
|
const openRef = useRef<() => void>(null);
|
|
const [img, setIMG] = useState<any | null>();
|
|
const [imgForm, setImgForm] = useState<any>();
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState(true);
|
|
const tema = useHookstate(TEMA);
|
|
const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false);
|
|
const [loadingPosition, setLoadingPosition] = useState(true)
|
|
|
|
const [touched, setTouched] = useState({
|
|
nik: false,
|
|
name: false,
|
|
phone: false,
|
|
email: false,
|
|
gender: false,
|
|
idPosition: false
|
|
});
|
|
|
|
const [data, setData] = useState<IEditDataProfile>({
|
|
id: "",
|
|
nik: "",
|
|
name: "",
|
|
phone: "",
|
|
email: "",
|
|
gender: "",
|
|
img: "",
|
|
idPosition: ""
|
|
});
|
|
|
|
async function getAllPosition(val: any) {
|
|
try {
|
|
setLoadingPosition(true)
|
|
const res = await funGetAllPosition(
|
|
"?active=true" + "&group=" + `${val}`
|
|
);
|
|
setListPosition(res.data);
|
|
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
setLoadingPosition(false)
|
|
}
|
|
}
|
|
|
|
async function getAllProfile() {
|
|
try {
|
|
setLoading(true);
|
|
const res = await funGetProfileByCookies();
|
|
setData(res.data);
|
|
getAllPosition(res.data.idGroup);
|
|
setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`);
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
useShallowEffect(() => {
|
|
getAllProfile();
|
|
}, []);
|
|
|
|
async function onEditProfile(val: boolean) {
|
|
try {
|
|
if (val) {
|
|
setLoadingKonfirmasi(true)
|
|
const fd = new FormData();
|
|
fd.append("file", imgForm);
|
|
fd.append("data", JSON.stringify(data));
|
|
|
|
const res = await funEditProfileByCookies(fd);
|
|
if (res.success) {
|
|
setValModal(false);
|
|
toast.success(res.message);
|
|
router.push("/profile");
|
|
} else {
|
|
toast.error(res.message);
|
|
}
|
|
}
|
|
setValModal(false);
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error("Gagal edit profil, coba lagi nanti");
|
|
} finally {
|
|
setLoadingKonfirmasi(false)
|
|
}
|
|
}
|
|
|
|
|
|
function onCheck() {
|
|
if (Object.values(touched).some((v) => v == true))
|
|
return false
|
|
setValModal(true)
|
|
}
|
|
|
|
|
|
function onValidation(kategori: string, val: string) {
|
|
if (kategori == 'nik') {
|
|
setData({ ...data, nik: val })
|
|
if (val === "" || val.length !== 16) {
|
|
setTouched({ ...touched, nik: true })
|
|
} else {
|
|
setTouched({ ...touched, nik: false })
|
|
}
|
|
} else if (kategori == 'name') {
|
|
setData({ ...data, name: val })
|
|
if (val === "") {
|
|
setTouched({ ...touched, name: true })
|
|
} else {
|
|
setTouched({ ...touched, name: false })
|
|
}
|
|
} else if (kategori == 'phone') {
|
|
setData({ ...data, phone: val })
|
|
if (val == "" || !(val.length >= 9 && val.length <= 15)) {
|
|
setTouched({ ...touched, phone: true })
|
|
} else {
|
|
setTouched({ ...touched, phone: false })
|
|
}
|
|
} else if (kategori == 'email') {
|
|
setData({ ...data, email: val })
|
|
if (val == "" || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)) {
|
|
setTouched({ ...touched, email: true })
|
|
} else {
|
|
setTouched({ ...touched, email: false })
|
|
}
|
|
} else if (kategori == 'gender') {
|
|
setData({ ...data, gender: val })
|
|
if (val == "" || String(val) == "null") {
|
|
setTouched({ ...touched, gender: true })
|
|
} else {
|
|
setTouched({ ...touched, gender: false })
|
|
}
|
|
} else if (kategori == 'idPosition') {
|
|
setData({ ...data, idPosition: val })
|
|
if (val == "" || String(val) == "null") {
|
|
setTouched({ ...touched, idPosition: true })
|
|
} else {
|
|
setTouched({ ...touched, idPosition: false })
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<LayoutNavbarNew back="" title="Edit Profil" menu="" />
|
|
<Stack align="center" justify="center" gap="xs" pt={30} px={20} pb={100}>
|
|
<Dropzone
|
|
openRef={openRef}
|
|
onDrop={async (files) => {
|
|
if (!files || _.isEmpty(files))
|
|
return toast.error("Tidak ada gambar yang dipilih");
|
|
setImgForm(files[0]);
|
|
const buffer = URL.createObjectURL(
|
|
new Blob([new Uint8Array(await files[0].arrayBuffer())])
|
|
);
|
|
setIMG(buffer);
|
|
}}
|
|
activateOnClick={false}
|
|
maxSize={1 * 1024 ** 2}
|
|
accept={["image/png", "image/jpeg", "image/heic"]}
|
|
onReject={(files) => {
|
|
return toast.error(
|
|
"File yang diizinkan: .png, .jpg, dan .heic dengan ukuran maksimal 1 MB"
|
|
);
|
|
}}
|
|
></Dropzone>
|
|
|
|
{loading ? (
|
|
<Skeleton height={150} width={150} radius={"100"} />
|
|
) : (
|
|
<Indicator
|
|
offset={20}
|
|
withBorder
|
|
inline
|
|
color={tema.get().bgFiturHome}
|
|
position="bottom-end"
|
|
label={<FaCamera size={20} />}
|
|
size={40}
|
|
onClick={() => openRef.current?.()}
|
|
>
|
|
<Avatar
|
|
size="150"
|
|
radius={"100"}
|
|
src={img}
|
|
style={{
|
|
border: `1px solid ${"#C1BFBFFF"}`,
|
|
}}
|
|
/>
|
|
</Indicator>
|
|
)}
|
|
{loading ?
|
|
[...Array(6)].map((_, index) => (
|
|
<Skeleton key={index} height={40} mt={20} radius={10} />
|
|
))
|
|
: (
|
|
<>
|
|
<Select
|
|
placeholder={loadingPosition ? "Loading.. " : "Pilih Jabatan"}
|
|
label="Jabatan" w={"100%"} size="md" required withAsterisk radius={10}
|
|
styles={{
|
|
input: {
|
|
color: tema.get().utama,
|
|
borderRadius: tema.get().utama,
|
|
borderColor: tema.get().utama,
|
|
},
|
|
}}
|
|
data={
|
|
listPosition
|
|
? listPosition.map((data) => ({
|
|
value: data.id,
|
|
label: data.name,
|
|
}))
|
|
: []
|
|
}
|
|
onChange={(val: any) => { onValidation('idPosition', val) }}
|
|
value={(data?.idPosition == "") ? null : data.idPosition}
|
|
error={
|
|
touched.idPosition && (
|
|
data.idPosition == "" || String(data.idPosition) == "null" ? "Jabatan Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
<TextInput
|
|
size="md"
|
|
type="number"
|
|
radius={10}
|
|
placeholder="NIK"
|
|
withAsterisk
|
|
label="NIK"
|
|
w={"100%"}
|
|
styles={{
|
|
input: {
|
|
color: tema.get().utama,
|
|
borderRadius: tema.get().utama,
|
|
borderColor: tema.get().utama,
|
|
},
|
|
}}
|
|
onChange={(e) => { onValidation('nik', e.target.value) }}
|
|
value={data.nik}
|
|
error={
|
|
touched.nik &&
|
|
(data.nik === ""
|
|
? "NIK Tidak Boleh Kosong"
|
|
: data.nik.length !== 16
|
|
? "NIK Harus 16 Karakter"
|
|
: null)
|
|
}
|
|
/>
|
|
<TextInput
|
|
size="md"
|
|
type="text"
|
|
radius={10}
|
|
placeholder="Nama"
|
|
withAsterisk
|
|
label="Nama"
|
|
w={"100%"}
|
|
styles={{
|
|
input: {
|
|
color: tema.get().utama,
|
|
borderRadius: tema.get().utama,
|
|
borderColor: tema.get().utama,
|
|
},
|
|
}}
|
|
onChange={(e) => { onValidation('name', e.target.value) }}
|
|
value={data.name}
|
|
error={
|
|
touched.name &&
|
|
(data.name == "" ? "Nama Tidak Boleh Kosong" : null)
|
|
}
|
|
/>
|
|
<TextInput
|
|
size="md"
|
|
type="email"
|
|
radius={10}
|
|
placeholder="Email"
|
|
withAsterisk
|
|
label="Email"
|
|
w={"100%"}
|
|
styles={{
|
|
input: {
|
|
color: tema.get().utama,
|
|
borderRadius: tema.get().utama,
|
|
borderColor: tema.get().utama,
|
|
},
|
|
}}
|
|
onChange={(e) => { onValidation('email', e.target.value) }}
|
|
value={data.email}
|
|
error={
|
|
touched.email &&
|
|
(data.email == ""
|
|
? "Email Tidak Boleh Kosong"
|
|
: !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
|
|
data.email
|
|
)
|
|
? "Email tidak valid"
|
|
: null)
|
|
}
|
|
/>
|
|
<TextInput
|
|
size="md"
|
|
type="number"
|
|
radius={10}
|
|
placeholder="8xx xxxx xxxx"
|
|
withAsterisk
|
|
label="Nomor Telepon"
|
|
w={"100%"}
|
|
styles={{
|
|
input: {
|
|
color: tema.get().utama,
|
|
borderRadius: tema.get().utama,
|
|
borderColor: tema.get().utama,
|
|
},
|
|
}}
|
|
leftSection={<Text>+62</Text>}
|
|
onChange={(e) => { onValidation('phone', e.target.value); }}
|
|
value={data.phone}
|
|
error={
|
|
touched.phone &&
|
|
(data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong"
|
|
: !(data.phone.length >= 9 && data.phone.length <= 15) ? "Nomor Telepon Tidak Valid" : null)
|
|
}
|
|
/>
|
|
<Select
|
|
placeholder="Jenis Kelamin"
|
|
label="Jenis Kelamin"
|
|
w={"100%"}
|
|
size="md"
|
|
required
|
|
withAsterisk
|
|
radius={10}
|
|
styles={{
|
|
input: {
|
|
color: tema.get().utama,
|
|
borderRadius: tema.get().utama,
|
|
borderColor: tema.get().utama,
|
|
},
|
|
}}
|
|
data={[
|
|
{
|
|
value: "M",
|
|
label: "Laki-laki",
|
|
},
|
|
{
|
|
value: "F",
|
|
label: "Perempuan",
|
|
},
|
|
]}
|
|
onChange={(val: any) => { onValidation('gender', val) }}
|
|
value={data.gender}
|
|
error={
|
|
touched.gender &&
|
|
(data.gender == "" || data.gender == null ? "Jenis Kelamin Tidak Boleh Kosong" : null)
|
|
}
|
|
/>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
<Box
|
|
pos={"fixed"}
|
|
bottom={0}
|
|
p={rem(20)}
|
|
w={"100%"}
|
|
style={{
|
|
maxWidth: rem(550),
|
|
zIndex: 999,
|
|
backgroundColor: `${tema.get().bgUtama}`,
|
|
}}
|
|
>
|
|
{loading ? (
|
|
<Skeleton height={50} radius={30} />
|
|
) : (
|
|
<Button
|
|
c={"white"}
|
|
bg={tema.get().utama}
|
|
size="lg"
|
|
radius={30}
|
|
fullWidth
|
|
onClick={() => { onCheck() }}
|
|
>
|
|
Simpan
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
<LayoutModal
|
|
loading={loadingKonfirmasi}
|
|
opened={isValModal}
|
|
onClose={() => setValModal(false)}
|
|
description="Apakah Anda yakin ingin
|
|
melakukan perubahan data?"
|
|
onYes={(val) => {
|
|
onEditProfile(val);
|
|
}}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|