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

feat : add group

Browse Source
This commit is contained in:
lukman
2024-07-30 15:07:41 +08:00
parent 459546dff4
commit a336728d0c
11 changed files with 378 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
api.http
View File

@@ -9,14 +9,14 @@ Content-Type: application/json
// GROUP
###
GET http://localhost:3000/api/group/get?path=list-group&villageId=121212 HTTP/1.1
GET http://localhost:3000/api/group/get?path=get-all-group&villageId=121212&active=true HTTP/1.1
###
POST http://localhost:3000/api/group/post?path=create-group HTTP/1.1
Content-Type: application/json
{
"name": "amalia2",
"name": "LPD 3",
"idVillage": "121212"
}

25
src/module/_global/bin/api_address.ts
View File

@@ -1,4 +1,29 @@
export const API_ADDRESS = {
// Group
"apiGetAllGroup": "/api/group/get?path=get-all-group",
"apiGetOneGroup": "/api/group/get?path=get-one-group",
"apiCreateGroup": "/api/group/post?path=create-group",
"apiUpdateGroup": "/api/group/post?path=update-group",
"apiDeleteGroup": "/api/group/post?path=delete-group",
// User
"apiGetAllUser": "/api/user/get?path=get-all-users",
"apiGetOneUser": "/api/user/get?path=get-one-users",
"apiCreateUser": "/api/user/post?path=create-users",
"apiUpdateUser": "/api/user/post?path=update-users",
"apiDeleteUser": "/api/user/post?path=delete-users",
// Announcement
"apiGetAllAnnouncement": "/api/announcement/get?path=get-all-announcement",
"apiGetOneAnnouncement": "/api/announcement/get?path=get-one-announcement",
"apiCreateAnnouncement": "/api/announcement/post?path=create-announcement",
"apiUpdateAnnouncement": "/api/announcement/post?path=update-announcement",
"apiDeleteAnnouncement": "/api/announcement/post?path=delete-announcement",
// Village
"apiGetAllVillage": "/api/village/get?path=get-all-village",
"apiGetOneVillage": "/api/village/get?path=get-one-village",
"apiCreateVillage": "/api/village/post?path=create-village",
"apiUpdateVillage": "/api/village/post?path=update-village",
"apiDeleteVillage": "/api/village/post?path=delete-village",
}

2
src/module/group/api/api_index.ts
View File

