Fix API List Banner, Edit Banner, Create Banner

src/module/banner/ui/create_banner.tsx

@@ -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);
+      }
     } 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
               mt={10}
-              label={<Text >Judul Banner</Text>}
+              label="Judul Banner"
-              value={listData.title}
               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
+              bg={tema.get().utama}
-              onClick={() => {  
+              radius={30}
-                if (touched.title || touched.image) {
+              fullWidth
-                  toast.error("Mohon Isi Semua Data")
+              onClick={() => { onCheck() }}
-                } else {
-                  setModal(true)
-                }
-              }}
 
             >Simpan</Button>
           </Box>

src/module/banner/ui/edit_banner.tsx

@@ -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,13 +44,19 @@ 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 {
@@ -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={() => {
+              onClick={() => { onCheck() }}
-                if (touched.title || touched.image) {
-                  toast.error('Mohon Isi Semua Data')
-                } else {
-                  setModal(true)
-                }
-              }}
             >
               Simpan
             </Button>

src/module/banner/ui/list_banner.tsx

@@ -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
+        {isData.length == 0 ?
-          styles={{
+        <Box style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "75vh"}}>
-            input: {
+            <Text c={"dimmed"} ta={"center"} fs={"italic"}>Tidak ada Banner</Text>
-              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}>
+          isData.map((v, i) => {
-        <Anchor underline='never'>
+            return (
-          <Stack align='center' justify='center'>
+              <Paper radius={'md'} withBorder key={i} onClick={() => {
-            {isData.map((v, index) => (
-              <Paper radius={'md'} withBorder key={index} 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"}
@@ -139,18 +119,13 @@ function ListBanner() {
                       h={38.9}
                     />
                   </ActionIcon>              
-                  <Flex direction={"column"}>
                     <Text c={"dark"} fz={"h4"}>{v.title}</Text>
-                  </Flex>
                 </Group>
               </Paper>
-            ))}
+          )})
           
-          </Stack>
+      }
-        </Anchor>
       </Box> 
-
-        
       <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
         <Box>
           <Stack pt={10}>