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

upd: nonactive divisi

Browse Source 
Deskripsi:
- api status divisi
- api list divisi by status
- tampilan tab list divisi

NO Issues
This commit is contained in:
amel
2024-10-22 14:05:57 +08:00
parent 070bb6fd04
commit f5cc008775
12 changed files with 286 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/(application)/division/page.tsx
View File

@@ -1,14 +1,18 @@
import { ViewFilter } from '@/module/_global';
import { CreateReport, ListDivision } from '@/module/division_new';
import React from 'react';
import { CreateReport, NavbarListDivision, TabListDivision } from '@/module/division_new';
import { Box } from '@mantine/core';
function Page({ searchParams }: { searchParams: { page: string } }) {
if (searchParams.page == "filter")
return <ViewFilter linkFilter='division'/>
return <ViewFilter linkFilter='division' />
if (searchParams.page == "report")
return <CreateReport />
return (
<ListDivision/>
<Box>
<NavbarListDivision />
<TabListDivision />
</Box>
);
}

10
src/app/api/division/[id]/detail/route.ts
View File

@@ -23,7 +23,7 @@ export async function GET(request: Request, context: { params: { id: string } })
const data = await prisma.division.findUnique({
where: {
id: String(id),
isActive: true
// isActive: true
}
});
@@ -179,7 +179,7 @@ export async function GET(request: Request, context: { params: { id: string } })
catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
}
@@ -232,7 +232,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
);
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mengeluarkan anggota divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal mengeluarkan anggota divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
}
@@ -286,7 +286,7 @@ export async function PUT(request: Request, context: { params: { id: string } })
);
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mengubah status admin divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal mengubah status admin divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
}
@@ -337,6 +337,6 @@ export async function POST(request: Request, context: { params: { id: string } }
return NextResponse.json({ success: true, message: "Berhasil menambahkan anggota divisi" }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal menambahkan anggota divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal menambahkan anggota divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
};

6
src/app/api/division/[id]/route.ts
View File

@@ -17,7 +17,7 @@ export async function GET(request: Request, context: { params: { id: string } })
const data = await prisma.division.findUnique({
where: {
id: String(id),
isActive: true
// isActive: true
}
});
@@ -63,7 +63,7 @@ export async function GET(request: Request, context: { params: { id: string } })
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
}
@@ -117,6 +117,6 @@ export async function PUT(request: Request, context: { params: { id: string } })
);
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mengedit divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal mengedit divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
}

48
src/app/api/division/[id]/status/route.ts Normal file
View File

