Merge pull request #301 from bipproduction/nico/09-oktober-24
Perbaikan Di Bagian Skeleton
This commit is contained in:
Amalia
35
src/module/_global/components/skeleton_banner.tsx
Normal file
35
src/module/_global/components/skeleton_banner.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { useHookstate } from '@hookstate/core';
|
||||
import { Box, Flex, Group, Paper, Skeleton } from '@mantine/core';
|
||||
import { TEMA } from '../bin/val_global';
|
||||
|
||||
export default function SkeletonBanner() {
|
||||
const tema = useHookstate(TEMA)
|
||||
return (
|
||||
<Box mb={10}>
|
||||
<Paper radius={'md'} withBorder style={{
|
||||
width: '100%',
|
||||
maxWidth: 550,
|
||||
height: 85,
|
||||
backgroundColor: 'transparent',
|
||||
border: `1px solid ${tema.get().bgTotalKegiatan}`
|
||||
|
||||
}}>
|
||||
<Group
|
||||
mt={"25"}
|
||||
align="center"
|
||||
ml={"12"}
|
||||
>
|
||||
<Flex direction={"row"} justify={"center"} align={"center"} gap={"md"} >
|
||||
<Box pr={12}>
|
||||
<Skeleton height={40} width={90} />
|
||||
|
||||
</Box>
|
||||
<Box>
|
||||
<Skeleton height={25} width={150} />
|
||||
</Box>
|
||||
</Flex>
|
||||
</Group>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -158,12 +158,18 @@ function CreateBanner() {
|
||||
/>
|
||||
</Dropzone.Idle>
|
||||
|
||||
<div>
|
||||
<Text size="xl" inline>
|
||||
<div >
|
||||
<Text size="xl" inline>
|
||||
Klik Untuk Upload Image
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" inline mt={7}>
|
||||
Ukuran Foto Tidak Boleh Lebih Dari 1 MB
|
||||
<Text mb={2} size="sm" c="dimmed" inline mt={7}>
|
||||
Mohon unggah gambar dalam resolusi
|
||||
</Text>
|
||||
<Text mb={2} size='sm' c={"dimmed"} inline>
|
||||
1535 x 450 piksel untuk memastikan
|
||||
</Text>
|
||||
<Text size='sm' c={"dimmed"} inline>
|
||||
tampilan sesuai dengan kebutuhan desain.
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
@@ -1,22 +1,21 @@
|
||||
'use client'
|
||||
import { currentScroll, LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
|
||||
import { LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
|
||||
import SkeletonBanner from '@/module/_global/components/skeleton_banner';
|
||||
import LayoutModal from '@/module/_global/layout/layout_modal';
|
||||
import { useHookstate } from '@hookstate/core';
|
||||
import { ActionIcon, Anchor, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
|
||||
import { IDataBanner } from '../lib/type_banner';
|
||||
import toast from 'react-hot-toast';
|
||||
import { ActionIcon, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { funDeleteBanner, funGetAllBanner, funGetOneBanner } from '../lib/api_banner';
|
||||
import { HiMagnifyingGlass } from 'react-icons/hi2';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { FaFile, FaPencil, FaTrash } from 'react-icons/fa6';
|
||||
import { funDeleteBanner, funGetAllBanner } from '../lib/api_banner';
|
||||
import { IDataBanner } from '../lib/type_banner';
|
||||
|
||||
function ListBanner() {
|
||||
const [isList, setIsList] = useState(false)
|
||||
|
||||
const tema = useHookstate(TEMA)
|
||||
const router = useRouter();
|
||||
const param = useParams<{ id: string }>()
|
||||
const [isOpenModalView, setOpenModalView] = useState(false)
|
||||
const [isOpenModal, setOpenModal] = useState(false)
|
||||
const [openDrawer, setOpenDrawer] = useState(false);
|
||||
@@ -26,7 +25,6 @@ function ListBanner() {
|
||||
const [isData, setData] = useState<IDataBanner[]>([])
|
||||
const [idData, setIdData] = useState('')
|
||||
const [isPage, setPage] = useState(1)
|
||||
const [searchQuerry, setSearchQuerry] = useState('')
|
||||
|
||||
const fetchData = async (loading: boolean) => {
|
||||
try {
|
||||
@@ -47,14 +45,9 @@ function ListBanner() {
|
||||
}
|
||||
}
|
||||
|
||||
function searchBanner(search: string) {
|
||||
setSearchQuerry(search)
|
||||
setPage(1)
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
fetchData(true)
|
||||
setPage(1)
|
||||
}, [isPage])
|
||||
|
||||
useShallowEffect(() => {
|
||||
@@ -87,45 +80,61 @@ function ListBanner() {
|
||||
return (
|
||||
<Box pt={2}>
|
||||
<Box p={20}>
|
||||
{isData.length == 0 ?
|
||||
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "75vh"}}>
|
||||
<Text c={"dimmed"} ta={"center"} fs={"italic"}>Tidak ada Banner</Text>
|
||||
</Box>
|
||||
:
|
||||
isData.map((v, i) => {
|
||||
return (
|
||||
<Paper radius={'md'} withBorder key={i} onClick={() => {
|
||||
setIdData(v.id);
|
||||
setIdDataStorage(v.image);
|
||||
setExtension(v.extension);
|
||||
setOpenDrawer(true)
|
||||
}
|
||||
}
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 550,
|
||||
height: 85,
|
||||
backgroundColor: 'transparent',
|
||||
border: `1px solid ${tema.get().bgTotalKegiatan}`
|
||||
{loading
|
||||
?
|
||||
Array(7)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<Box key={i} mb={20}>
|
||||
<SkeletonBanner />
|
||||
</Box>
|
||||
))
|
||||
:
|
||||
<Box >
|
||||
|
||||
}}>
|
||||
<Group mt={"25"}>
|
||||
<ActionIcon variant='transparent' w={"100"}>
|
||||
<Image
|
||||
radius={"xs"}
|
||||
src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
|
||||
alt=''
|
||||
w={76}
|
||||
h={38.9}
|
||||
/>
|
||||
</ActionIcon>
|
||||
<Text c={"dark"} fz={"h4"}>{v.title}</Text>
|
||||
</Group>
|
||||
</Paper>
|
||||
)})
|
||||
|
||||
}
|
||||
</Box>
|
||||
{isData.length == 0 ?
|
||||
<Box style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "75vh" }}>
|
||||
<Text c={"dimmed"} ta={"center"} fs={"italic"}>Tidak ada Banner</Text>
|
||||
</Box>
|
||||
:
|
||||
isData.map((v, i) => {
|
||||
return (
|
||||
<Box key={i} mb={20}>
|
||||
<Paper radius={'md'} withBorder onClick={() => {
|
||||
setIdData(v.id);
|
||||
setIdDataStorage(v.image);
|
||||
setExtension(v.extension);
|
||||
setOpenDrawer(true)
|
||||
}
|
||||
}
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 550,
|
||||
height: 85,
|
||||
backgroundColor: 'transparent',
|
||||
border: `1px solid ${tema.get().bgTotalKegiatan}`
|
||||
|
||||
}}>
|
||||
<Group mt={"25"}>
|
||||
<ActionIcon variant='transparent' w={"100"}>
|
||||
<Image
|
||||
radius={"xs"}
|
||||
src={`https://wibu-storage.wibudev.com/api/files/${v.image}`}
|
||||
alt=''
|
||||
w={76}
|
||||
h={38.9}
|
||||
/>
|
||||
</ActionIcon>
|
||||
<Text c={"dark"} fz={"h4"}>{v.title}</Text>
|
||||
</Group>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
@@ -136,22 +145,22 @@ function ListBanner() {
|
||||
alignItems: "flex-start"
|
||||
}}
|
||||
>
|
||||
<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={() => 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>
|
||||
<FaFile size={30} color={tema.get().utama} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Lihat File</Text>
|
||||
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Lihat File</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
@@ -160,7 +169,7 @@ function ListBanner() {
|
||||
<FaTrash size={30} color={tema.get().utama} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md'}}>Hapus</Text>
|
||||
<Text c={tema.get().utama} fz={{ base: 'sm', md: 'md' }}>Hapus</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
@@ -185,28 +194,3 @@ function ListBanner() {
|
||||
}
|
||||
export default ListBanner;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 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]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user