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

upd:

Browse Source 
Deskripsi:
- loading saat mengganti status jabatan

No Issues
This commit is contained in:
amel
2024-10-29 16:31:50 +08:00
parent d2bd1aeb45
commit 85cea0d785
2 changed files with 100 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/module/user/member/ui/drawer_detail_member.tsx
View File

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

26
src/module/user/member/ui/navbar_detail_member.tsx
View File

@@ -1,19 +1,19 @@
'use client' 'use client'
import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile, globalRole, TEMA } from "@/module/_global"; import { globalRole, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA } from "@/module/_global";
import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton, Grid } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerDetailMember from "./drawer_detail_member";
import { useState } from "react";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
import { MdEmail } from "react-icons/md";
import { IoMaleFemale } from "react-icons/io5";
import { useShallowEffect } from "@mantine/hooks";
import { funGetOneMember } from "../lib/api_member";
import toast from "react-hot-toast";
import { IListMember, IMember } from "../lib/type_member";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { ActionIcon, Avatar, Box, Center, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
import { FaSquarePhone } from "react-icons/fa6";
import { HiMenu } from "react-icons/hi";
import { IoMaleFemale } from "react-icons/io5";
import { MdEmail } from "react-icons/md";
import { RiIdCardFill } from "react-icons/ri";
import { valueRoleUser } from "../../lib/val_user"; import { valueRoleUser } from "../../lib/val_user";
import { funGetOneMember } from "../lib/api_member";
import { IListMember, IMember } from "../lib/type_member";
import DrawerDetailMember from "./drawer_detail_member";
export default function NavbarDetailMember({ id }: IMember) { export default function NavbarDetailMember({ id }: IMember) {