@@ -6,7 +6,7 @@ import { updateGroup } from "./post/updateGroup";
export const API_INDEX_GROUP = [
{
path: "list-group",
path: "get-all-group",
method: "GET",
bin: listGroups,
},

6
src/module/group/api/get/listGroup.ts
View File

@@ -5,15 +5,17 @@ export async function listGroups(req: NextRequest): Promise<Response> {
try {
const searchParams = req.nextUrl.searchParams
const villaId = searchParams.get('villageId');
const villaId = "121212"
const active = searchParams.get('active');
const groups = await prisma.group.findMany({
where: {
isActive: true,
isActive: (active == "true" ? true : false),
idVillage: String(villaId),
},
select: {
id: true,
name: true,
isActive: true
},
});

12
src/module/group/api/post/createGroup.ts
View File

@@ -1,9 +1,10 @@
import { prisma } from "@/module/_global";
import { revalidatePath } from "next/cache";
export async function createGroup(req: Request) {
try {
const data = await req.json();
const villaId = "121212";
if (!data || !data.name) {
return Response.json(
@@ -16,17 +17,20 @@ export async function createGroup(req: Request) {
data: {
name: data.name,
isActive: true,
idVillage: data.idVillage,
idVillage: villaId,
},
select: {
id: true,
name: true,
},
});
revalidatePath("/group");
return Response.json(group, { status: 201 });
} catch (error) {
console.error(error);
return Response.json({ success: false, message: "Internal Server Error" }, { status: 500 });
return Response.json(
{ success: false, message: "Internal Server Error" },
{ status: 500 }
);
}
}

23
src/module/group/api/post/deleteGroup.ts
View File

@@ -1,19 +1,32 @@
import { prisma } from "@/module/_global";
import { revalidatePath } from "next/cache";
import { NextRequest } from "next/server";
export async function deleteGroup(req: Request) {
export async function deleteGroup(req: NextRequest) {
try {
const data = await req.json();
const update = await prisma.group.update({
const active = data.isActive;
await prisma.group.update({
where: {
id: data.id,
},
data: {
isActive: false,
isActive: !active,
},
});
return Response.json({ success: true, message: "Sukses Delete Grup" }, { status: 200 });
revalidatePath("/group");
return Response.json(
{ success: true, message: "Sukses update status grup" },
{ status: 200 }
);
} catch (error) {
console.error(error);
return Response.json({ message: "Internal Server Error", success: false }, { status: 500 });
return Response.json(
{ message: "Internal Server Error", success: false },
{ status: 500 }
);
}
}

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

@@ -1,49 +1,59 @@
import { LayoutDrawer, WARNA } from '@/module/_global';
import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { HiOutlineOfficeBuilding } from 'react-icons/hi';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import EditDrawerGroup from './ui/edit_drawer_group';
import toast from 'react-hot-toast';
import { API_ADDRESS, LayoutDrawer, WARNA } from "@/module/_global";
import {
ActionIcon,
Box,
Group,
Skeleton,
Text,
TextInput,
} from "@mantine/core";
import React, { useEffect, useState } from "react";
import { HiOutlineOfficeBuilding } from "react-icons/hi";
import { HiMagnifyingGlass } from "react-icons/hi2";
import EditDrawerGroup from "./ui/edit_drawer_group";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
const dataGroup = [
{
id: 1,
name: 'Dinas'
},
{
id: 2,
name: 'Adat'
},
{
id: 3,
name: 'LPD'
},
{
id: 4,
name: 'Karang Taruna'
},
{
id: 5,
name: 'BPD'
},
{
id: 6,
name: 'LPM'
},
{
id: 7,
name: 'PKK'
},
{
id: 8,
name: 'Pengelolaan Penduduk'
},
]
type dataGroup = {
id: string;
name: string;
isActive: boolean;
};
export default function ListGroupActive() {
const [openDrawer, setOpenDrawer] = useState(false)
const [valChoose, setValChoose] = useState("")
export default function ListGroupActive({ status }: { status: boolean }) {
const [openDrawer, setOpenDrawer] = useState(false);
const [valChoose, setValChoose] = useState("");
const [isData, setData] = useState<dataGroup[]>([]);
const [selectId, setSelectId] = useState<string | null>(null);
const [active, setActive] = useState<boolean | null>(null);
const [loading, setLoading] = useState(true);
const [isname, setName] = useState<string>("");
const getData = async () => {
try {
setData([]);
setLoading(true);
const res = await fetch(
`${API_ADDRESS.apiGetAllGroup}&villageId=121212&active=` + status
);
const data = await res.json();
setData(data);
setLoading(false);
} catch (error) {
if (error instanceof Error) {
console.error(error);
toast.error("Terjadi kesalahan");
} else {
console.error("Error tidak diketahui");
}
} finally {
setLoading(false);
}
};
useEffect(() => {
getData();
}, [status]);
return (
<Box pt={20}>
@@ -60,40 +70,96 @@ export default function ListGroupActive() {
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
{dataGroup.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)
}}
>
<Box>
<ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
<HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
</ActionIcon>
{loading
? Array(6)
.fill(null)
.map((_, i) => (
<Box pt={20} key={i}>
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
cursor: "pointer",
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<Skeleton height={25} width={25} />
</ActionIcon>
</Box>
<Box>
<Skeleton height={20} width={100} />
</Box>
</Group>
</Box>
<Box>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
))
: 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);
setName(v.name)
}}
>
<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>
</Group>
</Box>
)
})}
<LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={valChoose}>
<EditDrawerGroup onUpdated={(val) => {
if (val) {
toast.success('Sukses! data tersimpan')
}
setOpenDrawer(false)
}} />
);
})}
<LayoutDrawer
opened={openDrawer}
onClose={() => setOpenDrawer(false)}
title={valChoose}
>
<EditDrawerGroup
id={selectId}
isActive={active}
isName={isname}
onUpdated={(val) => {
if (val) {
toast.success("Sukses! data tersimpan");
getData();
}
setOpenDrawer(false);
}}
/>
</LayoutDrawer>
</Box>
);

