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 EditProfileCopy from "@/module/user/profile/ui/edit_profile copy"
function Page() {
return (
<EditProfile />
// <EditProfile />
<EditProfileCopy/>
)
}

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

@@ -14,7 +14,7 @@ export default function Features() {
return (
<>
<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
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}
fz={15}
c={v.isRead == false ? tema.get().utama : "gray"}
onClick={() => {
onReadNotif(v.category, v.idContent, v.id);
}}
>
{v.desc}
</Text>

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

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

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

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

286
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 { 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 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 {
funEditProfileByCookies,
funGetProfileByCookies,
} from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks";
import { FaCamera, FaShare } from "react-icons/fa6";
import { Dropzone } from "@mantine/dropzone";
@@ -14,14 +30,14 @@ import { useRouter } from "next/navigation";
import { useHookstate } from "@hookstate/core";
export default function EditProfile() {
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 [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 [touched, setTouched] = useState({
nik: false,
@@ -39,44 +55,44 @@ export default function EditProfile() {
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)
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)
setLoading(false);
}
}
useShallowEffect(() => {
getAllProfile()
}, [])
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)
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')
setValModal(false);
toast.success(res.message);
router.push("/profile");
} else {
toast.error(res.message)
toast.error(res.message);
}
}
setValModal(false)
setValModal(false);
} catch (error) {
console.error(error);
toast.error("Gagal edit profil, coba lagi nanti");
@@ -85,48 +101,53 @@ export default function EditProfile() {
return (
<Box>
<LayoutNavbarNew back='' title='Edit Profil' menu='' />
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
pb={100}
>
<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)
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']}
accept={["image/png", "image/jpeg", "image/heic"]}
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"} />
:
<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
size="150"
radius={"100"}
src={img}
style={{
border: `1px solid ${"#C1BFBFFF"}`
border: `1px solid ${"#C1BFBFFF"}`,
}}
/>
</Indicator>
}
{loading ?
)}
{loading ? (
<>
<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} />
</>
:
) : (
<>
<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={{
input: {
color: tema.get().utama,
@@ -146,20 +173,28 @@ export default function EditProfile() {
},
}}
onChange={(e) => {
setData({ ...data, nik: e.target.value })
setTouched({ ...touched, nik: false })
setData({ ...data, nik: e.target.value });
setTouched({ ...touched, nik: false });
}}
value={data.nik}
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
data.nik === "" ? "NIK Tidak Boleh Kosong" :
data.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
)
touched.nik &&
(data.nik === ""
? "NIK Tidak Boleh Kosong"
: data.nik.length !== 16
? "NIK Harus 16 Karakter"
: null)
}
/>
<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={{
input: {
color: tema.get().utama,
@@ -168,19 +203,24 @@ export default function EditProfile() {
},
}}
onChange={(e) => {
setData({ ...data, name: e.target.value })
setTouched({ ...touched, name: false })
setData({ ...data, name: e.target.value });
setTouched({ ...touched, name: false });
}}
value={data.name}
onBlur={() => setTouched({ ...touched, name: true })}
error={
touched.name && (
data.name == "" ? "Nama Tidak Boleh Kosong" : null
)
touched.name &&
(data.name == "" ? "Nama Tidak Boleh Kosong" : null)
}
/>
<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={{
input: {
color: tema.get().utama,
@@ -189,20 +229,30 @@ export default function EditProfile() {
},
}}
onChange={(e) => {
setData({ ...data, email: e.target.value })
setTouched({ ...touched, email: false })
setData({ ...data, email: e.target.value });
setTouched({ ...touched, email: false });
}}
value={data.email}
onBlur={() => setTouched({ ...touched, email: true })}
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
)
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={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={{
input: {
color: tema.get().utama,
@@ -212,19 +262,24 @@ export default function EditProfile() {
}}
leftSection={<Text>+62</Text>}
onChange={(e) => {
setData({ ...data, phone: e.target.value })
setTouched({ ...touched, phone: false })
setData({ ...data, phone: e.target.value });
setTouched({ ...touched, phone: false });
}}
value={data.phone}
onBlur={() => setTouched({ ...touched, phone: true })}
error={
touched.phone && (
data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null
)
touched.phone &&
(data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" : null)
}
/>
<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={{
input: {
color: tema.get().utama,
@@ -232,41 +287,44 @@ export default function EditProfile() {
borderColor: tema.get().utama,
},
}}
data={
[
{
value: "M",
label: "Laki-laki"
},
{
value: "F",
label: "Perempuan"
}
]
}
data={[
{
value: "M",
label: "Laki-laki",
},
{
value: "F",
label: "Perempuan",
},
]}
onChange={(val: any) => {
setData({ ...data, gender: val })
setTouched({ ...touched, gender: false })
setData({ ...data, gender: val });
setTouched({ ...touched, gender: false });
}}
value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null
)
touched.gender &&
(data.gender == "" ? "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 ?
<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}
@@ -281,7 +339,7 @@ export default function EditProfile() {
data.phone !== "" &&
data.gender !== ""
) {
setValModal(true)
setValModal(true);
} else {
toast.error("Mohon lengkapi semua form");
}
@@ -289,13 +347,17 @@ export default function EditProfile() {
>
Simpan
</Button>
}
)}
</Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
<LayoutModal
opened={isValModal}
onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin
melakukan perubahan data?"
onYes={(val) => { onEditProfile(val) }} />
onYes={(val) => {
onEditProfile(val);
}}
/>
</Box>
)
);
}

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

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