Tambahan Feature Banner
This commit is contained in:
@@ -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
9
src/module/banner/lib/api_banner.ts
Normal 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
73
src/module/banner/ui/edit_banner.tsx
Normal 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;
|
||||
@@ -1,35 +1,69 @@
|
||||
'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({ onDeleted }: { onDeleted: (val: boolean) => void }) {
|
||||
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 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={'lg'} withBorder key={index} onClick={() => { setOpenDrawer(true) }
|
||||
}
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 500,
|
||||
height: 80,
|
||||
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 +76,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
13
src/module/banner/ui/viewfile_banner.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user