100
src/module/group/components/list_group_non_active.tsx
View File

@@ -1,100 +0,0 @@
import { LayoutDrawer, WARNA } from '@/module/_global';
import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { HiOutlineOfficeBuilding } from 'react-icons/hi';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import EditDrawerGroup from './ui/edit_drawer_group';
import toast from 'react-hot-toast';
const dataGroup = [
{
id: 1,
name: 'Dinas'
},
{
id: 2,
name: 'Adat'
},
{
id: 3,
name: 'LPD'
},
{
id: 4,
name: 'Karang Taruna'
},
{
id: 5,
name: 'BPD'
},
{
id: 6,
name: 'LPM'
},
{
id: 7,
name: 'PKK'
},
{
id: 8,
name: 'Pengelolaan Penduduk'
},
]
export default function ListGroupNonActive() {
const [openDrawer, setOpenDrawer] = useState(false)
const [valChoose, setValChoose] = useState("")
return (
<Box pt={20}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
{dataGroup.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)
}}
>
<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)} title={valChoose}>
<EditDrawerGroup onUpdated={(val) => {
if (val) {
toast.success('Sukses! data tersimpan')
}
setOpenDrawer(false)
}} />
</LayoutDrawer>
</Box>
);
}

44
src/module/group/components/tab_list_group.tsx
View File

@@ -1,38 +1,48 @@
'use client'
import { Box, Tabs, rem } from '@mantine/core';
import { IoCloseCircleOutline } from "react-icons/io5"
import { IoMdCheckmarkCircleOutline } from "react-icons/io"
import ListGroupActive from './list_group_active';
import ListGroupNonActive from './list_group_non_active';
"use client";
import { Box, Tabs, rem } from "@mantine/core";
import { IoCloseCircleOutline } from "react-icons/io5";
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
import ListGroupActive from "./list_group_active";
export default function TabListGroup() {
const iconStyle = { width: rem(20), height: rem(20) };
return (
<Box p={20}>
<Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="aktif">
<Tabs.List bg={"white"} style={{
border: `1px solid ${"#EDEDED"}`,
padding: 5,
borderRadius: 100
}}>
<Tabs.Tab value="aktif" w={"45%"} leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}>
<Tabs variant="pills" color="#FF9861" radius="xl" defaultValue="aktif">
<Tabs.List
bg={"white"}
style={{
border: `1px solid ${"#EDEDED"}`,
padding: 5,
borderRadius: 100,
}}
>
<Tabs.Tab
value="aktif"
w={"45%"}
leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
>
Aktif
</Tabs.Tab>
<Tabs.Tab value="tidak-aktif" w={"53%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
<Tabs.Tab
value="tidak-aktif"
w={"53%"}
leftSection={<IoCloseCircleOutline style={iconStyle} />}
>
Tidak Aktif
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="aktif">
<ListGroupActive />
<ListGroupActive status={true} />
</Tabs.Panel>
<Tabs.Panel value="tidak-aktif">
<ListGroupNonActive />
{/* <ListGroupNonActive /> */}
<ListGroupActive status={false} />
</Tabs.Panel>
</Tabs>
</Box>
);
}

59
src/module/group/components/ui/drawer_group.tsx
View File

