From 8dbce6ecde2c505a5b50615164d045948f2ef67b Mon Sep 17 00:00:00 2001 From: nico Date: Thu, 3 Oct 2024 11:38:53 +0800 Subject: [PATCH 1/3] Tambahan Feature Banner --- .../(application)/banner/edit/[id]/page.tsx | 11 +- .../(application)/banner/viewfile/page.tsx | 10 ++ src/module/banner/index.ts | 4 +- src/module/banner/lib/api_banner.ts | 9 ++ src/module/banner/ui/edit_banner.tsx | 73 +++++++++++++ src/module/banner/ui/list_banner.tsx | 103 ++++++++++++------ src/module/banner/ui/viewfile_banner.tsx | 13 +++ 7 files changed, 189 insertions(+), 34 deletions(-) create mode 100644 src/app/(application)/banner/viewfile/page.tsx create mode 100644 src/module/banner/lib/api_banner.ts create mode 100644 src/module/banner/ui/edit_banner.tsx create mode 100644 src/module/banner/ui/viewfile_banner.tsx 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..5fa8001 100644 --- a/src/module/banner/ui/list_banner.tsx +++ b/src/module/banner/ui/list_banner.tsx @@ -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 ( - + {[...Array(5)].map((_, index) => ( -
{ setOpenDrawer(true) }}> - Banner {index + 1} - -
+ { setOpenDrawer(true) } + } + style={{ + width: '100%', + maxWidth: 500, + height: 80, + backgroundColor: 'transparent', + border: `1px solid ${tema.get().bgTotalKegiatan}` + + }}> + + + + + + Banner {index + 1} + Banner + + + ))} @@ -42,34 +76,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; From 5b722407a29f58b81bf7b53499fe0294ad3d82a4 Mon Sep 17 00:00:00 2001 From: nico Date: Thu, 3 Oct 2024 11:56:10 +0800 Subject: [PATCH 2/3] Tambahan Feature Banner --- src/module/banner/ui/list_banner.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/module/banner/ui/list_banner.tsx b/src/module/banner/ui/list_banner.tsx index 5fa8001..790ca0c 100644 --- a/src/module/banner/ui/list_banner.tsx +++ b/src/module/banner/ui/list_banner.tsx @@ -7,7 +7,7 @@ import { useParams, useRouter } from 'next/navigation'; import { useState } from 'react'; import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6'; -function ListBanner({ onDeleted }: { onDeleted: (val: boolean) => void }) { +function ListBanner() { const tema = useHookstate(TEMA) const [searchQuery, setSearchQuery] = useState('') const [loading, setLoading] = useState(true); @@ -20,6 +20,7 @@ function ListBanner({ onDeleted }: { onDeleted: (val: boolean) => void }) { const [openDrawer, setOpenDrawer] = useState(false); const [idDataStorage, setIdDataStorage] = useState('') const [isExtension, setExtension] = useState('') + // async function onTrue(val: boolean) { From eb57f86c8baa7dd5e5af851fd198226c62429727 Mon Sep 17 00:00:00 2001 From: nico Date: Thu, 3 Oct 2024 12:05:07 +0800 Subject: [PATCH 3/3] Tambahan Features --- src/module/banner/ui/list_banner.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/module/banner/ui/list_banner.tsx b/src/module/banner/ui/list_banner.tsx index 790ca0c..e68d5ea 100644 --- a/src/module/banner/ui/list_banner.tsx +++ b/src/module/banner/ui/list_banner.tsx @@ -40,17 +40,17 @@ function ListBanner() { // setOpen(false) // } return ( - + {[...Array(5)].map((_, index) => ( - { setOpenDrawer(true) } + { setOpenDrawer(true) } } style={{ width: '100%', - maxWidth: 500, - height: 80, + maxWidth: 550, + height: 85, backgroundColor: 'transparent', border: `1px solid ${tema.get().bgTotalKegiatan}`