upd: pengumuman

deskripsi:
- validasi tambah pengumuman
- validasi edit pengumuman
- button back anggota tambah pengumuman
- button back anggota edit pengumuman
- tampilan border radius edit pengumuman
- tampilan list kosong divisi pada edit pengumuman
- loading button save tambah pengumuman

No Issues

src/module/announcement/ui/create_announcement.tsx

@@ -19,14 +19,13 @@ export default function CreateAnnouncement() {
    const memberGroup = useHookstate(globalMemberAnnouncement)
    const memberValue = memberGroup.get() as GroupData[]
    const [selectedFiles, setSelectedFiles] = useState<any>([])
+   const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false)
    const router = useRouter()
    const tema = useHookstate(TEMA)
    const [data, setData] = useWibuRealtime({
       WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
    })
-
-
    const [isChooseMember, setIsChooseMember] = useState(false)
    const [isData, setisData] = useState({
       title: "",
@@ -37,8 +36,10 @@ export default function CreateAnnouncement() {
       desc: false
    });
 
+
    async function onSubmit() {
       try {
+         setLoadingKonfirmasi(true)
          const response = await funCreateAnnouncement({
             title: isData.title,
             desc: isData.desc,
@@ -56,9 +57,11 @@ export default function CreateAnnouncement() {
       } catch (error) {
          console.error(error)
          toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
+      } finally {
+         setLoadingKonfirmasi(false)
+         setOpen(false)
       }
 
-      setOpen(false)
    }
 
    async function loadData() {
@@ -69,18 +72,31 @@ export default function CreateAnnouncement() {
       loadData()
    }, [])
 
-   function onToChooseMember() {
-      setIsChooseMember(true)
-   }
-
-   if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
 
    function onCheck() {
-      if (Object.values(touched).some((v) => v == true))
+      const cek = checkAll()
+      if (!cek)
          return false
+
+      if (memberValue.length == 0)
+         return toast.error("Error! silahkan pilih divisi")
+
       setOpen(true)
    }
 
+   function checkAll() {
+      let nilai = true
+      if (isData.title === "") {
+         setTouched(touched => ({ ...touched, title: true }))
+         nilai = false
+      }
+      if (isData.desc === "") {
+         setTouched(touched => ({ ...touched, desc: true }))
+         nilai = false
+      }
+      return nilai
+   }
+
 
    function onValidation(kategori: string, val: string) {
       if (kategori == 'title') {
@@ -100,6 +116,8 @@ export default function CreateAnnouncement() {
       }
    }
 
+   if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
+
    return (
       <Box>
          <LayoutNavbarNew back="/announcement/" title="Tambah Pengumuman" menu={<></>} />
@@ -151,7 +169,7 @@ export default function CreateAnnouncement() {
                   padding: 10,
                   borderRadius: 10
                }}
-                  onClick={() => { onToChooseMember() }}
+                  onClick={() => { setIsChooseMember(true) }}
                >
                   <Text size="sm">
                      Tambah divisi penerima pengumuman
@@ -162,7 +180,7 @@ export default function CreateAnnouncement() {
             <Box pt={20} mb={100}>
                <Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
                {(memberGroup.length === 0) ? (
-                  <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada divisi yang dipilih</Text>
                ) : memberGroup.get().map((v: any, i: any) => {
                   return (
                      <Box key={i} mt={10}>
@@ -195,13 +213,14 @@ export default function CreateAnnouncement() {
                Simpan
             </Button>
          </Box>
-         <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+         <LayoutModal loading={loadingKonfirmasi} opened={isOpen} onClose={() => setOpen(false)}
             description="Apakah Anda yakin ingin menambahkan data?"
             onYes={(val) => {
                if (val) {
                   onSubmit()
+               } else {
+                  setOpen(false)
                }
-               setOpen(false)
             }} />
       </Box>
 

src/module/announcement/ui/create_users_announcement.tsx

@@ -1,15 +1,16 @@
 "use client";
-import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
-import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import React, { useState } from 'react';
-import { FaCheck } from 'react-icons/fa';
-import { GroupData } from '../lib/type_announcement';
 import { useHookstate } from '@hookstate/core';
-import { globalMemberAnnouncement } from '../lib/val_announcement';
+import { ActionIcon, Box, Button, Divider, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { FaMinus } from 'react-icons/fa6';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
+import { FaCheck } from 'react-icons/fa';
+import { FaMinus } from 'react-icons/fa6';
+import { HiChevronLeft } from 'react-icons/hi2';
+import { GroupData } from '../lib/type_announcement';
+import { globalMemberAnnouncement } from '../lib/val_announcement';
 
 
 
@@ -112,7 +113,13 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
 
   return (
     <div>
-      <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
+      <LayoutNavbarNew state={
+        <Box>
+          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <HiChevronLeft size={20} color='white' />
+          </ActionIcon>
+        </Box>
+      } title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
       <Box p={20} pb={100}>
         <Group justify='flex-end' mb={20}>
           <Text

src/module/announcement/ui/edit_announcement.tsx

@@ -1,21 +1,21 @@
 'use client'
-import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 import { Box, Button, Flex, Group, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { HiOutlineChevronRight } from "react-icons/hi2";
-import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
-import { useParams, useRouter } from "next/navigation";
-import { useHookstate } from "@hookstate/core";
-import { globalMemberEditAnnouncement } from "../lib/val_announcement";
-import { GroupData, GroupDataEditAnnouncement } from "../lib/type_announcement";
-import EditChooseMember from "./edit_choose_member";
 import { IoIosArrowForward } from "react-icons/io";
+import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
+import { GroupData } from "../lib/type_announcement";
+import { globalMemberEditAnnouncement } from "../lib/val_announcement";
+import EditChooseMember from "./edit_choose_member";
 
 export default function EditAnnouncement() {
    const [isOpen, setOpen] = useState(false)
+   const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false)
    const [isChooseDivisi, setChooseDivisi] = useState(false)
    const param = useParams<{ id: string }>()
    const [loading, setLoading] = useState(true)
@@ -75,6 +75,7 @@ export default function EditAnnouncement() {
          toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
       } finally {
          setLoading(false)
+         setOpen(false)
       }
    }
 
@@ -94,30 +95,24 @@ export default function EditAnnouncement() {
 
          if (response.success) {
             toast.success(response.message)
-            setLoadingSubmit(false)
             router.push(`/announcement/${param.id}`)
          } else {
             toast.error(response.message)
          }
-         setLoadingSubmit(false)
       } catch (error) {
          console.error(error)
          toast.error("Gagal mengedit pengumuman, coba lagi nanti");
       } finally {
          setLoadingSubmit(false)
+         setOpen(false)
       }
-      setOpen(false)
    }
 
-
-
-
-   if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
-
-
    function onCheck() {
       if (Object.values(touched).some((v) => v == true))
          return false
+      if (memberGroup.get().length == 0)
+         return toast.error("Error! silahkan pilih divisi")
       setOpen(true)
    }
 
@@ -140,6 +135,8 @@ export default function EditAnnouncement() {
       }
    }
 
+   if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
+
    return (
       <>
          <LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
@@ -160,7 +157,7 @@ export default function EditAnnouncement() {
                :
                <>
                   <TextInput
-                     size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+                     size="md" type="text" radius={10} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
                      styles={{
                         input: {
                            color: tema.get().utama,
@@ -231,28 +228,34 @@ export default function EditAnnouncement() {
                   ))
 
                :
-               memberGroup.get().map((v: any, i: any) => {
+               <>
-                  return (
+                  <Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
-                     <Box key={i} mt={10}>
+                  {
-                        <Text fw={"bold"}>{v.name}</Text>
+                     memberGroup.get().length == 0 ? <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada divisi yang dipilih</Text> :
-                        <Box pl={20} pr={10}>
+                        memberGroup.get().map((v: any, i: any) => {
-                           <Flex direction={"column"} gap={"md"}>
+                           return (
-                              <List>
+                              <Box key={i} mt={10}>
-                                 {
+                                 <Text fw={"bold"}>{v.name}</Text>
-                                    v.Division.map((division: any) => {
+                                 <Box pl={20} pr={10}>
-                                       return <List.Item key={division.id}>
+                                    <Flex direction={"column"} gap={"md"}>
-                                          <Text lineClamp={1}>{division.name}</Text>
+                                       <List>
-                                       </List.Item>
+                                          {
-                                    })
+                                             v.Division.map((division: any) => {
-                                 }
+                                                return <List.Item key={division.id}>
-                              </List>
+                                                   <Text lineClamp={1}>{division.name}</Text>
-                           </Flex>
+                                                </List.Item>
-                        </Box>
+                                             })
-                     </Box>
+                                          }
-                  );
+                                       </List>
+                                    </Flex>
+                                 </Box>
+                              </Box>
+                           );
+
+                        })
+                  }
+               </>
 
-               }
-               )
             }
 
          </Box>
@@ -282,8 +285,9 @@ export default function EditAnnouncement() {
             onYes={(val) => {
                if (val) {
                   onSubmit()
+               } else {
+                  setOpen(false)
                }
-               setOpen(false)
             }} />
       </>
    )

src/module/announcement/ui/edit_choose_member.tsx

@@ -1,17 +1,16 @@
 "use client";
-import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
-import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import React, { useState } from 'react';
-import { FaCheck } from 'react-icons/fa';
-import { GroupData, GroupDataEditAnnouncement } from '../lib/type_announcement';
 import { useHookstate } from '@hookstate/core';
-import { globalMemberEditAnnouncement } from '../lib/val_announcement';
+import { ActionIcon, Box, Button, Divider, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { FaMinus } from 'react-icons/fa6';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
-
+import { FaCheck } from 'react-icons/fa';
-
+import { FaMinus } from 'react-icons/fa6';
+import { HiChevronLeft } from 'react-icons/hi2';
+import { GroupData } from '../lib/type_announcement';
+import { globalMemberEditAnnouncement } from '../lib/val_announcement';
 
 interface CheckedState {
    [key: string]: string[];
@@ -111,7 +110,13 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
 
    return (
       <div>
-         <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
+         <LayoutNavbarNew state={
+            <Box>
+               <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+                  <HiChevronLeft size={20} color='white' />
+               </ActionIcon>
+            </Box>
+         } title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
          <Box p={20} pb={100}>
             <Group justify='flex-end' mb={20}>
                <Text