fix responsive admin forum

deskripsi:
- fix table postig
- fix report posting & report komentar
This commit is contained in:
2025-04-17 14:16:38 +08:00
parent e97fd98077
commit 317119b4db
12 changed files with 193 additions and 162 deletions

View File

@@ -1,7 +1,11 @@
"use client";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface";
import { Component_SetInnerHtml } from "@/app_modules/_global/component/new/comp_set_inner_html";
import {
MODEL_FORUM_KOMENTAR,
MODEL_FORUM_POSTING,
} from "@/app_modules/forum/model/interface";
import {
Badge,
Box,
@@ -21,14 +25,8 @@ export default function ComponentAdminForum_ViewOneDetailKomentar({
}) {
return (
<>
<Stack spacing={"xs"} h={"100%"} w={"50%"}>
<Paper bg={AdminColor.softBlue} p={"xs"} style={{ borderRadius: "6px" }}>
<Title order={4} c={"white"}>
Detail Komentar
</Title>
</Paper>
<Paper p={"md"} radius={"md"} bg={AdminColor.softBlue}>
<Stack spacing={"xs"} h={"100%"}>
<Paper p={"md"} radius={"md"} bg={AdminColor.softBlue}>
<Stack>
<Stack spacing={5}>
<Group position="apart">
@@ -38,23 +36,17 @@ export default function ComponentAdminForum_ViewOneDetailKomentar({
{dataKomentar?.Author?.username}
</Text>
</Text>
</Group>
{/* <Divider /> */}
</Stack>
<Box>
<Spoiler
w={500}
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<div
dangerouslySetInnerHTML={{
__html: dataKomentar?.komentar,
}}
/>
<Component_SetInnerHtml props={dataKomentar?.komentar} />
</Spoiler>
</Box>
</Stack>

View File

@@ -22,7 +22,6 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
}) {
return (
<>
<Admin_V3_ComponentBreakpoint>
<Paper p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
<Stack>
<Stack spacing={5}>
@@ -65,7 +64,8 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
</Box>
</Stack>
</Paper>
</Admin_V3_ComponentBreakpoint>
{/* <Admin_V3_ComponentBreakpoint>
</Admin_V3_ComponentBreakpoint> */}
</>
);
}

View File

@@ -45,6 +45,7 @@ import { apiAdminGetKomentarForumById } from "../lib/api_fetch_admin_forum";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import moment from "moment";
import "moment/locale/id";
import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
export default function AdminForum_DetailPosting({
dataPosting,
@@ -72,10 +73,11 @@ function TableKomentar({ postingId }: { postingId: string }) {
const [isSearch, setSearch] = useState("");
const [isLoadingReport, setLoadingReport] = useState(false);
const [idData, setIdData] = useState("");
const [isDelete, setDelete] = useState(false);
useShallowEffect(() => {
handleLoadData();
}, []);
}, [isSearch, activePage, isDelete]);
async function handleLoadData() {
try {
@@ -87,6 +89,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
if (response && response.success) {
setData(response.data.data);
setDelete(false);
}
} catch (error) {
console.error("Invalid data format received:", error);
@@ -97,24 +100,10 @@ function TableKomentar({ postingId }: { postingId: string }) {
async function onSearch(s: string) {
setSearch(s);
setActivePage(1);
const loadData = await adminForum_getListKomentarById({
postingId: postingId,
page: 1,
search: s,
});
setData(loadData.data as any);
setNPage(loadData.nPage);
}
async function onPageClick(p: any) {
setActivePage(p);
const loadData = await adminForum_getListKomentarById({
postingId: postingId,
search: isSearch,
page: p,
});
setData(loadData.data as any);
setNPage(loadData.nPage);
}
const rowTable = () => {
@@ -131,7 +120,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
}
return data?.map((e, i) => (
<tr key={i}>
<tr key={i} >
<td>
<Box c={AdminColor.white} w={100}>
<Text lineClamp={1}>{e?.Author?.username}</Text>
@@ -158,7 +147,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
</Box>
</td>
<td>
<Center w={100}>
<Center>
<Text
c={
e?.Forum_ReportKomentar?.length >= 3 ? "red" : AdminColor.white
@@ -171,7 +160,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
</Center>
</td>
<td>
<Stack align="center" spacing={"xs"} w={200}>
<Stack align="center" spacing={"xs"}>
<Button
disabled={e?.Forum_ReportKomentar.length <= 0 ? true : false}
loaderPosition="center"
@@ -188,7 +177,12 @@ function TableKomentar({ postingId }: { postingId: string }) {
>
Lihat Report
</Button>
<ButtonDeleteKomentar komentarId={e?.id} />
<ButtonDeleteKomentar
komentarId={e?.id}
onSuccessDelete={(val) => {
setDelete(val);
}}
/>
</Stack>
</td>
</tr>
@@ -269,7 +263,13 @@ function TableKomentar({ postingId }: { postingId: string }) {
);
}
function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
function ButtonDeleteKomentar({
komentarId,
onSuccessDelete,
}: {
komentarId: string;
onSuccessDelete: (val: any) => void;
}) {
const router = useRouter();
const [opened, { open, close }] = useDisclosure(false);
const [loadindDel, setLoadingDel] = useState(false);
@@ -280,7 +280,9 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
if (res.status === 200) {
setLoadingDel(false);
setLoadingDel2(false);
onSuccessDelete(true);
ComponentGlobal_NotifikasiBerhasil(res.message);
close();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
@@ -289,9 +291,15 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
}
return (
<>
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
<Admin_ComponentModal
opened={opened}
onClose={close}
withCloseButton={false}
>
<Stack>
<Title order={5}>Anda yakin menghapus komentar ini ?</Title>
<Title order={5} c={AdminColor.white}>
Anda yakin menghapus komentar ini ?
</Title>
<Group position="center">
<Button
radius={"xl"}
@@ -304,7 +312,7 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
</Button>
<Button
loaderPosition="center"
loading={loadingDel2 ? true : false}
loading={loadingDel2}
radius={"xl"}
color="red"
onClick={() => {
@@ -316,10 +324,10 @@ function ButtonDeleteKomentar({ komentarId }: { komentarId: string }) {
</Button>
</Group>
</Stack>
</Modal>
</Admin_ComponentModal>
<Button
loading={loadindDel ? true : false}
loading={loadindDel}
loaderPosition="center"
radius={"xl"}
w={170}

View File

@@ -19,7 +19,7 @@ export async function adminForum_getListReportKomentarbyId({
take: takeData,
skip: skipData,
orderBy: {
createdAt: "desc"
createdAt: "desc",
},
where: {
forum_KomentarId: komentarId,
@@ -32,6 +32,7 @@ export async function adminForum_getListReportKomentarbyId({
ForumMaster_KategoriReport: true,
User: {
select: {
username: true,
Profile: {
select: {
id: true,
@@ -48,11 +49,11 @@ export async function adminForum_getListReportKomentarbyId({
forum_KomentarId: komentarId,
},
});
const allData = {
data: data,
nPage: ceil(nCount / takeData)
}
nPage: ceil(nCount / takeData),
};
return allData;
}

View File

@@ -1,19 +1,21 @@
"use client";
import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
import {
AdminColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
import {
MODEL_FORUM_KOMENTAR,
MODEL_FORUM_REPORT_POSTING
MODEL_FORUM_REPORT_POSTING,
} from "@/app_modules/forum/model/interface";
import mqtt_client from "@/util/mqtt_client";
import {
Box,
Button,
Center,
Group,
Modal,
Pagination,
Paper,
ScrollArea,
Spoiler,
@@ -23,20 +25,19 @@ import {
Title
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import {
IconTrash
} from "@tabler/icons-react";
import { IconTrash } from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
import ComponentAdminForum_ViewOneDetailKomentar from "../component/detail_one_komentar";
import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
import { adminForum_getListReportKomentarbyId } from "../fun/get/get_list_report_komentar_by_id";
import adminForum_funGetOneKomentarById from "../fun/get/get_one_komentar_by_id";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
export default function AdminForum_HasilReportKomentar({
komentarId,
@@ -48,23 +49,26 @@ export default function AdminForum_HasilReportKomentar({
dataKomentar: MODEL_FORUM_KOMENTAR;
}) {
const [data, setData] = useState(dataKomentar);
console.log(komentarId);
return (
<>
<Stack>
<ComponentAdminGlobal_HeaderTamplate name="Forum: Hasil Report Komentar" />
<Group position="apart">
<AdminGlobal_ComponentBackButton />
<ButtonDeleteKomentar
komentarId={komentarId}
data={data}
onSuccess={(val) => {
setData(val);
}}
/>
</Group>
<ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
<ComponentAdminGlobal_HeaderTamplate name="Forum: Report" />
<AdminGlobal_ComponentBackButton />
<Admin_V3_ComponentBreakpoint>
<ComponentAdminForum_ViewOneDetailKomentar dataKomentar={data} />
<Group position="center">
<ButtonDeleteKomentar
komentarId={komentarId}
data={data}
onSuccess={(val) => {
setData(val);
}}
/>
</Group>
</Admin_V3_ComponentBreakpoint>
<HasilReportPosting listReport={listReport} komentarId={komentarId} />
{/* <pre>{JSON.stringify(listReport, null, 2)}</pre> */}
</Stack>
@@ -90,11 +94,12 @@ function ButtonDeleteKomentar({
if (res.status === 200) {
setLoadingDel2(false);
close();
router.back();
const dataKomentar = await adminForum_funGetOneKomentarById({
komentarId: komentarId,
});
onSuccess(dataKomentar);
// const dataKomentar = await adminForum_funGetOneKomentarById({
// komentarId: komentarId,
// });
// onSuccess(dataKomentar);
const dataNotif = {
appId: data.id,
@@ -125,9 +130,15 @@ function ButtonDeleteKomentar({
return (
<>
<Modal opened={opened} onClose={close} centered withCloseButton={false}>
<Admin_ComponentModal
opened={opened}
onClose={close}
withCloseButton={false}
>
<Stack>
<Title order={5}>Anda yakin menghapus komentar ini ?</Title>
<Title order={5} c={MainColor.white}>
Anda yakin menghapus komentar ini ?
</Title>
<Group position="center">
<Button
radius={"xl"}
@@ -151,7 +162,7 @@ function ButtonDeleteKomentar({
</Button>
</Group>
</Stack>
</Modal>
</Admin_ComponentModal>
{data?.isActive ? (
<Button
@@ -186,7 +197,6 @@ function HasilReportPosting({
const [nPage, setNPage] = useState(listReport.nPage);
const [activePage, setActivePage] = useState(1);
async function onPageClick(p: any) {
setActivePage(p);
const loadData = await adminForum_getListReportKomentarbyId({
@@ -198,24 +208,24 @@ function HasilReportPosting({
}
const TableRows = data?.map((e, i) => (
<tr key={i}>
<tr key={i} style={{ color: AdminColor.white }}>
<td>
<Center w={150}>
<Text>{e?.User?.Profile?.name}</Text>
</Center>
<Box w={100}>
<Text>{e?.User?.username}</Text>
</Box>
</td>
<td>
<Center w={150}>
<Box w={150}>
<Text>
{e?.ForumMaster_KategoriReport?.title
? e?.ForumMaster_KategoriReport?.title
: "-"}
</Text>
</Center>
</Box>
</td>
<td>
<Center w={300}>
<Box w={300}>
<Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
{e?.ForumMaster_KategoriReport?.deskripsi ? (
<Text>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
@@ -223,19 +233,18 @@ function HasilReportPosting({
<Text>-</Text>
)}
</Spoiler>
</Center>
</Box>
</td>
<td>
<Center w={300}>
<Box w={300}>
<Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
{e?.deskripsi ? <Text>{e?.deskripsi}</Text> : <Text>-</Text>}
</Spoiler>
</Center>
</Box>
</td>
</tr>
));
console.log("Ini data", data);
return (
<>
@@ -247,16 +256,8 @@ function HasilReportPosting({
style={{ borderRadius: "6px" }}
>
<Title order={4} c={"white"}>
Report Komentar
Hasil Report Komentar
</Title>
{/* <TextInput
icon={<IconSearch size={20} />}
radius={"xl"}
placeholder="Cari postingan"
onChange={(val) => {
onSearch(val.currentTarget.value);
}}
/> */}
</Group>
{_.isEmpty(data) ? (
@@ -270,21 +271,20 @@ function HasilReportPosting({
p={"md"}
w={"100%"}
h={"100%"}
>
<thead>
<tr>
<th>
<Center>Username</Center>
<Text c={AdminColor.white}>Username</Text>
</th>
<th>
<Center>Kategori</Center>
<Text c={AdminColor.white}>Kategori</Text>
</th>
<th>
<Center>Deskripsi</Center>
<Text c={AdminColor.white}>Deskripsi</Text>
</th>
<th>
<Center>Deskripsi Lainnya</Center>
<Text c={AdminColor.white}>Deskripsi Lainnya</Text>
</th>
</tr>
</thead>
@@ -292,15 +292,11 @@ function HasilReportPosting({
<tbody>{TableRows}</tbody>
</Table>
</ScrollArea>
<Center mt={"xl"}>
<Pagination
value={activePage}
total={nPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Center>
<Admin_V3_ComponentPaginationBreakpoint
value={activePage}
total={nPage}
onChange={onPageClick}
/>
</Paper>
)}
</Stack>

View File

@@ -1,25 +1,26 @@
"use client";
import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
import {
MODEL_FORUM_POSTING,
MODEL_FORUM_REPORT_POSTING,
} from "@/app_modules/forum/model/interface";
import mqtt_client from "@/util/mqtt_client";
import {
Button,
Center,
Group,
Modal,
Pagination,
Paper,
ScrollArea,
Spoiler,
Stack,
Table,
Text,
Title,
Title
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconTrash } from "@tabler/icons-react";
@@ -28,12 +29,12 @@ import { useRouter } from "next/navigation";
import { useState } from "react";
import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
import { adminForum_getListReportPostingById } from "../fun/get/get_list_report_posting_by_id";
import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
import mqtt_client from "@/util/mqtt_client";
import adminNotifikasi_funCreateToUser from "../../notifikasi/fun/create/fun_create_notif_user";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
export default function AdminForum_HasilReportPosting({
dataPosting,
@@ -45,12 +46,16 @@ export default function AdminForum_HasilReportPosting({
return (
<>
<Stack>
<ComponentAdminGlobal_HeaderTamplate name="Forum: Hasil Report Posting" />
<Group position="apart">
<AdminGlobal_ComponentBackButton />
<ButtonDeletePosting dataPosting={dataPosting} />
</Group>
<ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
<ComponentAdminGlobal_HeaderTamplate name="Forum: Report" />
<AdminGlobal_ComponentBackButton />
<Admin_V3_ComponentBreakpoint>
<ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
<Group position="center">
<ButtonDeletePosting dataPosting={dataPosting} />
</Group>
</Admin_V3_ComponentBreakpoint>
<HasilReportPosting
listReport={listReport}
postingId={dataPosting.id}
@@ -196,7 +201,9 @@ function HasilReportPosting({
<Center c={AdminColor.white} w={300}>
<Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
{e?.ForumMaster_KategoriReport?.deskripsi ? (
<Text style={{textJustify: "auto", textAlign: "justify"}}>{e?.ForumMaster_KategoriReport?.deskripsi}</Text>
<Text style={{ textJustify: "auto", textAlign: "justify" }}>
{e?.ForumMaster_KategoriReport?.deskripsi}
</Text>
) : (
<Text>-</Text>
)}
@@ -207,7 +214,13 @@ function HasilReportPosting({
<td>
<Center c={AdminColor.white} w={300}>
<Spoiler maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
{e?.deskripsi ? <Text style={{textJustify: "auto", textAlign: "justify"}}>{e?.deskripsi}</Text> : <Text>-</Text>}
{e?.deskripsi ? (
<Text style={{ textJustify: "auto", textAlign: "justify" }}>
{e?.deskripsi}
</Text>
) : (
<Text>-</Text>
)}
</Spoiler>
</Center>
</td>
@@ -239,7 +252,7 @@ function HasilReportPosting({
{_.isEmpty(data) ? (
<ComponentAdminGlobal_IsEmptyData />
) : (
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
<Table
verticalSpacing={"md"}
@@ -247,21 +260,28 @@ function HasilReportPosting({
p={"md"}
w={"100%"}
h={"100%"}
>
<thead>
<tr>
<th>
<Center w={150} c={AdminColor.white}>Username</Center>
<Center w={150} c={AdminColor.white}>
Username
</Center>
</th>
<th>
<Center w={150} c={AdminColor.white}>Kategori</Center>
<Center w={150} c={AdminColor.white}>
Kategori
</Center>
</th>
<th>
<Center w={300} c={AdminColor.white}>Deskripsi</Center>
<Center w={300} c={AdminColor.white}>
Deskripsi
</Center>
</th>
<th>
<Center w={300} c={AdminColor.white}>Deskripsi Lainnya</Center>
<Center w={300} c={AdminColor.white}>
Deskripsi Lainnya
</Center>
</th>
</tr>
</thead>
@@ -269,15 +289,14 @@ function HasilReportPosting({
<tbody>{TableRows}</tbody>
</Table>
</ScrollArea>
<Center mt={"xl"}>
<Pagination
value={activePage}
total={nPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Center>
<Admin_V3_ComponentPaginationBreakpoint
value={activePage}
total={nPage}
onChange={(val) => {
onPageClick(val);
}}
/>
</Paper>
)}
</Stack>

View File

@@ -27,6 +27,7 @@ import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
import { apiGetAdminForumPublish } from "../lib/api_fetch_admin_forum";
import { Component_SetInnerHtml } from "@/app_modules/_global/component/new/comp_set_inner_html";
export default function AdminForum_TablePosting() {
return (
@@ -126,25 +127,21 @@ function TablePublish() {
{/* Deskripsi */}
<td>
<Box w={150}>
<Box w={250}>
<Spoiler
// w={400}
maxHeight={50}
hideLabel="sembunyikan"
showLabel="tampilkan"
>
<div
dangerouslySetInnerHTML={{
__html: e?.diskusi,
}}
/>
<Component_SetInnerHtml props={e?.diskusi} />
</Spoiler>
</Box>
</td>
{/* Jumlah komentar */}
<td>
<Center w={150}>
<Center>
<Text fw={"bold"} fz={"lg"}>
{e?.Forum_Komentar.length}
</Text>
@@ -153,7 +150,7 @@ function TablePublish() {
{/* Jumlah report */}
<td>
<Center w={150}>
<Center>
<Text
c={e?.Forum_ReportPosting?.length >= 3 ? "red" : AdminColor.white}
fw={"bold"}

View File

@@ -141,7 +141,7 @@ function TableView() {
<td>
<Stack align="center" spacing={"xs"}>
<ButtonLihatReportLainnya komentarId={e?.forum_KomentarId} />
<ButtonLihatReportLainnya komentarId={e?.Forum_Komentar.id} />
</Stack>
</td>
</tr>

View File

@@ -187,7 +187,7 @@ function TableView() {
<Text c={AdminColor.white}>Postingan</Text>
</th>
<th>
<Center c={AdminColor.white} w={250}>
<Center c={AdminColor.white}>
Status Posting
</Center>
</th>