wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-21 15:50:21 +08:00
parent 2171c369df
commit 40471f5ebc
8 changed files with 786 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(application)/profile/edit/page.tsx
View File

@@ -1,8 +1,10 @@
import { EditProfile } from "@/module/user" import { EditProfile } from "@/module/user"
import EditProfileCopy from "@/module/user/profile/ui/edit_profile copy"
function Page() { function Page() {
return ( return (
<EditProfile /> // <EditProfile />
<EditProfileCopy/>
) )
} }

2
src/module/home/ui/features.tsx
View File

@@ -14,7 +14,7 @@ export default function Features() {
return ( return (
<> <>
<Box pt={10}> <Box pt={10}>
<Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Features</Text> <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Fitur</Text>
<SimpleGrid <SimpleGrid
cols={{ base: 4, sm: 4, lg: 4 }} cols={{ base: 4, sm: 4, lg: 4 }}
> >

3
src/module/home/ui/list_notification.tsx
View File

@@ -220,6 +220,9 @@ export default function ListNotification() {
mt={10} mt={10}
fz={15} fz={15}
c={v.isRead == false ? tema.get().utama : "gray"} c={v.isRead == false ? tema.get().utama : "gray"}
onClick={() => {
onReadNotif(v.category, v.idContent, v.id);
}}
> >
{v.desc} {v.desc}
</Text> </Text>

14
src/module/home/ui/view_detail_feature.tsx
View File

@@ -36,7 +36,7 @@ export default function ViewDetailFeature() {
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={tema.get().utama}>Divisi</Text> <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Divisi</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/project?status=0&group=null')}> <Box onClick={() => router.push('/project?status=0&group=null')}>
@@ -52,7 +52,7 @@ export default function ViewDetailFeature() {
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={tema.get().utama}>Kegiatan</Text> <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Kegiatan</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/announcement')}> <Box onClick={() => router.push('/announcement')}>
@@ -68,7 +68,7 @@ export default function ViewDetailFeature() {
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={tema.get().utama}>Pengumuman</Text> <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Pengumuman</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/member')}> <Box onClick={() => router.push('/member')}>
@@ -84,7 +84,7 @@ export default function ViewDetailFeature() {
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={tema.get().utama}>Anggota</Text> <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Anggota</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/position')}> <Box onClick={() => router.push('/position')}>
@@ -100,7 +100,7 @@ export default function ViewDetailFeature() {
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={tema.get().utama}>Jabatan</Text> <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Jabatan</Text>
</Center> </Center>
</Box> </Box>
{ {
@@ -119,7 +119,7 @@ export default function ViewDetailFeature() {
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={tema.get().utama}>Grup</Text> <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Grup</Text>
</Center> </Center>
</Box> </Box>
<Box onClick={() => router.push('/color-palette')}> <Box onClick={() => router.push('/color-palette')}>
@@ -135,7 +135,7 @@ export default function ViewDetailFeature() {
</ActionIcon> </ActionIcon>
</Center> </Center>
<Center> <Center>
<Text fz={15} c={tema.get().utama}>Tema</Text> <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Tema</Text>
</Center> </Center>
</Box> </Box>
</> </>

308
src/module/home/ui/view_search.tsx
View File

@@ -1,48 +1,66 @@
"use client" "use client";
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global'; import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
import { ActionIcon, Avatar, Box, Divider, Grid, Group, Text, TextInput } from '@mantine/core'; import {
import React, { useState } from 'react'; ActionIcon,
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiMiniUserGroup } from 'react-icons/hi2'; Avatar,
import { funGetSearchAll } from '../lib/api_search'; Box,
import { useShallowEffect } from '@mantine/hooks'; Divider,
import { IDataDivisionSearch, IDataProjectSearch, IDataUserSearch } from '../lib/type_search'; Grid,
import { useRouter } from 'next/navigation'; Group,
import _ from 'lodash'; Text,
import { useHookstate } from '@hookstate/core'; TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import {
HiMagnifyingGlass,
HiMiniPresentationChartBar,
HiMiniUserGroup,
} from "react-icons/hi2";
import { funGetSearchAll } from "../lib/api_search";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import {
IDataDivisionSearch,
IDataProjectSearch,
IDataUserSearch,
} from "../lib/type_search";
import { useRouter } from "next/navigation";
import _ from "lodash";
import { useHookstate } from "@hookstate/core";
export default function ViewSearch() { export default function ViewSearch() {
const [search, setSearch] = useState(''); const [search, setSearch] = useState("");
const [dataUser, setDataUser] = useState<IDataUserSearch[]>([]); const [dataUser, setDataUser] = useState<IDataUserSearch[]>([]);
const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([]); const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([]);
const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([]); const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([]);
const router = useRouter() const router = useRouter();
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA);
async function featchSearch() { async function featchSearch() {
try { try {
const res = await funGetSearchAll('?search=' + search); const res = await funGetSearchAll("?search=" + search);
setDataUser(res.data.user); setDataUser(res.data.user);
setDataProject(res.data.project); setDataProject(res.data.project);
setDataDivision(res.data.division); setDataDivision(res.data.division);
} catch (error) { } catch (error) {
console.error(error) console.error(error);
throw new Error("Error") throw new Error("Error");
} }
} }
useShallowEffect(() => { useShallowEffect(() => {
if (search != '') { if (search != "") {
featchSearch() featchSearch();
} else { } else {
setDataUser([]); setDataUser([]);
setDataProject([]); setDataProject([]);
setDataDivision([]); setDataDivision([]);
} }
}, [search]) }, [search]);
const isMobile2 = useMediaQuery("(max-width: 460px)");
return ( return (
<> <>
<LayoutNavbarNew back='/home' title='Pencarian' menu={<></>} /> <LayoutNavbarNew back="/home" title="Pencarian" menu={<></>} />
<Box p={20}> <Box p={20}>
<TextInput <TextInput
styles={{ styles={{
@@ -59,147 +77,261 @@ export default function ViewSearch() {
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />
{dataUser.length || dataProject.length || dataDivision.length > 0 ? ( {dataUser.length || dataProject.length || dataDivision.length > 0 ? (
<Box pt={20}> <Box pt={20}>
<Box style={{ <Box
style={{
border: `1px solid ${WARNA.borderBiruMuda}`, border: `1px solid ${WARNA.borderBiruMuda}`,
padding: 10, padding: 10,
borderRadius: 10, borderRadius: 10,
}}> }}
>
{dataUser.length > 0 ? (
<Box>
<Text>ANGGOTA</Text> <Text>ANGGOTA</Text>
<Box style={{ <Box
style={{
paddingLeft: 20, paddingLeft: 20,
paddingRight: 20, paddingRight: 20,
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
backgroundColor: `#E7EBF1`, backgroundColor: `#E7EBF1`,
borderRadius: 5 borderRadius: 5,
}}> }}
>
{dataUser.length > 0 ? ( {dataUser.length > 0 ? (
<Box mt={5}> <Box mt={5}>
{dataUser.map((v, i) => { {dataUser.map((v, i) => {
return ( return (
<Box key={i}> <Box key={i}>
<Box onClick={() => { <Box
router.push(`/member/${v.id}`) onClick={() => {
}}> router.push(`/member/${v.id}`);
<Grid gutter={{ }}
base: 60, >
xl: "xs" <Grid align="center">
}} align="center"> <Grid.Col
<Grid.Col span={2}> span={{
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size={50} alt="image" /> base: 1.5,
xs: 1.5,
sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}}
>
<Avatar
src={`https://wibu-storage.wibudev.com/api/files/${v.img}`}
size={50}
alt="image"
/>
</Grid.Col> </Grid.Col>
<Grid.Col span={9}> <Grid.Col
<Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text> span={{
<Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text> base: 10,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
pl={isMobile2 ? 30 : 20}
>
<Text
fw={"bold"}
c={tema.get().utama}
truncate="end"
>
{_.startCase(v.name)}
</Text>
<Text fw={"lighter"} fz={12} truncate="end">
{v.group + " - " + v.position}
</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>
<Divider my={10} /> <Divider my={10} />
</Box> </Box>
) );
})} })}
</Box> </Box>
) : ) : null}
<Text>Tidak Ada Anggota</Text>
}
</Box> </Box>
</Box>
) : null}
{dataDivision.length > 0 ? (
<Box mt={10}> <Box mt={10}>
<Text>DIVISI</Text> <Text>DIVISI</Text>
<Box style={{ <Box
style={{
paddingLeft: 20, paddingLeft: 20,
paddingRight: 20, paddingRight: 20,
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
backgroundColor: `#E7EBF1`, backgroundColor: `#E7EBF1`,
borderRadius: 5 borderRadius: 5,
}}> }}
>
{dataDivision.length > 0 ? ( {dataDivision.length > 0 ? (
<Box> <Box>
{dataDivision.map((v, i) => { {dataDivision.map((v, i) => {
return ( return (
<Box key={i} onClick={() => router.push(`/division/${v.id}`)}>
<Grid justify='center' align='center' mt={15} >
<Grid.Col span={2}>
<ActionIcon variant="light" bg={tema.get().utama} size={50} radius={100} aria-label="icon">
<HiMiniUserGroup color={'white'} size={25} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={10}>
<Box <Box
w={{ key={i}
base: 220, onClick={() => router.push(`/division/${v.id}`)}
xl: 380 >
<Grid align="center" mt={15}>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}} }}
> >
<Text pl={{base: 10, xl:0}} fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.name.toUpperCase()}</Text> <ActionIcon
variant="light"
bg={tema.get().utama}
size={50}
radius={100}
aria-label="icon"
>
<HiMiniUserGroup
color={"white"}
size={25}
/>
</ActionIcon>
</Grid.Col>
<Grid.Col
span={{
base: 10,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
pl={isMobile2 ? 30 : 20}
>
<Box
>
<Text
fw={"bold"}
c={tema.get().utama}
truncate="end"
>
{v.name.toUpperCase()}
</Text>
</Box> </Box>
<Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text> <Text fw={"lighter"} fz={12} truncate="end">
{v.group}
</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Text fw={'lighter'} mt={10} mb={10} lineClamp={2}>{v.desc}</Text> <Text
fw={"lighter"}
mt={10}
mb={10}
lineClamp={2}
>
{v.desc}
</Text>
<Divider my={5} /> <Divider my={5} />
</Box> </Box>
) );
})} })}
</Box> </Box>
) : ) : null}
<Text>Tidak Ada Divisi</Text>
}
</Box> </Box>
</Box> </Box>
) : null}
{dataProject.length > 0 ? (
<Box mt={10}> <Box mt={10}>
<Text>KEGIATAN</Text> <Text>KEGIATAN</Text>
<Box style={{ <Box
style={{
paddingLeft: 20, paddingLeft: 20,
paddingRight: 20, paddingRight: 20,
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
backgroundColor: `#E7EBF1`, backgroundColor: `#E7EBF1`,
borderRadius: 5 borderRadius: 5,
}}> }}
>
{dataProject.length > 0 ? ( {dataProject.length > 0 ? (
<Box> <Box>
{dataProject.map((v, i) => { {dataProject.map((v, i) => {
return ( return (
<Box key={i} onClick={() => router.push(`/project/${v.id}`)}>
<Grid justify='center' align='center' mt={10}>
<Grid.Col span={2}>
<ActionIcon variant="light" bg={tema.get().utama} size={50} radius={100} aria-label="icon">
<HiMiniPresentationChartBar color={'white'} size={25} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={10}>
<Box <Box
w={{ key={i}
base: 220, onClick={() => router.push(`/project/${v.id}`)}
xl: 380 >
<Grid justify="center" align="center" mt={10}>
<Grid.Col
span={{
base: 1.5,
xs: 1.5,
sm: 1.5,
md: 1.5,
lg: 1.5,
xl: 1.5,
}} }}
> >
<Text pl={{base: 10, xl:0}} fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title.toUpperCase()}</Text> <ActionIcon
variant="light"
bg={tema.get().utama}
size={50}
radius={100}
aria-label="icon"
>
<HiMiniPresentationChartBar
color={"white"}
size={25}
/>
</ActionIcon>
</Grid.Col>
<Grid.Col
span={{
base: 10,
xs: 10.5,
sm: 10.5,
md: 10.5,
lg: 10.5,
xl: 10.5,
}}
pl={isMobile2 ? 30 : 20}
>
<Box
>
<Text
fw={"bold"}
c={tema.get().utama}
truncate="end"
>
{v.title.toUpperCase()}
</Text>
</Box> </Box>
<Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text> <Text fw={"lighter"} fz={12} truncate="end">
{v.group}
</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Divider mt={10} /> <Divider mt={10} />
</Box> </Box>
) );
})} })}
</Box> </Box>
) ) : null}
: <Text>Tidak Ada Kegiatan</Text>
}
</Box> </Box>
</Box> </Box>
) : null}
</Box> </Box>
</Box> </Box>
) ) : null}
: null
}
</Box> </Box>
</> </>
); );
} }

311
src/module/user/profile/ui/edit_profile copy.tsx Normal file
View File

@@ -0,0 +1,311 @@
"use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global";
import {
Avatar,
Box,
Button,
Flex,
Indicator,
Modal,
rem,
Select,
Skeleton,
Stack,
Text,
TextInput,
} from "@mantine/core";
import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useRef, useState } from "react";
import { IEditDataProfile, IProfileById } from "../lib/type_profile";
import {
funEditProfileByCookies,
funGetProfileByCookies,
} from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks";
import { FaCamera, FaShare } from "react-icons/fa6";
import { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core";
import { useForm } from "@mantine/form";
export default function EditProfileCopy() {
const [isValModal, setValModal] = useState(false);
const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]);
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 [data, setData] = useState<IEditDataProfile>({
id: "",
nik: "",
name: "",
phone: "",
email: "",
gender: "",
img: "",
});
async function getAllProfile() {
try {
setLoading(true);
const res = await funGetProfileByCookies();
setData(res.data);
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) {
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");
}
}
return (
<Box>
<LayoutNavbarNew back="" title="Edit Profill" 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 ? (
<>
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} />
</>
) : (
<>
<TextInput
size="md"
type="number"
radius={30}
placeholder="NIK"
withAsterisk
label="NIK"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
setData({ ...data, nik: e.target.value });
}}
value={data.nik}
/>
<TextInput
size="md"
type="text"
radius={30}
placeholder="Nama"
withAsterisk
label="Nama"
value={data.name}
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
setData({ ...data, name: e.target.value });
}}
/>
<TextInput
size="md"
type="email"
radius={30}
placeholder="Email"
withAsterisk
label="Email"
w={"100%"}
styles={{
input: {
color: tema.get().utama,
borderRadius: tema.get().utama,
borderColor: tema.get().utama,
},
}}
onChange={(e) => {
setData({ ...data, email: e.target.value });
}}
value={data.email}
/>
<TextInput
size="md"
type="number"
radius={30}
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) => {
setData({ ...data, phone: e.target.value });
}}
value={data.phone}
/>
<Select
placeholder="Jenis Kelamin"
label="Jenis Kelamin"
w={"100%"}
size="md"
required
withAsterisk
radius={30}
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) => {
setData({ ...data, gender: val });
}}
value={data.gender}
/>
</>
)}
</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="md"
radius={30}
fullWidth
type="submit"
>
Simpan
</Button>
)}
</Box>
<LayoutModal
opened={isValModal}
onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin
melakukan perubahan data?"
onYes={(val) => {
onEditProfile(val);
}}
/>
</Box>
);
}

268
src/module/user/profile/ui/edit_profile.tsx
View File

@@ -1,11 +1,27 @@
"use client" "use client";
import { LayoutNavbarNew, TEMA } from "@/module/_global"; import { LayoutNavbarNew, TEMA } from "@/module/_global";
import { Avatar, Box, Button, Flex, Indicator, Modal, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core"; import {
Avatar,
Box,
Button,
Flex,
Indicator,
Modal,
rem,
Select,
Skeleton,
Stack,
Text,
TextInput,
} from "@mantine/core";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { IEditDataProfile, IProfileById } from "../lib/type_profile"; import { IEditDataProfile, IProfileById } from "../lib/type_profile";
import { funEditProfileByCookies, funGetProfileByCookies } from "../lib/api_profile"; import {
funEditProfileByCookies,
funGetProfileByCookies,
} from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { FaCamera, FaShare } from "react-icons/fa6"; import { FaCamera, FaShare } from "react-icons/fa6";
import { Dropzone } from "@mantine/dropzone"; import { Dropzone } from "@mantine/dropzone";
@@ -14,14 +30,14 @@ import { useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
export default function EditProfile() { export default function EditProfile() {
const [isValModal, setValModal] = useState(false) const [isValModal, setValModal] = useState(false);
const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]) const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]);
const openRef = useRef<() => void>(null) const openRef = useRef<() => void>(null);
const [img, setIMG] = useState<any | null>() const [img, setIMG] = useState<any | null>();
const [imgForm, setImgForm] = useState<any>() const [imgForm, setImgForm] = useState<any>();
const router = useRouter() const router = useRouter();
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true);
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA);
const [touched, setTouched] = useState({ const [touched, setTouched] = useState({
nik: false, nik: false,
@@ -39,44 +55,44 @@ export default function EditProfile() {
email: "", email: "",
gender: "", gender: "",
img: "", img: "",
}) });
async function getAllProfile() { async function getAllProfile() {
try { try {
setLoading(true) setLoading(true);
const res = await funGetProfileByCookies() const res = await funGetProfileByCookies();
setData(res.data) setData(res.data);
setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`) setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`);
setLoading(false) setLoading(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoading(false) setLoading(false);
} }
} }
useShallowEffect(() => { useShallowEffect(() => {
getAllProfile() getAllProfile();
}, []) }, []);
async function onEditProfile(val: boolean) { async function onEditProfile(val: boolean) {
try { try {
if (val) { if (val) {
const fd = new FormData();
fd.append("file", imgForm)
fd.append("data", JSON.stringify(data))
const res = await funEditProfileByCookies(fd) const fd = new FormData();
fd.append("file", imgForm);
fd.append("data", JSON.stringify(data));
const res = await funEditProfileByCookies(fd);
if (res.success) { if (res.success) {
setValModal(false) setValModal(false);
toast.success(res.message) toast.success(res.message);
router.push('/profile') router.push("/profile");
} else { } else {
toast.error(res.message) toast.error(res.message);
} }
} }
setValModal(false) setValModal(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal edit profil, coba lagi nanti"); toast.error("Gagal edit profil, coba lagi nanti");
@@ -85,48 +101,53 @@ export default function EditProfile() {
return ( return (
<Box> <Box>
<LayoutNavbarNew back='' title='Edit Profil' menu='' /> <LayoutNavbarNew back="" title="Edit Profil" menu="" />
<Stack <Stack align="center" justify="center" gap="xs" pt={30} px={20} pb={100}>
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
pb={100}
>
<Dropzone <Dropzone
openRef={openRef} openRef={openRef}
onDrop={async (files) => { onDrop={async (files) => {
if (!files || _.isEmpty(files)) if (!files || _.isEmpty(files))
return toast.error('Tidak ada gambar yang dipilih') return toast.error("Tidak ada gambar yang dipilih");
setImgForm(files[0]) setImgForm(files[0]);
const buffer = URL.createObjectURL(new Blob([new Uint8Array(await files[0].arrayBuffer())])) const buffer = URL.createObjectURL(
setIMG(buffer) new Blob([new Uint8Array(await files[0].arrayBuffer())])
);
setIMG(buffer);
}} }}
activateOnClick={false} activateOnClick={false}
maxSize={1 * 1024 ** 2} maxSize={1 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic']} accept={["image/png", "image/jpeg", "image/heic"]}
onReject={(files) => { onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, dan .heic dengan ukuran maksimal 1 MB') return toast.error(
"File yang diizinkan: .png, .jpg, dan .heic dengan ukuran maksimal 1 MB"
);
}} }}
> ></Dropzone>
</Dropzone>
{loading ? {loading ? (
<Skeleton height={150} width={150} radius={"100"} /> <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?.()}> <Indicator
offset={20}
withBorder
inline
color={tema.get().bgFiturHome}
position="bottom-end"
label={<FaCamera size={20} />}
size={40}
onClick={() => openRef.current?.()}
>
<Avatar <Avatar
size="150" size="150"
radius={"100"} radius={"100"}
src={img} src={img}
style={{ style={{
border: `1px solid ${"#C1BFBFFF"}` border: `1px solid ${"#C1BFBFFF"}`,
}} }}
/> />
</Indicator> </Indicator>
} )}
{loading ? {loading ? (
<> <>
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={30} />
@@ -134,10 +155,16 @@ export default function EditProfile() {
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={30} />
<Skeleton height={40} mt={20} radius={30} /> <Skeleton height={40} mt={20} radius={30} />
</> </>
: ) : (
<> <>
<TextInput <TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"} size="md"
type="number"
radius={30}
placeholder="NIK"
withAsterisk
label="NIK"
w={"100%"}
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,
@@ -146,20 +173,28 @@ export default function EditProfile() {
}, },
}} }}
onChange={(e) => { onChange={(e) => {
setData({ ...data, nik: e.target.value }) setData({ ...data, nik: e.target.value });
setTouched({ ...touched, nik: false }) setTouched({ ...touched, nik: false });
}} }}
value={data.nik} value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })} onBlur={() => setTouched({ ...touched, nik: true })}
error={ error={
touched.nik && ( touched.nik &&
data.nik === "" ? "NIK Tidak Boleh Kosong" : (data.nik === ""
data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null ? "NIK Tidak Boleh Kosong"
) : data.nik.length !== 16
? "NIK Harus 16 Karakter"
: null)
} }
/> />
<TextInput <TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"} size="md"
type="text"
radius={30}
placeholder="Nama"
withAsterisk
label="Nama"
w={"100%"}
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,
@@ -168,19 +203,24 @@ export default function EditProfile() {
}, },
}} }}
onChange={(e) => { onChange={(e) => {
setData({ ...data, name: e.target.value }) setData({ ...data, name: e.target.value });
setTouched({ ...touched, name: false }) setTouched({ ...touched, name: false });
}} }}
value={data.name} value={data.name}
onBlur={() => setTouched({ ...touched, name: true })} onBlur={() => setTouched({ ...touched, name: true })}
error={ error={
touched.name && ( touched.name &&
data.name == "" ? "Nama Tidak Boleh Kosong" : null (data.name == "" ? "Nama Tidak Boleh Kosong" : null)
)
} }
/> />
<TextInput <TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"} size="md"
type="email"
radius={30}
placeholder="Email"
withAsterisk
label="Email"
w={"100%"}
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,
@@ -189,20 +229,30 @@ export default function EditProfile() {
}, },
}} }}
onChange={(e) => { onChange={(e) => {
setData({ ...data, email: e.target.value }) setData({ ...data, email: e.target.value });
setTouched({ ...touched, email: false }) setTouched({ ...touched, email: false });
}} }}
value={data.email} value={data.email}
onBlur={() => setTouched({ ...touched, email: true })} onBlur={() => setTouched({ ...touched, email: true })}
error={ error={
touched.email && ( touched.email &&
data.email == "" ? "Email Tidak Boleh Kosong" : (data.email == ""
!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null ? "Email Tidak Boleh Kosong"
: !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
data.email
) )
? "Email tidak valid"
: null)
} }
/> />
<TextInput <TextInput
size="md" type="number" radius={30} placeholder="8xx xxxx xxxx" withAsterisk label="Nomor Telepon" w={"100%"} size="md"
type="number"
radius={30}
placeholder="8xx xxxx xxxx"
withAsterisk
label="Nomor Telepon"
w={"100%"}
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,
@@ -212,19 +262,24 @@ export default function EditProfile() {
}} }}
leftSection={<Text>+62</Text>} leftSection={<Text>+62</Text>}
onChange={(e) => { onChange={(e) => {
setData({ ...data, phone: e.target.value }) setData({ ...data, phone: e.target.value });
setTouched({ ...touched, phone: false }) setTouched({ ...touched, phone: false });
}} }}
value={data.phone} value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })} onBlur={() => setTouched({ ...touched, phone: true })}
error={ error={
touched.phone && ( touched.phone &&
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null (data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null)
)
} }
/> />
<Select <Select
placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30} placeholder="Jenis Kelamin"
label="Jenis Kelamin"
w={"100%"}
size="md"
required
withAsterisk
radius={30}
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,
@@ -232,41 +287,44 @@ export default function EditProfile() {
borderColor: tema.get().utama, borderColor: tema.get().utama,
}, },
}} }}
data={ data={[
[
{ {
value: "M", value: "M",
label: "Laki-laki" label: "Laki-laki",
}, },
{ {
value: "F", value: "F",
label: "Perempuan" label: "Perempuan",
} },
] ]}
}
onChange={(val: any) => { onChange={(val: any) => {
setData({ ...data, gender: val }) setData({ ...data, gender: val });
setTouched({ ...touched, gender: false }) setTouched({ ...touched, gender: false });
}} }}
value={data.gender} value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })} onBlur={() => setTouched({ ...touched, gender: true })}
error={ error={
touched.gender && ( touched.gender &&
data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null (data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null)
)
} }
/> />
</> </>
} )}
</Stack> </Stack>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{ <Box
pos={"fixed"}
bottom={0}
p={rem(20)}
w={"100%"}
style={{
maxWidth: rem(550), maxWidth: rem(550),
zIndex: 999, zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`, backgroundColor: `${tema.get().bgUtama}`,
}}> }}
{loading ? >
{loading ? (
<Skeleton height={50} radius={30} /> <Skeleton height={50} radius={30} />
: ) : (
<Button <Button
c={"white"} c={"white"}
bg={tema.get().utama} bg={tema.get().utama}
@@ -281,7 +339,7 @@ export default function EditProfile() {
data.phone !== "" && data.phone !== "" &&
data.gender !== "" data.gender !== ""
) { ) {
setValModal(true) setValModal(true);
} else { } else {
toast.error("Mohon lengkapi semua form"); toast.error("Mohon lengkapi semua form");
} }
@@ -289,13 +347,17 @@ export default function EditProfile() {
> >
Simpan Simpan
</Button> </Button>
} )}
</Box> </Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)} <LayoutModal
opened={isValModal}
onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin description="Apakah Anda yakin ingin
melakukan perubahan data?" melakukan perubahan data?"
onYes={(val) => { onEditProfile(val) }} /> onYes={(val) => {
onEditProfile(val);
}}
/>
</Box> </Box>
) );
} }

2
src/module/user/profile/ui/profile.tsx
View File

@@ -116,7 +116,7 @@ export default function Profile() {
<Grid.Col span={5}> <Grid.Col span={5}>
<Group> <Group>
<FaSquarePhone size={25} /> <FaSquarePhone size={25} />
<Text fz={15}>No Telpon</Text> <Text fz={15}>No Telepon</Text>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={7}> <Grid.Col span={7}>