Files
sistem-desa-mandiri/src/module/user/member/ui/drawer_detail_member.tsx
amel 85cea0d785 upd:
Deskripsi:
- loading saat mengganti status jabatan

No Issues
2024-10-29 16:31:50 +08:00

107 lines
3.4 KiB
TypeScript

"use client";
import { keyWibu, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { useHookstate } from "@hookstate/core";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaPencil, FaToggleOff } from "react-icons/fa6";
import { useWibuRealtime } from "wibu-realtime";
import { funEditStatusMember } from "../lib/api_member";
export default function DrawerDetailMember({ onDeleted, id, status, }: { onDeleted: (val: boolean) => void; id: string; status: boolean; }) {
const router = useRouter()
const [isModal, setModal] = useState(false)
const tema = useHookstate(TEMA)
const [loadingModal, setLoadingModal] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function nonActive(val: boolean) {
try {
if (val) {
setLoadingModal(true)
const res = await funEditStatusMember(id, {
isActive: status ? true : false,
});
if (res.success) {
setDataRealtime([{
category: "data-member",
group: res.data.idGroup,
}])
toast.success(res.message);
router.push("/member?active=true");
onDeleted(true);
} else {
onDeleted(false);
}
}
} catch (error) {
console.error(error);
toast.error("Terjadi kesalahan");
} finally {
setModal(false)
setLoadingModal(false)
}
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
<Flex
justify={"center"}
align={"center"}
direction={"column"}
style={{ cursor: "pointer" }}
onClick={() => {
setModal(true);
}}
>
<Box>
<FaToggleOff size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} ta="center">
{" "}
{status === false ? "Aktifkan" : "Non Aktifkan"}
</Text>
</Box>
</Flex>
<Flex
justify={"center"}
align={"center"}
direction={"column"}
style={{ cursor: "pointer" }}
onClick={() => {
router.push(`/member/edit/${id}`);
}}
>
<Box>
<FaPencil size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama} ta="center">
Edit
</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
<LayoutModal
loading={loadingModal}
opened={isModal}
onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
onYes={(val) => {
nonActive(val);
}}
/>
</Box>
);
}