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

upd: diskusi umum

Browse Source 
Deskripsi:
- tambah diskusi umum
- list diskusi umum

No Issues
This commit is contained in:
amel
2025-01-03 16:15:51 +08:00
parent e8178438a3
commit ce8f22cc10
8 changed files with 610 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(application)/discussion/create/page.tsx
View File

@@ -1,10 +1,8 @@
import { LayoutNavbarNew } from "@/module/_global";
import { FormCreateDiscussionGeneral } from "@/module/discussion_general";
export default function Page() {
return (
<>
<LayoutNavbarNew back="" title="Tambah Diskusi Umum" menu={<></>} />
<FormCreateDiscussionGeneral />
</>
)

68
src/app/api/discussion-general/route.ts
View File

@@ -70,47 +70,37 @@ export async function GET(request: Request) {
}
}
const data = await prisma.discussion.findMany()
// const data = await prisma.discussion.findMany({
// skip: dataSkip,
// take: 10,
// where: {
// isActive: true,
// idVillage: String(villageId),
// idGroup: grup,
// title: {
// contains: (search == undefined || search == "null") ? "" : search,
// mode: "insensitive"
// },
// },
// orderBy: {
// status: 'desc'
// },
// select: {
// id: true,
// title: true,
// desc: true,
// status: true,
// createdAt: true,
// User: {
// select: {
// name: true,
// img: true
// }
// },
// DiscussionComment: {
// select: {
// id: true,
// }
// }
// }
// });
const data = await prisma.discussion.findMany({
skip: dataSkip,
take: 10,
where: {
isActive: true,
idVillage: String(villageId),
idGroup: grup,
title: {
contains: (search == undefined || search == "null") ? "" : search,
mode: "insensitive"
},
},
orderBy: {
status: 'desc'
},
select: {
id: true,
title: true,
desc: true,
status: true,
createdAt: true,
DiscussionComment: {
select: {
id: true,
}
}
}
});
const fixData = data.map((v: any) => ({
..._.omit(v, ["User", "DiscussionComment", "createdAt"]),
user_name: v.User.name,
img: v.User.img,
..._.omit(v, ["DiscussionComment", "createdAt"]),
total_komentar: v.DiscussionComment.length,
createdAt: moment(v.createdAt).format("ll")
}))

13
src/module/discussion_general/lib/api_discussion_general.ts
View File

@@ -1,4 +1,17 @@
import { IFormMemberDisscussionGeneral } from "./type_discussion_general";
export const funGetAllDiscussionGeneral = async (path?: string) => {
const response = await fetch(`/api/discussion-general${(path) ? path : ''}`, { next: { tags: ['discussion-general'] } });
return await response.json().catch(() => null);
}
export const funCreateDiscussionGeneral = async (data: { idGroup: string, title: string, desc: string, member: IFormMemberDisscussionGeneral[] }) => {
const response = await fetch(`/api/discussion-general`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
}

5
src/module/discussion_general/lib/type_discussion_general.ts Normal file
View File

@@ -0,0 +1,5 @@
export interface IFormMemberDisscussionGeneral {
idUser: string,
name: string,
img: string
}

4
src/module/discussion_general/lib/val_discussion_general.ts Normal file
View File

@@ -0,0 +1,4 @@
import { hookstate } from "@hookstate/core";
import { IFormMemberDisscussionGeneral } from "./type_discussion_general";
export const globalMemberDiscussionGeneral = hookstate<IFormMemberDisscussionGeneral[]>([]);

249
src/module/discussion_general/ui/choose_user.tsx Normal file
View File

@@ -0,0 +1,249 @@
"use client"
import { LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
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 { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa6';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { globalMemberDiscussionGeneral } from '../lib/val_discussion_general';
export default function ChooseUsersDiscussion({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) {
const member = useHookstate(globalMemberDiscussionGeneral)
const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [dataMember, setDataMember] = useState<TypeUser>([])
const [loading, setLoading] = useState(true)
const [onClickSearch, setOnClickSearch] = useState(false)
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
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 }])
}
};
async function loadData(search: string) {
try {
setLoading(true)
const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
// const user = await funGetUserByCookies();
if (res.success) {
// setDataMember(res.data.filter((i: any) => i.id != user.id && i.idUserRole != 'supadmin' && i.idUserRole != 'cosupadmin'))
setDataMember(res.data.filter((i: any) => i.idUserRole != 'supadmin'))
// cek data member sebelumnya
if (member.length > 0) {
setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
}
} else {
toast.error("Gagal mendapatkan data, coba lagi nanti")
}
} catch (error) {
console.error(error)
toast.error("Gagal mendapatkan data, coba lagi nanti")
} finally {
setLoading(false)
}
}
function onSubmit() {
if (selectedFiles.length == 0) {
return toast.error("Error! silahkan pilih anggota")
}
member.set(selectedFiles)
onClose(true)
}
useShallowEffect(() => {
loadData("")
}, []);
const handleSearchClick = () => {
setOnClickSearch(true);
};
const handleClose = () => {
setOnClickSearch(false);
};
function handleXMember(id: number) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != id))
}
return (
<Box>
<LayoutNavbarNew state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
} title="Pilih Anggota"
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon>}
/>
{/* SEARCH */}
{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) => loadData(e.target.value)}
/>
</Grid.Col>
</Grid>
</Box>
)
: null
}
{/* Close User */}
<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}`} 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}>
<Stack>
<Box pt={100} mb={100}>
{loading ?
Array(6)
.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>
:
dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box mb={10} key={index} onClick={() => handleFileClick(index)}>
<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}`} 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 lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
</Flex>
{isSelected ? <FaCheck /> : null}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider my={10} />
</Box>
</Box>
);
})
}
</Box>
</Stack>
</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={() => { onSubmit() }}
>
Simpan
</Button>
</Box>
</Box>
);
}

