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

fitur: divisi

Browse Source 
Deskripsi:
- pengaplikasian api terbaru pada divisi
- list divisi
- create divisi
- detail divisi

No Issues
This commit is contained in:
amel
2024-08-09 17:25:02 +08:00
parent 925e54deec
commit f0c708a8f3
32 changed files with 821 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/module/division_new/components/detail_division/carousel_division.tsx → src/module/division_new/components/carousel_division.tsx
View File

2
src/module/division_new/components/create_admin_division.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import NavbarAdminDivision from './ui/navbar_admin_division';
import NavbarAdminDivision from './navbar_admin_division';
export default function CreateAdminDivision({ data }: { data: any }) {
return (

7
src/module/division_new/components/create_division.tsx
View File

@@ -22,9 +22,9 @@ import toast from "react-hot-toast";
import { funGetUserByCookies } from "@/module/auth";
import CreateAdminDivision from "./create_admin_division";
import CreateUsers from "./create_users";
import NavbarCreateUsers from "./ui/navbar_create_users";
import NavbarAdminDivision from "./ui/navbar_admin_division";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import NavbarAdminDivision from "./navbar_admin_division";
import NavbarCreateUsers from "./navbar_create_users";
export default function CreateDivision() {
const router = useRouter();
@@ -88,6 +88,8 @@ export default function CreateDivision() {
loadData();
}, []);
if (isChooseAdmin) return <NavbarAdminDivision data={body} onSuccess={(val) => {
if (val) {
member.set([])
@@ -204,7 +206,6 @@ export default function CreateDivision() {
fullWidth
onClick={() => {
onSubmit()
// router.push("/division/create?page=pilih-admin")
}}
>
Simpan

2
src/module/division_new/components/create_users.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import NavbarCreateUsers from './ui/navbar_create_users';
import NavbarCreateUsers from './navbar_create_users';
export default function CreateUsers({ grup }: { grup: string }) {
return (

27
src/module/division_new/components/detail_division/detail_division.tsx
View File

@@ -1,27 +0,0 @@
import { ActionIcon, Box, Stack } from '@mantine/core';
import React from 'react';
import CarouselDivision from './carousel_division';
import FeatureDetailDivision from './feature_detail_division';
import ListDiscussionOnDetailDivision from './list_discussion';
import ListTaskOnDetailDivision from './list_task';
import ListDocumentOnDetailDivision from './list_document';
import NavbarDetailDivision from '../ui/navbar_detail_division';
export default function DetailDivision() {
return (
<></>
// <Box>
// <NavbarDetailDivision />
// <Box p={20}>
// <Stack>
// <CarouselDivision />
// <FeatureDetailDivision />
// <ListTaskOnDetailDivision />
// <ListDocumentOnDetailDivision />
// <ListDiscussionOnDetailDivision />
// </Stack>
// </Box>
// </Box>
);
}

69
src/module/division_new/components/detail_division/list_document.tsx
View File

@@ -1,69 +0,0 @@
'use client'
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Image, Text, Center, Paper, Stack, UnstyledButton } from "@mantine/core";
import * as ICON from '../../../division/lib/file_icon'
import { useRouter } from "next/navigation";
const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
const listDocument = [
{
"id": "1",
"title": "image 1",
"description": "description 1",
"image": iconContainer(ICON.IMAGE),
},
{
"id": "2",
"title": "data pdf",
"description": "description 2",
"image": iconContainer(ICON.PDF),
},
{
"id": "3",
"title": "data pdf 3",
"description": "description 3",
"image": iconContainer(ICON.PDF),
},
{
"id": "4",
"title": "text 4",
"description": "description 4",
"image": iconContainer(ICON.TEXT),
},
{
"id": "5",
"title": "text 5",
"description": "description 5",
"image": iconContainer(ICON.TEXT),
}
]
export default function ListDocumentOnDetailDivision() {
const router = useRouter()
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{
listDocument.map((v) => <Carousel.Slide key={v.id}>
<UnstyledButton onClick={() => router.push(`/document`)}>
<Stack gap={0}>
<Paper withBorder shadow="sm" radius={12} >
<Center p={"md"}>
<Image w={"75"} src={v.image} alt="image" />
</Center>
</Paper>
<Box p={"sm"}>
<Text c={"dimmed"} truncate="end"ta={"center"}>{v.title}</Text>
</Box>
</Stack>
</UnstyledButton>
</Carousel.Slide>
)}
</Carousel>
</Box>
)
}

66
src/module/division_new/components/detail_division/list_task.tsx
View File

@@ -1,66 +0,0 @@
'use client'
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Avatar, Box, Group, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import { CiClock2 } from "react-icons/ci";
import { MdAccountCircle } from "react-icons/md";
const dataTask = [
{
id: 1,
title: 'Melakukan Tugas Mengenai Darmasaba',
date: '21 Juni 2024',
jumlah: 5
},
{
id: 2,
title: 'Pembuatan Laporan Kegiatan',
date: '21 Juni 2024',
jumlah: 3
},
{
id: 3,
title: 'Meeting Pembahasan Proposal',
date: '21 Juni 2024',
jumlah: 8
},
{
id: 4,
title: 'Laporan Anggaran Tahunan',
date: '21 Juni 2024',
jumlah: 4
}
]
export default function ListTaskOnDetailDivision() {
const router = useRouter()
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{dataTask.map((v, i) =>
<Carousel.Slide key={v.id}>
<Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={WARNA.bgWhite} truncate="end">{v.title}</Text>
<Group justify="space-between" mt={20} c={'#aeaeae'}>
<Group gap={5} align="center">
<CiClock2 size={18} />
<Text fz={13}>{v.date}</Text>
</Group >
<Group gap={5} align="center">
<Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.jumlah}</Avatar>
</Avatar.Group>
</Group>
</Group>
</Box>
</Carousel.Slide>
)}
</Carousel>
</Box>
)
}

0
src/module/division_new/components/ui/drawer_detail_division.tsx → src/module/division_new/components/drawer_detail_division.tsx
View File

0
src/module/division_new/components/ui/drawer_division.tsx → src/module/division_new/components/drawer_division.tsx
View File

48
src/module/division_new/components/detail_division/feature_detail_division.tsx → src/module/division_new/components/feature_detail_division.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
import React from 'react';
import React, { useState } from 'react';
import { HiMiniUserGroup } from 'react-icons/hi2';
import { IoIosArrowRoundForward } from 'react-icons/io';
import { LuClipboardEdit } from "react-icons/lu";
@@ -9,10 +9,36 @@ import { GoCommentDiscussion } from "react-icons/go";
import { BsFileEarmarkText } from "react-icons/bs";
import { IoCalendarOutline } from "react-icons/io5";
import { LuFileSignature } from "react-icons/lu";
import { useRouter } from 'next/navigation';
import { useParams, useRouter } from 'next/navigation';
import { funGetDetailDivisionById } from '../lib/api_division';
import toast from 'react-hot-toast';
import { useShallowEffect } from '@mantine/hooks';
import { IDataJumlahDetailDivision } from '../lib/type_division';
export default function FeatureDetailDivision({ id }: { id: string }) {
export default function FeatureDetailDivision() {
const param = useParams<{ id: string }>()
const router = useRouter()
const [feature, setFeature] = useState<IDataJumlahDetailDivision>()
async function fetchData() {
try {
const res = await funGetDetailDivisionById(param.id, 'jumlah');
if (res.success) {
setFeature(res.data)
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
}
}
useShallowEffect(() => {
fetchData()
}, [param.id])
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Features</Text>
@@ -27,7 +53,7 @@ export default function FeatureDetailDivision({ id }: { id: string }) {
border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push(id + '/task')}>
}} onClick={() => router.push(param.id + '/task')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
@@ -42,7 +68,7 @@ export default function FeatureDetailDivision({ id }: { id: string }) {
<Grid.Col span={{ base: 7, md: 9 }}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Tugas</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>23 Tugas</Text>
<Text fz={10} c={"gray"}>{feature?.tugas} Tugas</Text>
<IoIosArrowRoundForward size={20} color='gray' />
</Group>
</Grid.Col>
@@ -52,7 +78,7 @@ export default function FeatureDetailDivision({ id }: { id: string }) {
border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push(id + '/document')}>
}} onClick={() => router.push(param.id + '/document')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
@@ -67,7 +93,7 @@ export default function FeatureDetailDivision({ id }: { id: string }) {
<Grid.Col span={{ base: 7, md: 9 }}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Dokumen</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>23 Tugas</Text>
<Text fz={10} c={"gray"}>{feature?.dokumen} File</Text>
<IoIosArrowRoundForward size={20} color='gray' />
</Group>
</Grid.Col>
@@ -77,7 +103,7 @@ export default function FeatureDetailDivision({ id }: { id: string }) {
border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push(id + '/discussion')}>
}} onClick={() => router.push(param.id + '/discussion')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
@@ -92,7 +118,7 @@ export default function FeatureDetailDivision({ id }: { id: string }) {
<Grid.Col span={{ base: 7, md: 9 }}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Diskusi</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>23 Tugas</Text>
<Text fz={10} c={"gray"}>{feature?.diskusi} Diskusi</Text>
<IoIosArrowRoundForward size={20} color='gray' />
</Group>
</Grid.Col>
@@ -102,7 +128,7 @@ export default function FeatureDetailDivision({ id }: { id: string }) {
border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push(id + '/calender')}>
}} onClick={() => router.push(param.id + '/calender')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
@@ -117,7 +143,7 @@ export default function FeatureDetailDivision({ id }: { id: string }) {
<Grid.Col span={{ base: 7, md: 9 }}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Kalender</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>23 Tugas</Text>
<Text fz={10} c={"gray"}>{feature?.kalender} Acara</Text>
<IoIosArrowRoundForward size={20} color='gray' />
</Group>
</Grid.Col>

60
src/module/division_new/components/detail_division/list_discussion.tsx → src/module/division_new/components/list_discussion.tsx
View File

@@ -1,9 +1,14 @@
"use client"
import { WARNA } from "@/module/_global";
import { Box, Group, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import { Box, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { CiUser, CiClock2 } from "react-icons/ci";
import { GoDiscussionClosed } from "react-icons/go";
import { funGetDetailDivisionById } from "../lib/api_division";
import { IDataDiscussionOnDetailDivision } from "../lib/type_division";
const dataDiskusi = [
{
@@ -34,6 +39,32 @@ const dataDiskusi = [
export default function ListDiscussionOnDetailDivision() {
const router = useRouter();
const param = useParams<{ id: string }>()
const [data, setData] = useState<IDataDiscussionOnDetailDivision[]>([])
const [loading, setLoading] = useState(true);
async function fetchData() {
try {
setLoading(true);
const res = await funGetDetailDivisionById(param.id, 'new-discussion');
if (res.success) {
setData(res.data)
} else {
toast.error(res.message);
}
setLoading(false);
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
} finally {
setLoading(false);
}
}
useShallowEffect(() => {
fetchData()
}, [param.id])
return (
<>
<Box pt={10}>
@@ -48,7 +79,28 @@ export default function ListDiscussionOnDetailDivision() {
padding: 20,
}}
>
{dataDiskusi.map((v, i) => {
{
loading ?
Array(2)
.fill(null)
.map((_, i) => (
<Stack align="stretch" justify="center" key={i} pb={10}>
<Skeleton height={80} radius="md" m={0} />
<Group justify="space-between">
<Skeleton height={10} radius="md" m={0} w={100} />
<Skeleton height={10} radius="md" m={0} w={100} />
</Group>
</Stack>
))
:
(data.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada diskusi</Text>
</Stack>
: <></>
}
{data.map((v, i) => {
return (
<Box
key={i}
@@ -64,7 +116,7 @@ export default function ListDiscussionOnDetailDivision() {
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={"bold"} truncate="end">
{v.judul}
{v.title}
</Text>
</Box>
</Group>

53
src/module/division_new/components/ui/navbar_division.tsx → src/module/division_new/components/list_division.tsx
View File

@@ -8,37 +8,50 @@ import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiMiniUserGroup, HiOutli
import { MdAccountCircle } from 'react-icons/md';
import DrawerDivision from './drawer_division';
import { useShallowEffect } from '@mantine/hooks';
import { IDataDivison } from '../lib/type_division';
import { funGetAllDivision } from '../lib/api_division';
import toast from 'react-hot-toast';
type TypeDivision = {
id: string
name: string
idGroup: string
idVillage: string
desc: string
isActive: boolean
}[]
export default function NavbarDivision() {
export default function ListDivision() {
const [isList, setIsList] = useState(false)
const router = useRouter()
const [openDrawer, setOpenDrawer] = useState(false)
const [data, setData] = useState<TypeDivision>()
const [data, setData] = useState<IDataDivison[]>([])
const [jumlah, setJumlah] = useState(0)
const [searchQuery, setSearchQuery] = useState('')
const handleList = () => {
setIsList(!isList)
}
async function loadData() {
const response = await fetch(API_ADDRESS.apiGetAllDivision)
const data = await response.json()
setData(data)
setJumlah(data.length)
const fetchData = async (search: string) => {
try {
setData([]);
const response = await funGetAllDivision('?search=' + search)
if (response.success) {
setData(response.data)
setJumlah(response.data.length)
} else {
toast.error(response.message);
}
} catch (error) {
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
console.error(error);
}
};
function searchDivision(search: string) {
setSearchQuery(search)
fetchData(search)
}
useShallowEffect(() => {
loadData()
}, [])
fetchData(searchQuery)
}, [searchQuery])
return (
<Box>
@@ -61,6 +74,8 @@ export default function NavbarDivision() {
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
value={searchQuery}
onChange={(val) => { searchDivision(val.target.value) }}
/>
</Grid.Col>
<Grid.Col span={'auto'}>
@@ -131,7 +146,7 @@ export default function NavbarDivision() {
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+5</Avatar>
<Avatar>+{v.jumlah_member - 1}</Avatar>
</Avatar.Group>
</Group>
</Box>

86
src/module/division_new/components/list_document.tsx Normal file
View File

@@ -0,0 +1,86 @@
'use client'
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Image, Text, Center, Paper, Stack, UnstyledButton, Skeleton, Group } from "@mantine/core";
import * as ICON from '../../division/lib/file_icon'
import { useParams, useRouter } from "next/navigation";
import { useShallowEffect } from "@mantine/hooks";
import toast from "react-hot-toast";
import { funGetDetailDivisionById } from "../lib/api_division";
import { IDataKalenderOnDetailDivision } from "../lib/type_division";
import { useState } from "react";
const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
export default function ListDocumentOnDetailDivision() {
const router = useRouter()
const param = useParams<{ id: string }>()
const [data, setData] = useState<IDataKalenderOnDetailDivision[]>([])
const [loading, setLoading] = useState(true);
async function fetchData() {
try {
setLoading(true);
const res = await funGetDetailDivisionById(param.id, 'new-file');
if (res.success) {
setData(res.data)
} else {
toast.error(res.message);
}
setLoading(false);
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
} finally {
setLoading(false);
}
}
useShallowEffect(() => {
fetchData()
}, [param.id])
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Dokumen Terbaru</Text>
<Group justify="center" grow>
{
loading
?
Array(4)
.fill(null)
.map((_, i) => (
<Stack align="stretch" justify="center" key={i}>
<Skeleton height={80} radius="md" m={0} />
<Skeleton height={10} radius="md" m={0} />
</Stack>
))
: (data.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada file</Text>
</Stack>
: <></>
}
</Group>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{
data.map((v) =>
<Carousel.Slide key={v.id}>
<UnstyledButton onClick={() => router.push(`/document`)}>
<Stack gap={0}>
<Paper withBorder shadow="sm" radius={12} >
<Center p={"md"}>
<Image w={"75"} src={(v.extension == "pdf") ? iconContainer(ICON.PDF) : iconContainer(ICON.IMAGE)} alt="image" />
</Center>
</Paper>
<Box p={"sm"}>
<Text c={"dimmed"} truncate="end" ta={"center"}>{v.name + '.' + v.extension}</Text>
</Box>
</Stack>
</UnstyledButton>
</Carousel.Slide>
)}
</Carousel>
</Box>
)
}

89
src/module/division_new/components/list_task.tsx Normal file
View File

@@ -0,0 +1,89 @@
'use client'
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Avatar, Box, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { CiClock2 } from "react-icons/ci";
import { funGetDetailDivisionById } from "../lib/api_division";
import { useState } from "react";
import { IDataTaskOnDetailDivision } from "../lib/type_division";
export default function ListTaskOnDetailDivision() {
const router = useRouter()
const param = useParams<{ id: string }>()
const [data, setData] = useState<IDataTaskOnDetailDivision[]>([])
const [loading, setLoading] = useState(true);
async function fetchData() {
try {
setLoading(true);
const res = await funGetDetailDivisionById(param.id, 'today-task');
if (res.success) {
setData(res.data)
} else {
toast.error(res.message);
}
setLoading(false);
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
} finally {
setLoading(false);
}
}
useShallowEffect(() => {
fetchData()
}, [param.id])
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Tugas Hari Ini</Text>
<Group justify="center" grow>
{
loading ?
Array(2)
.fill(null)
.map((_, i) => (
<Stack align="stretch" justify="center" key={i}>
<Skeleton height={80} radius="md" m={0} />
<Skeleton height={10} radius="md" m={0} />
</Stack>
))
:
(data.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada tugas hari ini</Text>
</Stack>
: <></>
}
</Group>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{data.map((v, i) =>
<Carousel.Slide key={v.id}>
<Box p={20} w={{ base: 300, md: 400 }} onClick={() => router.push(`/task/${v.id}`)} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={WARNA.bgWhite} truncate="end">{v.title}</Text>
<Group justify="space-between" mt={20} c={'#aeaeae'}>
<Group gap={5} align="center">
<CiClock2 size={18} />
<Text fz={13}>{v.dateStart}</Text>
</Group >
<Group gap={5} align="center">
{/* <Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>+{v.jumlah}</Avatar>
</Avatar.Group> */}
</Group>
</Group>
</Box>
</Carousel.Slide>
)}
</Carousel>
</Box>
)
}

60
src/module/division_new/components/ui/navbar_admin_division.tsx → src/module/division_new/components/navbar_admin_division.tsx
View File

@@ -5,12 +5,15 @@ import { Avatar, Box, Button, Checkbox, Divider, Flex, Group, Stack, Text, TextI
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { globalMemberDivision } from '../../lib/val_division';
import toast from 'react-hot-toast';
import { globalMemberDivision } from '../lib/val_division';
import { funCreateDivision } from '../lib/api_division';
import { IFormMemberDivision } from '../lib/type_division';
export default function NavbarAdminDivision({ data, onSuccess }: { data: any, onSuccess: (val: any) => void }) {
const router = useRouter()
const member = useHookstate(globalMemberDivision)
const memberValue = member.get() as IFormMemberDivision[]
const [value, setValue] = useState<string[]>([]);
async function onSubmit() {
@@ -19,31 +22,50 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
}
try {
const res = await fetch(API_ADDRESS.apiCreateDivision, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
data: data,
member: member.get(),
admin: value
})
})
const response = await funCreateDivision({ data: data, member: memberValue, admin: value })
const errorData = await res.json();
if (res.status == 201) {
toast.success('Sukses! data tersimpan')
if (response.success) {
toast.success(response.message);
onSuccess(true)
} else {
toast.error(errorData.message);
toast.error(response.message)
onSuccess(false)
}
} catch (error) {
toast.error('Error')
console.log(error);
onSuccess(false)
toast.error("Gagal menambahkan grup, coba lagi nanti");
}
// try {
// const res = await fetch(API_ADDRESS.apiCreateDivision, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({
// data: data,
// member: member.get(),
// admin: value
// })
// })
// const errorData = await res.json();
// if (res.status == 201) {
// toast.success('Sukses! data tersimpan')
// onSuccess(true)
// } else {
// toast.error(errorData.message);
// onSuccess(false)
// }
// } catch (error) {
// toast.error('Error')
// onSuccess(false)
// }
}
return (
@@ -83,7 +105,7 @@ export default function NavbarAdminDivision({ data, onSuccess }: { data: any, on
</Text>
</Box>
</Group>
<Checkbox value={v.id} />
<Checkbox value={v.idUser} />
</Flex>
<Divider my={20} />
</Box>

39
src/module/division_new/components/ui/navbar_create_users.tsx → src/module/division_new/components/navbar_create_users.tsx
View File

@@ -6,43 +6,10 @@ import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { globalMemberDivision } from '../../lib/val_division';
import { TypeUser } from '@/module/user';
import { funGetUserByCookies } from '@/module/auth';
import toast from 'react-hot-toast';
const dataUser = [
{
id: 1,
img: "https://i.pravatar.cc/1000?img=3",
name: "Doni Setiawan",
},
{
id: 2,
img: "https://i.pravatar.cc/1000?img=10",
name: "Ilham Udin",
},
{
id: 3,
img: "https://i.pravatar.cc/1000?img=11",
name: "Didin Anang",
},
{
id: 4,
img: "https://i.pravatar.cc/1000?img=21",
name: "Angga Saputra",
},
{
id: 5,
img: "https://i.pravatar.cc/1000?img=32",
name: "Marcel Widianto",
},
{
id: 6,
img: "https://i.pravatar.cc/1000?img=37",
name: "Bagas Nusantara",
},
];
import { globalMemberDivision } from '../lib/val_division';
export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) {
@@ -55,7 +22,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
if (selectedFiles.some((i: any) => i.id == dataMember[index].id)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.id != dataMember[index].id))
} else {
setSelectedFiles([...selectedFiles, dataMember[index]])
setSelectedFiles([...selectedFiles, {idUser: dataMember[index].id, name: dataMember[index].name}])
}
};
@@ -110,7 +77,7 @@ export default function NavbarCreateUsers({ grup, onClose }: { grup?: string, on
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.id == dataMember[index].id);
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box key={index} mb={10}>
<Box

50
src/module/division_new/components/navbar_detail_division.tsx Normal file
View File

@@ -0,0 +1,50 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { ActionIcon, Box } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
import DrawerDetailDivision from "./drawer_detail_division";
import { funGetDivisionById } from "../lib/api_division";
import { useParams } from "next/navigation";
import toast from "react-hot-toast";
import { useShallowEffect } from "@mantine/hooks";
export default function NavbarDetailDivision() {
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string }>()
const [name, setName] = useState('')
async function getOneData() {
try {
const res = await funGetDivisionById(param.id);
if (res.success) {
setName(res.data.name);
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan grup, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneData();
}, [param.id])
return (
<>
<LayoutNavbarNew back="" title={name} menu={
<ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
} />
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerDetailDivision />
</LayoutDrawer>
</>
);
}

24
src/module/division_new/components/ui/navbar_detail_division.tsx
View File

@@ -1,24 +0,0 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { ActionIcon, Box } from "@mantine/core";
import { useState } from "react";
import { HiMenu } from "react-icons/hi";
import DrawerDetailDivision from "./drawer_detail_division";
export default function NavbarDetailDivision({ title }: { title: string }) {
const [openDrawer, setOpenDrawer] = useState(false)
return (
<>
<LayoutNavbarNew back="" title={title} menu={
<ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
} />
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerDetailDivision />
</LayoutDrawer>
</>
);
}

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

@@ -1,3 +1,4 @@
import { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison } from './lib/type_division';
import CreateUserDivisionCalender from "./_division_fitur/calender/components/create_user_division_calender";
import UlangiEvent from "./_division_fitur/calender/components/ulangi_event";
import UpdateUlangiEvent from "./_division_fitur/calender/components/update_calander/update_ulangi_event";
@@ -21,20 +22,22 @@ import { apiDivision } from "./api/api_division";
import CreateAdminDivision from "./components/create_admin_division";
import CreateUsers from "./components/create_users";
import ViewCreateAnggotaDivision from "./view/view_create_anggota_division";
import ViewCreateDivision from "./view/view_create_division";
import ViewCreateReport from "./view/view_create_report";
import ViewDetailDivision from "./view/view_detail_division";
import ViewDivision from "./view/view_division";
import ViewEditDivision from "./view/view_edit_division";
import ViewInformationDivision from "./view/view_Information_division";
import ViewReportDivision from "./view/view_report_division";
import ListDivision from './components/list_division';
import CreateDivision from './components/create_division';
import NavbarDetailDivision from './components/navbar_detail_division';
import CarouselDivision from './components/carousel_division';
import FeatureDetailDivision from './components/feature_detail_division';
import ListTaskOnDetailDivision from './components/list_task';
import ListDocumentOnDetailDivision from './components/list_document';
import ListDiscussionOnDetailDivision from './components/list_discussion';
export { ViewDivision };
export { ViewCreateDivision };
export { CreateUsers };
export { CreateAdminDivision };
export { ViewCreateReport };
export { ViewDetailDivision };
export { ViewDivisionTask };
export { ViewDetailDivisionTask };
export { ViewUpdateProgressDivisionTask };
@@ -59,3 +62,12 @@ export { ViewEditDivision };
export { ViewCreateAnggotaDivision };
export { apiDivision }
export { apiDiscussion }
export type { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison }
export { ListDivision }
export { CreateDivision }
export { NavbarDetailDivision }
export { CarouselDivision }
export { FeatureDetailDivision }
export { ListTaskOnDetailDivision }
export { ListDocumentOnDetailDivision }
export { ListDiscussionOnDetailDivision }

27
src/module/division_new/lib/api_division.ts Normal file
View File

@@ -0,0 +1,27 @@
import { IFormFixDivision } from "./type_division";
export const funGetAllDivision = async (path?: string) => {
const response = await fetch(`/api/division${(path) ? path : ''}`, { next: { tags: ['division'] } });
return await response.json().catch(() => null);
}
export const funGetDivisionById = async (path: string) => {
const response = await fetch(`/api/division/${path}`);
return await response.json().catch(() => null);
}
export const funGetDetailDivisionById = async (path: string, kategori: string) => {
const response = await fetch(`/api/division/${path}/detail?cat=${kategori}`);
return await response.json().catch(() => null);
}
export const funCreateDivision = async (data: IFormFixDivision) => {
const response = await fetch("/api/division", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
}

50
src/module/division_new/lib/type_division.ts Normal file
View File

@@ -0,0 +1,50 @@
export interface IFormDivision {
name: string
idGroup: string
desc: string
}
export interface IFormMemberDivision {
idUser: string,
name: string
}
export interface IFormFixDivision {
data: IFormDivision,
member: IFormMemberDivision[],
admin: string[]
}
export interface IDataDivison {
id: string,
name: string,
desc: string,
jumlah_member: number
}
export interface IDataJumlahDetailDivision {
tugas: number,
dokumen: number,
diskusi: number,
kalender: number
}
export interface IDataTaskOnDetailDivision {
id: string,
title: string,
dateStart: string,
dateEnd: string
}
export interface IDataKalenderOnDetailDivision {
id: string,
name: string,
extension: string,
}
export interface IDataDiscussionOnDetailDivision {
id: string,
title: string,
date: string,
user: string
}

4
src/module/division_new/lib/val_division.ts
View File

@@ -1,4 +1,4 @@
import { TypeUser } from "@/module/user";
import { hookstate } from "@hookstate/core";
import { IFormMemberDivision } from "./type_division";
export const globalMemberDivision = hookstate<TypeUser>([]);
export const globalMemberDivision = hookstate<IFormMemberDivision[]>([]);

8
src/module/division_new/view/view_create_division.tsx
View File

@@ -1,8 +0,0 @@
import React from 'react';
import CreateDivision from '../components/create_division';
export default function ViewCreateDivision() {
return (
<CreateDivision/>
);
}

35
src/module/division_new/view/view_detail_division.tsx
View File

@@ -1,35 +0,0 @@
import React, { useEffect } from 'react';
import DetailDivision from '../components/detail_division/detail_division';
import { Box, Stack } from '@mantine/core';
import CarouselDivision from '../components/detail_division/carousel_division';
import FeatureDetailDivision from '../components/detail_division/feature_detail_division';
import ListDiscussionOnDetailDivision from '../components/detail_division/list_discussion';
import ListDocumentOnDetailDivision from '../components/detail_division/list_document';
import ListTaskOnDetailDivision from '../components/detail_division/list_task';
import NavbarDetailDivision from '../components/ui/navbar_detail_division';
import { API_ADDRESS } from '@/module/_global';
export default async function ViewDetailDivision({ id }: { id: string }) {
const res = await fetch(`${process.env.URL + API_ADDRESS.apiGetOneDetailDivision}&divisionId=${id}`);
const data = await res.json();
console.log(data)
return (
// <DetailDivision />
<Box>
<NavbarDetailDivision title={ data?.division?.name } />
<Box p={20}>
<Stack>
<CarouselDivision />
<FeatureDetailDivision id={id} />
<ListTaskOnDetailDivision />
<ListDocumentOnDetailDivision />
<ListDiscussionOnDetailDivision />
</Stack>
</Box>
</Box>
);
}

9
src/module/division_new/view/view_division.tsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
import NavbarDivision from '../components/ui/navbar_division';
export default function ViewDivision() {
return (
<NavbarDivision />
);
}

1
src/module/group/ui/edit_drawer_group.tsx
View File

@@ -28,7 +28,6 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
async function getOneGroup() {
try {
const res = await funGetGroupById(id);
console.log("amalia", res)
if (res.success) {
setName(res.data.name);
} else {