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

feat : update member

Browse Source
This commit is contained in:
lukman
2024-08-06 10:28:25 +08:00
parent e90c168d36
commit 2d4e0cea97
6 changed files with 335 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/module/user/member/component/edit_member.tsx
View File

@@ -1,20 +1,150 @@
'use client'
import { WARNA } from "@/module/_global";
import { API_ADDRESS, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Button, Select, Stack, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { HiUser } from "react-icons/hi2";
export default function EditMember() {
const [isModal, setModal] = useState(false)
type dataMember = {
id: string;
nik: string;
name: string;
phone: string;
email: string;
gender: string;
idGroup: string;
idPosition: string;
idUserRole: string;
}
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
type dataGroup = {
id: string;
name: string;
};
type dataPosition = {
id: string;
name: string;
};
type dataROleUser = {
id: string;
name: string;
}
export default function EditMember({ id }: { id: string | undefined }) {
const [isModal, setModal] = useState(false)
const router = useRouter()
const [listGroup, setListGorup] = useState<dataGroup[]>([])
const [listPosition, setListPosition] = useState<dataPosition[]>([])
const [listUserRole, setListUserRole] = useState<dataROleUser[]>([])
const [data, setData] = useState<dataMember>({
id: "",
nik: "",
name: "",
phone: "",
email: "",
gender: "",
idGroup: "",
idPosition: "",
idUserRole: "",
})
const [listData, setListData] = useState<dataMember>()
async function getAllGroup() {
try {
const res = await fetch(`${API_ADDRESS.apiGetAllGroup}&villageId=desa1&active=true`)
const data = await res.json()
setListGorup(data)
} catch (error) {
console.error(error)
}
setModal(false)
}
async function getOneData() {
try {
const res = await fetch(`${API_ADDRESS.apiGetOneUser}&userID=${id}`)
const data = await res.json()
setData(data)
getAllPosition(data?.idGroup)
} catch (error) {
console.error(error)
}
}
async function getAllPosition(val: any) {
try {
const res = await fetch(`${API_ADDRESS.apiGetAllPosition}&groupId=${val}&active=true`)
const data = await res.json()
setListPosition(data)
} catch (error) {
console.error(error)
}
}
async function getAllUserRole() {
try {
const res = await fetch(`${API_ADDRESS.apiGetRoleUser}`)
const data = await res.json()
setListUserRole(data)
} catch (error) {
console.error(error)
}
}
async function changeGrup(val: any) {
setListPosition([])
setData({
...data,
idGroup: val,
idPosition: ""
})
getAllPosition(val)
}
useShallowEffect(() => {
getAllGroup()
getOneData()
getAllUserRole()
}, [])
async function onSubmit(val: boolean) {
try {
const res = await fetch(API_ADDRESS.apiUpdateUser, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: data.id,
nik: data.nik,
name: data.name,
phone: data.phone,
email: data.email,
gender: data.gender,
idGroup: data.idGroup,
idPosition: data.idPosition,
idUserRole: data.idUserRole
}),
})
const respon = await res.json()
if (res.status == 200) {
toast.success(respon.message)
} else {
toast.error(respon.message)
}
router.push('/member')
} catch (error) {
toast.error('Error');
}
}
return (
<Box>
<Stack
@@ -39,7 +169,18 @@ export default function EditMember() {
borderColor: WARNA.biruTua,
},
}}
data={['Dinas', 'Adat', 'LPD', 'PKK']}
data={
listGroup
? listGroup.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => {
changeGrup(val)
}}
value={data?.idGroup}
/>
<Select
placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
@@ -50,7 +191,36 @@ export default function EditMember() {
borderColor: WARNA.biruTua,
},
}}
data={['Kepala', 'Sekretaris', 'Bendahara', 'Anggota']}
data={
listPosition
? listPosition.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => setData({ ...data, idPosition: val })}
value={(data?.idPosition == "") ? null : data.idPosition}
/>
<Select
placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
data={
listUserRole
? listUserRole.map((data) => ({
value: data.id,
label: data.name,
}))
: []
}
onChange={(val: any) => setData({ ...data, idUserRole: val })}
value={data?.idUserRole}
/>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
@@ -61,6 +231,8 @@ export default function EditMember() {
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, nik: e.target.value })}
value={data.nik}
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
@@ -71,6 +243,8 @@ export default function EditMember() {
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, name: e.target.value })}
value={data.name}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
@@ -81,6 +255,8 @@ export default function EditMember() {
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, email: e.target.value })}
value={data.email}
/>
<TextInput
size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
@@ -91,6 +267,8 @@ export default function EditMember() {
borderColor: WARNA.biruTua,
},
}}
onChange={(e) => setData({ ...data, phone: e.target.value })}
value={data.phone}
/>
<Select
placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
@@ -101,7 +279,20 @@ export default function EditMember() {
borderColor: WARNA.biruTua,
},
}}
data={['Laki-laki', 'Perempuan']}
data={
[
{
value: "M",
label: "Laki-laki"
},
{
value: "F",
label: "Perempuan"
}
]
}
onChange={(val: any) => setData({ ...data, gender: val })}
value={data.gender}
/>
</Stack>
<Box mt={30} mx={20} pb={20}>
@@ -118,7 +309,12 @@ export default function EditMember() {
</Box>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => { onTrue(val) }} />
onYes={(val) => {
if (val)
onSubmit(val)
setModal(false)
}
} />
</Box>
)
}

