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

rev: diskusi umum

Browse Source 
Deskripsi:
- memberi komentar
- edit diskusi
- hapus diskusi
- status aktif diskusi
- tambah anggota diskusi
- hapus anggota diskusi

No Issues
This commit is contained in:
amel
2025-01-08 17:22:12 +08:00
parent ca45791297
commit 11b4e31d29
13 changed files with 1027 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/module/discussion_general/ui/member_discussion_general.tsx
View File

@@ -2,37 +2,31 @@
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 { ActionIcon, Avatar, Box, Divider, Grid, Group, 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 { FaUserTie } from 'react-icons/fa6';
import { IoIosCloseCircle } from 'react-icons/io';
import { funGetOneDiscussionGeneral } from '../lib/api_discussion_general';
import { funDelMemberDiscussionGeneral, 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 [valChooseMemberId, setChooseMemberId] = useState("")
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) {
@@ -57,96 +51,38 @@ export default function MemberDiscussionGeneral() {
}, [param.id])
async function onClickMember(id: string, status: boolean) {
setChooseMember(id)
setChooseMemberStatus(status)
async function onClickMember(id: string, name: string) {
setChooseMemberId(id)
setChooseMemberName(name)
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 deleteMember() {
try {
setLoadingDelete(true)
const res = await funDelMemberDiscussionGeneral(param.id, { idUser: valChooseMemberId })
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>
@@ -156,15 +92,17 @@ export default function MemberDiscussionGeneral() {
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}>
<Box>
{loading ?
<></>
{!loading ?
roleLogin.get() != "user" && roleLogin.get() != "coadmin" ?
<Group align='center' onClick={() => router.push('/discussion/' + param.id + '/add-member/')}>
<Avatar size={'lg'}>
<AiOutlineUserAdd size={30} color={tema.get().utama} />
</Avatar>
<Text fz={isMobile ? 14 : 16}>Tambah Anggota</Text>
</Group>
: <></>
:
<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}>
@@ -181,15 +119,10 @@ export default function MemberDiscussionGeneral() {
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)
}
}}
onClick={() => { onClickMember(v.idUser, v.name) }}
>
<Grid.Col span={1}>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}-size-100`} 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}>
@@ -212,66 +145,32 @@ export default function MemberDiscussionGeneral() {
<LayoutDrawer opened={openDrawer} onClose={() => setDrawer(false)} title={valChooseMemberName}>
<Box>
<Group align='center' mb={20}
// onClick={() => valActive ? editStatusAdmin() : undefined}
>
<Group align='center' mb={20} onClick={() => { router.push('/member/' + valChooseMemberId) }} >
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<FaUserTie size={30} color={valActive ? tema.get().utama : "gray"} />
<FaUserTie size={30} color={tema.get().utama} />
</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>
<Text c={tema.get().utama}>Lihat Profil</Text>
</Group>
{
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
<Group align='center' onClick={() => setOpenModal(true)}>
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<IoIosCloseCircle size={40} color={tema.get().utama} />
</ActionIcon>
<Text c={tema.get().utama}>Keluarkan dari diskusi</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()
// }
if (!val) {
setOpenModal(false)
} else {
deleteMember()
}
}} />
</Box>
);