355
src/module/discussion_general/ui/create_discussion.tsx
View File

@@ -1,13 +1,53 @@
'use client'
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { Box, Group, Select, Text, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, Text, TextInput } from "@mantine/core";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import toast from "react-hot-toast";
import { IoIosArrowDropright } from "react-icons/io";
import ChooseUsersDiscussion from "./choose_user";
import { useHookstate } from "@hookstate/core";
import { globalRole, keyWibu, LayoutNavbarNew, TEMA } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import { globalMemberDiscussionGeneral } from "../lib/val_discussion_general";
import { IFormMemberDisscussionGeneral } from "../lib/type_discussion_general";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { funCreateDiscussionGeneral } from "../lib/api_discussion_general";
import { useRouter } from "next/navigation";
import { useWibuRealtime } from "wibu-realtime";
export default function FormCreateDiscussionGeneral() {
const [dataGroup, setDataGroup] = useState<IDataGroup[]>([]);
const router = useRouter()
const isMobile = useMediaQuery('(max-width: 369px)')
const roleLogin = useHookstate(globalRole)
const [isModal, setModal] = useState(false)
const [dataGroup, setDataGroup] = useState<IDataGroup[]>([])
const [isChooseAnggota, setChooseAnggota] = useState(false)
const member = useHookstate(globalMemberDiscussionGeneral)
const memberValue = member.get() as IFormMemberDisscussionGeneral[]
const tema = useHookstate(TEMA)
const [loadingModal, setLoadingModal] = useState(false)
const [data, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
const [body, setBody] = useState<any>({
idGroup: "",
title: "",
desc: ""
});
const [touched, setTouched] = useState({
title: false,
idGroup: false,
desc: false
});
function onToChooseAnggota() {
if (roleLogin.get() == "supadmin" && body.idGroup == "")
return toast.error("Error! grup harus diisi")
setChooseAnggota(true)
}
async function loadData() {
const loadGroup = await funGetAllGroup('?active=true')
@@ -16,71 +56,270 @@ export default function FormCreateDiscussionGeneral() {
} else {
toast.error(loadGroup.message);
}
if (roleLogin.get() != "supadmin") {
const loadUser = await funGetUserByCookies();
setBody({ ...body, idGroup: loadUser.idGroup })
}
}
useShallowEffect(() => {
loadData();
}, []);
function onCheck() {
const cek = checkAll()
if (!cek)
return false
if (memberValue.length <= 1)
return toast.error("Error! Silahkan pilih anggota lebih dari 1")
setModal(true)
}
function checkAll() {
let nilai = true
if (body.idGroup === "" || String(body.idGroup) == "null") {
setTouched(touched => ({ ...touched, idGroup: true }))
nilai = false
}
if (body.title === "") {
setTouched(touched => ({ ...touched, title: true }))
nilai = false
}
if (body.desc === "") {
setTouched(touched => ({ ...touched, desc: true }))
nilai = false
}
return nilai
}
function onValidation(kategori: string, val: string) {
if (kategori == 'idGroup') {
setBody({ ...body, idGroup: val })
if (val === "" || String(val) == "null") {
setTouched({ ...touched, idGroup: true })
} else {
setTouched({ ...touched, idGroup: false })
}
} else if (kategori == 'title') {
setBody({ ...body, title: val })
if (val === "") {
setTouched({ ...touched, title: true })
} else {
setTouched({ ...touched, title: false })
}
} else if (kategori == 'diskusi') {
setBody({ ...body, desc: val })
if (val === "") {
setTouched({ ...touched, desc: true })
} else {
setTouched({ ...touched, desc: false })
}
}
}
function onChooseGroup(val: any) {
member.set([])
onValidation('idGroup', val)
}
async function onSubmit() {
try {
setLoadingModal(true)
const res = await funCreateDiscussionGeneral({ idGroup: body.idGroup, title: body.title, desc: body.desc, member: memberValue })
if (res.success) {
setDataRealtime(res.notif)
member.set([])
toast.success(res.message)
router.push('/discussion')
} else {
toast.error(res.message)
}
} catch (error) {
console.error(error)
toast.error("Gagal membuat diskusi umum, coba lagi nanti")
} finally {
setLoadingModal(false)
setModal(false)
}
}
if (isChooseAnggota) return <ChooseUsersDiscussion grup={body.idGroup} onClose={() => setChooseAnggota(false)} />
return (
<Box p={20}>
<Box>
<Select
placeholder="Grup"
label="Grup"
size="md"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required
data={dataGroup?.map((pro: any) => ({
value: String(pro.id),
label: pro.name
}))}
/>
<TextInput
label="Judul"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
mt={10}
required withAsterisk
placeholder="Judul"
size="md"
/>
<TextInput
label="Diskusi"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
mt={10}
required withAsterisk
placeholder="Hal yg akan didiskusikan"
size="md"
/>
<Box mt={15}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
<Box>
<LayoutNavbarNew back="" title="Tambah Diskusi Umum" menu={<></>} />
<Box p={20}>
<Box>
{
(roleLogin.get() == "supadmin") && (
<Select
placeholder="Grup"
label="Grup"
size="md"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required
data={dataGroup?.map((pro: any) => ({
value: String(pro.id),
label: pro.name
}))}
onChange={(val) => {
onChooseGroup(val)
}}
value={(body.idGroup == "") ? null : body.idGroup}
error={
touched.idGroup && (
body.idGroup == "" || String(body.idGroup) == "null" ? "Grup Tidak Boleh Kosong" : null
)
}
/>
)
}
<TextInput
label="Judul"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
>
<Text>Pilih Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
mt={10}
required withAsterisk
placeholder="Judul"
size="md"
value={body.title}
onChange={(e) => { onValidation('title', e.target.value) }}
error={
touched.title && (
body.title == "" ? "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={body.desc}
onChange={(e) => { onValidation('diskusi', e.target.value) }}
error={
touched.desc && (
body.desc == "" ? "Diskusi Tidak Boleh Kosong" : null
)
}
/>
<Box mt={15}>
<Group
onClick={() => onToChooseAnggota()}
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Pilih Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
</Box>
<Box pb={100}>
{
member.length > 0 &&
<Box pt={30}>
<Group justify="space-between">
<Text c={tema.get().utama}>Anggota Terpilih</Text>
<Text c={tema.get().utama}>Total {member.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{member.get().map((v: any, i: any) => {
return (
<Box key={i}>
<Grid align='center' mt={10} >
<Grid.Col span={9}>
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>
</Box>
</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={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => {
if (val) {
onSubmit()
} else {
setModal(false)
}
}} />
</Box>
)
}

17
src/module/discussion_general/ui/list_discussion.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { currentScroll, globalNotifPage, keyWibu, ReloadButtonTop, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { ActionIcon, Avatar, Badge, Box, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { useParams, useRouter } from "next/navigation";
@@ -11,6 +11,7 @@ import { GrChatOption } from "react-icons/gr";
import { HiMagnifyingGlass } from "react-icons/hi2";
import { useWibuRealtime } from "wibu-realtime";
import { funGetAllDiscussionGeneral } from "../lib/api_discussion_general";
import { BiSolidCommentDetail } from "react-icons/bi";
export default function ListDiscussionGeneral() {
@@ -175,7 +176,7 @@ export default function ListDiscussionGeneral() {
return (
<Box key={i} pl={5} pr={5}>
<Grid align="center" mt={20} onClick={() => {
router.push(`/division/${param.id}/discussion/${v.id}`)
router.push(`discussion/${v.id}`)
}}>
<Grid.Col span={{
sm: 2,
@@ -185,7 +186,15 @@ export default function ListDiscussionGeneral() {
xs: 1,
base: 2
}}>
<Avatar alt="it's me" src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size="lg" />
<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={{
sm: 6,
@@ -204,7 +213,7 @@ export default function ListDiscussionGeneral() {
base: 10
}}>
<Text c={tema.get().utama} fw={"bold"} lineClamp={1}>
{v.user_name}
{v.title}
</Text>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>