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

upd: pengumuman

Browse Source 
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
This commit is contained in:
amel
2024-10-05 11:21:13 +08:00
parent a2b6790294
commit 1f8744d11f
4 changed files with 108 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/module/announcement/ui/create_announcement.tsx
View File

@@ -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>

25
src/module/announcement/ui/create_users_announcement.tsx
View File

@@ -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 { FaMinus } from 'react-icons/fa6';
import { ActionIcon, Box, Button, Divider, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
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

84
src/module/announcement/ui/edit_announcement.tsx
View File

@@ -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 (
<Box key={i} mt={10}>
<Text fw={"bold"}>{v.name}</Text>
<Box pl={20} pr={10}>
<Flex direction={"column"} gap={"md"}>
<List>
{
v.Division.map((division: any) => {
return <List.Item key={division.id}>
<Text lineClamp={1}>{division.name}</Text>
</List.Item>
})
}
</List>
</Flex>
</Box>
</Box>
);
<>
<Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
{
memberGroup.get().length == 0 ? <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}>
<Text fw={"bold"}>{v.name}</Text>
<Box pl={20} pr={10}>
<Flex direction={"column"} gap={"md"}>
<List>
{
v.Division.map((division: any) => {
return <List.Item key={division.id}>
<Text lineClamp={1}>{division.name}</Text>
</List.Item>
})
}
</List>
</Flex>
</Box>
</Box>
);
})
}
</>
}
)
}
</Box>
@@ -282,8 +285,9 @@ export default function EditAnnouncement() {
onYes={(val) => {
if (val) {
onSubmit()
} else {
setOpen(false)
}
setOpen(false)
}} />
</>
)

27
src/module/announcement/ui/edit_choose_member.tsx
View File

@@ -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 { FaMinus } from 'react-icons/fa6';
import { ActionIcon, Box, Button, Divider, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
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