Merge pull request #291 from bipproduction/nico/05-oktober-24

Api Create Aja Yang Lain Belum
2024-10-05 17:48:32 +08:00
parent eb609e65a1 84cb382670
commit e421b15edd
5 changed files with 284 additions and 55 deletions
--- a/src/module/banner/lib/api_banner.ts
+++ b/src/module/banner/lib/api_banner.ts
@@ -21,7 +21,7 @@ export const funCreateBanner = async (data: FormData) => {
    return await response.json().catch(() => null);
 }

-export const funGetOneBanner = async (path: string, p0: string) => {
+export const funGetOneBanner = async (path: string) => {
    const response = await fetch(`/api/banner/${path}`)
    return await response.json().catch(() => null);
 }
@@ -33,4 +33,3 @@ export const funEditBanner = async (path: string, data: FormData) => {
    });
    return await response.json().catch(() => null);
 }
-
--- a/src/module/banner/lib/type_banner.ts
+++ b/src/module/banner/lib/type_banner.ts
@@ -4,3 +4,16 @@ export interface IDataBanner {
    extension: string
    image: string
 }[]
+
+export interface IEditDataBanner {
+    id: string
+    title: string
+    extension: string
+    image: string
+}
+export interface ICreateDataBanner {
+    id: string
+    title: string
+    extension: string
+    image: string
+}
--- a/src/module/banner/ui/create_banner.tsx
+++ b/src/module/banner/ui/create_banner.tsx
@@ -1,55 +1,134 @@
 'use client'
 import { LayoutNavbarNew, TEMA } 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 { Box, Button, Group, Image, Paper, rem, Text, TextInput } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
 import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import _ from 'lodash';
+import { useRouter } from 'next/navigation';
+import { useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { funCreateBanner } from '../lib/api_banner';

-function CreateBanner(props: Partial<DropzoneProps>) {
+function CreateBanner() {
+  const router = useRouter();
+  const [isModal, setModal] = useState(false);
  const tema = useHookstate(TEMA)
-  
+  const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false)
+  const [listData, setListData] = useState({
+   title: "",
+   
+  });
+  const [imgForm, setImgForm] = useState<any>()
+  const openRef = useRef<() => void>(null)
+  const [img, setIMG] = useState<any | null>()
+  // const [body, setBody] = useState<any>({
+  //   id: "",
+  //   title: "",
+  // });
+
+
+  // function onCheck() {
+  //     const cek = checkAll()
+  //     if (!cek)
+  //       return false
+  //     setModal(true)
+  //   }
+
+
+
+  async function onSubmit(val: boolean) {
+    try {
+      console.log(listData)
+      setLoadingKonfirmasi(true)
+      const fd = new FormData()
+      fd.append("file", imgForm)
+      fd.append("data", JSON.stringify(
+        {
+          title: listData.title
+        }
+      ))
+      const res = await funCreateBanner(fd);
+      if (res.success) {
+        toast.success(res.message);
+        router.push('/banner')
+      } else {
+        toast.error(res.message);
+      }
+      setModal(false);
+    } catch (error) {
+      toast.error("Error");
+    } finally {
+      setLoadingKonfirmasi(false)
+      setModal(false);
+    }
+  }
+
+  // async function loadData() {
+  //   const
+  // }
+
  return (
    <Box>
-      <LayoutNavbarNew back='/banner' title='Tambah Banner' menu={<></>} />
+      <LayoutNavbarNew back='/banner' title='Tambah Banner' menu />
      <Box p={20}>
        <Box>
          <Paper withBorder radius={20}>
            <Dropzone
-              onDrop={(files) => console.log('accepted files', files)}
-              onReject={(files) => console.log('rejected files', files)}
-              maxSize={5 * 1024 ** 2}
-              accept={IMAGE_MIME_TYPE}
-              {...props}
+              openRef={openRef}
+              onDrop={async (files) => {
+                if (!files || _.isEmpty(files))
+                  return toast.error('Tidak ada gambar yang dipilih')
+                setImgForm(files[0])
+                // const buffer = URL.createObjectURL(files[0]);
+                const buffer = URL.createObjectURL(new Blob([new Uint8Array(await files[0].arrayBuffer())]))
+                setIMG(buffer)
+              }}
+              activateOnClick={false}
+              maxSize={1 * 1024 ** 2}
+              accept={['image/png', 'imagfe/jpeg', 'image/heic']}
+              onReject={(files) => {
+                return toast.error('File yang diizinkan: .png, .jpg, dan .heic  dengan ukuran maksimal 1 MB')
+              }}
+              onClick={() => openRef.current?.()}
            >
-              <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>
-                  <IconX
-                    style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)' }}
-                    stroke={1.5}
-                  />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto
-                    style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)' }}
-                    stroke={1.5}
-                  />
-                </Dropzone.Idle>

-                <Box>
-                  <Text size="xl" inline>
-                    Upload File
-                  </Text>
-                  <Text size="sm" c="dimmed" inline mt={7}>
-                    File Tidak Boleh Melebihi 500mb
-                  </Text>
-                </Box>
-              </Group>
+              {
+                img ?
+                  <Image radius="md" src={img} />
+                  :
+                  <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>
+                      <IconX
+                        style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)' }}
+                        stroke={1.5}
+                      />
+                    </Dropzone.Reject>
+                    <Dropzone.Idle>
+                      <IconPhoto
+                        style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)' }}
+                        stroke={1.5}
+                      />
+                    </Dropzone.Idle>
+
+                    <div>
+                      <Text size="xl" inline>
+                        Klik Untuk Upload Image
+                      </Text>
+                      <Text size="sm" c="dimmed" inline mt={7}>
+                        Ukuran Foto Tidak Boleh Lebih Dari 500MB
+                      </Text>
+                    </div>
+                  </Group>
+              }
+
            </Dropzone>
          </Paper>
          <Box>
