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

Merge pull request #93 from bipproduction/lukman/6-agustus-2024

Browse Source 
Lukman/6 agustus 2024
This commit is contained in:
Amalia
2024-08-06 10:40:04 +08:00
committed by GitHub
parent 75c317f72b 5a556d2ea2
commit 1be70b3fc7
11 changed files with 418 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/module/group/components/list_group_active.tsx
View File

@@ -71,53 +71,53 @@ export default function ListGroupActive({ status }: { status: boolean }) {
/>
{loading
? Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonSingle />
</Box>
))
))
: isData.map((v, i) => {
return (
<Box pt={20} key={i}>
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
cursor: "pointer",
}}
onClick={() => {
setValChoose(v.name);
setOpenDrawer(true);
setSelectId(v.id);
setActive(v.isActive);
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<HiOutlineOfficeBuilding
color={WARNA.biruTua}
size={25}
/>
</ActionIcon>
</Box>
<Box>
<Text fw={"bold"} c={WARNA.biruTua}>
{v.name}
</Text>
</Box>
</Group>
</Box>
);
})}
return (
<Box pt={20} key={i}>
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
cursor: "pointer",
}}
onClick={() => {
setValChoose(v.name);
setOpenDrawer(true);
setSelectId(v.id);
setActive(v.isActive);
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<HiOutlineOfficeBuilding
color={WARNA.biruTua}
size={25}
/>
</ActionIcon>
</Box>
<Box>
<Text fw={"bold"} c={WARNA.biruTua}>
{v.name}
</Text>
</Box>
</Group>
</Box>
);
})}
<LayoutDrawer
opened={openDrawer}
onClose={() => setOpenDrawer(false)}

32
src/module/user/api/get/getOneUser.ts
View File

@@ -1,4 +1,5 @@
import { prisma } from "@/module/_global";
import _ from "lodash";
import { NextRequest } from "next/server";
export async function getOneUser(req: NextRequest) {
@@ -17,10 +18,39 @@ export async function getOneUser(req: NextRequest) {
phone: true,
email: true,
gender: true,
idGroup: true,
idPosition: true,
UserRole: {
select: {
name: true,
id: true
}
},
Position: {
select: {
name: true,
id: true
},
},
Group: {
select: {
name: true,
id: true
},
},
},
});
return Response.json(users);
const { ...userData } = users;
const group = users?.Group.name
const position = users?.Position.name
const idUserRole = users?.UserRole.id
const result = { ...userData, group, position, idUserRole };
const omitData = _.omit(result, ["Group", "Position", "UserRole"])
console.log(omitData)
return Response.json(omitData);
} catch (error) {
console.error(error);
return Response.json({ message: "Internal Server Errorr", success: false }, { status: 500 });

6
src/module/user/api/post/deleteUser.ts
View File

@@ -1,19 +1,23 @@
import { createLogUser } from '@/module/user';
import { prisma } from "@/module/_global";
import { NextRequest } from "next/server";
import { revalidatePath } from 'next/cache';
export async function deleteUser(req: NextRequest) {
try {
const data = await req.json();
const active = data.isActive;
const update = await prisma.user.update({
where: {
id: data.id,
},
data: {
isActive: false,
isActive: !active,
},
});
revalidatePath("/member");
// create log user
const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus data user', table: 'user', data: update.id })

2
src/module/user/api/post/updateUser.ts
View File

@@ -1,6 +1,7 @@
import { createLogUser } from '@/module/user';
import { prisma } from "@/module/_global";
import { NextRequest } from "next/server";
import { funGetUserByCookies } from '@/module/auth';
export async function updateUser(req: NextRequest) {
try {
@@ -17,7 +18,6 @@ export async function updateUser(req: NextRequest) {
email: data.email,
gender: data.gender,
idGroup: data.idGroup,
idVillage: data.idVillage,
idPosition: data.idPosition,
idUserRole: data.idUserRole,
},

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>
)
}