rev: diskusi umum
Deskripsi: - detail diskusi - list anggota diskusi - blm selesai No Issues
This commit is contained in:
amel
9
src/app/(application)/discussion/[id]/member/page.tsx
Normal file
9
src/app/(application)/discussion/[id]/member/page.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { MemberDiscussionGeneral } from "@/module/discussion_general";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MemberDiscussionGeneral />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,7 +1,9 @@
|
|||||||
|
import { DetailDiscussionGeneral } from "@/module/discussion_general";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
detail diskusi umum
|
<DetailDiscussionGeneral />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
92
src/app/api/discussion-general/[id]/member/route.ts
Normal file
92
src/app/api/discussion-general/[id]/member/route.ts
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import { prisma } from "@/module/_global";
|
||||||
|
import { funGetUserByCookies } from "@/module/auth";
|
||||||
|
import { createLogUser } from "@/module/user";
|
||||||
|
import _ from "lodash";
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
|
||||||
|
|
||||||
|
// ADD MEMBER DISCUSSION GENERAL
|
||||||
|
export async function POST(request: Request, context: { params: { id: string } }) {
|
||||||
|
try {
|
||||||
|
const user = await funGetUserByCookies()
|
||||||
|
if (user.id == undefined) {
|
||||||
|
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id } = context.params
|
||||||
|
const { member } = (await request.json())
|
||||||
|
|
||||||
|
const cek = await prisma.discussion.count({
|
||||||
|
where: {
|
||||||
|
id,
|
||||||
|
isActive: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (cek == 0) {
|
||||||
|
return NextResponse.json({ success: false, message: "Gagal menambahkan anggota, data tidak ditemukan" }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (member.length > 0) {
|
||||||
|
const dataMember = member.map((v: any) => ({
|
||||||
|
..._.omit(v, ["idUser", "name", "img"]),
|
||||||
|
idDiscussion: id,
|
||||||
|
idUser: v.idUser
|
||||||
|
}))
|
||||||
|
|
||||||
|
const insertMember = await prisma.discussionMember.createMany({
|
||||||
|
data: dataMember
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// create log user
|
||||||
|
const log = await createLogUser({ act: 'CREATE', desc: 'User menambah anggota diskusi umum', table: 'discussion', data: String(id) })
|
||||||
|
return NextResponse.json({ success: true, message: "Berhasil menambahkan anggota diskusi umum" }, { status: 200 });
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return NextResponse.json({ success: false, message: "Gagal menambahkan anggota, coba lagi nanti (error : 500)" }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// MENGELUARKAN ANGGOTA
|
||||||
|
export async function DELETE(request: Request, context: { params: { id: string } }) {
|
||||||
|
try {
|
||||||
|
const user = await funGetUserByCookies()
|
||||||
|
if (user.id == undefined) {
|
||||||
|
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id } = context.params
|
||||||
|
const { idUser } = (await request.json());
|
||||||
|
|
||||||
|
|
||||||
|
const cek = await prisma.discussion.count({
|
||||||
|
where: {
|
||||||
|
id,
|
||||||
|
isActive: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (cek == 0) {
|
||||||
|
return NextResponse.json({ success: false, message: "Gagal, data tidak ditemukan" }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteMember = await prisma.discussionMember.deleteMany({
|
||||||
|
where: {
|
||||||
|
idDiscussion: id,
|
||||||
|
idUser
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// create log user
|
||||||
|
const log = await createLogUser({ act: 'DELETE', desc: 'User mengeluarkan anggota diskusi umum', table: 'discussion', data: String(id) })
|
||||||
|
|
||||||
|
return NextResponse.json({ success: true, message: "Berhasil mengeluarkan anggota diskusi umum" }, { status: 200 });
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return NextResponse.json({ success: false, message: "Gagal mengeluarkan anggota, coba lagi nanti (error : 500)" }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
112
src/app/api/discussion-general/[id]/route.ts
Normal file
112
src/app/api/discussion-general/[id]/route.ts
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
import { prisma } from "@/module/_global";
|
||||||
|
import { funGetUserByCookies } from "@/module/auth";
|
||||||
|
import _ from "lodash";
|
||||||
|
import moment from "moment";
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
|
||||||
|
export async function GET(request: Request, context: { params: { id: string } }) {
|
||||||
|
try {
|
||||||
|
let dataFix
|
||||||
|
const { id } = context.params
|
||||||
|
const { searchParams } = new URL(request.url);
|
||||||
|
const kategori = searchParams.get("cat");
|
||||||
|
|
||||||
|
const user = await funGetUserByCookies()
|
||||||
|
if (user.id == undefined) {
|
||||||
|
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const cek = await prisma.discussion.count({
|
||||||
|
where: {
|
||||||
|
id,
|
||||||
|
isActive: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (cek == 0) {
|
||||||
|
return NextResponse.json({ success: false, message: "Gagal mendapatkan diskusi, data tidak ditemukan" }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (kategori == "detail") {
|
||||||
|
const data = await prisma.discussion.findUnique({
|
||||||
|
where: {
|
||||||
|
id,
|
||||||
|
isActive: true
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
title: true,
|
||||||
|
desc: true,
|
||||||
|
status: true,
|
||||||
|
createdAt: true,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
dataFix = {
|
||||||
|
id: data?.id,
|
||||||
|
title: data?.title,
|
||||||
|
desc: data?.desc,
|
||||||
|
status: data?.status,
|
||||||
|
createdAt: moment(data?.createdAt).format("ll"),
|
||||||
|
}
|
||||||
|
|
||||||
|
} else if (kategori == "komentar") {
|
||||||
|
const data = await prisma.discussionComment.findMany({
|
||||||
|
where: {
|
||||||
|
idDiscussion: id,
|
||||||
|
isActive: true
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
comment: true,
|
||||||
|
createdAt: true,
|
||||||
|
idUser: true,
|
||||||
|
User: {
|
||||||
|
select: {
|
||||||
|
name: true,
|
||||||
|
img: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
dataFix = data.map((v: any) => ({
|
||||||
|
..._.omit(v, ["createdAt", "User",]),
|
||||||
|
createdAt: moment(v.createdAt).format("ll"),
|
||||||
|
username: v.User.name,
|
||||||
|
img: v.User.img
|
||||||
|
}))
|
||||||
|
|
||||||
|
} else if (kategori == "anggota") {
|
||||||
|
const data = await prisma.discussionMember.findMany({
|
||||||
|
where: {
|
||||||
|
idDiscussion: id,
|
||||||
|
isActive: true
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
idUser: true,
|
||||||
|
User: {
|
||||||
|
select: {
|
||||||
|
name: true,
|
||||||
|
img: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
dataFix = data.map((v: any) => ({
|
||||||
|
..._.omit(v, ["User",]),
|
||||||
|
name: v.User.name,
|
||||||
|
img: v.User.img
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return NextResponse.json({ success: true, message: "Berhasil mendapatkan diskusi", data: dataFix }, { status: 200 });
|
||||||
|
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return NextResponse.json({ success: false, message: "Gagal mendapatkan diskusi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,7 +1,11 @@
|
|||||||
import FormCreateDiscussionGeneral from "./ui/create_discussion";
|
import FormCreateDiscussionGeneral from "./ui/create_discussion";
|
||||||
|
import DetailDiscussionGeneral from "./ui/detail_discussion_general";
|
||||||
import ListDiscussionGeneral from "./ui/list_discussion";
|
import ListDiscussionGeneral from "./ui/list_discussion";
|
||||||
|
import MemberDiscussionGeneral from "./ui/member_discussion_general";
|
||||||
import NavbarDiscussionGeneral from "./ui/navbar_discussion";
|
import NavbarDiscussionGeneral from "./ui/navbar_discussion";
|
||||||
|
|
||||||
export { ListDiscussionGeneral }
|
export { ListDiscussionGeneral }
|
||||||
export { NavbarDiscussionGeneral }
|
export { NavbarDiscussionGeneral }
|
||||||
export { FormCreateDiscussionGeneral }
|
export { FormCreateDiscussionGeneral }
|
||||||
|
export { DetailDiscussionGeneral }
|
||||||
|
export { MemberDiscussionGeneral }
|
||||||
@@ -15,3 +15,8 @@ export const funCreateDiscussionGeneral = async (data: { idGroup: string, title:
|
|||||||
});
|
});
|
||||||
return await response.json().catch(() => null);
|
return await response.json().catch(() => null);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const funGetOneDiscussionGeneral = async (id: string, path: string) => {
|
||||||
|
const response = await fetch(`/api/discussion-general/${id}${(path) ? path : ''}`, { next: { tags: ['discussion-general'] } });
|
||||||
|
return await response.json().catch(() => null);
|
||||||
|
}
|
||||||
|
|||||||
@@ -3,3 +3,20 @@ export interface IFormMemberDisscussionGeneral {
|
|||||||
name: string,
|
name: string,
|
||||||
img: string
|
img: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface IDetailDiscussionGeneral{
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
desc: string
|
||||||
|
status: number
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IComentsDisscussionGeneral{
|
||||||
|
id: string
|
||||||
|
comment: string
|
||||||
|
createdAt: string
|
||||||
|
idUser: string
|
||||||
|
img: string
|
||||||
|
username: string
|
||||||
|
}
|
||||||
@@ -2,3 +2,4 @@ import { hookstate } from "@hookstate/core";
|
|||||||
import { IFormMemberDisscussionGeneral } from "./type_discussion_general";
|
import { IFormMemberDisscussionGeneral } from "./type_discussion_general";
|
||||||
|
|
||||||
export const globalMemberDiscussionGeneral = hookstate<IFormMemberDisscussionGeneral[]>([]);
|
export const globalMemberDiscussionGeneral = hookstate<IFormMemberDisscussionGeneral[]>([]);
|
||||||
|
export const globalRefreshDiscussionGeneral = hookstate<boolean>(false);
|
||||||
380
src/module/discussion_general/ui/detail_discussion_general.tsx
Normal file
380
src/module/discussion_general/ui/detail_discussion_general.tsx
Normal file
@@ -0,0 +1,380 @@
|
|||||||
|
"use client"
|
||||||
|
import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
|
||||||
|
import { globalIsAdminDivision, globalIsMemberDivision } from "@/module/division_new";
|
||||||
|
import { useHookstate } from "@hookstate/core";
|
||||||
|
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
|
||||||
|
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
|
||||||
|
import moment from "moment";
|
||||||
|
import "moment/locale/id";
|
||||||
|
import { useParams, useRouter } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import toast from "react-hot-toast";
|
||||||
|
import { GrChatOption } from "react-icons/gr";
|
||||||
|
import { HiMenu } from "react-icons/hi";
|
||||||
|
import { VscSend } from "react-icons/vsc";
|
||||||
|
import { useWibuRealtime } from "wibu-realtime";
|
||||||
|
import { funGetOneDiscussionGeneral } from "../lib/api_discussion_general";
|
||||||
|
import { IComentsDisscussionGeneral, IDetailDiscussionGeneral } from "../lib/type_discussion_general";
|
||||||
|
import { globalRefreshDiscussionGeneral } from "../lib/val_discussion_general";
|
||||||
|
import DrawerDetailDiscussionGeneral from "./drawer_detail_discussion_general";
|
||||||
|
import { BiSolidCommentDetail } from "react-icons/bi";
|
||||||
|
|
||||||
|
export default function DetailDiscussionGeneral() {
|
||||||
|
const [isData, setData] = useState<IDetailDiscussionGeneral>()
|
||||||
|
const [isDataKomentar, setDataKomentar] = useState<IComentsDisscussionGeneral[]>([])
|
||||||
|
const [isComent, setIsComent] = useState("")
|
||||||
|
const param = useParams<{ id: string }>()
|
||||||
|
const [isLoad, setIsLoad] = useState(true)
|
||||||
|
const [loadingKomentar, setLoadingKomentar] = useState(false)
|
||||||
|
const refresh = useHookstate(globalRefreshDiscussionGeneral)
|
||||||
|
const roleLogin = useHookstate(globalRole)
|
||||||
|
const [isCreator, setCreator] = useState(false)
|
||||||
|
const [isUser, setUser] = useState('')
|
||||||
|
const adminLogin = useHookstate(globalIsAdminDivision)
|
||||||
|
const memberDivision = useHookstate(globalIsMemberDivision)
|
||||||
|
const tema = useHookstate(TEMA)
|
||||||
|
const router = useRouter()
|
||||||
|
const [openDrawer, setOpenDrawer] = useState(false)
|
||||||
|
const isMobile = useMediaQuery('(max-width: 369px)')
|
||||||
|
const isMobile2 = useMediaQuery("(max-width: 438px)")
|
||||||
|
const [dataRealTime, setDataRealtime] = useWibuRealtime({
|
||||||
|
WIBU_REALTIME_TOKEN: keyWibu,
|
||||||
|
project: "sdm"
|
||||||
|
})
|
||||||
|
|
||||||
|
const getData = async (loading: boolean) => {
|
||||||
|
try {
|
||||||
|
setIsLoad(loading)
|
||||||
|
const response = await funGetOneDiscussionGeneral(param.id, "?cat=detail")
|
||||||
|
if (response.success) {
|
||||||
|
setData(response.data)
|
||||||
|
} else {
|
||||||
|
toast.error(response.message)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
toast.error("Gagal mendapatkan data, coba lagi nanti")
|
||||||
|
} finally {
|
||||||
|
setIsLoad(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useShallowEffect(() => {
|
||||||
|
getData(true)
|
||||||
|
}, [refresh.get()])
|
||||||
|
|
||||||
|
// useShallowEffect(() => {
|
||||||
|
// if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-detail' && i.id == param.id)) {
|
||||||
|
// getData(false)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-delete' && i.id == param.id && i.user != isUser)) {
|
||||||
|
// toast.error("Data telah di hapus, anda akan beralih ke halaman list diskusi")
|
||||||
|
// setTimeout(() => {
|
||||||
|
// router.push(`/division/${param.id}/discussion`)
|
||||||
|
// }, 1000)
|
||||||
|
// }
|
||||||
|
// }, [dataRealTime])
|
||||||
|
|
||||||
|
async function getKomentar(loading: boolean) {
|
||||||
|
try {
|
||||||
|
setLoadingKomentar(loading)
|
||||||
|
const response = await funGetOneDiscussionGeneral(param.id, "?cat=komentar")
|
||||||
|
if (response.success) {
|
||||||
|
setData(response.data)
|
||||||
|
} else {
|
||||||
|
toast.error(response.message)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
} finally {
|
||||||
|
setLoadingKomentar(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// const sendComent = async () => {
|
||||||
|
// try {
|
||||||
|
// if (isComent.trim() == "") {
|
||||||
|
// return toast.error("Masukkan Komentar Anda")
|
||||||
|
// }
|
||||||
|
// const response = await funCreateComent(id, { comment: isComent, idDiscussion: param.detail })
|
||||||
|
|
||||||
|
// if (response.success) {
|
||||||
|
// setIsComent("")
|
||||||
|
// setDataRealtime([{
|
||||||
|
// category: "discussion-detail",
|
||||||
|
// id: id,
|
||||||
|
// }])
|
||||||
|
// reloadData()
|
||||||
|
// } else {
|
||||||
|
// toast.error(response.message)
|
||||||
|
// }
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error(error)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<LayoutNavbarNew back={`/discussion`} title="Diskusi"
|
||||||
|
menu={
|
||||||
|
((roleLogin.get() != 'user' && roleLogin.get() != 'coadmin') || adminLogin.get() || isCreator) ?
|
||||||
|
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
|
||||||
|
<HiMenu size={20} color='white' />
|
||||||
|
</ActionIcon>
|
||||||
|
: <></>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
|
||||||
|
<DrawerDetailDiscussionGeneral onSuccess={(val) => setOpenDrawer(false)} id={param.id} status={Number(isData?.status)} />
|
||||||
|
</LayoutDrawer>
|
||||||
|
|
||||||
|
|
||||||
|
<Box p={20}>
|
||||||
|
{isLoad ?
|
||||||
|
Array(1)
|
||||||
|
.fill(null)
|
||||||
|
.map((_, i) => (
|
||||||
|
<Box key={i} pl={5} pr={5}>
|
||||||
|
<Box>
|
||||||
|
<Flex
|
||||||
|
justify={"space-between"}
|
||||||
|
align={"center"}
|
||||||
|
|
||||||
|
>
|
||||||
|
<Group>
|
||||||
|
<Skeleton width={60} height={60} radius={100} />
|
||||||
|
<Box>
|
||||||
|
<Skeleton width={80} height={20} radius={"md"} />
|
||||||
|
<Skeleton mt={8} width={60} height={20} radius={"md"} />
|
||||||
|
</Box>
|
||||||
|
</Group>
|
||||||
|
<Skeleton width={"20%"} height={20} radius={"md"} />
|
||||||
|
</Flex>
|
||||||
|
<Box mt={10}>
|
||||||
|
<Skeleton width={"100%"} height={100} radius={"md"} />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)) :
|
||||||
|
<>
|
||||||
|
{isDataKomentar?.length == 0 ?
|
||||||
|
<Box mb={60} pl={5} pr={5}>
|
||||||
|
<Grid align='center'>
|
||||||
|
<Grid.Col span={1}>
|
||||||
|
<ActionIcon
|
||||||
|
variant="gradient"
|
||||||
|
size={50}
|
||||||
|
aria-label="Gradient action icon"
|
||||||
|
radius={100}
|
||||||
|
bg={tema.get().bgFiturHome}
|
||||||
|
>
|
||||||
|
<BiSolidCommentDetail size={25} color={tema.get().utama} />
|
||||||
|
</ActionIcon>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={8}>
|
||||||
|
<Box pl={isMobile2 ? 40 : 30}>
|
||||||
|
<Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.title}</Text>
|
||||||
|
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
|
||||||
|
</Box>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={3}>
|
||||||
|
<Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
|
||||||
|
{isData?.createdAt}
|
||||||
|
</Text>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
<Box mt={10}>
|
||||||
|
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
overflowWrap: "break-word"
|
||||||
|
}}
|
||||||
|
fw={"bold"}
|
||||||
|
>
|
||||||
|
{isData?.desc}
|
||||||
|
</Text>
|
||||||
|
</Spoiler>
|
||||||
|
</Box>
|
||||||
|
<Group justify="space-between" mt={30} c={'#8C8C8C'}>
|
||||||
|
{isDataKomentar?.length ? <Group gap={5} align="center">
|
||||||
|
<GrChatOption size={18} />
|
||||||
|
<Text fz={13}>{isDataKomentar?.length} Komentar</Text>
|
||||||
|
</Group > : ""}
|
||||||
|
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
:
|
||||||
|
<Box mb={20}>
|
||||||
|
<Grid align='center'>
|
||||||
|
<Grid.Col span={1}>
|
||||||
|
<ActionIcon
|
||||||
|
variant="gradient"
|
||||||
|
size={50}
|
||||||
|
aria-label="Gradient action icon"
|
||||||
|
radius={100}
|
||||||
|
bg={tema.get().bgFiturHome}
|
||||||
|
>
|
||||||
|
<BiSolidCommentDetail size={25} color={tema.get().utama} />
|
||||||
|
</ActionIcon>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={8}>
|
||||||
|
<Box pl={isMobile2 ? 40 : 30}>
|
||||||
|
<Text lineClamp={1} fz={isMobile ? 15 : 16}>{isData?.title}</Text>
|
||||||
|
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
|
||||||
|
</Box>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={3}>
|
||||||
|
<Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
|
||||||
|
{isData?.createdAt}
|
||||||
|
</Text>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
<Box mt={10}>
|
||||||
|
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
overflowWrap: "break-word"
|
||||||
|
}}
|
||||||
|
fw={"bold"}
|
||||||
|
>
|
||||||
|
{isData?.desc}
|
||||||
|
</Text>
|
||||||
|
</Spoiler>
|
||||||
|
</Box>
|
||||||
|
<Group justify="space-between" mt={30} c={'#8C8C8C'}>
|
||||||
|
{isDataKomentar?.length ? <Group gap={5} align="center">
|
||||||
|
<GrChatOption size={18} />
|
||||||
|
<Text fz={13}>{isDataKomentar.length} Komentar</Text>
|
||||||
|
</Group > : ""}
|
||||||
|
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
<Box pl={10} pr={10} mb={60}>
|
||||||
|
{isLoad ?
|
||||||
|
Array(2)
|
||||||
|
.fill(0)
|
||||||
|
.map((_, i) => (
|
||||||
|
<Box key={i} p={10}>
|
||||||
|
<Box>
|
||||||
|
<Flex
|
||||||
|
justify={"space-between"}
|
||||||
|
align={"center"}
|
||||||
|
mt={20}
|
||||||
|
>
|
||||||
|
<Group>
|
||||||
|
<Skeleton width={40} height={40} radius={100} />
|
||||||
|
<Box>
|
||||||
|
<Skeleton width={60} height={20} radius={"md"} />
|
||||||
|
</Box>
|
||||||
|
</Group>
|
||||||
|
<Skeleton width={"50%"} height={20} radius={"md"} />
|
||||||
|
</Flex>
|
||||||
|
<Box mt={10}>
|
||||||
|
<Skeleton width={"100%"} height={50} radius={"md"} />
|
||||||
|
</Box>
|
||||||
|
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
|
||||||
|
<Skeleton width={"30%"} height={20} radius={"md"} />
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box mt={20}>
|
||||||
|
<Skeleton width={"100%"} height={1} radius={"md"} />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)) :
|
||||||
|
isDataKomentar.map((v, i) => {
|
||||||
|
return (
|
||||||
|
<Box key={i} p={10} >
|
||||||
|
<Grid align="center">
|
||||||
|
<Grid.Col span={1}>
|
||||||
|
<Avatar alt="it's me" size="md" src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} />
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={8}>
|
||||||
|
<Box>
|
||||||
|
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} pl={isMobile2 ? 25 : 15} fz={isMobile ? 15 : 16}>
|
||||||
|
{v.username}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={3}>
|
||||||
|
<Text c={"grey"} ta={"end"} fz={13}>{moment(v.createdAt).format("ll")}</Text>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
<Box mt={10}>
|
||||||
|
<Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
overflowWrap: "break-word"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{v.comment}
|
||||||
|
</Text>
|
||||||
|
</Spoiler>
|
||||||
|
</Box>
|
||||||
|
<Box mt={20}>
|
||||||
|
<Divider size={"xs"} />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
{isLoad ?
|
||||||
|
<Skeleton width={"100%"} height={50} radius={100} />
|
||||||
|
:
|
||||||
|
<Box pos={'fixed'} bottom={0} w={"100%"} style={{
|
||||||
|
maxWidth: rem(550)
|
||||||
|
}} pl={rem(15)} pr={rem(15)} bg={tema.get().bgUtama}>
|
||||||
|
<Box bg={tema.get().bgUtama} >
|
||||||
|
<Group justify="flex-end">
|
||||||
|
<Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
|
||||||
|
</Group>
|
||||||
|
<Box mb={20} bg={tema.get().bgUtama}>
|
||||||
|
<Grid bg={"white"} style={{
|
||||||
|
border: '1px solid gray',
|
||||||
|
borderRadius: 40
|
||||||
|
}} justify="center" align="center">
|
||||||
|
<Grid.Col span={10}>
|
||||||
|
<TextInput
|
||||||
|
styles={{
|
||||||
|
input: {
|
||||||
|
color: tema.get().utama,
|
||||||
|
border: "none",
|
||||||
|
backgroundColor: "transparent"
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
size="md"
|
||||||
|
placeholder="Kirim Komentar"
|
||||||
|
disabled={(isData?.status === 2 || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}
|
||||||
|
onChange={(e) => setIsComent(e.target.value)}
|
||||||
|
value={isComent}
|
||||||
|
maxLength={300}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={2}>
|
||||||
|
<Center>
|
||||||
|
<ActionIcon
|
||||||
|
// onClick={sendComent}
|
||||||
|
variant="subtle" aria-label="submit" disabled={(isData?.status === 2 || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}>
|
||||||
|
<VscSend size={30} />
|
||||||
|
</ActionIcon>
|
||||||
|
</Center>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,163 @@
|
|||||||
|
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 { useParams, useRouter } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { BsTrash3 } from "react-icons/bs";
|
||||||
|
import { FaCheck, FaPencil, FaUsers } from "react-icons/fa6";
|
||||||
|
import { MdClose } from "react-icons/md";
|
||||||
|
import { useWibuRealtime } from "wibu-realtime";
|
||||||
|
import { globalRefreshDiscussionGeneral } from "../lib/val_discussion_general";
|
||||||
|
|
||||||
|
export default function DrawerDetailDiscussionGeneral({ onSuccess, id, status }: { onSuccess: (val: boolean) => void, id: string, status: number }) {
|
||||||
|
const [isValModal, setValModal] = useState(false)
|
||||||
|
const [isValModalStatus, setValModalStatus] = useState(false)
|
||||||
|
const router = useRouter()
|
||||||
|
const param = useParams<{ id: string, detail: string }>()
|
||||||
|
const refresh = useHookstate(globalRefreshDiscussionGeneral)
|
||||||
|
const tema = useHookstate(TEMA)
|
||||||
|
const [dataRealTime, setDataRealtime] = useWibuRealtime({
|
||||||
|
WIBU_REALTIME_TOKEN: keyWibu,
|
||||||
|
project: "sdm"
|
||||||
|
})
|
||||||
|
const [loadingUpdate, setLoadingUpdate] = useState(false)
|
||||||
|
const [loadingDelete, setLoadingDelete] = useState(false)
|
||||||
|
|
||||||
|
|
||||||
|
// async function fetchStatusDiscussion(val: boolean) {
|
||||||
|
// try {
|
||||||
|
// setLoadingUpdate(true)
|
||||||
|
// if (val) {
|
||||||
|
// const response = await funEditStatusDiscussion(id, { status: status })
|
||||||
|
// if (response.success) {
|
||||||
|
// toast.success(response.message)
|
||||||
|
// refresh.set(!refresh.get())
|
||||||
|
// setDataRealtime([{
|
||||||
|
// category: "discussion-detail",
|
||||||
|
// id: id,
|
||||||
|
// }])
|
||||||
|
// onSuccess(false)
|
||||||
|
// } else {
|
||||||
|
// toast.error(response.message)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error(error);
|
||||||
|
// toast.error("Gagal menambahkan diskusi, coba lagi nanti");
|
||||||
|
// } finally {
|
||||||
|
// setLoadingUpdate(false)
|
||||||
|
// setValModalStatus(false)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// async function fetchDeleteDiscussion(val: boolean) {
|
||||||
|
// try {
|
||||||
|
// if (val) {
|
||||||
|
// setLoadingDelete(true)
|
||||||
|
// const response = await funDeleteDiscussion(id)
|
||||||
|
// if (response.success) {
|
||||||
|
// setDataRealtime([
|
||||||
|
// {
|
||||||
|
// category: "discussion-delete",
|
||||||
|
// id: id,
|
||||||
|
// user: response.user
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// category: "division/" + param.id + "/discussion",
|
||||||
|
// }
|
||||||
|
// ])
|
||||||
|
// toast.success(response.message)
|
||||||
|
// onSuccess(false)
|
||||||
|
// router.push(`/division/${param.id}/discussion`)
|
||||||
|
// } else {
|
||||||
|
// toast.error(response.message)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error(error);
|
||||||
|
// toast.error("Gagal hapus diskusi, coba lagi nanti");
|
||||||
|
// } finally {
|
||||||
|
// setLoadingDelete(false)
|
||||||
|
// setValModal(false)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<Stack pt={10}>
|
||||||
|
<SimpleGrid
|
||||||
|
cols={{ base: 3, sm: 3, lg: 3 }}
|
||||||
|
spacing={{ base: 'xl', sm: 'xl' }}
|
||||||
|
verticalSpacing={{ base: 'xl', sm: 'xl' }}
|
||||||
|
>
|
||||||
|
|
||||||
|
<Flex onClick={() => window.location.href = `/discussion/${param.id}/member/`} justify={'center'} align={'center'} direction={'column'} >
|
||||||
|
<Box>
|
||||||
|
<FaUsers size={30} color={tema.get().utama} />
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={tema.get().utama}>Anggota</Text>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Flex onClick={() => window.location.href = `/discussion/${param.id}/update/`} justify={'center'} align={'center'} direction={'column'} >
|
||||||
|
<Box>
|
||||||
|
<FaPencil size={30} color={tema.get().utama} />
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={tema.get().utama}>Edit</Text>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setValModalStatus(true)} >
|
||||||
|
{status === 1 ? (
|
||||||
|
<>
|
||||||
|
<Flex justify={'center'} align={'center'} direction={'column'}>
|
||||||
|
<Box>
|
||||||
|
<MdClose size={30} color={tema.get().utama} />
|
||||||
|
</Box>
|
||||||
|
<Text style={{ color: tema.get().utama }}>Tutup Diskusi</Text>
|
||||||
|
</Flex>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Flex justify={'center'} align={'center'} direction={'column'}>
|
||||||
|
|
||||||
|
<Box>
|
||||||
|
<FaCheck size={30} color={tema.get().utama} />
|
||||||
|
</Box>
|
||||||
|
<Text style={{ color: tema.get().utama }}>Buka Diskusi</Text>
|
||||||
|
</Flex>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Flex onClick={() => setValModal(true)} justify={'center'} align={'center'} direction={'column'} >
|
||||||
|
<Box>
|
||||||
|
<BsTrash3 size={30} color={tema.get().utama} />
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={tema.get().utama}>Hapus</Text>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
</SimpleGrid>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<LayoutModal loading={loadingDelete} opened={isValModal} onClose={() => setValModal(false)}
|
||||||
|
description="Apakah Anda yakin ingin menghapus diskusi ini?"
|
||||||
|
onYes={(val) => {
|
||||||
|
// fetchDeleteDiscussion(val)
|
||||||
|
}} />
|
||||||
|
|
||||||
|
|
||||||
|
<LayoutModal loading={loadingUpdate} opened={isValModalStatus} onClose={() => setValModalStatus(false)}
|
||||||
|
description="Apakah Anda yakin ingin mengubah status diskusi ini?"
|
||||||
|
onYes={(val) => {
|
||||||
|
// fetchStatusDiscussion(val)
|
||||||
|
}} />
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,23 +1,22 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import { currentScroll, globalNotifPage, keyWibu, ReloadButtonTop, TEMA } from "@/module/_global";
|
import { currentScroll, globalNotifPage, keyWibu, ReloadButtonTop, TEMA } from "@/module/_global";
|
||||||
import { useHookstate } from "@hookstate/core";
|
import { useHookstate } from "@hookstate/core";
|
||||||
import { ActionIcon, Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
|
import { ActionIcon, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
|
||||||
import { useShallowEffect } from "@mantine/hooks";
|
import { useShallowEffect } from "@mantine/hooks";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import { useParams, useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import toast from "react-hot-toast";
|
import toast from "react-hot-toast";
|
||||||
|
import { BiSolidCommentDetail } from "react-icons/bi";
|
||||||
import { GrChatOption } from "react-icons/gr";
|
import { GrChatOption } from "react-icons/gr";
|
||||||
import { HiMagnifyingGlass } from "react-icons/hi2";
|
import { HiMagnifyingGlass } from "react-icons/hi2";
|
||||||
import { useWibuRealtime } from "wibu-realtime";
|
import { useWibuRealtime } from "wibu-realtime";
|
||||||
import { funGetAllDiscussionGeneral } from "../lib/api_discussion_general";
|
import { funGetAllDiscussionGeneral } from "../lib/api_discussion_general";
|
||||||
import { BiSolidCommentDetail } from "react-icons/bi";
|
|
||||||
|
|
||||||
|
|
||||||
export default function ListDiscussionGeneral() {
|
export default function ListDiscussionGeneral() {
|
||||||
const [isData, setData] = useState<any[]>([])
|
const [isData, setData] = useState<any[]>([])
|
||||||
const [searchQuery, setSearchQuery] = useState('')
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
const param = useParams<{ id: string }>()
|
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const tema = useHookstate(TEMA)
|
const tema = useHookstate(TEMA)
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@@ -229,7 +228,7 @@ export default function ListDiscussionGeneral() {
|
|||||||
overflowWrap: "break-word"
|
overflowWrap: "break-word"
|
||||||
}}
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
router.push(`/division/${param.id}/discussion/${v.id}`)
|
router.push(`/discussion/${v.id}`)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{v.desc}
|
{v.desc}
|
||||||
|
|||||||
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