@@ -63,20 +142,38 @@ function CreateBanner(props: Partial<DropzoneProps>) {
                  borderRadius: 10,
                },
              }}
+              onChange={(val) => { setListData({ title: val.target.value })}}
            />
          </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={tema.get().utama} radius={30} fullWidth >Simpan</Button>
+              bg={tema.get().utama} radius={30} fullWidth
+              onClick={ () => { setModal(true)}}
+
+            >Simpan</Button>
          </Box>
        </Box>
      </Box>
+      <LayoutModal
+        loading={loadingKonfirmasi}
+        opened={isModal}
+        onClose={() => setModal(false)}
+        description="Apakah anda yakin ingin menambahkan banner ini?"
+        onYes={(val) => {
+          if (val) {
+            onSubmit(val);
+          } else {
+            setModal(false);
+          }
+        }}
+        
+      />
    </Box>
  );
 }
--- a/src/module/banner/ui/edit_banner.tsx
+++ b/src/module/banner/ui/edit_banner.tsx
@@ -10,13 +10,9 @@ 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,
  });
--- a/src/module/banner/ui/list_banner.tsx
+++ b/src/module/banner/ui/list_banner.tsx
@@ -1,18 +1,20 @@
 'use client'
-import { LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
+import { currentScroll, LayoutDrawer, LayoutModalViewFile, TEMA, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Anchor, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { ActionIcon, Anchor, Box, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
+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 { useShallowEffect } from '@mantine/hooks';
+import { funDeleteBanner, funGetAllBanner, funGetOneBanner } from '../lib/api_banner';
+import { HiMagnifyingGlass } from 'react-icons/hi2';

 function ListBanner() {
+  const [isList, setIsList] = useState (false)
  const tema = useHookstate(TEMA)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [loading, setLoading] = useState(true);
-  const [isData, setData] = useState([]);
-  const [valChoose, setValChoose] = useState("");
  const router = useRouter();
  const param = useParams<{ id: string }>()
  const [isOpenModalView, setOpenModalView] = useState(false)
@@ -20,14 +22,99 @@ function ListBanner() {
  const [openDrawer, setOpenDrawer] = useState(false);
  const [idDataStorage, setIdDataStorage] = useState('')
  const [isExtension, setExtension] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [isData, setData] = useState<IDataBanner[]>([])
+  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) => {
+    console.log('jallan')
+    try {
+      if (loading)
+        setLoading(true)
+      const response = await funGetAllBanner('?search=' + searchQuerry)
+      if (response.success) {
+        setData(response.data)
+      } else {
+        toast.error(response.message)
+      }
+      setLoading(false)
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal mendapatkan banner, coba lagi nanti");
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function searchBanner(search: string) {
+    setSearchQuerry(search)
+    setPage(1)
+  }
+  
+  
+  useShallowEffect(() => {
+    fetchData(true)
+  }, [searchQuerry])
+
+  useShallowEffect(() => {
+    fetchData(false)
+  }, [isPage])
+
+
+  async function onDelete() {
+    try {
+      const res = await funDeleteBanner(idData);
+      if (res.success) {
+        toast.success(res.message)
+        getOneData()
+        setIdData("")
+        setIdDataStorage("")
+        setOpenDrawer(false)
+      } else {
+        toast.error(res.message);
+      } 
+    } catch (error) {
+        console.error(error);
+        toast.error("Gagal menghapus banner, coba lagi nanti");
+      }
+       
+    }
+  
+
+ 
 
  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'>
-            {[...Array(5)].map((_, index) => (
+            {isData.map((_, index) => (
              <Paper radius={'md'} withBorder key={index} onClick={() => { setOpenDrawer(true) }
              }
                style={{
@@ -96,7 +183,12 @@ function ListBanner() {
      </LayoutDrawer>
      <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
        description='Apakah Anda yakin ingin menghapus banner?'
-        onYes={(val) => { setOpenModal(false) }} />
+        onYes={(val) => {
+          if (val) {
+            onDelete()
+          }
+          setOpenModal(false)
+        }} />

      <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
    </Box>
@@ -104,3 +196,35 @@ function 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);
+
+  //   return () => {
+  //     container?.removeEventListener("scroll", handleScroll);
+  //   };
+  // }, [containerRef, isPage]);
+