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

upd: grup

Browse Source 
Deskripsi:
- menggunakan layout navbar new
- menggunakan local state
- menggunakan modal konfirmasi dan toast

No Issues
This commit is contained in:
amel
2024-07-09 10:39:01 +08:00
parent d684b6ea2e
commit 0c62724feb
5 changed files with 109 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,50 +1,50 @@
import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; import { LayoutDrawer, WARNA } from '@/module/_global';
import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core'; import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { HiOutlineOfficeBuilding } from 'react-icons/hi'; import { HiOutlineOfficeBuilding } from 'react-icons/hi';
import { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiMagnifyingGlass } from 'react-icons/hi2';
import EditDrawerGroup from './ui/edit_drawer_group'; import EditDrawerGroup from './ui/edit_drawer_group';
import { useHookstate } from '@hookstate/core'; import toast from 'react-hot-toast';
import { useRouter } from 'next/navigation';
const dataGroup = [ const dataGroup = [
{ {
id: 1, id: 1,
name: 'Lembaga Pengkreditan Desa' name: 'Dinas'
}, },
{ {
id: 2, id: 2,
name: 'Lembaga Pengkreditan Desa' name: 'Adat'
}, },
{ {
id: 3, id: 3,
name: 'Lembaga Pengkreditan Desa' name: 'LPD'
}, },
{ {
id: 4, id: 4,
name: 'Lembaga Pengkreditan Desa' name: 'Karang Taruna'
}, },
{ {
id: 5, id: 5,
name: 'Lembaga Pengkreditan Desa' name: 'BPD'
}, },
{ {
id: 6, id: 6,
name: 'Lembaga Pengkreditan Desa' name: 'LPM'
}, },
{ {
id: 7, id: 7,
name: 'Lembaga Pengkreditan Desa' name: 'PKK'
}, },
{ {
id: 8, id: 8,
name: 'Lembaga Pengkreditan Desa' name: 'Pengelolaan Penduduk'
}, },
] ]
export default function ListGroupActive() { export default function ListGroupActive() {
// const openDrawerEdit = useHookstate(isDrawer)
const [openDrawer, setOpenDrawer] = useState(false) const [openDrawer, setOpenDrawer] = useState(false)
const [valChoose, setValChoose] = useState("")
return ( return (
<Box pt={20}> <Box pt={20}>
<TextInput <TextInput
@@ -63,11 +63,18 @@ export default function ListGroupActive() {
{dataGroup.map((v, i) => { {dataGroup.map((v, i) => {
return ( return (
<Box pt={20} key={i}> <Box pt={20} key={i}>
<Group align='center' style={{ <Group align='center'
border: `1px solid ${"#DCEED8"}`, style={{
padding: 10, border: `1px solid ${"#DCEED8"}`,
borderRadius: 10 padding: 10,
}} onClick={() => setOpenDrawer(true)} > borderRadius: 10,
cursor: 'pointer'
}}
onClick={() => {
setValChoose(v.name)
setOpenDrawer(true)
}}
>
<Box> <Box>
<ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon"> <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
<HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} /> <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
@@ -80,8 +87,13 @@ export default function ListGroupActive() {
</Box> </Box>
) )
})} })}
<LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA"> <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={valChoose}>
<EditDrawerGroup /> <EditDrawerGroup onUpdated={(val) => {
if (val) {
toast.success('Sukses! data tersimpan')
}
setOpenDrawer(false)
}} />
</LayoutDrawer> </LayoutDrawer>
</Box> </Box>
); );

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

@@ -1,47 +1,50 @@
import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; import { LayoutDrawer, WARNA } from '@/module/_global';
import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core'; import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { HiOutlineOfficeBuilding } from 'react-icons/hi'; import { HiOutlineOfficeBuilding } from 'react-icons/hi';
import { HiMagnifyingGlass } from 'react-icons/hi2'; import { HiMagnifyingGlass } from 'react-icons/hi2';
import EditDrawerGroup from './ui/edit_drawer_group'; import EditDrawerGroup from './ui/edit_drawer_group';
import toast from 'react-hot-toast';
const dataGroup = [ const dataGroup = [
{ {
id: 1, id: 1,
name: 'No Active Desa' name: 'Dinas'
}, },
{ {
id: 2, id: 2,
name: 'No Active Desa' name: 'Adat'
}, },
{ {
id: 3, id: 3,
name: 'No Active Desa' name: 'LPD'
}, },
{ {
id: 4, id: 4,
name: 'No Active Desa' name: 'Karang Taruna'
}, },
{ {
id: 5, id: 5,
name: 'No Active Desa' name: 'BPD'
}, },
{ {
id: 6, id: 6,
name: 'No Active Desa' name: 'LPM'
}, },
{ {
id: 7, id: 7,
name: 'No Active Desa' name: 'PKK'
}, },
{ {
id: 8, id: 8,
name: 'No Active Desa' name: 'Pengelolaan Penduduk'
}, },
] ]
export default function ListGroupNonActive() { export default function ListGroupNonActive() {
const [openDrawer, setOpenDrawer] = useState(false) const [openDrawer, setOpenDrawer] = useState(false)
const [valChoose, setValChoose] = useState("")
return ( return (
<Box pt={20}> <Box pt={20}>
<TextInput <TextInput
@@ -60,11 +63,18 @@ export default function ListGroupNonActive() {
{dataGroup.map((v, i) => { {dataGroup.map((v, i) => {
return ( return (
<Box pt={20} key={i}> <Box pt={20} key={i}>
<Group align='center' style={{ <Group align='center'
border: `1px solid ${"#DCEED8"}`, style={{
padding: 10, border: `1px solid ${"#DCEED8"}`,
borderRadius: 10 padding: 10,
}} onClick={() => setOpenDrawer(true)}> borderRadius: 10,
cursor: 'pointer'
}}
onClick={() => {
setValChoose(v.name)
setOpenDrawer(true)
}}
>
<Box> <Box>
<ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon"> <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
<HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} /> <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
@@ -77,8 +87,13 @@ export default function ListGroupNonActive() {
</Box> </Box>
) )
})} })}
<LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA"> <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title={valChoose}>
<EditDrawerGroup /> <EditDrawerGroup onUpdated={(val) => {
if (val) {
toast.success('Sukses! data tersimpan')
}
setOpenDrawer(false)
}} />
</LayoutDrawer> </LayoutDrawer>
</Box> </Box>
); );

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

@@ -1,17 +1,16 @@
import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; import { LayoutDrawer, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core'; import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { IoAddCircle } from "react-icons/io5"; import { IoAddCircle } from "react-icons/io5";
export default function DrawerGroup() { export default function DrawerGroup({ onSuccess }: { onSuccess: (val: boolean) => void }) {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false) const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
const openDrawer = useHookstate(isDrawer)
function onCLose() { function onCLose() {
setOpenDrawerGroup(false) setOpenDrawerGroup(false)
openDrawer.set(false) onSuccess(true)
} }
return ( return (
<Box> <Box>
<Stack pt={10}> <Stack pt={10}>
@@ -29,7 +28,7 @@ export default function DrawerGroup() {
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>
</Stack> </Stack>
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'TAMBAH GRUP'}> <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Grup'}>
<Box pt={10}> <Box pt={10}>
<TextInput <TextInput
styles={{ styles={{
@@ -41,7 +40,7 @@ export default function DrawerGroup() {
}} }}
size="lg" size="lg"
radius={10} radius={10}
placeholder="Tambah Grup" placeholder="Grup"
/> />
<Box mt={'xl'}> <Box mt={'xl'}>
<Button <Button
@@ -52,7 +51,7 @@ export default function DrawerGroup() {
fullWidth fullWidth
onClick={onCLose} onClick={onCLose}
> >
MASUK Simpan
</Button> </Button>
</Box> </Box>
</Box> </Box>

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

@@ -1,26 +1,31 @@
'use client' 'use client'
import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global'; import { LayoutDrawer, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core'; import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core'; import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5"; import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
export default function EditDrawerGroup() { export default function EditDrawerGroup({ onUpdated }: { onUpdated: (val: boolean) => void }) {
const [openDrawerGroup, setOpenDrawerGroup] = useState(false) const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
const openDrawerEdit = useHookstate(isDrawer) const [isModal, setModal] = useState(false)
function onCLose() { function onCLose() {
setOpenDrawerGroup(false) setOpenDrawerGroup(false)
openDrawerEdit.set(false) onUpdated(true)
} }
function onTrue(val: boolean) {
if (val) {
onUpdated(true)
}
setModal(false)
}
return ( return (
<Box> <Box>
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
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'} >
<Box> <Box>
<IoCloseCircleOutline size={30} color={WARNA.biruTua} /> <IoCloseCircleOutline size={30} color={WARNA.biruTua} />
</Box> </Box>
@@ -28,7 +33,7 @@ export default function EditDrawerGroup() {
<Text c={WARNA.biruTua}>Tidak Aktif</Text> <Text c={WARNA.biruTua}>Tidak Aktif</Text>
</Box> </Box>
</Flex> </Flex>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setOpenDrawerGroup(true)}> <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setOpenDrawerGroup(true)} style={{ cursor: 'pointer' }}>
<Box> <Box>
<IoAddCircle size={30} color={WARNA.biruTua} /> <IoAddCircle size={30} color={WARNA.biruTua} />
</Box> </Box>
@@ -38,7 +43,7 @@ export default function EditDrawerGroup() {
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>
</Stack> </Stack>
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'EDIT GRUP'}> <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Grup'}>
<Box pt={10}> <Box pt={10}>
<TextInput <TextInput
styles={{ styles={{
@@ -50,7 +55,7 @@ export default function EditDrawerGroup() {
}} }}
size="lg" size="lg"
radius={10} radius={10}
placeholder="Edit Grup" placeholder="Grup"
/> />
<Box mt={'xl'}> <Box mt={'xl'}>
<Button <Button
@@ -61,11 +66,15 @@ export default function EditDrawerGroup() {
fullWidth fullWidth
onClick={onCLose} onClick={onCLose}
> >
EDIT Simpan
</Button> </Button>
</Box> </Box>
</Box> </Box>
</LayoutDrawer> </LayoutDrawer>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mangubah status aktifasi data?"
onYes={(val) => { onTrue(val) }} />
</Box> </Box>
); );
} }

41
src/module/group/components/ui/navbar_group.tsx
View File

@@ -1,34 +1,27 @@
"use client" "use client"
import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global'; import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core'; import { ActionIcon, } from '@mantine/core';
import React from 'react'; import React, { useState } from 'react';
import { HiMenu } from "react-icons/hi"; import { HiMenu } from "react-icons/hi";
import DrawerGroup from './drawer_group'; import DrawerGroup from './drawer_group';
import { useHookstate } from '@hookstate/core'; import toast from 'react-hot-toast';
export default function NavbarGroup() { export default function NavbarGroup() {
const openDrawerMenu = useHookstate(isDrawer) const [isOpen, setOpen] = useState(false)
return ( return (
<> <>
<LayoutNavbarHome> <LayoutNavbarNew back='/home' title='Grup'
<Grid justify='center' align='center'> menu={
<Grid.Col span="auto"> <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<LayoutIconBack back='/home' /> <HiMenu size={20} color='white' />
</Grid.Col> </ActionIcon>
<Grid.Col span={6}> }
<Text ta={'center'} fw={'bold'} c={'white'}>GROUP</Text> />
</Grid.Col> <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<Grid.Col span="auto"> <DrawerGroup onSuccess={() => {
<Group justify='flex-end'> setOpen(false)
<ActionIcon onClick={() => openDrawerMenu.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> toast.success('Sukses! data tersimpan')
<HiMenu size={20} color='white' /> }} />
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</LayoutNavbarHome>
<LayoutDrawer opened={openDrawerMenu.get()} title={'Menu'} onClose={() => openDrawerMenu.set(false)}>
<DrawerGroup />
</LayoutDrawer> </LayoutDrawer>
</> </>
); );