@@ -0,0 +1,48 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import { createLogUser } from "@/module/user";
import { NextResponse } from "next/server";
export async function POST(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 { isActive } = (await request.json());
const data = await prisma.division.count({
where: {
id: id,
},
});
if (data == 0) {
return NextResponse.json(
{
success: false,
message: "Edit status divisi gagal, data tidak ditemukan",
},
{ status: 404 }
);
}
const update = await prisma.division.update({
where: {
id: id,
},
data: {
isActive: !isActive,
},
});
// create log user
const log = await createLogUser({ act: 'UPDATE', desc: 'User mengedit status data divisi', table: 'division', data: id })
return NextResponse.json({ success: true, message: "Status divisi berhasil diupdate", }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mengubah status divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
}

9
src/app/api/division/route.ts
View File

@@ -20,6 +20,7 @@ export async function GET(request: Request) {
const idGroup = searchParams.get("group");
const name = searchParams.get('search');
const page = searchParams.get('page');
const active = searchParams.get("active");
const dataSkip = Number(page) * 10 - 10;
if (idGroup == "null" || idGroup == undefined) {
@@ -30,7 +31,7 @@ export async function GET(request: Request) {
let kondisi: any = {
isActive: true,
isActive: active == 'false' ? false : true,
idVillage: String(villaId),
idGroup: grup,
name: {
@@ -41,7 +42,7 @@ export async function GET(request: Request) {
if (roleUser != "supadmin" && roleUser != "cosupadmin" && roleUser != "admin") {
kondisi = {
isActive: true,
isActive: active == 'false' ? false : true,
idVillage: String(villaId),
idGroup: grup,
name: {
@@ -104,7 +105,7 @@ export async function GET(request: Request) {
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
}
@@ -226,6 +227,6 @@ export async function POST(request: Request) {
return NextResponse.json({ success: true, message: "Berhasil menambahkan divisi", notif: dataNotif, }, { status: 200 });
} catch (error) {
console.error(error);
return NextResponse.json({ success: false, message: "Gagal menambahkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal menambahkan divisi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
}
};

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

@@ -17,6 +17,8 @@ import ReportDivisionId from './ui/report_division_id';
import { funGetDivisionById, funGetListDivisionByIdDivision, funGetSearchMemberDivision } from './lib/api_division';
import { globalIsAdminDivision } from './lib/val_division';
import WrapLayoutDivision from './ui/wrap_division';
import TabListDivision from './ui/tab_list_division';
import NavbarListDivision from './ui/navbar_list_division';
export { CreateUsers };
export { CreateAdminDivision };
@@ -38,4 +40,6 @@ export { funGetDivisionById }
export { funGetListDivisionByIdDivision }
export { funGetSearchMemberDivision }
export { globalIsAdminDivision }
export { WrapLayoutDivision }
export { WrapLayoutDivision }
export { TabListDivision }
export { NavbarListDivision }

13
src/module/division_new/lib/api_division.ts
View File

@@ -87,4 +87,15 @@ export const funGetReportDivision = async (path?: string) => {
export const funGetSearchMemberDivision = async (path: string, id: string) => {
const response = await fetch(`/api/division/${id}/member/${(path) ? path : ''}`, { next: { tags: ['division'] } });
return await response.json().catch(() => null);
}
}
export const funUpdateStatusDivision = async (path: string, data: { isActive: boolean }) => {
const response = await fetch(`/api/division/${path}/status`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
}

115
src/module/division_new/ui/information_division.tsx
View File

@@ -1,24 +1,26 @@
"use client"
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core';
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { funGetUserByCookies } from '@/module/auth';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { AiOutlineUserAdd } from 'react-icons/ai';
import { FaUserTie } from 'react-icons/fa6';
import { IoIosCloseCircle } from 'react-icons/io';
import { LuClipboardEdit } from 'react-icons/lu';
import { funDeleteMemberDivision, funEditStatusAdminDivision, funGetDivisionById } from '../lib/api_division';
import { FaPencil, FaToggleOff, FaUserTie } from 'react-icons/fa6';
import { HiMenu } from 'react-icons/hi';
import { IoIosCloseCircle, IoIosWarning } from 'react-icons/io';
import { funDeleteMemberDivision, funEditStatusAdminDivision, funGetDivisionById, funUpdateStatusDivision } from '../lib/api_division';
import { IDataMemberDivision } from '../lib/type_division';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { funGetUserByCookies } from '@/module/auth';
export default function InformationDivision() {
const router = useRouter()
const [openDrawer, setDrawer] = useState(false)
const [openDrawerInfo, setDrawerInfo] = useState(false)
const [valActive, setValActive] = useState(true)
const param = useParams<{ id: string }>()
const [name, setName] = useState('')
const [deskripsi, setDeskripsi] = useState('')
@@ -28,11 +30,13 @@ export default function InformationDivision() {
const [valChooseMemberStatus, setChooseMemberStatus] = useState<boolean>(false)
const [valChooseMemberName, setChooseMemberName] = useState("")
const [isOpenModal, setOpenModal] = useState(false)
const [isOpenModalStatus, setOpenModalStatus] = useState(false)
const roleLogin = useHookstate(globalRole)
const [isAdmin, setAdmin] = useState(false)
const isMobile = useMediaQuery('(max-width: 455px)');
const isMobile2 = useMediaQuery("(max-width: 438px)");
const tema = useHookstate(TEMA)
const [loadingStatus, setLoadingStatus] = useState(false)
async function getOneData() {
try {
@@ -43,6 +47,7 @@ export default function InformationDivision() {
setName(res.data.division.name);
setDeskripsi(res.data.division.desc);
setMember(res.data.member)
setValActive(res.data.division.isActive)
const cek = res.data.member.some((i: any) => i.idUser == login.id && i.isAdmin == true)
setAdmin(cek)
} else {
@@ -105,20 +110,53 @@ export default function InformationDivision() {
}
}
async function editStatusDivisi() {
try {
setLoadingStatus(true)
const res = await funUpdateStatusDivision(param.id, { isActive: valActive })
if (res.success) {
toast.success(res.message)
getOneData()
} else {
toast.error(res.message)
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
} finally {
setDrawerInfo(false)
setLoadingStatus(false)
setOpenModalStatus(false)
}
}
return (
<Box>
<LayoutNavbarNew back={"/division/" + param.id} title={name}
menu={
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
<ActionIcon variant="light" onClick={() => {
router.push('/division/edit/' + param.id)
}} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<LuClipboardEdit size={20} color='white' />
<ActionIcon variant="light" onClick={() => { setDrawerInfo(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
: <></>
}
/>
<Box p={20}>
{
!valActive ?
<Box mb={10}>
<Box p={15} bg={"#FFF2CD"} style={{
borderRadius: 10,
}}>
<Group align='center'>
<IoIosWarning size={25} />
<Text fw={"bold"}>Divisi dinonaktifkan</Text>
</Group>
</Box>
</Box>
: <></>
}
<Box>
<Text fw={"bold"}>Deskripsi Divisi</Text>
<Box p={20} bg={"white"} style={{
@@ -163,7 +201,7 @@ export default function InformationDivision() {
</Box>
:
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) ?
(((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) && valActive) ?
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
<Avatar size={'lg'}>
<AiOutlineUserAdd size={30} color={tema.get().utama} />
@@ -223,17 +261,17 @@ export default function InformationDivision() {
<LayoutDrawer opened={openDrawer} onClose={() => setDrawer(false)} title={valChooseMemberName}>
<Box>
<Group align='center' mb={20} onClick={() => editStatusAdmin()}>
<Group align='center' mb={20} onClick={() => valActive ? editStatusAdmin() : undefined}>
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<FaUserTie size={30} color={tema.get().utama} />
<FaUserTie size={30} color={valActive ? tema.get().utama : "gray"} />
</ActionIcon>
<Text c={tema.get().utama}>{(valChooseMemberStatus == false) ? "Jadikan admin" : "Memberhentikan sebagai admin"}</Text>
<Text c={valActive ? tema.get().utama : "gray"}>{(valChooseMemberStatus == false) ? "Jadikan admin" : "Memberhentikan sebagai admin"}</Text>
</Group>
<Group align='center' onClick={() => setOpenModal(true)}>
<Group align='center' onClick={() => valActive ? setOpenModal(true) : undefined}>
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<IoIosCloseCircle size={40} color={tema.get().utama} />
<IoIosCloseCircle size={40} color={valActive ? tema.get().utama : "gray"} />
</ActionIcon>
<Text c={tema.get().utama}>Keluarkan dari divisi</Text>
<Text c={valActive ? tema.get().utama : "gray"}>Keluarkan dari divisi</Text>
</Group>
</Box>
</LayoutDrawer>
@@ -247,6 +285,41 @@ export default function InformationDivision() {
deleteMember()
}
}} />
<LayoutDrawer opened={openDrawerInfo} onClose={() => setDrawerInfo(false)} title={"Menu"}>
<Box>
<Stack pt={10}>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 3 }} >
<Flex onClick={() => router.push('/division/edit/' + param.id)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Edit Divisi</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModalStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaToggleOff size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>{valActive ? "Non Aktifkan Divisi" : "Aktifkan Divisi"}</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
</LayoutDrawer>
<LayoutModal loading={loadingStatus} opened={isOpenModalStatus} onClose={() => setOpenModalStatus(false)}
description="Apakah Anda yakin ingin mangubah status aktifasi divisi?"
onYes={(val) => {
if (!val) {
setOpenModalStatus(false)
} else {
editStatusDivisi()
}
}} />
</Box>
);
}

29
src/module/division_new/ui/list_division.tsx
View File

@@ -17,7 +17,6 @@ import DrawerDivision from './drawer_division';
export default function ListDivision() {
const [isList, setIsList] = useState(false)
const router = useRouter()
const [openDrawer, setOpenDrawer] = useState(false)
const [data, setData] = useState<IDataDivison[]>([])
const [jumlah, setJumlah] = useState(0)
const [searchQuery, setSearchQuery] = useState('')
@@ -32,6 +31,7 @@ export default function ListDivision() {
const paddingLift = useMediaQuery('(max-width: 505px)')
const [isRefresh, setRefresh] = useState(false)
const notifLoadPage = useHookstate(globalNotifPage)
const status = searchParams.get('active')
const handleList = () => {
@@ -40,12 +40,12 @@ export default function ListDivision() {
const fetchData = async (loading: boolean) => {
try {
setLoading(loading);
if (isPage == 1) {
setData([])
}
const response = await funGetAllDivision('?search=' + searchQuery + '&group=' + group + '&page=' + isPage)
const response = await funGetAllDivision('?active=' + status + '&search=' + searchQuery + '&group=' + group + '&page=' + isPage)
if (response.success) {
setJumlah(response.total)
setNameGroup(response.filter.name)
@@ -65,14 +65,10 @@ export default function ListDivision() {
}
};
function searchDivision(search: string) {
setSearchQuery(search)
setPage(1)
}
useShallowEffect(() => {
setPage(1)
fetchData(true)
}, [searchQuery])
}, [status, searchQuery])
useShallowEffect(() => {
@@ -121,15 +117,7 @@ export default function ListDivision() {
return (
<Box>
<LayoutNavbarNew back='/home' title='Divisi'
menu={
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
<ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
} />
<Box p={20}>
<Box py={20}>
{
isRefresh &&
<ReloadButtonTop
@@ -153,7 +141,7 @@ export default function ListDivision() {
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
value={searchQuery}
onChange={(val) => { searchDivision(val.target.value) }}
onChange={(val) => { setSearchQuery(val.target.value) }}
/>
</Grid.Col>
<Grid.Col span={2}>
@@ -289,9 +277,6 @@ export default function ListDivision() {
</Box>
)}
</Box>
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerDivision />
</LayoutDrawer>
</Box>
);
}

30
src/module/division_new/ui/navbar_list_division.tsx Normal file
View File

@@ -0,0 +1,30 @@
'use client'
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
import DrawerDivision from "./drawer_division";
export default function NavbarListDivision() {
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const [openDrawer, setOpenDrawer] = useState(false)
return (
<>
<LayoutNavbarNew back='/home' title='Divisi'
menu={
roleLogin.get() != '' ?
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
<ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
: <></>
} />
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerDivision />
</LayoutDrawer>
</>
)
}

65
src/module/division_new/ui/tab_list_division.tsx Normal file
View File

@@ -0,0 +1,65 @@
"use client";
import { globalRole, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box, rem, Tabs } from "@mantine/core";
import { useRouter, useSearchParams } from "next/navigation";
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
import { IoCloseCircleOutline } from "react-icons/io5";
import ListDivision from "./list_division";
export default function TabListDivision() {
const iconStyle = { width: rem(20), height: rem(20) };
const router = useRouter();
const searchParams = useSearchParams();
const status = searchParams.get("active");
const group = searchParams.get("group");
const tema = useHookstate(TEMA)
const roleLogin = useHookstate(globalRole)
return (
<Box p={20}>
<Tabs
variant="pills"
color={tema.get().bgFiturHome}
radius="xl"
defaultValue={status == "false" ? "false" : "true"}
>
{
roleLogin.get() != '' ?
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
<Tabs.List
bg={"white"}
style={{
border: `1px solid ${"#EDEDED"}`,
padding: 5,
borderRadius: 100,
}}
>
<Tabs.Tab
value="true"
w={"45%"}
leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
onClick={() => {
router.push("/division?active=true&group=" + group);
}}
>
Aktif
</Tabs.Tab>
<Tabs.Tab
value="false"
w={"53%"}
leftSection={<IoCloseCircleOutline style={iconStyle} />}
onClick={() => {
router.push("/division?active=false&group=" + group);
}}
>
Tidak Aktif
</Tabs.Tab>
</Tabs.List>
: <></>
}
<ListDivision />
</Tabs>
</Box>
);
}

10
src/module/user/member/ui/list_member.tsx
View File

@@ -1,13 +1,11 @@
"use client";
import { TEMA, WARNA } from "@/module/_global";
import { Box, rem, Tabs, TextInput } from "@mantine/core";
import React from "react";
import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box, rem, Tabs } from "@mantine/core";
import { useRouter, useSearchParams } from "next/navigation";
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
import { IoCloseCircleOutline } from "react-icons/io5";
import TabListMember from "./tab_list_member";
import { useRouter, useSearchParams } from "next/navigation";
import { useHookstate } from "@hookstate/core";
export default function ListMember() {
const iconStyle = { width: rem(20), height: rem(20) };