Tambahan API Edit, Delete, List Banner dan Validasi
This commit is contained in:
@@ -13,7 +13,7 @@ import { funDeleteBanner, funGetAllBanner, funGetOneBanner } from '../lib/api_ba
|
||||
import { HiMagnifyingGlass } from 'react-icons/hi2';
|
||||
|
||||
function ListBanner() {
|
||||
const [isList, setIsList] = useState (false)
|
||||
const [isList, setIsList] = useState(false)
|
||||
const tema = useHookstate(TEMA)
|
||||
const router = useRouter();
|
||||
const param = useParams<{ id: string }>()
|
||||
@@ -28,19 +28,18 @@ function ListBanner() {
|
||||
const [isPage, setPage] = useState(1)
|
||||
const [searchQuerry, setSearchQuerry] = useState('')
|
||||
// const { value: containerRef } = useHookstate(currentScroll);
|
||||
|
||||
|
||||
const handleList = () => {
|
||||
setIsList(!isList)
|
||||
}
|
||||
|
||||
const fetchData = async (loading: boolean) => {
|
||||
console.log('jallan')
|
||||
try {
|
||||
if (loading)
|
||||
setLoading(true)
|
||||
const response = await funGetAllBanner('?search=' + searchQuerry)
|
||||
if (response.success) {
|
||||
setData(response.data)
|
||||
setData(response.data.map((banner: { image: any; }) => ({ ...banner, image: banner.image })));
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
@@ -57,8 +56,8 @@ function ListBanner() {
|
||||
setSearchQuerry(search)
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
fetchData(true)
|
||||
}, [searchQuerry])
|
||||
@@ -68,28 +67,28 @@ function ListBanner() {
|
||||
}, [isPage])
|
||||
|
||||
|
||||
async function onDelete() {
|
||||
async function onDelete(id: string) {
|
||||
try {
|
||||
const res = await funDeleteBanner(idData);
|
||||
const res = await funDeleteBanner(id);
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
getOneData()
|
||||
setData(isData.filter((banner) => banner.id !== id));
|
||||
setIdData("")
|
||||
setIdDataStorage("")
|
||||
setOpenDrawer(false)
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal menghapus banner, coba lagi nanti");
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal menghapus banner, coba lagi nanti");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Box pt={2}>
|
||||
<Box p={20}>
|
||||
@@ -99,23 +98,28 @@ function ListBanner() {
|
||||
color: tema.get().utama,
|
||||
borderRadius: '#A3A3A3',
|
||||
borderColor: '#A3A3A3',
|
||||
},
|
||||
},
|
||||
}}
|
||||
size='md'
|
||||
radius={30}
|
||||
leftSection={<HiMagnifyingGlass size={20} />}
|
||||
placeholder='pencarian'
|
||||
value={searchQuerry}
|
||||
onChange={(val) => { searchBanner(val.target.value)}}
|
||||
onChange={(val) => { searchBanner(val.target.value) }}
|
||||
/>
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
<Box p={20}>
|
||||
<Anchor underline='never'>
|
||||
<Stack align='center' justify='center'>
|
||||
{isData.map((_, index) => (
|
||||
<Paper radius={'md'} withBorder key={index} onClick={() => { setOpenDrawer(true) }
|
||||
{isData.map((v, index) => (
|
||||
<Paper radius={'md'} withBorder key={index} onClick={() => {
|
||||
setIdData(v.id);
|
||||
setIdDataStorage(v.image);
|
||||
setExtension(v.extension);
|
||||
setOpenDrawer(true)
|
||||
}
|
||||
}
|
||||
style={{
|
||||
width: '100%',
|
||||
@@ -127,11 +131,16 @@ function ListBanner() {
|
||||
}}>
|
||||
<Group mt={"15"}>
|
||||
<ActionIcon variant='transparent' w={"100"}>
|
||||
<Image radius={"xs"} src={"/assets/img/banner/Banner-1.png"} alt='' w={76} h={38.9} />
|
||||
<Image
|
||||
radius={"xs"}
|
||||
src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
|
||||
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"} fz={"h4"}>{v.title}</Text>
|
||||
</Flex>
|
||||
</Group>
|
||||
</Paper>
|
||||
@@ -141,6 +150,7 @@ function ListBanner() {
|
||||
</Anchor>
|
||||
</Box>
|
||||
|
||||
|
||||
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
@@ -151,14 +161,15 @@ function ListBanner() {
|
||||
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>
|
||||
<Flex onClick={() => router.push(`/banner/edit/${idData}`)} 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>
|
||||
|
||||
|
||||
<Flex onClick={() => { setOpenModalView(true) }} direction={"column"} align={"center"} justify={"center"}>
|
||||
<Box>
|
||||
@@ -181,50 +192,46 @@ function ListBanner() {
|
||||
</Stack>
|
||||
</Box>
|
||||
</LayoutDrawer>
|
||||
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
|
||||
|
||||
<LayoutModal
|
||||
opened={isOpenModal}
|
||||
onClose={() => setOpenModal(false)}
|
||||
description='Apakah Anda yakin ingin menghapus banner?'
|
||||
onYes={(val) => {
|
||||
if (val) {
|
||||
onDelete()
|
||||
onDelete(idData)
|
||||
}
|
||||
setOpenModal(false)
|
||||
}} />
|
||||
|
||||
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
|
||||
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
export default ListBanner;
|
||||
export default ListBanner;
|
||||
|
||||
function funGetBanner(arg0: string) {
|
||||
throw new Error('Function not implemented.');
|
||||
}
|
||||
|
||||
function getOneData() {
|
||||
throw new Error('Function not implemented.');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// useEffect(() => {
|
||||
// const handleScroll = async () => {
|
||||
// if (containerRef && containerRef.current) {
|
||||
// const scrollTop = containerRef.current.scrollTop;
|
||||
// const containerHeight = containerRef.current.clientHeight;
|
||||
// const scrollHeight = containerRef.current.scrollHeight;
|
||||
|
||||
// if (scrollTop + containerHeight + 1 >= scrollHeight) {
|
||||
// setPage(isPage + 1)
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
// const container = containerRef?.current;
|
||||
// container?.addEventListener("scroll", handleScroll);
|
||||
// useEffect(() => {
|
||||
// const handleScroll = async () => {
|
||||
// if (containerRef && containerRef.current) {
|
||||
// const scrollTop = containerRef.current.scrollTop;
|
||||
// const containerHeight = containerRef.current.clientHeight;
|
||||
// const scrollHeight = containerRef.current.scrollHeight;
|
||||
|
||||
// if (scrollTop + containerHeight + 1 >= scrollHeight) {
|
||||
// setPage(isPage + 1)
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
// const container = containerRef?.current;
|
||||
// container?.addEventListener("scroll", handleScroll);
|
||||
|
||||
// return () => {
|
||||
// container?.removeEventListener("scroll", handleScroll);
|
||||
// };
|
||||
// }, [containerRef, isPage]);
|
||||
|
||||
// return () => {
|
||||
// container?.removeEventListener("scroll", handleScroll);
|
||||
// };
|
||||
// }, [containerRef, isPage]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user