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

feat : update profile

Browse Source
This commit is contained in:
lukman
2024-08-28 14:32:00 +08:00
parent 0d16adbd2f
commit d88e42e8a8
17 changed files with 660 additions and 179 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,8 @@
import { ViewEditProfile } from "@/module/user"
import { EditProfile } from "@/module/user"
function Page() {
return (
<ViewEditProfile />
<EditProfile />
)
}

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

@@ -1,8 +1,8 @@
import { ViewProfile } from "@/module/user";
import { Profile } from "@/module/user";
function Page() {
return (
<ViewProfile />
<Profile />
)
}

59
src/app/api/user/profile/[id]/route.ts Normal file
View File

@@ -0,0 +1,59 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import { NextResponse } from "next/server";
// UPDATE PROFILE BY COOKIES
export async function PUT(request: Request, context: { params: { id: string } }) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const { id } = context.params;
const data = await request.json();
const cek = await prisma.user.count({
where: {
id: id,
nik: data.nik,
email: data.email,
phone: data.phone
}
})
if (cek == 0) {
return NextResponse.json(
{
success: false,
message: "Gagal mendapatkan profile, data tidak ditemukan",
},
{ status: 404 }
);
}
const result = await prisma.user.update({
where: {
id: id,
},
data: {
nik: data.nik,
name: data.name,
email: data.email,
phone: data.phone,
gender: data.gender,
},
});
return NextResponse.json(
{
success: true,
message: "Berhasil mendapatkan profile",
result,
},
{ status: 200 }
);
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan anggota, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}

82
src/app/api/user/profile/route.ts Normal file
View File

@@ -0,0 +1,82 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import _ from "lodash";
import { NextResponse } from "next/server";
// GET PROFILE BY COOKIES
export async function GET(request: Request) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const data = await prisma.user.findUnique({
where: {
id: user.id
},
select: {
id: true,
name: true,
email: true,
phone: true,
nik: true,
gender: true,
idGroup: true,
idPosition: true,
Group: {
select: {
name: true
}
},
Position: {
select: {
name: true
}
}
}
})
const { ...userData } = data;
const group = data?.Group.name
const position = data?.Position.name
const result = { ...userData, group, position };
const omitData = _.omit(result, ["Group", "Position",])
return NextResponse.json({ success: true, data: omitData });
} catch (error) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
}
// UPDATE PROFILE BY COOKIES
export async function PUT(request: Request) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const body = await request.json();
const { name, email, phone, nik, gender } = body;
const data = await prisma.user.update({
where: {
id: user.id
},
data: {
name: name,
email: email,
phone: phone,
nik: nik,
gender: gender
}
})
return NextResponse.json({ success: true, message: "Berhasil ubah profile", data: data });
} catch (error) {
return NextResponse.json({ success: false, message: "Gagal ubah profile" }, { status: 401 });
}
}

2
src/module/_global/layout/layout_modal.tsx
View File

@@ -19,7 +19,7 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
<BsQuestionCircleFill size={100} color="red" />
<Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
<Group mt={30} w={'100%'} justify='center'>
<Button w={"47%"} size="lg" radius={'xl'} bg={'#DCE1FE'} c={'#4754F0'} onClick={() => onYes(false)}>TIDAK</Button>
<Button w={"47%"} size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
<Button w={"47%"} size="lg" radius={'xl'} bg={WARNA.biruTua} onClick={() => onYes(true)}>YA</Button>
</Group>
</Flex>

121
src/module/discussion/ui/detail_discussion.tsx
View File

