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

Merge pull request #284 from bipproduction/nico/03-oktober-24

Browse Source 
Nico/03 oktober 24
This commit is contained in:
Amalia
2024-10-03 12:09:55 +08:00
committed by GitHub
parent dc385775d0 eb57f86c8b
commit a6ba98b9b6
7 changed files with 191 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/(application)/banner/edit/[id]/page.tsx
View File

@@ -1,3 +1,10 @@
export default function Page({ params }: { params: { id: string } }) {
return <div>Edit Banner</div>;
import { EditBanner } from "@/module/banner";
import { Box } from "@mantine/core";
export default function Page() {
return (
<Box>
<EditBanner />
</Box>
);
}

10
src/app/(application)/banner/viewfile/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { ViewfileBanner } from '@/module/banner';
import React from 'react';
function Page() {
return (
<ViewfileBanner/>
);
}
export default Page;

4
src/module/banner/index.ts
View File

@@ -1,4 +1,6 @@
import NavbarBanner from "./ui/navbar_banner";
import ListBanner from "./ui/list_banner";
import CreateBanner from "./ui/create_banner";
export {NavbarBanner, ListBanner, CreateBanner}
import EditBanner from "./ui/edit_banner";
import ViewfileBanner from "./ui/viewfile_banner";
export {NavbarBanner, ListBanner, CreateBanner, EditBanner, ViewfileBanner}

9
src/module/banner/lib/api_banner.ts Normal file
View File

@@ -0,0 +1,9 @@
export const funDeleteBanner = async (path: string) => {
const response = await fetch(`/api/banner/${path}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
return await response.json().catch(() => null);
};

73
src/module/banner/ui/edit_banner.tsx Normal file
View File

@@ -0,0 +1,73 @@
'use client'
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Box, Button, FileInput, Group, Paper, rem, Text, TextInput } from '@mantine/core';
import { IconUpload, IconPhoto, IconX } from '@tabler/icons-react';
import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
import React from 'react';
function EditBanner(props: Partial<DropzoneProps>) {
return (
<Box>
<LayoutNavbarNew back='/banner' title='Edit Banner' menu={<></>} />
<Box p={20}>
<Box>
<Paper withBorder radius={20}>
<Dropzone
onDrop={(files) => console.log('accepted files', files)}
onReject={(files) => console.log('rejected files', files)}
maxSize={5 * 1024 ** 2}
accept={IMAGE_MIME_TYPE}
{...props}
>
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload
style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)' }}
stroke={1.5}
/>
</Dropzone.Accept>
<Dropzone.Reject>
<IconX
style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)' }}
stroke={1.5}
/>
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto
style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)' }}
stroke={1.5}
/>
</Dropzone.Idle>
<Box>
<Text size="xl" inline>
Upload File
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
File Tidak Boleh Melebihi 500mb
</Text>
</Box>
</Group>
</Dropzone>
</Paper>
<Box>
<TextInput
mt={10}
label={ <Text>Judul Banner</Text>}
placeholder='Judul Banner'
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
/>
</Box>
<Button size='lg' bg={WARNA.biruTua} radius={30} fullWidth mt={20}>Simpan</Button>
</Box>
</Box>
</Box>
);
}
export default EditBanner;

106
src/module/banner/ui/list_banner.tsx
View File

@@ -1,35 +1,70 @@
'use client'
import { LayoutDrawer, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Anchor, Box, Flex, Group, Image, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import _ from 'lodash';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { ActionIcon, Anchor, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { IoAddCircle } from 'react-icons/io5';
function ListBanner() {
function ListBanner() {
const tema = useHookstate(TEMA)
const [searchQuery, setSearchQuery] = useState('')
const [loading, setLoading] = useState(true);
const [isData, setData] = useState([]);
const [valChoose, setValChoose] = useState("");
const router = useRouter();
const param = useParams<{ id: string }>()
const [isOpenModalView, setOpenModalView] = useState(false)
const [isOpen, setOpen] = useState(false)
const [openDrawer, setOpenDrawer] = useState(false);
const [idDataStorage, setIdDataStorage] = useState('')
const [isExtension, setExtension] = useState('')
// async function onTrue(val: boolean) {
// if (val) {
// const response = await funDeleteBanner(param.id)
// if (response.success) {
// toast.success(response.message)
// onDeleted(true)
// } else {
// toast.error(response.message)
// onDeleted(false)
// }
// } else {
// onDeleted(false)
// }
// setOpen(false)
// }
return (
<Box pt={20}>
<Box>
<Box pt={2}>
<Box p={20}>
<Anchor underline='never'>
<Stack align='center' justify='center'>
{[...Array(5)].map((_, index) => (
<div key={index} onClick={() => { setOpenDrawer(true) }}>
<Text c={"dark"} ta={"center"}>Banner {index + 1}</Text>
<Image radius={"lg"} src={`/assets/img/banner/Banner-${index + 1}.png`} alt='' w={380} h={194.5} />
</div>
<Paper radius={'md'} withBorder key={index} onClick={() => { setOpenDrawer(true) }
}
style={{
width: '100%',
maxWidth: 550,
height: 85,
backgroundColor: 'transparent',
border: `1px solid ${tema.get().bgTotalKegiatan}`
}}>
<Group mt={"15"}>
<ActionIcon variant='transparent' w={"100"}>
<Image radius={"xs"} src={"/assets/img/banner/Banner-1.png"} alt='' w={76} h={38.9} />
</ActionIcon>
<Flex direction={"column"}>
<Text c={"dark"} >Banner {index + 1}</Text>
<Text fz={"h6"} fw={"inherit"} c={"dark"}>Banner</Text>
</Flex>
</Group>
</Paper>
))}
</Stack>
@@ -42,34 +77,41 @@ function ListBanner() {
title={<Text lineClamp={1}>{"Menu"}</Text>}
>
<SimpleGrid
m={20}
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Box>
<Anchor underline='never'>
<Flex direction={"column"}>
<FaPencil size={30} color={WARNA.biruTua} />
<Text c={"dark"} mt={10}>Edit</Text>
</Flex>
<Anchor underline='never' onClick={() => router.push("/banner/edit/[id]")}>
<Flex direction="column" align="center" justify="center">
<FaPencil size={30} color={WARNA.biruTua} />
<Text c={"dark"} mt={10} ta="center">Edit</Text>
</Flex>
</Anchor>
</Box>
<Box>
<Anchor underline='never'>
<Flex direction={"column"}>
<FaFile size={30} color={WARNA.biruTua} />
<Text c={"dark"} mt={10}>View File</Text>
</Flex>
<Anchor underline='never' onClick={() => {setOpenModalView(true)}}>
<Flex direction="column" align="center" justify="center">
<FaFile size={30} color={WARNA.biruTua} />
<Text c={"dark"} mt={10} ta="center">Lihat File</Text>
</Flex>
</Anchor>
</Box>
<Box >
<Anchor underline='never'>
<Flex direction={"column"}>
<FaTrash size={30} color={WARNA.biruTua} />
<Text ta="center" c={"dark"} mt={10}>Hapus</Text>
</Flex>
<Box>
<Anchor underline='never' onClick={() => {setOpen(true)}}>
<Flex direction="column" align="center" justify="center">
<FaTrash size={30} color={WARNA.biruTua} />
<Text c={"dark"} mt={10} ta="center">Hapus</Text>
</Flex>
</Anchor>
</Box>
</SimpleGrid>
</LayoutDrawer>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description='Apakah Anda yakin ingin menghapus banner?'
onYes={(val) => { setOpen(false) }} />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
</Box>
);
}

13
src/module/banner/ui/viewfile_banner.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { LayoutNavbarNew } from '@/module/_global';
import { Box } from '@mantine/core';
import React from 'react';
function ViewfileBanner() {
return (
<Box>
<LayoutNavbarNew back='/banner' title='View File Banner' menu={<></>}/>
</Box>
);
}
export default ViewfileBanner;