Merge pull request #369 from bipproduction/amalia/08-jan-25
rev: diskusi umum
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
import { AddMemberDiscussionGeneral } from "@/module/discussion_general";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<AddMemberDiscussionGeneral />
|
||||
</>
|
||||
)
|
||||
}
|
||||
14
src/app/(application)/discussion/[id]/edit/page.tsx
Normal file
14
src/app/(application)/discussion/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { LayoutNavbarNew } from "@/module/_global";
|
||||
import { FormEditDiscussionGeneral } from "@/module/discussion_general";
|
||||
import { Box } from "@mantine/core";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<LayoutNavbarNew back="" title="Edit Diskusi Umum" menu={<></>} />
|
||||
<FormEditDiscussionGeneral />
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
46
src/app/api/discussion-general/[id]/comment/route.ts
Normal file
46
src/app/api/discussion-general/[id]/comment/route.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { prisma } from "@/module/_global";
|
||||
import { funGetUserByCookies } from "@/module/auth";
|
||||
import { createLogUser } from "@/module/user";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
|
||||
// KIRIM KOMENTAR DISKUSI UMUM
|
||||
export async function POST(request: Request, context: { params: { id: string } }) {
|
||||
try {
|
||||
const { id } = context.params
|
||||
const { desc } = (await request.json());
|
||||
|
||||
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 menambahkan komentar, data tidak ditemukan" }, { status: 404 });
|
||||
}
|
||||
|
||||
|
||||
const data = await prisma.discussionComment.create({
|
||||
data: {
|
||||
comment: desc,
|
||||
idDiscussion: id,
|
||||
idUser: user.id
|
||||
}
|
||||
})
|
||||
|
||||
// create log user
|
||||
const log = await createLogUser({ act: 'CREATE', desc: 'User menambah komentar pada diskusi umum', table: 'discussionComment', data: data.id })
|
||||
return NextResponse.json({ success: true, message: "Berhasil menambah komentar" }, { status: 200 });
|
||||
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return NextResponse.json({ success: false, message: "Gagal menambahkan komentar, coba lagi nanti (error: 500)" })
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,12 @@
|
||||
import { prisma } from "@/module/_global";
|
||||
import { funGetUserByCookies } from "@/module/auth";
|
||||
import { createLogUser } from "@/module/user";
|
||||
import _ from "lodash";
|
||||
import moment from "moment";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
|
||||
// GET ONE DETAIL DISKUSI UMUM
|
||||
export async function GET(request: Request, context: { params: { id: string } }) {
|
||||
try {
|
||||
let dataFix
|
||||
@@ -36,6 +39,7 @@ export async function GET(request: Request, context: { params: { id: string } })
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
idGroup: true,
|
||||
desc: true,
|
||||
status: true,
|
||||
createdAt: true,
|
||||
@@ -44,6 +48,7 @@ export async function GET(request: Request, context: { params: { id: string } })
|
||||
|
||||
dataFix = {
|
||||
id: data?.id,
|
||||
idGroup:data?.idGroup,
|
||||
title: data?.title,
|
||||
desc: data?.desc,
|
||||
status: data?.status,
|
||||
@@ -72,7 +77,7 @@ export async function GET(request: Request, context: { params: { id: string } })
|
||||
|
||||
dataFix = data.map((v: any) => ({
|
||||
..._.omit(v, ["createdAt", "User",]),
|
||||
createdAt: moment(v.createdAt).format("ll"),
|
||||
createdAt: moment(v.createdAt).format("lll"),
|
||||
username: v.User.name,
|
||||
img: v.User.img
|
||||
}))
|
||||
@@ -99,6 +104,20 @@ export async function GET(request: Request, context: { params: { id: string } })
|
||||
name: v.User.name,
|
||||
img: v.User.img
|
||||
}))
|
||||
} else if (kategori == "cek-anggota") {
|
||||
const cek = await prisma.discussionMember.count({
|
||||
where: {
|
||||
idDiscussion: id,
|
||||
isActive: true,
|
||||
idUser: user.id
|
||||
}
|
||||
})
|
||||
|
||||
if (cek > 0) {
|
||||
dataFix = true
|
||||
} else {
|
||||
dataFix = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -109,4 +128,136 @@ export async function GET(request: Request, context: { params: { id: string } })
|
||||
console.error(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan diskusi, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// OPEN OR CLOSE DISKUSI UMUM
|
||||
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 { status } = (await request.json());
|
||||
let newStatus;
|
||||
if (status === 1) {
|
||||
newStatus = 2;
|
||||
} else if (status === 2) {
|
||||
newStatus = 1;
|
||||
} else {
|
||||
return NextResponse.json({ success: false, message: "Invalid status" }, { status: 400 });
|
||||
}
|
||||
|
||||
const data = await prisma.discussion.count({
|
||||
where: {
|
||||
id: id
|
||||
},
|
||||
});
|
||||
|
||||
if (data == 0) {
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan diskusi, data tidak ditemukan" }, { status: 404 });
|
||||
}
|
||||
|
||||
const result = await prisma.discussion.update({
|
||||
where: {
|
||||
id
|
||||
},
|
||||
data: {
|
||||
status: newStatus
|
||||
}
|
||||
});
|
||||
|
||||
// create log user
|
||||
const log = await createLogUser({ act: 'UPDATE', desc: 'User mengupdate status diskusi umum', table: 'discussion', data: id })
|
||||
|
||||
return NextResponse.json({ success: true, message: "Berhasil mengedit diskusi umum" }, { status: 200 });
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal mengedit diskusi umum, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// DELETE DISCUSSION
|
||||
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 cek = await prisma.discussion.count({
|
||||
where: {
|
||||
id: id
|
||||
},
|
||||
});
|
||||
|
||||
if (cek == 0) {
|
||||
return NextResponse.json({ success: false, message: "Gagal menghapus diskusi umum, data tidak ditemukan" }, { status: 404 });
|
||||
}
|
||||
|
||||
|
||||
const data = await prisma.discussion.update({
|
||||
where: {
|
||||
id
|
||||
},
|
||||
data: {
|
||||
isActive: false
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// create log user
|
||||
const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus data diskusi umum', table: 'disscussion', data: id })
|
||||
return NextResponse.json({ success: true, message: "Berhasil menghapus diskusi umum", user: user.id }, { status: 200 });
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal menghapus diskusi umum, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// EDIT DISCUSSION
|
||||
export async function PUT(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 { title, desc } = (await request.json());
|
||||
|
||||
const data = await prisma.discussion.count({
|
||||
where: {
|
||||
id: id
|
||||
},
|
||||
});
|
||||
|
||||
if (data == 0) {
|
||||
return NextResponse.json({ success: false, message: "Gagal mengedit diskusi umum, data tidak ditemukan" }, { status: 404 });
|
||||
}
|
||||
|
||||
const update = await prisma.discussion.update({
|
||||
where: {
|
||||
id
|
||||
},
|
||||
data: {
|
||||
desc,
|
||||
title
|
||||
}
|
||||
});
|
||||
|
||||
// create log user
|
||||
const log = await createLogUser({ act: 'UPDATE', desc: 'User mengupdate data diskusi umum', table: 'discussion', data: id })
|
||||
return NextResponse.json({ success: true, message: "Berhasil mengedit diskusi umum" }, { status: 200 });
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal mengedit diskusi umum, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { createLogUser } from "@/module/user";
|
||||
import _ from "lodash";
|
||||
import moment from "moment";
|
||||
import { NextResponse } from "next/server";
|
||||
import "moment/locale/id";
|
||||
|
||||
|
||||
|
||||
@@ -82,9 +83,15 @@ export async function GET(request: Request) {
|
||||
mode: "insensitive"
|
||||
},
|
||||
},
|
||||
orderBy: {
|
||||
status: 'desc'
|
||||
},
|
||||
orderBy: [
|
||||
{
|
||||
status: 'desc'
|
||||
},
|
||||
{
|
||||
createdAt: 'desc'
|
||||
}
|
||||
],
|
||||
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import AddMemberDiscussionGeneral from "./ui/add_member";
|
||||
import FormCreateDiscussionGeneral from "./ui/create_discussion";
|
||||
import DetailDiscussionGeneral from "./ui/detail_discussion_general";
|
||||
import FormEditDiscussionGeneral from "./ui/edit_discussion_general";
|
||||
import ListDiscussionGeneral from "./ui/list_discussion";
|
||||
import MemberDiscussionGeneral from "./ui/member_discussion_general";
|
||||
import NavbarDiscussionGeneral from "./ui/navbar_discussion";
|
||||
@@ -8,4 +10,6 @@ export { ListDiscussionGeneral }
|
||||
export { NavbarDiscussionGeneral }
|
||||
export { FormCreateDiscussionGeneral }
|
||||
export { DetailDiscussionGeneral }
|
||||
export { MemberDiscussionGeneral }
|
||||
export { MemberDiscussionGeneral }
|
||||
export { FormEditDiscussionGeneral }
|
||||
export { AddMemberDiscussionGeneral }
|
||||
@@ -20,3 +20,72 @@ 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);
|
||||
}
|
||||
|
||||
export const funCreateComentDiscussionGeneral = async (path: string, data: { desc: string }) => {
|
||||
const response = await fetch(`/api/discussion-general/${path}/comment`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export const funEditStatusDiscussionGeneral = async (path: string, data: { status: number }) => {
|
||||
const response = await fetch(`/api/discussion-general/${path}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
|
||||
|
||||
export const funEditDiscussionGeneral = async (path: string, data: { title: string, desc: string }) => {
|
||||
const response = await fetch(`/api/discussion-general/${path}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
|
||||
|
||||
export const funDeleteDiscussionGeneral = async (path: string) => {
|
||||
const response = await fetch(`/api/discussion-general/${path}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
|
||||
export const funAddMemberDiscussionGeneral = async (path: string, data: { member: IFormMemberDisscussionGeneral[] }) => {
|
||||
const response = await fetch(`/api/discussion-general/${path}/member`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
|
||||
|
||||
export const funDelMemberDiscussionGeneral = async (path: string, data: { idUser: string }) => {
|
||||
const response = await fetch(`/api/discussion-general/${path}/member`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
@@ -19,4 +19,4 @@ export interface IFormMemberDisscussionGeneral {
|
||||
idUser: string
|
||||
img: string
|
||||
username: string
|
||||
}
|
||||
}
|
||||
|
||||
293
src/module/discussion_general/ui/add_member.tsx
Normal file
293
src/module/discussion_general/ui/add_member.tsx
Normal file
@@ -0,0 +1,293 @@
|
||||
"use client"
|
||||
import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
|
||||
import LayoutModal from '@/module/_global/layout/layout_modal';
|
||||
import { funGetUserByCookies } from '@/module/auth';
|
||||
import { funGetAllmember, TypeUser } from '@/module/user';
|
||||
import { useHookstate } from '@hookstate/core';
|
||||
import { Carousel } from '@mantine/carousel';
|
||||
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, rem, Stack, Text, TextInput } 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 { FaCheck } from 'react-icons/fa6';
|
||||
import { HiMagnifyingGlass } from 'react-icons/hi2';
|
||||
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
|
||||
import { funAddMemberDiscussionGeneral, funGetOneDiscussionGeneral } from '../lib/api_discussion_general';
|
||||
import { IFormMemberDisscussionGeneral } from '../lib/type_discussion_general';
|
||||
|
||||
|
||||
|
||||
export default function AddMemberDiscussionGeneral() {
|
||||
const router = useRouter()
|
||||
const [selectedFiles, setSelectedFiles] = useState<IFormMemberDisscussionGeneral[]>([]);
|
||||
const [dataMember, setDataMember] = useState<TypeUser>([])
|
||||
const [memberDb, setMemberDb] = useState<any[]>([])
|
||||
const [group, setGroup] = useState("")
|
||||
const [isOpen, setOpen] = useState(false)
|
||||
const param = useParams<{ id: string }>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [onClickSearch, setOnClickSearch] = useState(false)
|
||||
const tema = useHookstate(TEMA)
|
||||
const isMobile2 = useMediaQuery("(max-width: 438px)")
|
||||
const [loadingModal, setLoadingModal] = useState(false)
|
||||
|
||||
const handleFileClick = (index: number) => {
|
||||
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
|
||||
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != dataMember[index].id))
|
||||
} else {
|
||||
setSelectedFiles([...selectedFiles, { idUser: dataMember[index].id, name: dataMember[index].name, img: dataMember[index].img }])
|
||||
}
|
||||
};
|
||||
|
||||
function handleXMember(id: number) {
|
||||
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id))
|
||||
}
|
||||
|
||||
|
||||
async function loadMember(group: string, search: string) {
|
||||
try {
|
||||
setLoading(true)
|
||||
const res = await funGetAllmember('?active=true&group=' + group + '&search=' + search);
|
||||
const user = await funGetUserByCookies();
|
||||
|
||||
if (res.success) {
|
||||
// const dariUserLogin = res.data.filter((i: any) => i.id != user.id)
|
||||
// const fixListUser = dariUserLogin.filter((i: any) => i.idUserRole == 'coadmin' || i.idUserRole == 'user')
|
||||
const fixListUser = res.data.filter((i: any) => i.idUserRole != 'supadmin')
|
||||
setDataMember(fixListUser)
|
||||
} else {
|
||||
toast.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.error("Gagal memuat data, coba lagi nanti")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function loadFirst() {
|
||||
const respon = await funGetOneDiscussionGeneral(param.id, '?cat=detail');
|
||||
const respon2 = await funGetOneDiscussionGeneral(param.id, '?cat=anggota');
|
||||
if (respon.success) {
|
||||
setGroup(respon.data.idGroup)
|
||||
setMemberDb(respon2.data)
|
||||
loadMember(respon.data.idGroup, "")
|
||||
} else {
|
||||
toast.error(respon.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function addMember() {
|
||||
try {
|
||||
setLoadingModal(true)
|
||||
const res = await funAddMemberDiscussionGeneral(param.id, { member: selectedFiles })
|
||||
if (res.success) {
|
||||
toast.success(res.message)
|
||||
router.push("/discussion/" + param.id + "/member")
|
||||
} else {
|
||||
toast.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal menambahkan anggota diskusi umum, coba lagi nanti");
|
||||
} finally {
|
||||
setLoadingModal(false)
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
function onCheck() {
|
||||
if (selectedFiles.length == 0) {
|
||||
return toast.error("Error! silahkan pilih anggota")
|
||||
}
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
loadFirst()
|
||||
}, []);
|
||||
|
||||
const handleSearchClick = () => {
|
||||
setOnClickSearch(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOnClickSearch(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<LayoutNavbarNew back={`/division/info/${param.id}`} title="tambah anggota"
|
||||
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
|
||||
<HiMagnifyingGlass size={20} color='white' />
|
||||
</ActionIcon>}
|
||||
/>
|
||||
{onClickSearch
|
||||
? (
|
||||
<Box
|
||||
pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
|
||||
maxWidth: rem(550),
|
||||
zIndex: 9999,
|
||||
backgroundColor: `${tema.get().utama}`,
|
||||
borderBottomLeftRadius: 20,
|
||||
borderBottomRightRadius: 20,
|
||||
}}>
|
||||
<Grid justify='center' align='center' gutter={'lg'}>
|
||||
<Grid.Col span={1}>
|
||||
<ActionIcon onClick={handleClose} variant="subtle" color='white' size="lg" mt={5} radius="lg" aria-label="search">
|
||||
<IoArrowBackOutline size={30} />
|
||||
</ActionIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={11}>
|
||||
<TextInput
|
||||
styles={{
|
||||
input: {
|
||||
color: "white",
|
||||
borderRadius: '#A3A3A3',
|
||||
borderColor: `${tema.get().utama}`,
|
||||
backgroundColor: `${tema.get().utama}`,
|
||||
},
|
||||
}}
|
||||
size="md"
|
||||
radius={30}
|
||||
placeholder="Pencarian"
|
||||
onChange={(e: any) => loadMember(group, e.target.value)}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
)
|
||||
: null
|
||||
}
|
||||
<Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
|
||||
maxWidth: rem(550),
|
||||
zIndex: 100,
|
||||
backgroundColor: `${tema.get().bgUtama}`,
|
||||
borderBottom: `1px solid ${"#E0DFDF"}`
|
||||
}}>
|
||||
{selectedFiles.length > 0 ? (
|
||||
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withControls={false}>
|
||||
{selectedFiles.map((v: any, i: any) => {
|
||||
return (
|
||||
<Carousel.Slide key={i}>
|
||||
<Box w={{
|
||||
base: 70,
|
||||
xl: 70
|
||||
}}
|
||||
onClick={() => { handleXMember(v.idUser) }}
|
||||
>
|
||||
<Center>
|
||||
<Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
|
||||
<Avatar style={{
|
||||
border: `2px solid ${tema.get().utama}`
|
||||
}} src={`https://wibu-storage.wibudev.com/api/files/${v.img}-size-100`} alt="it's me" size="lg" />
|
||||
</Indicator>
|
||||
</Center>
|
||||
<Text ta={"center"} lineClamp={1}>{v.name}</Text>
|
||||
</Box>
|
||||
</Carousel.Slide>
|
||||
)
|
||||
})}
|
||||
</Carousel>
|
||||
) : (
|
||||
<Box h={rem(81)}>
|
||||
<Flex justify={"center"} align={'center'} h={"100%"}>
|
||||
<Text ta={'center'} fz={14}>Tidak ada anggota yang dipilih</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box p={20}>
|
||||
{loading ?
|
||||
Array(8)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<Box key={i}>
|
||||
<SkeletonList />
|
||||
</Box>
|
||||
))
|
||||
:
|
||||
(dataMember.length === 0) ?
|
||||
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
|
||||
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
|
||||
</Stack>
|
||||
:
|
||||
<Box pt={90} mb={100}>
|
||||
{dataMember.map((v: any, index: any) => {
|
||||
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id)
|
||||
const found = memberDb.some((i: any) => i.idUser == v.id)
|
||||
return (
|
||||
<Box my={10} key={index} onClick={() => (!found) ? handleFileClick(index) : null}>
|
||||
<Grid align='center' >
|
||||
<Grid.Col
|
||||
span={{
|
||||
base: 1,
|
||||
xs: 1,
|
||||
sm: 1,
|
||||
md: 1,
|
||||
lg: 1,
|
||||
xl: 1,
|
||||
}}
|
||||
>
|
||||
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}-size-100`} alt="it's me" size="lg" />
|
||||
</Grid.Col>
|
||||
<Grid.Col
|
||||
span={{
|
||||
base: 11,
|
||||
xs: 11,
|
||||
sm: 11,
|
||||
md: 11,
|
||||
lg: 11,
|
||||
xl: 11,
|
||||
}}
|
||||
>
|
||||
<Flex justify='space-between' align={"center"}>
|
||||
<Flex direction={'column'} align="flex-start" justify="flex-start">
|
||||
<Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.name}</Text>
|
||||
<Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{(found) ? "sudah menjadi anggota divisi" : ""}</Text>
|
||||
</Flex>
|
||||
{isSelected ? <FaCheck /> : null}
|
||||
</Flex>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Box mt={10}>
|
||||
<Divider size={"xs"} />
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
|
||||
maxWidth: rem(550),
|
||||
zIndex: 999,
|
||||
backgroundColor: `${tema.get().bgUtama}`,
|
||||
}}>
|
||||
<Button
|
||||
color="white"
|
||||
bg={tema.get().utama}
|
||||
size="lg"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={() => { onCheck() }}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Box>
|
||||
<LayoutModal loading={loadingModal} opened={isOpen} onClose={() => setOpen(false)}
|
||||
description="Apakah Anda yakin ingin menambahkan anggota diskusi umum?"
|
||||
onYes={(val) => {
|
||||
if (val) {
|
||||
addMember()
|
||||
} else {
|
||||
setOpen(false)
|
||||
}
|
||||
}} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
"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";
|
||||
@@ -9,15 +8,16 @@ import "moment/locale/id";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { BiSolidCommentDetail } from "react-icons/bi";
|
||||
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 { funCreateComentDiscussionGeneral, 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";
|
||||
import { funGetUserByCookies } from "@/module/auth";
|
||||
|
||||
export default function DetailDiscussionGeneral() {
|
||||
const [isData, setData] = useState<IDetailDiscussionGeneral>()
|
||||
@@ -25,15 +25,13 @@ export default function DetailDiscussionGeneral() {
|
||||
const [isComent, setIsComent] = useState("")
|
||||
const param = useParams<{ id: string }>()
|
||||
const [isLoad, setIsLoad] = useState(true)
|
||||
const [loadingKomentar, setLoadingKomentar] = useState(false)
|
||||
const [loadingKomentar, setLoadingKomentar] = useState(true)
|
||||
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 [memberDiscussion, setMemberDiscussion] = useState(false)
|
||||
const tema = useHookstate(TEMA)
|
||||
const router = useRouter()
|
||||
const [isUser, setUser] = useState('')
|
||||
const [openDrawer, setOpenDrawer] = useState(false)
|
||||
const isMobile = useMediaQuery('(max-width: 369px)')
|
||||
const isMobile2 = useMediaQuery("(max-width: 438px)")
|
||||
@@ -46,8 +44,12 @@ export default function DetailDiscussionGeneral() {
|
||||
try {
|
||||
setIsLoad(loading)
|
||||
const response = await funGetOneDiscussionGeneral(param.id, "?cat=detail")
|
||||
const cekAnggota = await funGetOneDiscussionGeneral(param.id, "?cat=cek-anggota")
|
||||
const userLogin = await funGetUserByCookies()
|
||||
if (response.success) {
|
||||
setData(response.data)
|
||||
setMemberDiscussion(cekAnggota.data)
|
||||
setUser(String(userLogin?.id))
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
@@ -63,25 +65,35 @@ export default function DetailDiscussionGeneral() {
|
||||
getData(true)
|
||||
}, [refresh.get()])
|
||||
|
||||
// useShallowEffect(() => {
|
||||
// if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-detail' && i.id == param.id)) {
|
||||
// getData(false)
|
||||
// }
|
||||
useShallowEffect(() => {
|
||||
getKomentar(true)
|
||||
}, [])
|
||||
|
||||
// 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])
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-general-detail' && i.id == param.id)) {
|
||||
getData(false)
|
||||
}
|
||||
|
||||
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-general-comment' && i.id == param.id)) {
|
||||
getKomentar(false)
|
||||
}
|
||||
|
||||
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'discussion-general-delete' && i.id == param.id && i.user != isUser)) {
|
||||
toast.error("Data telah di hapus, anda akan beralih ke halaman list diskusi umum")
|
||||
setTimeout(() => {
|
||||
router.push(`/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)
|
||||
setDataKomentar(response.data)
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
@@ -92,27 +104,26 @@ export default function DetailDiscussionGeneral() {
|
||||
}
|
||||
}
|
||||
|
||||
// const sendComent = async () => {
|
||||
// try {
|
||||
// if (isComent.trim() == "") {
|
||||
// return toast.error("Masukkan Komentar Anda")
|
||||
// }
|
||||
// const response = await funCreateComent(id, { comment: isComent, idDiscussion: param.detail })
|
||||
const sendComent = async () => {
|
||||
try {
|
||||
if (isComent.trim() == "") {
|
||||
return toast.error("Masukkan Komentar Anda")
|
||||
}
|
||||
const response = await funCreateComentDiscussionGeneral(param.id, { desc: isComent })
|
||||
|
||||
// if (response.success) {
|
||||
// setIsComent("")
|
||||
// setDataRealtime([{
|
||||
// category: "discussion-detail",
|
||||
// id: id,
|
||||
// }])
|
||||
// reloadData()
|
||||
// } else {
|
||||
// toast.error(response.message)
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error(error)
|
||||
// }
|
||||
// }
|
||||
if (response.success) {
|
||||
setIsComent("")
|
||||
setDataRealtime([{
|
||||
category: "discussion-general-comment",
|
||||
id: param.id,
|
||||
}])
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -122,11 +133,9 @@ export default function DetailDiscussionGeneral() {
|
||||
<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>
|
||||
: <></>
|
||||
<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)}>
|
||||
@@ -230,7 +239,7 @@ export default function DetailDiscussionGeneral() {
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<Text c={tema.get().utama} ta={'end'} fz={isMobile ? 15 : 16}>
|
||||
{isData?.createdAt}
|
||||
{moment(isData?.createdAt).format('ll')}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
@@ -258,7 +267,7 @@ export default function DetailDiscussionGeneral() {
|
||||
</>
|
||||
}
|
||||
<Box pl={10} pr={10} mb={60}>
|
||||
{isLoad ?
|
||||
{loadingKomentar ?
|
||||
Array(2)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
@@ -294,7 +303,7 @@ export default function DetailDiscussionGeneral() {
|
||||
<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}`} />
|
||||
<Avatar alt="it's me" size="md" src={`https://wibu-storage.wibudev.com/api/files/${v.img}-size-100`} />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Box>
|
||||
@@ -304,7 +313,7 @@ export default function DetailDiscussionGeneral() {
|
||||
</Box>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<Text c={"grey"} ta={"end"} fz={13}>{moment(v.createdAt).format("ll")}</Text>
|
||||
<Text c={"grey"} ta={"end"} fz={13}>{moment(v.createdAt).format('lll').replace('pukul', '')}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Box mt={10}>
|
||||
@@ -353,7 +362,7 @@ export default function DetailDiscussionGeneral() {
|
||||
}}
|
||||
size="md"
|
||||
placeholder="Kirim Komentar"
|
||||
disabled={(isData?.status === 2 || (!memberDivision.get() && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}
|
||||
disabled={(isData?.status === 2 || (!memberDiscussion && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}
|
||||
onChange={(e) => setIsComent(e.target.value)}
|
||||
value={isComent}
|
||||
maxLength={300}
|
||||
@@ -363,8 +372,8 @@ export default function DetailDiscussionGeneral() {
|
||||
<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")))}>
|
||||
onClick={sendComent}
|
||||
variant="subtle" aria-label="submit" disabled={(isData?.status === 2 || (!memberDiscussion && (roleLogin.get() == "user" || roleLogin.get() == "coadmin")))}>
|
||||
<VscSend size={30} />
|
||||
</ActionIcon>
|
||||
</Center>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { keyWibu, TEMA } from "@/module/_global";
|
||||
import { globalRole, 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";
|
||||
@@ -8,13 +8,16 @@ 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 { funDeleteDiscussionGeneral, funEditStatusDiscussionGeneral } from "../lib/api_discussion_general";
|
||||
import { globalRefreshDiscussionGeneral } from "../lib/val_discussion_general";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
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 roleLogin = useHookstate(globalRole)
|
||||
const refresh = useHookstate(globalRefreshDiscussionGeneral)
|
||||
const tema = useHookstate(TEMA)
|
||||
const [dataRealTime, setDataRealtime] = useWibuRealtime({
|
||||
@@ -25,63 +28,63 @@ export default function DrawerDetailDiscussionGeneral({ onSuccess, id, status }:
|
||||
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 fetchStatusDiscussion(val: boolean) {
|
||||
try {
|
||||
setLoadingUpdate(true)
|
||||
if (val) {
|
||||
const response = await funEditStatusDiscussionGeneral(id, { status: status })
|
||||
if (response.success) {
|
||||
toast.success(response.message)
|
||||
refresh.set(!refresh.get())
|
||||
setDataRealtime([{
|
||||
category: "discussion-general-detail",
|
||||
id: id,
|
||||
}])
|
||||
onSuccess(false)
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal mengupdate diskusi umum, 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)
|
||||
// }
|
||||
// }
|
||||
async function fetchDeleteDiscussion(val: boolean) {
|
||||
try {
|
||||
if (val) {
|
||||
setLoadingDelete(true)
|
||||
const response = await funDeleteDiscussionGeneral(id)
|
||||
if (response.success) {
|
||||
setDataRealtime([
|
||||
{
|
||||
category: "discussion-general-delete",
|
||||
id: id,
|
||||
user: response.user
|
||||
},
|
||||
{
|
||||
category: "discussion",
|
||||
}
|
||||
])
|
||||
toast.success(response.message)
|
||||
onSuccess(false)
|
||||
router.push(`/discussion`)
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal hapus diskusi umum, coba lagi nanti");
|
||||
} finally {
|
||||
setLoadingDelete(false)
|
||||
setValModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
@@ -102,46 +105,53 @@ export default function DrawerDetailDiscussionGeneral({ onSuccess, id, status }:
|
||||
</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 ? (
|
||||
{
|
||||
(roleLogin.get() != "user" && roleLogin.get() != "coadmin") ? (
|
||||
<>
|
||||
<Flex justify={'center'} align={'center'} direction={'column'}>
|
||||
<Flex onClick={() => window.location.href = `/discussion/${param.id}/edit/`} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<MdClose size={30} color={tema.get().utama} />
|
||||
<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>
|
||||
<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>
|
||||
@@ -149,14 +159,14 @@ export default function DrawerDetailDiscussionGeneral({ onSuccess, id, status }:
|
||||
<LayoutModal loading={loadingDelete} opened={isValModal} onClose={() => setValModal(false)}
|
||||
description="Apakah Anda yakin ingin menghapus diskusi ini?"
|
||||
onYes={(val) => {
|
||||
// fetchDeleteDiscussion(val)
|
||||
fetchDeleteDiscussion(val)
|
||||
}} />
|
||||
|
||||
|
||||
<LayoutModal loading={loadingUpdate} opened={isValModalStatus} onClose={() => setValModalStatus(false)}
|
||||
description="Apakah Anda yakin ingin mengubah status diskusi ini?"
|
||||
onYes={(val) => {
|
||||
// fetchStatusDiscussion(val)
|
||||
fetchStatusDiscussion(val)
|
||||
}} />
|
||||
</Box>
|
||||
)
|
||||
|
||||
208
src/module/discussion_general/ui/edit_discussion_general.tsx
Normal file
208
src/module/discussion_general/ui/edit_discussion_general.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
'use client'
|
||||
import { keyWibu, TEMA } from "@/module/_global"
|
||||
import LayoutModal from "@/module/_global/layout/layout_modal"
|
||||
import { useHookstate } from "@hookstate/core"
|
||||
import { Box, Button, rem, Skeleton, TextInput } from "@mantine/core"
|
||||
import { useShallowEffect } from "@mantine/hooks"
|
||||
import { useParams, useRouter } from "next/navigation"
|
||||
import { useState } from "react"
|
||||
import toast from "react-hot-toast"
|
||||
import { useWibuRealtime } from "wibu-realtime"
|
||||
import { funEditDiscussionGeneral, funGetOneDiscussionGeneral } from "../lib/api_discussion_general"
|
||||
|
||||
export default function FormEditDiscussionGeneral() {
|
||||
const [isValModal, setValModal] = useState(false)
|
||||
const [loadingModal, setLoadingModal] = useState(false)
|
||||
const router = useRouter()
|
||||
const param = useParams<{ id: string }>()
|
||||
const [isDesc, setDesc] = useState("")
|
||||
const [isTitle, setTitle] = useState("")
|
||||
const [loading, setLoading] = useState(true)
|
||||
const tema = useHookstate(TEMA)
|
||||
const [touched, setTouched] = useState({
|
||||
title: false,
|
||||
desc: false,
|
||||
});
|
||||
const [dataRealTime, setDataRealtime] = useWibuRealtime({
|
||||
WIBU_REALTIME_TOKEN: keyWibu,
|
||||
project: "sdm"
|
||||
})
|
||||
|
||||
async function fetchGetOneDiscussion() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await funGetOneDiscussionGeneral(param.id, '?cat=detail')
|
||||
setDesc(response.data.desc)
|
||||
setTitle(response.data.title)
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error("Gagal menampilkan diskusi, coba lagi nanti");
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchEditDiscussion() {
|
||||
try {
|
||||
setLoadingModal(true)
|
||||
const response = await funEditDiscussionGeneral(param.id, {
|
||||
title: isTitle,
|
||||
desc: isDesc
|
||||
})
|
||||
if (response.success) {
|
||||
toast.success(response.message)
|
||||
setValModal(false)
|
||||
setDataRealtime([{
|
||||
category: "discussion-general-detail",
|
||||
id: param.id,
|
||||
}])
|
||||
router.push(`/discussion/${param.id}`)
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setValModal(false)
|
||||
toast.error("Gagal mengubah diskusi umum, coba lagi nanti");
|
||||
} finally {
|
||||
setValModal(false)
|
||||
setLoadingModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
fetchGetOneDiscussion()
|
||||
}, [])
|
||||
|
||||
function onValidation(kategori: string, val: string) {
|
||||
if (kategori == 'title') {
|
||||
setTitle(val)
|
||||
if (val === "") {
|
||||
setTouched({ ...touched, title: true })
|
||||
} else {
|
||||
setTouched({ ...touched, title: false })
|
||||
}
|
||||
} else if (kategori == 'diskusi') {
|
||||
setDesc(val)
|
||||
if (val === "") {
|
||||
setTouched({ ...touched, desc: true })
|
||||
} else {
|
||||
setTouched({ ...touched, desc: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function onCheck() {
|
||||
const cek = checkAll()
|
||||
if (!cek)
|
||||
return false
|
||||
|
||||
setValModal(true)
|
||||
}
|
||||
|
||||
function checkAll() {
|
||||
let nilai = true
|
||||
if (isTitle === "") {
|
||||
setTouched(touched => ({ ...touched, title: true }))
|
||||
nilai = false
|
||||
}
|
||||
if (isDesc === "") {
|
||||
setTouched(touched => ({ ...touched, desc: true }))
|
||||
nilai = false
|
||||
}
|
||||
return nilai
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Box >
|
||||
<Box p={20}>
|
||||
<Box>
|
||||
{loading ?
|
||||
Array(2)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<Skeleton key={i} height={40} mt={20} radius={10} />
|
||||
))
|
||||
:
|
||||
<Box>
|
||||
<TextInput
|
||||
label="Judul"
|
||||
styles={{
|
||||
input: {
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
},
|
||||
}}
|
||||
mt={10}
|
||||
required withAsterisk
|
||||
placeholder="Judul"
|
||||
size="md"
|
||||
value={isTitle}
|
||||
onChange={(e) => { onValidation('title', e.target.value) }}
|
||||
error={
|
||||
touched.title && (
|
||||
isTitle == "" ? "Judul Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
<TextInput
|
||||
label="Diskusi"
|
||||
styles={{
|
||||
input: {
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
},
|
||||
}}
|
||||
mt={10}
|
||||
required withAsterisk
|
||||
placeholder="Hal yg akan didiskusikan"
|
||||
size="md"
|
||||
value={isDesc}
|
||||
onChange={(e) => { onValidation('diskusi', e.target.value) }}
|
||||
error={
|
||||
touched.desc && (
|
||||
isDesc == "" ? "Diskusi Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
|
||||
maxWidth: rem(550),
|
||||
zIndex: 999,
|
||||
backgroundColor: `${tema.get().bgUtama}`,
|
||||
}}>
|
||||
{loading ?
|
||||
<Skeleton height={50} radius={30} />
|
||||
:
|
||||
<Button
|
||||
color="white"
|
||||
bg={tema.get().utama}
|
||||
size="lg"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={() => { onCheck() }}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
}
|
||||
</Box>
|
||||
|
||||
<LayoutModal loading={loadingModal} opened={isValModal} onClose={() => setValModal(false)}
|
||||
description="Apakah Anda yakin ingin mengubah data?"
|
||||
onYes={(val) => {
|
||||
if (val) {
|
||||
fetchEditDiscussion()
|
||||
} else {
|
||||
setValModal(false)
|
||||
}
|
||||
}} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user