rev: diskusi umum
Deskripsi: - detail diskusi - list anggota diskusi - blm selesai No Issues
This commit is contained in:
amel
278
src/module/discussion_general/ui/member_discussion_general.tsx
Normal file
278
src/module/discussion_general/ui/member_discussion_general.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
"use client"
|
||||
import { globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
|
||||
import LayoutModal from '@/module/_global/layout/layout_modal';
|
||||
import { useHookstate } from '@hookstate/core';
|
||||
import { ActionIcon, Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { AiOutlineUserAdd } from 'react-icons/ai';
|
||||
import { FaPencil, FaToggleOff, FaUserTie } from 'react-icons/fa6';
|
||||
import { IoIosCloseCircle } from 'react-icons/io';
|
||||
import { funGetOneDiscussionGeneral } from '../lib/api_discussion_general';
|
||||
import { IFormMemberDisscussionGeneral } from '../lib/type_discussion_general';
|
||||
|
||||
|
||||
export default function MemberDiscussionGeneral() {
|
||||
const router = useRouter()
|
||||
const [openDrawer, setDrawer] = useState(false)
|
||||
const [openDrawerInfo, setDrawerInfo] = useState(false)
|
||||
const [valActive, setValActive] = useState(true)
|
||||
const param = useParams<{ id: string }>()
|
||||
const [member, setMember] = useState<IFormMemberDisscussionGeneral[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [valChooseMember, setChooseMember] = useState("")
|
||||
const [valChooseMemberStatus, setChooseMemberStatus] = useState<boolean>(false)
|
||||
const [valChooseMemberName, setChooseMemberName] = useState("")
|
||||
const [isOpenModal, setOpenModal] = useState(false)
|
||||
const [isOpenModalStatus, setOpenModalStatus] = useState(false)
|
||||
const roleLogin = useHookstate(globalRole)
|
||||
const [isAdmin, setAdmin] = useState(false)
|
||||
const isMobile = useMediaQuery('(max-width: 455px)')
|
||||
const isMobile2 = useMediaQuery("(max-width: 438px)")
|
||||
const tema = useHookstate(TEMA)
|
||||
const [loadingStatus, setLoadingStatus] = useState(false)
|
||||
const [loadingDelete, setLoadingDelete] = useState(false)
|
||||
|
||||
async function getOneData(loading: boolean) {
|
||||
try {
|
||||
setLoading(loading)
|
||||
const res = await funGetOneDiscussionGeneral(param.id, "?cat=anggota");
|
||||
if (res.success) {
|
||||
setMember(res.data)
|
||||
} else {
|
||||
toast.error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal mendapatkan data, coba lagi nanti");
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
getOneData(true);
|
||||
}, [param.id])
|
||||
|
||||
|
||||
async function onClickMember(id: string, status: boolean) {
|
||||
setChooseMember(id)
|
||||
setChooseMemberStatus(status)
|
||||
setDrawer(true)
|
||||
}
|
||||
|
||||
|
||||
// async function deleteMember() {
|
||||
// try {
|
||||
// setLoadingDelete(true)
|
||||
// const res = await funDeleteMemberDivision(param.id, { id: valChooseMember })
|
||||
// if (res.success) {
|
||||
// toast.success(res.message)
|
||||
// setDrawer(false)
|
||||
// getOneData(false)
|
||||
// } else {
|
||||
// toast.error(res.message)
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// toast.error("Gagal mendapatkan divisi, coba lagi nanti");
|
||||
// } finally {
|
||||
// setLoadingDelete(false)
|
||||
// setOpenModal(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// async function editStatusAdmin() {
|
||||
// try {
|
||||
// const res = await funEditStatusAdminDivision(param.id, { id: valChooseMember, isAdmin: valChooseMemberStatus })
|
||||
// if (res.success) {
|
||||
// toast.success(res.message)
|
||||
// getOneData(false)
|
||||
// } else {
|
||||
// toast.error(res.message)
|
||||
// }
|
||||
// setDrawer(false)
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// toast.error("Gagal mendapatkan divisi, coba lagi nanti");
|
||||
// }
|
||||
// }
|
||||
|
||||
// async function editStatusDivisi() {
|
||||
// try {
|
||||
// setLoadingStatus(true)
|
||||
// const res = await funUpdateStatusDivision(param.id, { isActive: valActive })
|
||||
// if (res.success) {
|
||||
// toast.success(res.message)
|
||||
// getOneData(false)
|
||||
// } else {
|
||||
// toast.error(res.message)
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// toast.error("Gagal mendapatkan divisi, coba lagi nanti");
|
||||
// } finally {
|
||||
// setDrawerInfo(false)
|
||||
// setLoadingStatus(false)
|
||||
// setOpenModalStatus(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<LayoutNavbarNew back={"/discussion/" + param.id} title="Anggota Diskusi" menu={<></>} />
|
||||
<Box p={20}>
|
||||
{/* <Box>
|
||||
<Text fw={"bold"}>Deskripsi Divisi</Text>
|
||||
<Box p={20} bg={"white"} style={{
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${tema.get().bgTotalKegiatan}`,
|
||||
}}>
|
||||
{
|
||||
loading ?
|
||||
Array(3)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<Stack align="stretch" justify="center" key={i} mb={10}>
|
||||
<Skeleton height={10} radius="md" m={0} />
|
||||
</Stack>
|
||||
))
|
||||
:
|
||||
(deskripsi != null && deskripsi != undefined && deskripsi != "") ?
|
||||
<Text ta={"justify"}>{deskripsi}</Text>
|
||||
: <Text ta={"center"} c={"dimmed"} fs={"italic"}>Tidak ada deskripsi</Text>
|
||||
}
|
||||
</Box>
|
||||
</Box> */}
|
||||
<Box>
|
||||
<Box>
|
||||
<Text>{member.length} Anggota</Text>
|
||||
</Box>
|
||||
<Box p={20} bg={"white"} style={{
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${tema.get().bgTotalKegiatan}`,
|
||||
}}>
|
||||
<Box>
|
||||
{loading ?
|
||||
<></>
|
||||
:
|
||||
<Group align='center' onClick={() => router.push('/division/add-member/' + param.id)}>
|
||||
<Avatar size={'lg'}>
|
||||
<AiOutlineUserAdd size={30} color={tema.get().utama} />
|
||||
</Avatar>
|
||||
<Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
|
||||
</Group>
|
||||
}
|
||||
</Box>
|
||||
<Box pt={10}>
|
||||
<Box mb={10}>
|
||||
{loading
|
||||
? Array(6)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<Box key={i}>
|
||||
<SkeletonList />
|
||||
</Box>
|
||||
))
|
||||
: member.map((v, i) => {
|
||||
return (
|
||||
<Box key={i}>
|
||||
<Grid align='center' mt={10}
|
||||
onClick={() => {
|
||||
if ((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || isAdmin) {
|
||||
// onClickMember(v.id, (v.isAdmin) ? true : false)
|
||||
setChooseMemberName(v.name)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Grid.Col span={1}>
|
||||
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={11}>
|
||||
<Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
|
||||
{v.name}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Box mt={10}>
|
||||
<Divider size={"xs"} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<LayoutDrawer opened={openDrawer} onClose={() => setDrawer(false)} title={valChooseMemberName}>
|
||||
<Box>
|
||||
<Group align='center' mb={20}
|
||||
// onClick={() => valActive ? editStatusAdmin() : undefined}
|
||||
>
|
||||
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
|
||||
<FaUserTie size={30} color={valActive ? tema.get().utama : "gray"} />
|
||||
</ActionIcon>
|
||||
<Text c={valActive ? tema.get().utama : "gray"}>{(valChooseMemberStatus == false) ? "Jadikan admin" : "Memberhentikan sebagai admin"}</Text>
|
||||
</Group>
|
||||
<Group align='center' onClick={() => valActive ? setOpenModal(true) : undefined}>
|
||||
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
|
||||
<IoIosCloseCircle size={40} color={valActive ? tema.get().utama : "gray"} />
|
||||
</ActionIcon>
|
||||
<Text c={valActive ? tema.get().utama : "gray"}>Keluarkan dari divisi</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</LayoutDrawer>
|
||||
|
||||
<LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
|
||||
description="Apakah Anda yakin ingin mengeluarkan anggota?"
|
||||
onYes={(val) => {
|
||||
// if (!val) {
|
||||
// setOpenModal(false)
|
||||
// } else {
|
||||
// deleteMember()
|
||||
// }
|
||||
}} />
|
||||
|
||||
<LayoutDrawer opened={openDrawerInfo} onClose={() => setDrawerInfo(false)} title={"Menu"}>
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid cols={{ base: 2, sm: 2, lg: 3 }} >
|
||||
<Flex onClick={() => router.push('/division/edit/' + param.id)} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<FaPencil size={30} color={tema.get().utama} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={tema.get().utama}>Edit Divisi</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex onClick={() => { setOpenModalStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<FaToggleOff size={30} color={tema.get().utama} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={tema.get().utama}>{valActive ? "Non Aktifkan Divisi" : "Aktifkan Divisi"}</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Box>
|
||||
</LayoutDrawer>
|
||||
|
||||
<LayoutModal loading={loadingStatus} opened={isOpenModalStatus} onClose={() => setOpenModalStatus(false)}
|
||||
description="Apakah Anda yakin ingin mangubah status aktifasi divisi?"
|
||||
onYes={(val) => {
|
||||
// if (!val) {
|
||||
// setOpenModalStatus(false)
|
||||
// } else {
|
||||
// editStatusDivisi()
|
||||
// }
|
||||
}} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user