@@ -1,14 +1,44 @@
import { LayoutDrawer, WARNA } from '@/module/_global';
import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { API_ADDRESS, LayoutDrawer, WARNA } from "@/module/_global";
import {
Box,
Button,
Center,
Flex,
Group,
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import { IoAddCircle } from "react-icons/io5";
export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) => void }) {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
export default function DrawerGroup({
onSuccess,
}: {
onSuccess: (val: boolean) => void;
}) {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
const [namaGroup, setNamaGroup] = useState("");
function onCLose() {
setOpenDrawerGroup(false)
onSuccess(true)
async function onCreate() {
try {
const res = await fetch(API_ADDRESS.apiCreateGroup, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: namaGroup,
}),
});
setOpenDrawerGroup(false);
onSuccess(true);
} catch (error) {
console.log(error);
onSuccess(false);
}
}
return (
@@ -18,7 +48,7 @@ export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) =
cols={{ base: 3, sm: 3, lg: 3 }}
onClick={() => setOpenDrawerGroup(true)}
>
<Flex justify={'center'} align={'center'} direction={'column'} >
<Flex justify={"center"} align={"center"} direction={"column"}>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
@@ -28,7 +58,11 @@ export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) =
</Flex>
</SimpleGrid>
</Stack>
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Grup'}>
<LayoutDrawer
opened={openDrawerGroup}
onClose={() => setOpenDrawerGroup(false)}
title={"Tambah Grup"}
>
<Box pt={10}>
<TextInput
styles={{
@@ -41,15 +75,16 @@ export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) =
size="lg"
radius={10}
placeholder="Grup"
onChange={(e) => setNamaGroup(e.target.value)}
/>
<Box mt={'xl'}>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={onCLose}
onClick={onCreate}
>
Simpan
</Button>

128
src/module/group/components/ui/edit_drawer_group.tsx
View File

@@ -1,32 +1,96 @@
'use client'
import { LayoutDrawer, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { FaPencil, FaToggleOff } from 'react-icons/fa6';
"use client";
import { API_ADDRESS, LayoutDrawer, WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import {
Box,
Button,
Center,
Flex,
Group,
SimpleGrid,
Stack,
Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import toast from "react-hot-toast";
import { FaPencil, FaToggleOff } from "react-icons/fa6";
import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolean) => void }) {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
const [isModal, setModal] = useState(false)
export default function EditDrawerGroup({
onUpdated,
id,
isActive,
isName,
}: {
onUpdated: (val: boolean) => void;
id: string | null;
isActive: boolean | null;
isName: string;
}) {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
const [isModal, setModal] = useState(false);
const [name, setName] = useState(isName);
function onCLose() {
setOpenDrawerGroup(false)
onUpdated(true)
async function isUpdate() {
try {
const res = await fetch(API_ADDRESS.apiUpdateGroup, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: id,
name : name
}),
});
setOpenDrawerGroup(false);
onUpdated(true);
} catch (error) {
console.error(error);
}
}
function onTrue(val: boolean) {
if (val) {
onUpdated(true)
async function nonActive(val: boolean) {
try {
if (val) {
const res = await fetch(API_ADDRESS.apiDeleteGroup, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id,
isActive,
}),
});
if (res.status == 200) {
onUpdated(true);
} else {
onUpdated(false);
}
}
setModal(false);
} catch (error) {
console.log(error);
setModal(false);
toast.error("Terjadi kesalahan");
onUpdated(false);
}
setModal(false)
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setModal(true)} style={{ cursor: 'pointer' }}>
<Flex
justify={"center"}
align={"center"}
direction={"column"}
onClick={() => setModal(true)}
style={{ cursor: "pointer" }}
>
<Box>
<FaToggleOff size={30} color={WARNA.biruTua} />
</Box>
@@ -34,7 +98,13 @@ export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolea
<Text c={WARNA.biruTua}>Non Aktifkan</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setOpenDrawerGroup(true)} style={{ cursor: 'pointer' }}>
<Flex
justify={"center"}
align={"center"}
direction={"column"}
onClick={() => setOpenDrawerGroup(true)}
style={{ cursor: "pointer" }}
>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
@@ -44,7 +114,11 @@ export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolea
</Flex>
</SimpleGrid>
</Stack>
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Grup'}>
<LayoutDrawer
opened={openDrawerGroup}
onClose={() => setOpenDrawerGroup(false)}
title={"Edit Grup"}
>
<Box pt={10}>
<TextInput
styles={{
@@ -55,17 +129,19 @@ export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolea
},
}}
size="lg"
value={name}
onChange={(e) => setName(e.target.value)}
radius={10}
placeholder="Grup"
/>
<Box mt={'xl'}>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={onCLose}
onClick={isUpdate}
>
Simpan
</Button>
@@ -73,10 +149,14 @@ export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolea
</Box>
</LayoutDrawer>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
<LayoutModal
opened={isModal}
onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mangubah status aktifasi data?"
onYes={(val) => { onTrue(val) }} />
onYes={(val) => {
nonActive(val);
}}
/>
</Box>
);
}