diff --git a/src/app/(application)/banner/edit/[id]/page.tsx b/src/app/(application)/banner/edit/[id]/page.tsx index 22a5183..ef3b077 100644 --- a/src/app/(application)/banner/edit/[id]/page.tsx +++ b/src/app/(application)/banner/edit/[id]/page.tsx @@ -1,10 +1,11 @@ + 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/module/banner/lib/api_banner.ts b/src/module/banner/lib/api_banner.ts index 9c969f0..c4b6a0c 100644 --- a/src/module/banner/lib/api_banner.ts +++ b/src/module/banner/lib/api_banner.ts @@ -21,7 +21,7 @@ export const funCreateBanner = async (data: FormData) => { return await response.json().catch(() => null); } -export const funGetOneBanner = async (path: string) => { +export const funGetOneBanner = async (path: string, p0: string) => { const response = await fetch(`/api/banner/${path}`) return await response.json().catch(() => null); } diff --git a/src/module/banner/lib/type_banner.ts b/src/module/banner/lib/type_banner.ts new file mode 100644 index 0000000..9d5a3ab --- /dev/null +++ b/src/module/banner/lib/type_banner.ts @@ -0,0 +1,6 @@ +export interface IDataBanner { + id: string + title: string + extension: string + image: string +}[] diff --git a/src/module/banner/ui/create_banner.tsx b/src/module/banner/ui/create_banner.tsx index 954cf34..c9edc10 100644 --- a/src/module/banner/ui/create_banner.tsx +++ b/src/module/banner/ui/create_banner.tsx @@ -1,11 +1,13 @@ '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 { LayoutNavbarNew, TEMA } from '@/module/_global'; +import { useHookstate } from '@hookstate/core'; +import { Box, Button, Group, Paper, rem, Text, TextInput } from '@mantine/core'; import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone'; -import React from 'react'; +import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react'; function CreateBanner(props: Partial) { + const tema = useHookstate(TEMA) + return ( } /> @@ -41,10 +43,10 @@ function CreateBanner(props: Partial) { - Upload File + Upload File - File Tidak Boleh Melebihi 500mb + File Tidak Boleh Melebihi 500mb @@ -53,7 +55,7 @@ function CreateBanner(props: Partial) { Judul Banner} + label={Judul Banner} placeholder='Judul Banner' styles={{ input: { @@ -63,7 +65,16 @@ function CreateBanner(props: Partial) { }} /> - + + + diff --git a/src/module/banner/ui/edit_banner.tsx b/src/module/banner/ui/edit_banner.tsx index d1e60cf..9f803be 100644 --- a/src/module/banner/ui/edit_banner.tsx +++ b/src/module/banner/ui/edit_banner.tsx @@ -1,11 +1,27 @@ '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 { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global'; +import LayoutModal from '@/module/_global/layout/layout_modal'; +import { useHookstate } from '@hookstate/core'; +import { Box, Button, Group, Paper, rem, Text, TextInput } from '@mantine/core'; import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone'; -import React from 'react'; +import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react'; +import { useParams, useRouter } from 'next/navigation'; +import { useState } from 'react'; + + +function EditBanner(props: Partial ) { + const router = useRouter() + const tema = useHookstate(TEMA) + const param = useParams<{ id: string, detail: string }>() + const [title, setTitle] = useState("") + const [openModal, setOpenModal] = useState(false) + const [loading, setLoading] = useState(true) + const [imgForm, setImgForm] = useState() + const [touched, setTouched] = useState({ + title: false, + }); + -function EditBanner(props: Partial) { return ( } /> @@ -41,10 +57,10 @@ function EditBanner(props: Partial) { - Upload File + Upload File - File Tidak Boleh Melebihi 500mb + File Tidak Boleh Melebihi 500mb @@ -53,17 +69,47 @@ function EditBanner(props: Partial) { Judul Banner} - placeholder='Judul Banner' + label="Judul Banner" + placeholder='Banner' styles={{ input: { border: `1px solid ${"#D6D8F6"}`, borderRadius: 10, }, }} + required + size='md' + value={title} + onChange={(e) => { + setTitle(e.currentTarget.value) + setTouched({...touched, title: false}) + }} + + /> + + + + + setOpenModal(false)} + description="Apakah Anda yakin ingin mengedit banner ini?" + onYes={(val) => { + + setOpenModal(false) + }} /> - diff --git a/src/module/banner/ui/list_banner.tsx b/src/module/banner/ui/list_banner.tsx index e68d5ea..8a6cd3b 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() { +function ListBanner() { const tema = useHookstate(TEMA) const [searchQuery, setSearchQuery] = useState('') const [loading, setLoading] = useState(true); @@ -16,29 +16,12 @@ function ListBanner() { const router = useRouter(); const param = useParams<{ id: string }>() const [isOpenModalView, setOpenModalView] = useState(false) - const [isOpen, setOpen] = useState(false) + const [isOpenModal, setOpenModal] = 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 ( @@ -53,15 +36,15 @@ function ListBanner() { height: 85, backgroundColor: 'transparent', border: `1px solid ${tema.get().bgTotalKegiatan}` - + }}> - - + + - Banner {index + 1} - Banner + Banner {index + 1} + Banner @@ -71,49 +54,53 @@ function ListBanner() { - setOpenDrawer(false)} - title={{"Menu"}} - > - - - router.push("/banner/edit/[id]")}> - - - Edit + setOpenDrawer(false)}> + + + + router.push("/banner/edit/[id]")} direction="column" align="center" justify="center" pb={20}> + + + + + Edit + - - - - {setOpenModalView(true)}}> - - - Lihat File - - - - - {setOpen(true)}}> - - - Hapus - - - - - - setOpen(false)} + { setOpenModalView(true) }} direction={"column"} align={"center"} justify={"center"}> + + + + + Lihat File + + + + { setOpenModal(true) }} direction={"column"} align={"center"} justify={"center"}> + + + + + Hapus + + + + + + + setOpenModal(false)} description='Apakah Anda yakin ingin menghapus banner?' - onYes={(val) => { setOpen(false) }} /> - + onYes={(val) => { setOpenModal(false) }} /> + setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' /> ); } + export default ListBanner; -export default ListBanner;