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

feat : update discussion

Browse Source
This commit is contained in:
lukman
2024-08-14 15:38:04 +08:00
parent fcf54d1924
commit f341200c0d
18 changed files with 521 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/module/discussion/ui/detail_discussion.tsx
View File

@@ -1,77 +1,59 @@
"use client"
import { Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
import { WARNA } from "@/module/_global";
import { GrChatOption } from "react-icons/gr";
import { LuSendHorizonal } from "react-icons/lu";
import NavbarDetailDiscussion from "@/module/discussion/ui/navbar_detail_discussion";
import { useState } from "react";
import { funGetAllDiscussion, funGetDiscussionById } from "../lib/api_discussion";
import { funCreateComent, funGetAllDiscussion, funGetDiscussionById } from "../lib/api_discussion";
import { useShallowEffect } from "@mantine/hooks";
import { IDetailDiscussion } from "../lib/type_discussion";
import moment from "moment";
import "moment/locale/id";
import { useParams } from "next/navigation";
import toast from "react-hot-toast";
const dataAnggota = [
{
id: 1,
name: "Iqbal Ramadan",
image: "https://i.pravatar.cc/1000?img=5",
status: true,
jumlah: 16,
desc: 'is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. '
},
{
id: 2,
name: "Doni Setiawan",
image: "https://i.pravatar.cc/1000?img=10",
status: true,
jumlah: 26,
desc: 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.'
},
{
id: 3,
name: "Rangga Agung",
image: "https://i.pravatar.cc/1000?img=51",
status: false,
jumlah: 11,
desc: 'It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
},
{
id: 4,
name: "Ramadan Sananta",
image: "https://i.pravatar.cc/1000?img=15",
status: false,
jumlah: 30,
desc: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. '
},
{
id: 5,
name: "Imam Baronis",
image: "https://i.pravatar.cc/1000?img=22",
status: false,
jumlah: 29,
desc: 'Contrary to popular belief, Lorem Ipsum is not simply random text'
},
];
export default function DetailDiscussion({ id, idDivision }: { id: string, idDivision: string }) {
const [isData, setData] = useState<IDetailDiscussion>()
const [isComent, setIsComent] = useState("")
const param = useParams<{ id: string, detail: string }>()
export default function DetailDiscussion({ id }: { id: string }) {
const getData = async () => {
try {
const response = await funGetDiscussionById(id)
setData(response.data)
} catch (error) {
console.log(error)
}
}
const [isData, setData] = useState([])
useShallowEffect(() => {
getData()
}, [])
const sendComent = async () => {
try {
const response = await funCreateComent(id, {
comment: isComent,
idDiscussion: param.detail
})
if (response.success) {
setIsComent("")
getData()
} else {
toast.error(response.message)
}
} catch (error) {
console.log(error)
}
}
const getData = async () => {
try {
const response = await funGetDiscussionById(id)
setData(response.data)
} catch (error) {
console.log(error)
}
}
useShallowEffect(() => {
getData()
}, [])
return (
<>
<NavbarDetailDiscussion />
<pre>{JSON.stringify(isData, null, 1)}</pre>
<NavbarDetailDiscussion id={id} status={Number(isData?.status)} idDivision={idDivision} />
<Box p={20}>
<Flex
justify={"space-between"}
@@ -82,23 +64,25 @@ export default function DetailDiscussion({ id }: { id: string }) {
<Avatar src={'https://i.pravatar.cc/1000?img=5'} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
Fibra Marcell
{isData?.username}
</Text>
<Badge color={"green"} size="sm">BUKA</Badge>
<Badge color={isData?.status === 1 ? "green" : "red"} size="sm">{isData?.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group>
<Text c={"grey"}>1 Jam</Text>
<Text c={"grey"} fz={13}>{isData?.createdAt}</Text>
</Flex>
<Box mt={10}>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</Box>
<Box mt={10}>
<Text fw={"bold"}>{isData?.desc}</Text>
</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
<Text fz={13}>10 Komentar</Text>
<Text fz={13}>{isData?.totalComments} Komentar</Text>
</Group >
</Group>
<Box p={10}>
{dataAnggota.map((v, i) => {
{isData?.DivisionDisscussionComment.map((v, i) => {
return (
<Box key={i} p={10}>
<Flex
@@ -106,16 +90,16 @@ export default function DetailDiscussion({ id }: { id: string }) {
align={"center"}
>
<Group>
<Avatar src={v.image} alt="it's me" size="md" />
<Avatar alt="it's me" size="md" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"} fz={15}>
{v.name}
{v.username}
</Text>
</Box>
</Group>
<Text c={"grey"}>1 Jam</Text>
<Text c={"grey"} fz={13}>{moment(v.createdAt).format("LL")}</Text>
</Flex>
<Box mt={10}>{v.desc}</Box>
<Box mt={10}>{v.comment}</Box>
<Box mt={20}>
<Divider size={"xs"} />
</Box>
@@ -141,11 +125,18 @@ export default function DetailDiscussion({ id }: { id: string }) {
}}
size="md"
placeholder="Kirim Komentar"
disabled={isData?.status === 2}
onChange={(e) => setIsComent(e.target.value)}
value={isComent}
/>
</Grid.Col>
<Grid.Col span={2}>
<Center>
<LuSendHorizonal size={30} />
<ActionIcon
onClick={sendComent}
variant="subtle" aria-label="submit" disabled={isData?.status === 2}>
<LuSendHorizonal size={30} />
</ActionIcon>
</Center>
</Grid.Col>
</Grid>

90
src/module/discussion/ui/drawer_detail_discussion.tsx
View File

@@ -4,29 +4,63 @@ import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
import { useState } from "react";
import toast from "react-hot-toast";
import { BsTrash3 } from "react-icons/bs";
import { FaPencil } from "react-icons/fa6";
import { FaCheck, FaPencil } from "react-icons/fa6";
import { MdClose } from "react-icons/md";
import { funDeleteDiscussion, funEditStatusDiscussion } from "../lib/api_discussion";
import { useParams, useRouter } from "next/navigation";
export default function DrawerDetailDiscussion({ onSuccess }: { onSuccess: (val: boolean) => void }) {
export default function DrawerDetailDiscussion({ onSuccess, id, status, idDivision }: { onSuccess: (val: boolean) => void, id: string, status: number, idDivision: string }) {
const [isValModal, setValModal] = useState(false)
const [isValModalStatus, setValModalStatus] = useState(false)
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
function onTrue(val: boolean) {
if (val) {
onSuccess(true)
toast.success("Sukses! Data terhapus");
async function fetchStatusDiscussion(val: boolean) {
try {
if (val) {
const response = await funEditStatusDiscussion(id, { status: status })
if (response.success) {
toast.success(response.message)
setValModalStatus(false)
} else {
toast.error(response.message)
}
}
setValModalStatus(false)
} catch (error) {
console.log(error);
setValModalStatus(false)
toast.error("Gagal menambahkan diskusi, coba lagi nanti");
} finally {
setValModalStatus(false)
}
setValModal(false)
}
function onTrueStatus(val: boolean) {
if (val) {
onSuccess(true)
toast.success("Sukses! Data terupdate");
async function fetchDeleteDiscussion(val: boolean) {
try {
if (val) {
const response = await funDeleteDiscussion(id)
if (response.success) {
toast.success(response.message)
setValModal(false)
router.push(`/division/${param.id}/discussion`)
} else {
toast.error(response.message)
}
}
setValModal(false)
} catch (error) {
console.log(error);
setValModal(false)
toast.error("Gagal hapus diskusi, coba lagi nanti");
} finally {
setValModal(false)
}
setValModalStatus(false)
}
return (
<Box>
<Stack pt={10}>
@@ -42,7 +76,7 @@ export default function DrawerDetailDiscussion({ onSuccess }: { onSuccess: (val:
</Box>
</Flex>
<Flex onClick={() => window.location.href = "/discussion/edit/2"} justify={'center'} align={'center'} direction={'column'} >
<Flex onClick={() => window.location.href = `/division/${param.id}/discussion/update/${param.detail}`} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
@@ -51,12 +85,28 @@ export default function DrawerDetailDiscussion({ onSuccess }: { onSuccess: (val:
</Box>
</Flex>
<Flex onClick={() => setValModalStatus(true)} justify={'center'} align={'center'} direction={'column'} >
<Flex onClick={() => setValModalStatus(true)} >
<Box>
<MdClose size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Tutup Diskusi</Text>
{status === 1 ? (
<>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<MdClose size={30} color={WARNA.biruTua} />
</Box>
<Text style={{ color: WARNA.biruTua }}>Tutup Diskusi</Text>
</Flex>
</>
) : (
<>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<FaCheck size={30} color={WARNA.biruTua} />
</Box>
<Text style={{ color: WARNA.biruTua }}>Buka Diskusi</Text>
</Flex>
</>
)}
</Box>
</Flex>
</SimpleGrid>
@@ -64,12 +114,12 @@ export default function DrawerDetailDiscussion({ onSuccess }: { onSuccess: (val:
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin menghapus diskusi ini?"
onYes={(val) => { onTrue(val) }} />
onYes={(val) => { fetchDeleteDiscussion(val) }} />
<LayoutModal opened={isValModalStatus} onClose={() => setValModalStatus(false)}
description="Apakah Anda yakin ingin mengubah status diskusi ini?"
onYes={(val) => { onTrueStatus(val) }} />
onYes={(val) => { fetchStatusDiscussion(val) }} />
</Box>
)
}

99
src/module/discussion/ui/form_edit_discussion.tsx Normal file
View File

@@ -0,0 +1,99 @@
'use client'
import { WARNA } from "@/module/_global"
import LayoutModal from "@/module/_global/layout/layout_modal"
import { Box, Group, Avatar, Textarea, Button, Grid } from "@mantine/core"
import { useParams, useRouter } from "next/navigation"
import { useState } from "react"
import toast from "react-hot-toast"
import { funEditDiscussion, funGetDiscussionById } from "../lib/api_discussion"
import { useShallowEffect } from "@mantine/hooks"
export default function FormEditDiscussion() {
const [isValModal, setValModal] = useState(false)
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
const [isDataOne, setDataOne] = useState("")
async function fetchGetOneDiscussion() {
try {
const response = await funGetDiscussionById(param.detail)
setDataOne(response.data.desc)
} catch (error) {
console.log(error);
toast.error("Gagal menampilkan discussion, coba lagi nanti");
}
}
async function fetchEditDiscussion(val: boolean) {
try {
if (val) {
const response = await funEditDiscussion(param.detail, {
desc: isDataOne
})
if (response.success) {
toast.success(response.message)
setValModal(false)
router.push(`/division/${param.id}/discussion/${param.detail}`)
} else {
toast.error(response.message)
}
}
setValModal(false)
} catch (error) {
console.log(error);
setValModal(false)
toast.error("Gagal menambahkan diskusi, coba lagi nanti");
} finally {
setValModal(false)
}
}
useShallowEffect(() => {
fetchGetOneDiscussion()
}, [])
return (
<Box>
<Box p={20}>
<Grid gutter={0} pt={10}>
<Grid.Col span={"auto"}>
<Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
</Grid.Col>
<Grid.Col span={10}>
<Box>
<Textarea
placeholder="Tuliskan apa yang ingin anda diskusikan"
styles={{
input: {
border: 'none',
backgroundColor: 'transparent',
height: "50vh"
}
}}
value={isDataOne}
onChange={(e) => setDataOne(e.target.value)}
/>
</Box>
</Grid.Col>
</Grid>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => setValModal(true)}
>
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={isValModal} onClose={() => setValModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => { fetchEditDiscussion(val) }} />
</Box>
)
}

9
src/module/discussion/ui/list_discussion.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { WARNA } from "@/module/_global";
import { Avatar, Badge, Box, Divider, Flex, Group, Text, TextInput } from "@mantine/core";
import { useRouter, useSearchParams } from "next/navigation";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { GrChatOption } from "react-icons/gr";
import { HiMagnifyingGlass } from "react-icons/hi2";
@@ -12,6 +12,7 @@ import { IDataDiscussion } from "../lib/type_discussion";
export default function ListDiscussion({ id }: { id: string }) {
const [isData, setData] = useState<IDataDiscussion[]>([])
const [searchQuery, setSearchQuery] = useState('')
const param = useParams<{ id: string }>()
const getData = async () => {
try {
@@ -48,7 +49,7 @@ export default function ListDiscussion({ id }: { id: string }) {
return (
<Box key={i} pl={10} pr={10}
onClick={() => {
router.push(`/division/${v.id}/discussion/${v.id}`)
router.push(`/division/${param.id}/discussion/${v.id}`)
}}
>
<Flex
@@ -62,10 +63,10 @@ export default function ListDiscussion({ id }: { id: string }) {
<Text c={WARNA.biruTua} fw={"bold"}>
{v.user_name}
</Text>
<Badge color={(v.status) ? "green" : "red"} size="sm">{(v.status) ? "BUKA" : "TUTUP"}</Badge>
<Badge color={v.status === 1 ? "green" : "red"} size="sm">{v.status === 1 ? "BUKA" : "TUTUP"}</Badge>
</Box>
</Group>
<Text c={"grey"}>{v.createdAt}</Text>
<Text c={"grey"} fz={13}>{v.createdAt}</Text>
</Flex>
<Box mt={10}>{v.desc}</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>

4
src/module/discussion/ui/navbar_detail_discussion.tsx
View File

@@ -5,7 +5,7 @@ import { useState } from "react";
import { HiMenu } from "react-icons/hi";
import DrawerDetailDiscussion from "./drawer_detail_discussion";
export default function NavbarDetailDiscussion() {
export default function NavbarDetailDiscussion({id, status, idDivision}: {id: string, status: number, idDivision:string}) {
const [openDrawer, setOpenDrawer] = useState(false)
return (
<>
@@ -16,7 +16,7 @@ export default function NavbarDetailDiscussion() {
</ActionIcon>}
/>
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerDetailDiscussion onSuccess={(val) => setOpenDrawer(false)} />
<DrawerDetailDiscussion onSuccess={(val) => setOpenDrawer(false)} id={id} status={status} idDivision={idDivision} />
</LayoutDrawer>
</>
);