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

Fix API List Banner, Edit Banner, Create Banner

Browse Source
This commit is contained in:
nico
2024-10-09 13:51:18 +08:00
parent 635a13481d
commit 84af0bf7f1
3 changed files with 106 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,25 +30,6 @@ function CreateBanner() {
image: false
})
function onValidation(kategori: string, val: any) {
if (kategori == 'title') {
setListData({ ...listData, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'image') {
if (imgForm) {
setTouched({ ...touched, image: false })
} else {
setTouched({ ...touched, image: true })
}
}
}
async function onSubmit(val: boolean) {
if (!imgForm || !listData.title) {
toast.error("Mohon lengkapi semua data");
@@ -69,8 +50,8 @@ function CreateBanner() {
router.push('/banner')
} else {
toast.error(res.message);
setModal(false);
}
setModal(false);
} catch (error) {
toast.error("Error");
} finally {
@@ -79,9 +60,46 @@ function CreateBanner() {
}
}
// async function loadData() {
// const
// }
function onCheck() {
const cek = checkAll()
if (!cek)
return false
setModal(true)
}
function checkAll() {
let nilai = true
if (listData.title == "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
if (!imgForm) {
setTouched(touched => ({ ...touched, image: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: any) {
if (kategori == 'title') {
setListData({ ...listData, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'image') {
if (imgForm) {
setTouched({ ...touched, image: true })
} else {
setTouched({ ...touched, image: false })
}
}
}
return (
<Box>
@@ -102,7 +120,7 @@ function CreateBanner() {
}}
activateOnClick={false}
maxSize={1 * 1024 ** 2}
accept={['image/png', 'imagfe/jpeg', 'image/heic']}
accept={['image/png', 'image/jpeg', 'image/heic']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, dan .heic dengan ukuran maksimal 1 MB')
}}
@@ -111,13 +129,20 @@ function CreateBanner() {
{
img ?
<Image radius="md" src={img} alt='' />
<Image
radius="md"
src={img}
alt=''
/>
:
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload
style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)' }}
stroke={1.5}
/>
</Dropzone.Accept>
<Dropzone.Reject>
@@ -138,7 +163,7 @@ function CreateBanner() {
Klik Untuk Upload Image
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Ukuran Foto Tidak Boleh Lebih Dari 1MB
Ukuran Foto Tidak Boleh Lebih Dari 1 MB
</Text>
</div>
</Group>
@@ -146,12 +171,19 @@ function CreateBanner() {
</Dropzone>
</Paper>
<Box mt={10}>
{touched.image && !imgForm && (
<Text size='sm' c={'red'}>
Silahkan Pilih Gambar
</Text>
)}
</Box>
<Box>
<TextInput
<TextInput
mt={10}
label={<Text >Judul Banner</Text>}
value={listData.title}
label="Judul Banner"
placeholder='Judul Banner'
value={listData.title}
onChange={(e) => {
setListData({ ...listData, title: e.target.value })
onValidation('title', e.target.value)
@@ -162,8 +194,13 @@ function CreateBanner() {
borderRadius: 10,
},
}}
required
size='md'
error={
touched.title && (
listData.title == "" ? "Judul Banner Tidak Boleh Kosong" : null
)
}
/>
</Box>
<Box pos={"fixed"} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -174,14 +211,10 @@ function CreateBanner() {
<Button
size='lg'
color='white'
bg={tema.get().utama} radius={30} fullWidth
onClick={() => {
if (touched.title || touched.image) {
toast.error("Mohon Isi Semua Data")
} else {
setModal(true)
}
}}
bg={tema.get().utama}
radius={30}
fullWidth
onClick={() => { onCheck() }}
>Simpan</Button>
</Box>

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

@@ -2,7 +2,7 @@
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Image, Paper, rem, TextInput } from '@mantine/core';
import { Box, Button, Image, Paper, rem, Text, TextInput } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { useShallowEffect } from '@mantine/hooks';
import _ from 'lodash';
@@ -44,14 +44,20 @@ export default function EditBanner() {
}
} else if (kategori == 'image') {
if (imgForm) {
setTouched({ ...touched, image: false })
} else {
setTouched({ ...touched, image: true })
} else {
setTouched({ ...touched, image: false })
}
}
}
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setModal(true)
}
async function getOneData() {
try {
const res = await funGetOneBanner(param.id)
@@ -128,7 +134,7 @@ export default function EditBanner() {
<TextInput
mt={10}
label="Judul Banner"
placeholder='Banner'
placeholder='Judul Banner'
value={data.title}
onChange={(e) => {
setData({ ...data, title: e.target.value })
@@ -142,6 +148,11 @@ export default function EditBanner() {
}}
required
size='md'
error={
touched.title && (
data.title == "" ? "Judul Banner Tidak Boleh Kosong" : null
)
}
/>
</Box>
<Box pos={"fixed"} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -151,17 +162,11 @@ export default function EditBanner() {
}}>
<Button
size='lg'
color='white'
c='white'
bg={tema.get().utama}
radius={30}
fullWidth
onClick={() => {
if (touched.title || touched.image) {
toast.error('Mohon Isi Semua Data')
} else {
setModal(true)
}
}}
onClick={() => { onCheck() }}
>
Simpan
</Button>

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

@@ -27,17 +27,12 @@ function ListBanner() {
const [idData, setIdData] = useState('')
const [isPage, setPage] = useState(1)
const [searchQuerry, setSearchQuerry] = useState('')
// const { value: containerRef } = useHookstate(currentScroll);
const handleList = () => {
setIsList(!isList)
}
const fetchData = async (loading: boolean) => {
try {
if (loading)
setLoading(true)
const response = await funGetAllBanner('?search=' + searchQuerry)
const response = await funGetAllBanner('?page=' + isPage)
if (response.success) {
setData(response.data.map((banner: { image: any; }) => ({ ...banner, image: banner.image })));
} else {
@@ -60,7 +55,7 @@ function ListBanner() {
useShallowEffect(() => {
fetchData(true)
}, [searchQuerry])
}, [isPage])
useShallowEffect(() => {
fetchData(false)
@@ -92,29 +87,14 @@ function ListBanner() {
return (
<Box pt={2}>
<Box p={20}>
<TextInput
styles={{
input: {
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) }}
/>
</Box>
<Box p={20}>
<Anchor underline='never'>
<Stack align='center' justify='center'>
{isData.map((v, index) => (
<Paper radius={'md'} withBorder key={index} onClick={() => {
{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);
@@ -129,7 +109,7 @@ function ListBanner() {
border: `1px solid ${tema.get().bgTotalKegiatan}`
}}>
<Group mt={"15"}>
<Group mt={"25"}>
<ActionIcon variant='transparent' w={"100"}>
<Image
radius={"xs"}
@@ -138,19 +118,14 @@ function ListBanner() {
w={76}
h={38.9}
/>
</ActionIcon>
<Flex direction={"column"}>
</ActionIcon>
<Text c={"dark"} fz={"h4"}>{v.title}</Text>
</Flex>
</Group>
</Paper>
))}
</Stack>
</Anchor>
</Box>
)})
}
</Box>
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>