diff --git a/src/app/(application)/banner/edit/[id]/page.tsx b/src/app/(application)/banner/edit/[id]/page.tsx index 6dea5fd..22a5183 100644 --- a/src/app/(application)/banner/edit/[id]/page.tsx +++ b/src/app/(application)/banner/edit/[id]/page.tsx @@ -1,3 +1,10 @@ -export default function Page({ params }: { params: { id: string } }) { - return
Edit Banner
; +import { EditBanner } from "@/module/banner"; +import { Box } from "@mantine/core"; + +export default function Page() { + return ( + + + + ); } \ No newline at end of file diff --git a/src/app/(application)/banner/viewfile/page.tsx b/src/app/(application)/banner/viewfile/page.tsx new file mode 100644 index 0000000..768f17e --- /dev/null +++ b/src/app/(application)/banner/viewfile/page.tsx @@ -0,0 +1,10 @@ +import { ViewfileBanner } from '@/module/banner'; +import React from 'react'; + +function Page() { + return ( + + ); +} + +export default Page; diff --git a/src/module/banner/index.ts b/src/module/banner/index.ts index 9b3343f..f84b767 100644 --- a/src/module/banner/index.ts +++ b/src/module/banner/index.ts @@ -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} \ No newline at end of file +import EditBanner from "./ui/edit_banner"; +import ViewfileBanner from "./ui/viewfile_banner"; +export {NavbarBanner, ListBanner, CreateBanner, EditBanner, ViewfileBanner} \ No newline at end of file diff --git a/src/module/banner/lib/api_banner.ts b/src/module/banner/lib/api_banner.ts new file mode 100644 index 0000000..df174ae --- /dev/null +++ b/src/module/banner/lib/api_banner.ts @@ -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); +}; \ No newline at end of file diff --git a/src/module/banner/ui/edit_banner.tsx b/src/module/banner/ui/edit_banner.tsx new file mode 100644 index 0000000..d1e60cf --- /dev/null +++ b/src/module/banner/ui/edit_banner.tsx @@ -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) { + return ( + + } /> + + + + console.log('accepted files', files)} + onReject={(files) => console.log('rejected files', files)} + maxSize={5 * 1024 ** 2} + accept={IMAGE_MIME_TYPE} + {...props} + > + + + + + + + + + + + + + + Upload File + + + File Tidak Boleh Melebihi 500mb + + + + + + + Judul Banner} + placeholder='Judul Banner' + styles={{ + input: { + border: `1px solid ${"#D6D8F6"}`, + borderRadius: 10, + }, + }} + /> + + + + + + ); +} + +export default EditBanner; diff --git a/src/module/banner/ui/list_banner.tsx b/src/module/banner/ui/list_banner.tsx index 3283170..e68d5ea 100644 --- a/src/module/banner/ui/list_banner.tsx +++ b/src/module/banner/ui/list_banner.tsx @@ -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 ( - - + + {[...Array(5)].map((_, index) => ( -
{ setOpenDrawer(true) }}> - Banner {index + 1} - -
+ { setOpenDrawer(true) } + } + style={{ + width: '100%', + maxWidth: 550, + height: 85, + backgroundColor: 'transparent', + border: `1px solid ${tema.get().bgTotalKegiatan}` + + }}> + + + + + + Banner {index + 1} + Banner + + + ))} @@ -42,34 +77,41 @@ function ListBanner() { title={{"Menu"}} > - - - - Edit - + router.push("/banner/edit/[id]")}> + + + Edit + - - - - View File - + {setOpenModalView(true)}}> + + + Lihat File + - - - - - Hapus - + + {setOpen(true)}}> + + + Hapus + + + setOpen(false)} + description='Apakah Anda yakin ingin menghapus banner?' + onYes={(val) => { setOpen(false) }} /> + + setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' /> ); } diff --git a/src/module/banner/ui/viewfile_banner.tsx b/src/module/banner/ui/viewfile_banner.tsx new file mode 100644 index 0000000..ea022a3 --- /dev/null +++ b/src/module/banner/ui/viewfile_banner.tsx @@ -0,0 +1,13 @@ +import { LayoutNavbarNew } from '@/module/_global'; +import { Box } from '@mantine/core'; +import React from 'react'; + +function ViewfileBanner() { + return ( + + }/> + + ); +} + +export default ViewfileBanner;