feat : update discussion
This commit is contained in:
10
api.http
10
api.http
@@ -249,4 +249,14 @@ Content-Type: application/json
|
||||
"isActive": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
###
|
||||
DELETE http://localhost:3000/api/discussion/clzs6b7kb0001aw16g5clh5vw HTTP/1.1
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"status":1
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import { DetailDiscussion } from "@/module/discussion"
|
||||
|
||||
|
||||
function Page({ params }: { params: { detail: string } }) {
|
||||
function Page({ params}: { params: { detail: string, id: string } }) {
|
||||
return (
|
||||
<DetailDiscussion id={params.detail} />
|
||||
<DetailDiscussion id={params.detail} idDivision={params.id} />
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
import { ViewEditDiscussion } from "@/module/division_new";
|
||||
import { LayoutNavbarNew } from "@/module/_global";
|
||||
import { FormEditDiscussion } from "@/module/discussion";
|
||||
import { Box } from "@mantine/core";
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<ViewEditDiscussion />
|
||||
<Box>
|
||||
<LayoutNavbarNew back="" title="Edit Diskusi" menu={<></>} />
|
||||
<FormEditDiscussion />
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
30
src/app/api/discussion/[id]/comment/route.ts
Normal file
30
src/app/api/discussion/[id]/comment/route.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { prisma } from "@/module/_global";
|
||||
import { funGetUserByCookies } from "@/module/auth";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
// CREATE COMENT BY ID
|
||||
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 { comment } = (await request.json());
|
||||
|
||||
const data = await prisma.divisionDisscussionComment.create({
|
||||
data: {
|
||||
comment: comment,
|
||||
idDisscussion: id,
|
||||
createdBy: user.id
|
||||
}
|
||||
})
|
||||
|
||||
return NextResponse.json({ success: true, message: "Berhasil mendapatkan diskusi", data: data, }, { status: 200 });
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan diskusi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,9 @@
|
||||
import { prisma } from "@/module/_global";
|
||||
import { funGetUserByCookies } from "@/module/auth";
|
||||
import { stat } from "fs";
|
||||
import _ from "lodash";
|
||||
import moment from "moment";
|
||||
import "moment/locale/id";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
// GET ONE DISCUSSION BY ID
|
||||
@@ -9,7 +13,7 @@ export async function GET(request: Request, context: { params: { id: string } })
|
||||
if (user.id == undefined) {
|
||||
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
|
||||
}
|
||||
const {id} = context.params
|
||||
const { id } = context.params
|
||||
|
||||
const data = await prisma.divisionDisscussion.findUnique({
|
||||
where: {
|
||||
@@ -37,14 +41,140 @@ export async function GET(request: Request, context: { params: { id: string } })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: data }, { status: 200 });
|
||||
const { ...userMember } = data
|
||||
const username = data?.User.name
|
||||
const createdAt = moment(data?.createdAt).format("LL")
|
||||
|
||||
|
||||
|
||||
const result = { ...userMember, username, createdAt }
|
||||
|
||||
|
||||
const omitData = _.omit(result, ["User"])
|
||||
const comments = omitData.DivisionDisscussionComment.map((comment: any) => {
|
||||
return { ...comment, username: comment.User.name };
|
||||
});
|
||||
|
||||
|
||||
omitData.DivisionDisscussionComment = comments;
|
||||
const response = {
|
||||
...omitData,
|
||||
totalComments: comments.length,
|
||||
};
|
||||
|
||||
return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: response }, { status: 200 });
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ONE OR CLOSE 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 { 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.divisionDisscussion.count({
|
||||
where: {
|
||||
id: id
|
||||
},
|
||||
});
|
||||
|
||||
if (data == 0) {
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan discussion, data tidak ditemukan" }, { status: 404 });
|
||||
}
|
||||
|
||||
const result = await prisma.divisionDisscussion.update({
|
||||
where: {
|
||||
id: id
|
||||
},
|
||||
data: {
|
||||
status: newStatus
|
||||
}
|
||||
});
|
||||
return NextResponse.json({ success: true, message: "Berhasil Update discussion" }, { status: 200 });
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan discussion, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
// DELETE 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 data = await prisma.divisionDisscussion.update({
|
||||
where: {
|
||||
id: id
|
||||
},
|
||||
data: {
|
||||
isActive: false
|
||||
}
|
||||
});
|
||||
return NextResponse.json({ success: true, message: "Berhasil Delete discussion" }, { status: 200 });
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan discussion, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// EDIT DISCUSSION
|
||||
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 { title, desc } = (await request.json());
|
||||
|
||||
const data = await prisma.divisionDisscussion.count({
|
||||
where: {
|
||||
id: id
|
||||
},
|
||||
});
|
||||
|
||||
if (data == 0) {
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan discussion, data tidak ditemukan" }, { status: 404 });
|
||||
}
|
||||
|
||||
const update = await prisma.divisionDisscussion.update({
|
||||
where: {
|
||||
id: id
|
||||
},
|
||||
data: {
|
||||
desc: desc
|
||||
}
|
||||
});
|
||||
return NextResponse.json({ success: true, message: "Berhasil Edit discussion" }, { status: 200 });
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan discussion, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Box, Button, Flex, Modal, Text } from '@mantine/core';
|
||||
import { Box, Button, Flex, Group, Modal, Text } from '@mantine/core';
|
||||
import React, { useState } from 'react';
|
||||
import { BsQuestionCircleFill } from 'react-icons/bs';
|
||||
import { WARNA } from '../fun/WARNA';
|
||||
|
||||
export default function LayoutModal({ opened, onClose, description, onYes }: { opened: boolean, onClose: () => void, description: string, onYes: (val: boolean) => void }) {
|
||||
const [isValModal, setValModal] = useState(opened)
|
||||
@@ -17,10 +18,10 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
|
||||
<Flex justify={"center"} align={"center"} direction={"column"}>
|
||||
<BsQuestionCircleFill size={100} color="red" />
|
||||
<Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
|
||||
<Box mt={30} w={'100%'}>
|
||||
<Button mb={20} fullWidth size="lg" radius={'xl'} bg={'#4754F0'} onClick={() => onYes(true)}>YA</Button>
|
||||
<Button fullWidth size="lg" radius={'xl'} bg={'#DCE1FE'} c={'#4754F0'} onClick={() => onYes(false)}>TIDAK</Button>
|
||||
</Box>
|
||||
<Group mt={30} w={'100%'} justify='center'>
|
||||
<Button w={"47%"} size="lg" radius={'xl'} bg={'#DCE1FE'} c={'#4754F0'} onClick={() => onYes(false)}>TIDAK</Button>
|
||||
<Button w={"47%"} size="lg" radius={'xl'} bg={WARNA.biruTua} onClick={() => onYes(true)}>YA</Button>
|
||||
</Group>
|
||||
</Flex>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import DetailDiscussion from "./ui/detail_discussion";
|
||||
import FormCreateDiscussion from "./ui/form_create_discussion";
|
||||
import FormEditDiscussion from "./ui/form_edit_discussion";
|
||||
import ListDiscussion from "./ui/list_discussion";
|
||||
import NavbarListDiscussion from "./ui/navbar_list_discussion";
|
||||
|
||||
export { ListDiscussion }
|
||||
export { NavbarListDiscussion }
|
||||
export { FormCreateDiscussion }
|
||||
export {DetailDiscussion}
|
||||
export { DetailDiscussion }
|
||||
export { FormEditDiscussion }
|
||||
@@ -1,4 +1,4 @@
|
||||
import { IFormDiscussion } from "./type_discussion";
|
||||
import { ICreateComent, IEditDiscussion, IFormDiscussion, IStatusDiscussion } from "./type_discussion";
|
||||
|
||||
export const funGetAllDiscussion = async (path?: string) => {
|
||||
const response = await fetch(`/api/discussion${(path) ? path : ''}`, { next: { tags: ['discussion'] } });
|
||||
@@ -23,4 +23,50 @@ export const funCreateDiscussion = async (data: IFormDiscussion) => {
|
||||
export const funGetDiscussionById = async (path: string) => {
|
||||
const response = await fetch(`/api/discussion/${path}`);
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
}
|
||||
|
||||
export const funEditStatusDiscussion = async (path: string, data: IStatusDiscussion) => {
|
||||
console.log('masuk sini')
|
||||
const response = await fetch(`/api/discussion/${path}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
|
||||
export const funDeleteDiscussion = async (path: string) => {
|
||||
const response = await fetch(`/api/discussion/${path}`, {
|
||||
method: "PUT",
|
||||
});
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
|
||||
export const funEditDiscussion = async (path: string, data: IEditDiscussion) => {
|
||||
if (data.desc == "")
|
||||
return { success: false, message: 'Diskusi tidak boleh kosong' }
|
||||
|
||||
const response = await fetch(`/api/discussion/${path}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
|
||||
export const funCreateComent = async (path: string, data: ICreateComent) => {
|
||||
|
||||
const response = await fetch(`/api/discussion/${path}/comment`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return await response.json().catch(() => null);
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ export interface IDataDiscussion {
|
||||
id: string
|
||||
title: string
|
||||
desc: string
|
||||
status: boolean
|
||||
status: number
|
||||
createdAt: string
|
||||
user_name: string
|
||||
total_komentar: number
|
||||
@@ -11,4 +11,45 @@ export interface IDataDiscussion {
|
||||
export interface IFormDiscussion {
|
||||
desc: string,
|
||||
idDivision: string
|
||||
}
|
||||
|
||||
export interface IStatusDiscussion {
|
||||
status: number
|
||||
}
|
||||
|
||||
|
||||
export interface IDetailDiscussion {
|
||||
id: string
|
||||
title: any
|
||||
desc: string
|
||||
status: number
|
||||
createdAt: string
|
||||
DivisionDisscussionComment: IAllComents[]
|
||||
username: string
|
||||
totalComments: number
|
||||
}
|
||||
|
||||
export interface IAllComents {
|
||||
id: string
|
||||
comment: string
|
||||
createdAt: string
|
||||
User: User
|
||||
username: string
|
||||
}
|
||||
|
||||
export interface User {
|
||||
name: string
|
||||
}
|
||||
|
||||
export interface IDeleteDicussion {
|
||||
id: string
|
||||
}
|
||||
|
||||
export interface IEditDiscussion {
|
||||
desc: string
|
||||
}
|
||||
|
||||
export interface ICreateComent {
|
||||
comment: string
|
||||
idDiscussion: string
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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
99
src/module/discussion/ui/form_edit_discussion.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@@ -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'}>
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
'use client'
|
||||
import { WARNA } from "@/module/_global"
|
||||
import LayoutModal from "@/module/_global/layout/layout_modal"
|
||||
import { Box, Group, Avatar, Textarea, Button } from "@mantine/core"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useState } from "react"
|
||||
import toast from "react-hot-toast"
|
||||
|
||||
export default function FormEditDiscussion() {
|
||||
const [isValModal, setValModal] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
function onTrue(val: boolean) {
|
||||
if (val) {
|
||||
toast.success("Sukses! Data tersimpan");
|
||||
router.back()
|
||||
|
||||
}
|
||||
setValModal(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box p={20}>
|
||||
<Group>
|
||||
<Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
|
||||
<Box>
|
||||
<Textarea
|
||||
placeholder="Tuliskan apa yang ingin anda diskusikan"
|
||||
w={"100%"}
|
||||
styles={{
|
||||
input: {
|
||||
border: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Group>
|
||||
<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) => { onTrue(val) }} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { LayoutNavbarNew } from "@/module/_global";
|
||||
import FormEditDiscussion from "../component/form_edit_discussion";
|
||||
|
||||
export default function ViewEditDiscussion() {
|
||||
return (
|
||||
<>
|
||||
<LayoutNavbarNew back="" title="Edit Diskusi" menu={<></>} />
|
||||
<FormEditDiscussion />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -8,7 +8,6 @@ import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail
|
||||
import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
|
||||
import ViewHistoryDivisionCalender from "./_division_fitur/calender/view/view_history_division_calender";
|
||||
import ViewUpdateDivisionCalender from "./_division_fitur/calender/view/view_update_division_calender";
|
||||
import ViewEditDiscussion from "./_division_fitur/discussion/view/view_edit_discussion";
|
||||
import ViewDocumentDivision from "./_division_fitur/document/view/view_document_division";
|
||||
import ViewCreateTaskDivision from "./_division_fitur/task/view/view_create_division_task";
|
||||
import ViewDetailDivisionTask from "./_division_fitur/task/view/view_detail_division_task";
|
||||
@@ -45,7 +44,6 @@ export { ViewDetailEventDivision };
|
||||
export { ViewUpdateDivisionCalender };
|
||||
export { UpdateUserDivisionCalender };
|
||||
export { UpdateUlangiEvent };
|
||||
export { ViewEditDiscussion };
|
||||
export { ViewDocumentDivision };
|
||||
export type { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision }
|
||||
export { ListDivision }
|
||||
|
||||
@@ -50,4 +50,4 @@ export interface IEditDataMember {
|
||||
|
||||
export interface IMember{
|
||||
id: string
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user