@@ -93,47 +93,90 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
</Box>
</Box>
)) :
<Box>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
{isData?.username ?
<Group>
<Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group> : ""
}
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
</Flex>
<Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text
style={{
overflowWrap: "break-word"
}}
fw={"bold"}
<>
{isData?.totalComments == 0 ?
<Box mb={60}>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
{isData?.desc}
</Text>
</Spoiler>
</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
{isData?.totalComments ? <Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>{isData?.totalComments} Komentar</Text>
</Group > : ""}
{isData?.username ?
<Group>
<Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group> : ""
}
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
</Flex>
<Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text
style={{
overflowWrap: "break-word"
}}
fw={"bold"}
>
{isData?.desc}
</Text>
</Spoiler>
</Box>
<Group justify="space-between" mt={30} c={'#8C8C8C'}>
{isData?.totalComments ? <Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>{isData?.totalComments} Komentar</Text>
</Group > : ""}
</Group>
</Box>
</Group>
</Box> :
<Box mb={20}>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
>
{isData?.username ?
<Group>
<Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{isData?.username}
</Text>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group> : ""
}
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
</Flex>
<Box mt={10}>
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
<Text
style={{
overflowWrap: "break-word"
}}
fw={"bold"}
>
{isData?.desc}
</Text>
</Spoiler>
</Box>
<Group justify="space-between" mt={30} c={'#8C8C8C'}>
{isData?.totalComments ? <Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>{isData?.totalComments} Komentar</Text>
</Group > : ""}
</Group>
</Box>
}
</>
}
<Box p={10}>
<Box pl={10} pr={10} mb={30}>
{isLoad ?
Array(2)
.fill(0)
@@ -167,7 +210,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
)) :
isData?.DivisionDisscussionComment.map((v, i) => {
return (
<Box key={i} p={10}>
<Box key={i} p={10} >
<Flex
justify={"space-between"}
align={"center"}

12
src/module/division_new/ui/feature_detail_division.tsx
View File

@@ -12,7 +12,7 @@ import { LuFileSignature } from "react-icons/lu";
import { useParams, useRouter } from 'next/navigation';
import { funGetDetailDivisionById } from '../lib/api_division';
import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataJumlahDetailDivision } from '../lib/type_division';
export default function FeatureDetailDivision() {
@@ -37,7 +37,7 @@ export default function FeatureDetailDivision() {
useShallowEffect(() => {
fetchData()
}, [param.id])
const isMobile = useMediaQuery('(max-width: 399px)');
return (
<Box pt={10}>
@@ -69,7 +69,7 @@ export default function FeatureDetailDivision() {
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Tugas</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.tugas} Tugas</Text>
<IoIosArrowRoundForward size={20} color='gray' />
{!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
</Group>
</Grid.Col>
</Grid>
@@ -94,7 +94,7 @@ export default function FeatureDetailDivision() {
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Dokumen</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.dokumen} File</Text>
<IoIosArrowRoundForward size={20} color='gray' />
{!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
</Group>
</Grid.Col>
</Grid>
@@ -119,7 +119,7 @@ export default function FeatureDetailDivision() {
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Diskusi</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.diskusi} Diskusi</Text>
<IoIosArrowRoundForward size={20} color='gray' />
{!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
</Group>
</Grid.Col>
</Grid>
@@ -144,7 +144,7 @@ export default function FeatureDetailDivision() {
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Kalender</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>{feature?.kalender} Acara</Text>
<IoIosArrowRoundForward size={20} color='gray' />
{!isMobile && <IoIosArrowRoundForward size={20} color='gray' />}
</Group>
</Grid.Col>
</Grid>

16
src/module/document/ui/navbar_document_division.tsx
View File

@@ -238,14 +238,14 @@ export default function NavbarDocumentDivision() {
zIndex: 999,
}}>
<Flex justify={"center"} align={"center"} h={"100%"} w={"100%"}>
<SimpleGrid cols={{ base: 5, sm: 5, lg: 5 }}>
<SimpleGrid cols={{ base: 5, sm: 5, lg: 5 }} spacing="xs">
<Flex justify={'center'} align={'center'} direction={'column'}>
<BsDownload size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Unduh</Text>
<Text fz={12} ta={"center"} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Unduh</Text>
</Flex>
<Flex onClick={() => setIsDelete(true)} justify={'center'} align={'center'} direction={'column'}>
<AiOutlineDelete size={20} color={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Hapus</Text>
<Text fz={12} ta={"center"} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Hapus</Text>
</Flex>
<Flex onClick={() => {
if (selectedFiles.length == 1) {
@@ -253,15 +253,15 @@ export default function NavbarDocumentDivision() {
}
}} justify={'center'} align={'center'} direction={'column'}>
<CgRename size={20} color={(selectedFiles.length == 1 && !shareSelected) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length == 1 && !shareSelected) ? 'white' : 'grey'}>Ganti Nama</Text>
<Text fz={12} ta={"center"} c={(selectedFiles.length == 1 && !shareSelected) ? 'white' : 'grey'}>Ganti Nama</Text>
</Flex>
<Flex onClick={() => setShare(true)} justify={'center'} align={'center'} direction={'column'}>
<LuShare2 size={20} color={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Bagikan</Text>
<Text fz={12} ta={"center"} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Bagikan</Text>
</Flex>
<Flex onClick={() => setMore(true)} justify={'center'} align={'center'} direction={'column'}>
<MdOutlineMoreHoriz size={20} color={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Lainnya</Text>
<Text fz={12} ta={"center"} c={(selectedFiles.length > 0 && !shareSelected) ? 'white' : 'grey'}>Lainnya</Text>
</Flex>
</SimpleGrid>
</Flex>
@@ -269,15 +269,13 @@ export default function NavbarDocumentDivision() {
</>
)}
<LayoutNavbarNew back='' title={name}
<LayoutNavbarNew back={`/division/${param.id}/`} title={name}
menu={
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
}
/>
<Box>
<Box p={20} pb={60}>
<Box>

6
src/module/user/index.ts
View File

@@ -1,11 +1,13 @@
import { TypeUser } from './lib/type_user';
import createLogUser from "./log/fun/createLogUser";
import ViewEditProfile from "./profile/view/view_edit_profile";
import ViewProfile from "./profile/view/view_profile";
import { funGetAllmember } from './member/lib/api_member';
import Profile from './profile/ui/profile';
import EditProfile from './profile/ui/edit_profile';
export { ViewProfile };
export { ViewEditProfile };
export { createLogUser };
export type { TypeUser }
export { funGetAllmember }
export { Profile }
export { EditProfile }

4
src/module/user/member/ui/create_member.tsx
View File

@@ -273,8 +273,8 @@ export default function CreateMember() {
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
listData.nik == "" ? "NIK Tidak Boleh Kosong" :
listData.nik.length < 16 ? "NIK Harus 16 Karakter" : null
listData.nik === "" ? "NIK Tidak Boleh Kosong" :
listData.nik.length !== 16 ? "NIK Harus 16 Karakter" : null
)
}
/>

6
src/module/user/member/ui/edit_member.tsx
View File

@@ -250,10 +250,10 @@ export default function EditMember({ id }: { id: string }) {
onBlur={() => setTouched({ ...touched, nik: true })}
error={
touched.nik && (
data.nik == "" ? "NIK Tidak Boleh Kosong" :
data.nik.length < 16 ? "NIK Harus 16 Karakter" : null
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%"}

106
src/module/user/profile/component/edit_profile.tsx
View File

@@ -1,106 +0,0 @@
"use client"
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { Box, Button, Flex, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
import { HiUser } from "react-icons/hi2";
import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useState } from "react";
export default function EditProfile() {
const [isValModal, setValModal] = useState(false)
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setValModal(false)
}
return (
<Box>
<LayoutNavbarNew back='' title='Edit Profil' menu='' />
<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>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
<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,
},
}}
/>
<Select
placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={['Laki-laki', 'Perempuan']}
/>
</Stack>
<Box mt={30} mx={20} pb={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={() => setValModal(true)}
>
Simpan
</Button>
</Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin
melakukan perubahan data?"
onYes={(val) => { onTrue(val) }} />
</Box>
)
}

17
src/module/user/profile/lib/api_profile.ts Normal file
View File

@@ -0,0 +1,17 @@
import { IEditDataProfile } from "./type_profile";
export const funGetProfileByCookies = async (path?: string) => {
const response = await fetch(`/api/user/profile${(path) ? path : ''}`, { next: { tags: ['profile'] } });
return await response.json().catch(() => null);
}
export const funEditProfileByCookies = async ( data: IEditDataProfile) => {
const response = await fetch(`/api/user/profile/`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
}

21
src/module/user/profile/lib/type_profile.ts Normal file
View File

@@ -0,0 +1,21 @@
export interface IProfileById {
id: string
name: string
email: string
phone: string
nik: string
gender: string
idGroup: string
idPosition: string
group: string
position: string
}
export interface IEditDataProfile {
id: string;
nik: string;
name: string;
phone: string;
email: string;
gender: string;
}

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

@@ -0,0 +1,237 @@
"use client"
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import { Box, Button, Flex, Modal, Select, Stack, Text, TextInput } from "@mantine/core";
import { HiUser } from "react-icons/hi2";
import toast from "react-hot-toast";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useState } from "react";
import { IEditDataProfile, IProfileById } from "../lib/type_profile";
import { funEditProfileByCookies, funGetProfileByCookies } from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks";
import { funGetUserByCookies } from "@/module/auth";
export default function EditProfile() {
const [isValModal, setValModal] = useState(false)
const [isDataEdit, setDataEdit] = useState<IProfileById[]>([])
const [touched, setTouched] = useState({
nik: false,
name: false,
phone: false,
email: false,
gender: false,
});
const [data, setData] = useState<IEditDataProfile>({
id: "",
nik: "",
name: "",
phone: "",
email: "",
gender: "",
})
async function getAllProfile() {
try {
const res = await funGetProfileByCookies()
setData(res.data)
} catch (error) {
console.error(error);
}
}
useShallowEffect(() => {
getAllProfile()
}, [])
async function onEditProfile(val: boolean) {
try {
if (val) {
const res = await funEditProfileByCookies({
id: data.id,
nik: data.nik,
name: data.name,
phone: data.phone,
email: data.email,
gender: data.gender,
})
if (res.success) {
setValModal(false)
toast.success(res.message)
} 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 Profil' menu='' />
<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>
<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={(e) => {
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
)
}
/>
<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={(e) => {
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
)
}
/>
<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={(e) => {
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
)
}
/>
<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={(e) => {
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
)
}
/>
<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) => {
setData({ ...data, gender: val })
setTouched({ ...touched, gender: false })
}}
value={data.gender}
onBlur={() => setTouched({ ...touched, gender: true })}
error={
touched.gender && (
data.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 (
data.nik !== "" &&
data.name !== "" &&
data.email !== "" &&
data.phone !== "" &&
data.gender !== ""
) {
setValModal(true)
} else {
toast.error("Mohon lengkapi semua form");
}
}}
>
Simpan
</Button>
</Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin
melakukan perubahan data?"
onYes={(val) => { onEditProfile(val) }} />
</Box>
)
}

135
src/module/user/profile/ui/profile.tsx Normal file
View File

@@ -0,0 +1,135 @@
"use client"
import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, WARNA } from "@/module/_global";
import { ActionIcon, Anchor, Box, Button, Flex, Group, Skeleton, Stack, Text } from "@mantine/core";
import { BsInfo } from "react-icons/bs";
import { HiUser } from "react-icons/hi2";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
import { MdEmail } from "react-icons/md";
import { InfoTitleProfile } from "../component/ui/ui_profile";
import { IoMaleFemale } from "react-icons/io5";
import toast from "react-hot-toast";
import { LuLogOut } from "react-icons/lu";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useState } from "react";
import { funGetProfileByCookies } from "../lib/api_profile";
import { useShallowEffect } from "@mantine/hooks";
import { IProfileById } from "../lib/type_profile";
import { useRouter } from "next/navigation";
export default function Profile() {
const [openModal, setOpenModal] = useState(false);
const [isData, setData] = useState<IProfileById>()
const router = useRouter()
const [loading, setLoading] = useState(true)
async function getData() {
try {
setLoading(true)
const res = await funGetProfileByCookies()
setData(res.data)
setLoading(false)
} catch (error) {
console.error(error);
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
getData()
}, [])
async function onLogout(val: boolean) {
try {
if (val) {
await fetch('/api/auth/logout', {
method: 'DELETE',
});
toast.success('Logout Success')
window.location.href = '/';
}
setOpenModal(false)
} catch (error) {
console.error(error);
}
}
return (
<>
<Box >
<LayoutNavbarHome>
<Group justify="space-between">
<LayoutIconBack />
<ActionIcon onClick={() => { setOpenModal(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<LuLogOut size={20} color='white' />
</ActionIcon>
</Group>
<Stack
align="center"
justify="center"
gap="xs"
>
<HiUser size={100} color='white' />
{loading ?
<Skeleton height={62} mt={10} width={"40%"} />
:
<>
<Text c={'white'} fw={'bold'} fz={25}>{isData?.name}</Text>
<Text c={'white'} fw={'lighter'} fz={15}>{isData?.group} - {isData?.position}</Text>
</>
}
</Stack>
</LayoutNavbarHome>
{loading
?
<SkeletonDetailProfile />
:
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Text fw={'bold'} fz={20}>Informasi</Text>
<Text style={{ cursor: 'pointer' }} ta={"right"} c={"blue"} onClick={() => router.push(`/profile/edit/`)}>Edit</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{isData?.nik}</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<FaSquarePhone size={28} />
<Text fz={18}>No Telepon</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{isData?.phone}</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<MdEmail size={28} />
<Text fz={18}>Email</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{isData?.email}</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<IoMaleFemale size={28} />
<Text fz={18}>Gender</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>
{isData?.gender === 'M' ? 'Laki-laki' : isData?.gender === 'F' ? 'Perempuan' : ''}
</Text>
</Group>
</Box>
}
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin Keluar?"
onYes={(val) => onLogout(val)} />
</>
)
}

7
src/module/user/profile/view/view_edit_profile.tsx
View File

@@ -1,7 +0,0 @@
import EditProfile from "../component/edit_profile";
export default function ViewEditProfile() {
return (
<EditProfile />
)
}