38
src/module/user/member/component/ui/drawer_detail_member.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { WARNA } from "@/module/_global";
import { API_ADDRESS, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
@@ -8,17 +8,33 @@ import toast from "react-hot-toast";
import { FaPencil, FaToggleOff } from "react-icons/fa6";
import { ImUserCheck } from "react-icons/im";
export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boolean) => void }) {
export default function DrawerDetailMember({ onDeleted, id }: { onDeleted: (val: boolean) => void, id: string | undefined }) {
const router = useRouter()
const [isModal, setModal] = useState(false)
function onTrue(val: boolean) {
if (val) {
toast.success('Sukses! data tersimpan')
onDeleted(true)
}
setModal(false)
async function nonActive(val: boolean) {
// try {
// if (val) {
// const res = await fetch(API_ADDRESS.apiDeleteUser, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
// body: JSON.stringify({ id: id}),
// })
// if (res.status == 200) {
// onDeleted(true);
// } else {
// onDeleted(false);
// }
// }
// router.push('/member')
// setModal(false)
// } catch (error) {
// console.error(error)
// setModal(false);
// toast.error("Terjadi kesalahan");
// }
}
return (
@@ -44,7 +60,7 @@ export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boo
<Flex justify={'center'} align={'center'} direction={'column'}
style={{ cursor: 'pointer' }}
onClick={() => {
router.push('/member/edit/123')
router.push(`/member/edit/${id}`)
}}
>
<Box>
@@ -58,7 +74,7 @@ export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boo
</Stack>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
onYes={(val) => { onTrue(val) }} />
onYes={(val) => { nonActive(val) }} />
</Box>
)
}

121
src/module/user/member/component/ui/navbar_detail_member.tsx
View File

@@ -1,37 +1,110 @@
'use client'
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer } from "@/module/_global";
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, API_ADDRESS } from "@/module/_global";
import { Box, Group, ActionIcon, Stack, Text, Center, Avatar } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import { HiUser } from "react-icons/hi2";
import DrawerDetailMember from "./drawer_detail_member";
import { useState } from "react";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
import { MdEmail } from "react-icons/md";
import { IoMaleFemale } from "react-icons/io5";
import { useShallowEffect } from "@mantine/hooks";
import Link from "next/link";
export default function NavbarDetailMember() {
interface IdMember {
id: string
}
interface DataMember {
id: string
name: string
nik: string
email: string
phone: string
gender: string
position: string
group: string
}
export default function NavbarDetailMember({ id }: IdMember) {
const [isOpen, setOpen] = useState(false)
const [dataOne, setDataOne] = useState<DataMember>()
useShallowEffect(() => {
featchGetOne()
}, [])
async function featchGetOne() {
try {
const response = await fetch(API_ADDRESS.apiGetOneUser + `&userID=${id}`)
const data = await response.json()
setDataOne(data)
} catch (error) {
console.error(error)
}
}
return (
<Box>
<LayoutNavbarHome>
<Group justify="space-between">
<LayoutIconBack />
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<HiMenu size={20} color='white' />
</ActionIcon>
</Group>
<Stack
align="center"
justify="center"
gap="xs"
>
<Center>
<Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
</Center>
<Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
<Text c={'white'} fw={'lighter'} fz={15}>Dinas - Kepala Urusan Pengembangan</Text>
</Stack>
</LayoutNavbarHome>
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerDetailMember onDeleted={() => setOpen(false)} />
</LayoutDrawer>
<Box>
<LayoutNavbarHome>
<Group justify="space-between">
<LayoutIconBack />
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<HiMenu size={20} color='white' />
</ActionIcon>
</Group>
<Stack
align="center"
justify="center"
gap="xs"
>
<Center>
<Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
</Center>
<Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text>
<Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text>
</Stack>
</LayoutNavbarHome>
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.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"}>{dataOne?.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"}>{dataOne?.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"}>
{dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''}
</Text>
</Group>
</Box>
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerDetailMember id={dataOne?.id} onDeleted={() => setOpen(false)} />
</LayoutDrawer>
</Box>
</Box>
)
}

1
src/module/user/member/component/ui/tab_list_member.tsx
View File

@@ -33,6 +33,7 @@ export default function TabListMember({ status }: { status: boolean }) {
setDataMember(data)
} catch (error) {
console.error(error)
throw new Error("Error")
} finally {
setLoading(false)
}

32
src/module/user/member/view/view_detail_member.tsx
View File

@@ -8,37 +8,7 @@ import { IoMaleFemale } from "react-icons/io5";
export default function ViewDetailMember({ data }: { data: string }) {
return (
<Box>
<NavbarDetailMember />
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>513177782899</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"}>+62038939293</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"}>marcel@gmail.com</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"}>Laki-laki</Text>
</Group>
</Box>
<NavbarDetailMember id={data} />
</Box>
)
}

5
src/module/user/member/view/view_edit_member.tsx
View File

@@ -4,12 +4,11 @@ import { HiUser } from "react-icons/hi2";
import NavbarEditMember from "../component/ui/navbar_edit_member";
import EditMember from "../component/edit_member";
export default function ViewEditMember() {
export default function ViewEditMember({data}: {data: string}) {
return (
<Box>
{/* <NavbarEditMember /> */}
<LayoutNavbarNew back="" title="Edit Anggota" menu={<></>} />
<EditMember />
<EditMember id={data} />
</Box>
)
}