Files
sistem-desa-mandiri/src/module/discussion/ui/drawer_detail_discussion.tsx
2024-08-14 15:38:04 +08:00

125 lines
4.6 KiB
TypeScript

import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
import { useState } from "react";
import toast from "react-hot-toast";
import { BsTrash3 } from "react-icons/bs";
import { FaCheck, FaPencil } from "react-icons/fa6";
import { MdClose } from "react-icons/md";
import { funDeleteDiscussion, funEditStatusDiscussion } from "../lib/api_discussion";
import { useParams, useRouter } from "next/navigation";
export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivision }: { onSuccess: (val: boolean) => void, id: string, status: number, idDivision: string }) {
const [isValModal, setValModal] = useState(false)
const [isValModalStatus, setValModalStatus] = useState(false)
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
async function fetchStatusDiscussion(val: boolean) {
try {
if (val) {
const response = await funEditStatusDiscussion(id, { status: status })
if (response.success) {
toast.success(response.message)
setValModalStatus(false)
} else {
toast.error(response.message)
}
}
setValModalStatus(false)
} catch (error) {
console.log(error);
setValModalStatus(false)
toast.error("Gagal menambahkan diskusi, coba lagi nanti");
} finally {
setValModalStatus(false)
}
}
async function fetchDeleteDiscussion(val: boolean) {
try {
if (val) {
const response = await funDeleteDiscussion(id)
if (response.success) {
toast.success(response.message)
setValModal(false)
router.push(`/division/${param.id}/discussion`)
} else {
toast.error(response.message)
}
}
setValModal(false)
} catch (error) {
console.log(error);
setValModal(false)
toast.error("Gagal hapus diskusi, coba lagi nanti");
} finally {
setValModal(false)
}
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsTrash3 size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Hapus</Text>
</Box>
</Flex>
<Flex onClick={() => window.location.href = `/division/${param.id}/discussion/update/${param.detail}`} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Edit</Text>
</Box>
</Flex>
<Flex onClick={() => setValModalStatus(true)} >
<Box>
{status === 1 ? (
<>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<MdClose size={30} color={WARNA.biruTua} />
</Box>
<Text style={{ color: WARNA.biruTua }}>Tutup Diskusi</Text>
</Flex>
</>
) : (
<>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<FaCheck size={30} color={WARNA.biruTua} />
</Box>
<Text style={{ color: WARNA.biruTua }}>Buka Diskusi</Text>
</Flex>
</>
)}
</Box>
</Flex>
</SimpleGrid>
</Stack>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin menghapus diskusi ini?"
onYes={(val) => { fetchDeleteDiscussion(val) }} />
<LayoutModal opened={isValModalStatus} onClose={() => setValModalStatus(false)}
description="Apakah Anda yakin ingin mengubah status diskusi ini?"
onYes={(val) => { fetchStatusDiscussion(val) }} />
</Box>
)
}