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

Perbaikan Banner

Browse Source
This commit is contained in:
nico
2024-10-04 17:43:01 +08:00
parent 086e7611b6
commit 523c162a54
6 changed files with 134 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/banner/lib/api_banner.ts
View File

@@ -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);
}

6
src/module/banner/lib/type_banner.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface IDataBanner {
id: string
title: string
extension: string
image: string
}[]

27
src/module/banner/ui/create_banner.tsx
View File

@@ -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<DropzoneProps>) {
const tema = useHookstate(TEMA)
return (
<Box>
<LayoutNavbarNew back='/banner' title='Tambah Banner' menu={<></>} />
@@ -41,10 +43,10 @@ function CreateBanner(props: Partial<DropzoneProps>) {
<Box>
<Text size="xl" inline>
Upload File
Upload File
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
File Tidak Boleh Melebihi 500mb
File Tidak Boleh Melebihi 500mb
</Text>
</Box>
</Group>
@@ -53,7 +55,7 @@ function CreateBanner(props: Partial<DropzoneProps>) {
<Box>
<TextInput
mt={10}
label={ <Text>Judul Banner</Text>}
label={<Text>Judul Banner</Text>}
placeholder='Judul Banner'
styles={{
input: {
@@ -63,7 +65,16 @@ function CreateBanner(props: Partial<DropzoneProps>) {
}}
/>
</Box>
<Button size='lg' bg={WARNA.biruTua} radius={30} fullWidth mt={20}>Simpan</Button>
<Box pos={"fixed"} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(510),
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`
}}>
<Button
size='lg'
color='white'
bg={tema.get().utama} radius={30} fullWidth >Simpan</Button>
</Box>
</Box>
</Box>
</Box>

66
src/module/banner/ui/edit_banner.tsx
View File

@@ -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<DropzoneProps> ) {
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<any>()
const [touched, setTouched] = useState({
title: false,
});
function EditBanner(props: Partial<DropzoneProps>) {
return (
<Box>
<LayoutNavbarNew back='/banner' title='Edit Banner' menu={<></>} />
@@ -41,10 +57,10 @@ function EditBanner(props: Partial<DropzoneProps>) {
<Box>
<Text size="xl" inline>
Upload File
Upload File
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
File Tidak Boleh Melebihi 500mb
File Tidak Boleh Melebihi 500mb
</Text>
</Box>
</Group>
@@ -53,17 +69,47 @@ function EditBanner(props: Partial<DropzoneProps>) {
<Box>
<TextInput
mt={10}
label={ <Text>Judul Banner</Text>}
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})
}}
/>
</Box>
<Box pos={"fixed"} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(510),
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`
}}>
<Button
size='lg'
color='white'
bg={WARNA.biruTua}
radius={30}
fullWidth
>
Simpan
</Button>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengedit banner ini?"
onYes={(val) => {
setOpenModal(false)
}}
/>
</Box>
<Button size='lg' bg={WARNA.biruTua} radius={30} fullWidth mt={20}>Simpan</Button>
</Box>
</Box>
</Box>

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

@@ -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 (
<Box pt={2}>
<Box p={20}>
@@ -53,15 +36,15 @@ function ListBanner() {
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 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>
<Text c={"dark"} >Banner {index + 1}</Text>
<Text fz={"h6"} fw={"inherit"} c={"dark"}>Banner</Text>
</Flex>
</Group>
</Paper>
@@ -71,49 +54,53 @@ function ListBanner() {
</Anchor>
</Box>
<LayoutDrawer
opened={openDrawer}
onClose={() => setOpenDrawer(false)}
title={<Text lineClamp={1}>{"Menu"}</Text>}
>
<SimpleGrid
m={20}
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Box>
<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>
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 3, lg: 3 }}
style={{
alignContent: "flex-start",
alignItems: "flex-start"
}}
>
<Flex onClick={() => router.push("/banner/edit/[id]")} direction="column" align="center" justify="center" pb={20}>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Edit</Text>
</Box>
</Flex>
</Anchor>
</Box>
<Box>
<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' 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)}
<Flex onClick={() => { setOpenModalView(true) }} direction={"column"} align={"center"} justify={"center"}>
<Box>
<FaFile size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Lihat File</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModal(true) }} direction={"column"} align={"center"} justify={"center"}>
<Box>
<FaTrash size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Hapus</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description='Apakah Anda yakin ingin menghapus banner?'
onYes={(val) => { setOpen(false) }} />
onYes={(val) => { setOpenModal(false) }} />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
</Box>
);
}
export default ListBanner;
export default ListBanner;