wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix responsive admin forum

Browse Source
This commit is contained in:
Bagasbanuna02
2025-04-16 20:39:40 +08:00
parent 650d8a36eb
commit e97fd98077
9 changed files with 396 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/api/admin/forum/[id]/komentar/route.ts Normal file
View File

@@ -0,0 +1,101 @@
import _ from "lodash";
import { NextResponse } from "next/server";
export async function GET(
request: Request,
{ params }: { params: { id: string } }
) {
const { searchParams } = new URL(request.url);
const search = searchParams.get("search");
const page = searchParams.get("page");
const takeData = 10;
const skipData = Number(page) * takeData - takeData;
try {
let fixData;
const { id } = params;
const postingId = id;
if (!page) {
fixData = await prisma.forum_Komentar.findMany({
orderBy: {
createdAt: "desc",
},
where: {
forum_PostingId: postingId,
isActive: true,
komentar: {
contains: search ?? "",
mode: "insensitive",
},
},
include: {
Forum_ReportKomentar: true,
Author: {
select: {
username: true
}
}
},
});
} else {
const data = await prisma.forum_Komentar.findMany({
take: takeData,
skip: skipData,
orderBy: {
createdAt: "desc",
},
where: {
forum_PostingId: postingId,
isActive: true,
komentar: {
contains: search ?? "",
mode: "insensitive",
},
},
include: {
Forum_ReportKomentar: true,
Author: {
select: {
username: true
}
}
},
});
const nCount = await prisma.forum_Komentar.count({
where: {
forum_PostingId: postingId,
isActive: true,
komentar: {
contains: search ?? "",
mode: "insensitive",
},
},
});
fixData = {
data: data,
nPage: _.ceil(nCount / takeData),
};
}
return NextResponse.json({
success: true,
message: "Berhasil mendapatkan data komentar",
data: fixData,
});
} catch (error) {
console.log("Error get data komentar", error);
return NextResponse.json(
{
status: false,
message: "Gagal mendapatkan data komentar",
error: error || (error as Error).message,
},
{ status: 500 }
);
}
}

16
src/app/dev/admin/forum/detail/[id]/page.tsx
View File

@@ -6,20 +6,20 @@ import { adminForum_getOnePostingById } from "@/app_modules/admin/forum/fun/get/
export default async function Page({ params }: { params: { id: string } }) {
let postingId = params.id;
const listKomentar = await adminForum_getListKomentarById({
postingId: postingId,
page: 1,
});
// const listKomentar = await adminForum_getListKomentarById({
// postingId: postingId,
// page: 1,
// });
const dataPosting = await adminForum_getOnePostingById(postingId);
const countKomentar = await adminForum_countKomentarByPostingId({postingId: postingId})
// const countKomentar = await adminForum_countKomentarByPostingId({
// postingId: postingId,
// });
return (
<>
<AdminForum_LihatSemuaKomentar
listKomentar={listKomentar as any}
dataPosting={dataPosting as any}
countKomentar={countKomentar}
/>
</>
);

2
src/app_modules/admin/_admin_global/_component/title_page.tsx
View File

@@ -10,7 +10,7 @@ export function ComponentAdminGlobal_TitlePage({
color,
component,
}: {
name: string;
name: React.ReactNode | string
color?: string;
component?: React.ReactNode;
}) {

10
src/app_modules/admin/_components_v3/comp_simple_grid_breakpoint.tsx
View File

@@ -6,21 +6,23 @@ export function Admin_V3_ComponentBreakpoint({
sm,
md,
lg,
allCols,
}: {
children: React.ReactNode;
cols?: number;
sm?: number;
md?: number;
lg?: number;
allCols?: number;
}) {
return (
<>
<SimpleGrid
cols={cols || 2}
cols={ allCols || cols || 2}
breakpoints={[
{ maxWidth: "sm", cols: sm || 1 },
{ maxWidth: "md", cols: md || 1 },
{ maxWidth: "lg", cols: lg || 1 },
{ maxWidth: "sm", cols: allCols || sm || 1 },
{ maxWidth: "md", cols: allCols || md || 1 },
{ maxWidth: "lg", cols: allCols || lg || 1 },
]}
spacing={"lg"}
verticalSpacing={"lg"}

49
src/app_modules/admin/forum/component/button_delete.tsx
View File

@@ -7,6 +7,12 @@ import { useDisclosure } from "@mantine/hooks";
import { IconTrash } from "@tabler/icons-react";
import { useState } from "react";
import { adminForum_funDeletePostingById } from "../fun/delete/fun_delete_posting_by_id";
import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
import { ComponentAdminGlobal_NotifikasiPeringatan } from "../../_admin_global/admin_notifikasi/notifikasi_peringatan";
import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
export default function ComponentAdminForum_ButtonDeletePosting({
postingId,
@@ -19,28 +25,40 @@ export default function ComponentAdminForum_ButtonDeletePosting({
const [loadingDel2, setLoadingDel2] = useState(false);
async function onDelete() {
await adminForum_funDeletePostingById(postingId).then((res) => {
if (res.status === 200) {
setLoadingDel2(false);
close();
ComponentGlobal_NotifikasiBerhasil(res.message);
onSuccesDelete(true);
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
try {
setLoadingDel2(true);
await adminForum_funDeletePostingById(postingId).then((res) => {
if (res.status === 200) {
setLoadingDel2(false);
ComponentAdminGlobal_NotifikasiBerhasil(res.message);
onSuccesDelete(true);
} else {
ComponentAdminGlobal_NotifikasiPeringatan(res.message);
}
});
} catch (error) {
console.log("error delete", error);
ComponentAdminGlobal_NotifikasiGagal(
"Terjadi kesalahan, silahkan coba lagi"
);
} finally {
close();
setLoadingDel2(false);
}
}
return (
<>
<Modal
<Admin_ComponentModal
opened={opened}
onClose={close}
centered
withCloseButton={false}
closeOnClickOutside={false}
>
<Stack>
<Title order={5}>Anda yakin menghapus posting ini</Title>
<Title order={5} c={AdminColor.white}>
Anda yakin menghapus posting ini ?
</Title>
<Group position="center">
<Button
radius={"xl"}
@@ -52,19 +70,18 @@ export default function ComponentAdminForum_ButtonDeletePosting({
</Button>
<Button
loaderPosition="center"
loading={loadingDel2 ? true : false}
loading={loadingDel2}
radius={"xl"}
color="red"
onClick={() => {
onDelete();
setLoadingDel2(true);
}}
>
Hapus
</Button>
</Group>
</Stack>
</Modal>
</Admin_ComponentModal>
<Button
fz={"xs"}
loaderPosition="center"

42
src/app_modules/admin/forum/component/detail_one_posting.tsx
View File

@@ -13,6 +13,7 @@ import {
Text,
Title,
} from "@mantine/core";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
export default function ComponentAdminForum_ViewOneDetailPosting({
dataPosting,
@@ -21,41 +22,36 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
}) {
return (
<>
<Stack spacing={"xs"} h={"100%"} w={"50%"}>
<Paper bg={AdminColor.softBlue} p={"xs"} style={{ borderRadius: "6px" }}>
<Title order={4} c={"white"}>
Detail Posting
</Title>
</Paper>
<Paper p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
<Admin_V3_ComponentBreakpoint>
<Paper p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
<Stack>
<Stack spacing={5}>
<Group position="apart">
<Admin_V3_ComponentBreakpoint allCols={2}>
<Text c={AdminColor.white} fw={"bold"}>
Username:{" "}
<Text span inherit>
{dataPosting?.Author?.username}
<Text span inherit lineClamp={1}>
{dataPosting?.Author?.username}
</Text>
</Text>
<Badge
color={
(dataPosting?.ForumMaster_StatusPosting?.id as any) === 1
? "green"
: "red"
}
>
{dataPosting?.ForumMaster_StatusPosting?.status}
</Badge>
</Group>
<Group position="right">
<Badge
color={
(dataPosting?.ForumMaster_StatusPosting?.id as any) === 1
? "green"
: "red"
}
>
{dataPosting?.ForumMaster_StatusPosting?.status}
</Badge>
</Group>
</Admin_V3_ComponentBreakpoint>
{/* <Divider /> */}
</Stack>
<Box>
<Spoiler
c={AdminColor.white}
w={500}
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
@@ -69,7 +65,7 @@ export default function ComponentAdminForum_ViewOneDetailPosting({
</Box>
</Stack>
</Paper>
</Stack>
</Admin_V3_ComponentBreakpoint>
</>
);
}

272
src/app_modules/admin/forum/detail/detail_posting.tsx
View File

@@ -33,58 +33,67 @@ import { useState } from "react";
import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { useDisclosure } from "@mantine/hooks";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
import { adminForum_getListKomentarById } from "../fun/get/get_list_komentar_by_id";
import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import { apiAdminGetKomentarForumById } from "../lib/api_fetch_admin_forum";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import moment from "moment";
import "moment/locale/id";
export default function AdminForum_DetailPosting({
listKomentar,
dataPosting,
countKomentar,
}: {
listKomentar: any;
dataPosting: MODEL_FORUM_POSTING;
countKomentar: number;
}) {
return (
<>
{/* <pre>{JSON.stringify(listKomentar, null, 2)}</pre> */}
<Stack>
<ComponentAdminGlobal_HeaderTamplate name="Forum: Detail Posting" />
<ComponentAdminGlobal_HeaderTamplate name="Forum: Detail" />
<AdminGlobal_ComponentBackButton />
<ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
<TableKomentar
listKomentar={listKomentar}
postingId={dataPosting.id}
countKomentar={countKomentar}
/>
<TableKomentar postingId={dataPosting.id} />
</Stack>
</>
);
}
function TableKomentar({
listKomentar,
postingId,
countKomentar,
}: {
listKomentar: any;
postingId: string;
countKomentar: number;
}) {
function TableKomentar({ postingId }: { postingId: string }) {
const router = useRouter();
const [data, setData] = useState<MODEL_FORUM_KOMENTAR[]>(listKomentar.data);
const [nPage, setNPage] = useState(listKomentar.nPage);
const [data, setData] = useState<MODEL_FORUM_KOMENTAR[] | null>(null);
const [nPage, setNPage] = useState<number>(1);
const [activePage, setActivePage] = useState(1);
const [isSearch, setSearch] = useState("");
const [isLoadingReport, setLoadingReport] = useState(false);
const [idData, setIdData] = useState("");
useShallowEffect(() => {
handleLoadData();
}, []);
async function handleLoadData() {
try {
const response = await apiAdminGetKomentarForumById({
id: postingId,
page: `${activePage}`,
search: isSearch,
});
if (response && response.success) {
setData(response.data.data);
}
} catch (error) {
console.error("Invalid data format received:", error);
setData([]);
}
}
async function onSearch(s: string) {
setSearch(s);
setActivePage(1);
@@ -108,96 +117,112 @@ function TableKomentar({
setNPage(loadData.nPage);
}
const rowTable = data?.map((e, i) => (
<tr key={i}>
<td>
<Center c={AdminColor.white} w={150}>
<Text lineClamp={1}>{e?.Author?.username}</Text>
</Center>
</td>
<td>
<Box w={300}>
<Spoiler c={AdminColor.white} maxHeight={50} hideLabel="sembunyikan" showLabel="tampilkan">
<div
style={{ textAlign: "justify", textJustify: "auto" }}
dangerouslySetInnerHTML={{ __html: e?.komentar }}
/>
</Spoiler>
</Box>
</td>
<td>
<Center c={AdminColor.white} w={150}>
<Text>
{new Intl.DateTimeFormat(["id-ID"], { dateStyle: "medium" }).format(
e.createdAt
)}
</Text>
</Center>
</td>
<td>
<Center w={100}>
<Text
c={e?.Forum_ReportKomentar?.length >= 3 ? "red" : AdminColor.white}
fw={"bold"}
fz={"lg"}
>
{e?.Forum_ReportKomentar.length}
</Text>
</Center>
</td>
<td>
<Stack align="center" spacing={"xs"} w={200}>
<Button
disabled={e?.Forum_ReportKomentar.length <= 0 ? true : false}
loaderPosition="center"
loading={isLoadingReport && e?.id === idData ? true : false}
radius={"xl"}
w={170}
fz={"xs"}
leftIcon={<IconFlag3 size={15} />}
onClick={() => {
setIdData(e?.id);
setLoadingReport(true);
router.push(RouterAdminForum.report_komentar + e?.id);
}}
>
Lihat Report
</Button>
<ButtonDeleteKomentar komentarId={e?.id} />
</Stack>
</td>
</tr>
));
const rowTable = () => {
if (!Array.isArray(data) || data.length === 0) {
return (
<tr>
<td colSpan={12}>
<Center>
<Text color="gray">Tidak ada data</Text>
</Center>
</td>
</tr>
);
}
return data?.map((e, i) => (
<tr key={i}>
<td>
<Box c={AdminColor.white} w={100}>
<Text lineClamp={1}>{e?.Author?.username}</Text>
</Box>
</td>
<td>
<Box w={200}>
<Spoiler
c={AdminColor.white}
maxHeight={50}
hideLabel="sembunyikan"
showLabel="tampilkan"
>
<div
style={{ textAlign: "justify", textJustify: "auto" }}
dangerouslySetInnerHTML={{ __html: e?.komentar }}
/>
</Spoiler>
</Box>
</td>
<td>
<Box c={AdminColor.white} w={100}>
<Text>{moment(e?.createdAt).format("DD-MM-YYYY")}</Text>
</Box>
</td>
<td>
<Center w={100}>
<Text
c={
e?.Forum_ReportKomentar?.length >= 3 ? "red" : AdminColor.white
}
fw={"bold"}
fz={"lg"}
>
{e?.Forum_ReportKomentar.length}
</Text>
</Center>
</td>
<td>
<Stack align="center" spacing={"xs"} w={200}>
<Button
disabled={e?.Forum_ReportKomentar.length <= 0 ? true : false}
loaderPosition="center"
loading={isLoadingReport && e?.id === idData ? true : false}
radius={"xl"}
w={170}
fz={"xs"}
leftIcon={<IconFlag3 size={15} />}
onClick={() => {
setIdData(e?.id);
setLoadingReport(true);
router.push(RouterAdminForum.report_komentar + e?.id);
}}
>
Lihat Report
</Button>
<ButtonDeleteKomentar komentarId={e?.id} />
</Stack>
</td>
</tr>
));
};
return (
<>
<Stack spacing={"xs"} h={"100%"}>
<Group
position="apart"
bg={AdminColor.softBlue}
p={"xs"}
style={{ borderRadius: "6px" }}
>
<Group spacing={5}>
<Title order={4} c={"white"}>
Komentar
</Title>
<Title order={4} c={"white"}>
{`(${countKomentar})`}
</Title>
</Group>
<TextInput
icon={<IconSearch size={20} />}
radius={"xl"}
placeholder="Cari komentar"
onChange={(val) => {
onSearch(val.currentTarget.value);
}}
/>
</Group>
<ComponentAdminGlobal_TitlePage
name={
<Group spacing={5}>
<Title order={4} c={"white"}>
Komentar:
</Title>
<Title order={4} c={"white"}>
{data?.length}
</Title>
</Group>
}
component={
<TextInput
icon={<IconSearch size={20} />}
radius={"xl"}
placeholder="Cari komentar"
onChange={(val) => {
onSearch(val.currentTarget.value);
}}
/>
}
/>
{_.isEmpty(data) ? (
<ComponentAdminGlobal_IsEmptyData text="Tidak Ada Komentar" />
{!data ? (
<CustomSkeleton height={"80vh"} width={"100%"} />
) : (
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
@@ -207,39 +232,36 @@ function TableKomentar({
p={"md"}
w={"100%"}
h={"100%"}
>
<thead>
<tr>
<th>
<Center c={AdminColor.white} w={150}>Username</Center>
<Text c={AdminColor.white}>Username</Text>
</th>
<th>
<Center c={AdminColor.white} w={300}>Komentar</Center>
<Text c={AdminColor.white}>Komentar</Text>
</th>
<th>
<Center c={AdminColor.white} w={150}>Tgl Komentar</Center>
<Text c={AdminColor.white}>Tgl Komentar</Text>
</th>
<th>
<Center c={AdminColor.white} w={100}>Total Report</Center>
<Center c={AdminColor.white}>Total Report</Center>
</th>
<th>
<Center c={AdminColor.white} w={200}>Aksi</Center>
<Center c={AdminColor.white}>Aksi</Center>
</th>
</tr>
</thead>
<tbody>{rowTable}</tbody>
<tbody>{rowTable()}</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>

53
src/app_modules/admin/forum/lib/api_fetch_admin_forum.ts
View File

@@ -6,6 +6,7 @@ export {
apiGetAdminForumReportKomentar,
apiGetAdminForumPublish,
apiGetAdminHasilReportPosting,
apiAdminGetKomentarForumById,
};
const apiGetAdminForumPublishCountDasboard = async () => {
@@ -159,3 +160,55 @@ const apiGetAdminHasilReportPosting = async ({
return await response.json().catch(() => null);
};
const apiAdminGetKomentarForumById = async ({
id,
page,
search,
}: {
id: string;
page?: string;
search?: string;
}) => {
try {
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
if (!token) {
console.error("No token found");
return null;
}
const isPage = page ? `?page=${page}` : "";
const isSearch = search ? `&search=${search}` : "";
const response = await fetch(
`/api/admin/forum/${id}/komentar${isPage}${isSearch}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
}
);
// Check if the response is OK
if (!response.ok) {
const errorData = await response.json().catch(() => null);
console.error(
"Failed to get admin komentar forum",
response.statusText,
errorData
);
throw new Error(
errorData?.message || "Failed to get admin komentar forum"
);
}
// Return the JSON response
const resulst = await response.json();
return resulst;
} catch (error) {
console.error("Error get admin komentar forum", error);
throw error; // Re-throw the error to handle it in the calling function
}
};

55
src/app_modules/admin/forum/sub_menu/table_posting.tsx
View File

@@ -96,20 +96,17 @@ function TablePublish() {
);
}
return data?.map((e, i) => (
<tr key={i} style={{
color: AdminColor.white
}}>
{/* Aksi */}
<tr
key={i}
style={{
color: AdminColor.white,
}}
>
{/* Author */}
<td>
<Stack align="center" spacing={"xs"}>
<ButtonAction postingId={e?.id} />
<ComponentAdminForum_ButtonDeletePosting
postingId={e?.id}
onSuccesDelete={(val) => {
onDelete(val);
}}
/>
</Stack>
<Box w={100}>
<Text lineClamp={1}>{e?.Author?.username}</Text>
</Box>
</td>
{/* Status */}
@@ -127,15 +124,6 @@ function TablePublish() {
</Center>
</td>
{/* Author */}
<td>
<Box w={100}>
<Text lineClamp={1}>
{e?.Author?.username}
</Text>
</Box>
</td>
{/* Deskripsi */}
<td>
<Box w={150}>
@@ -176,6 +164,19 @@ function TablePublish() {
</Center>
</td>
{/* Aksi */}
<td>
<Stack align="center" spacing={"xs"}>
<ButtonAction postingId={e?.id} />
<ComponentAdminForum_ButtonDeletePosting
postingId={e?.id}
onSuccesDelete={(val) => {
onDelete(val);
}}
/>
</Stack>
</td>
{/* <td>
<Box w={100}>
<Text>
@@ -222,15 +223,11 @@ function TablePublish() {
<thead>
<tr>
<th>
<Center c={AdminColor.white}>Aksi</Center>
<Text c={AdminColor.white}>Username</Text>
</th>
<th>
<Center c={AdminColor.white}>Status</Center>
</th>
<th>
<Text c={AdminColor.white}>Username</Text>
</th>
<th>
<Text c={AdminColor.white}>Postingan</Text>
</th>
@@ -240,6 +237,10 @@ function TablePublish() {
<th>
<Center c={AdminColor.white}>Total Report Posting</Center>
</th>
<th>
<Center c={AdminColor.white}>Aksi</Center>
</th>
</tr>
</thead>
<tbody>{renderTableBody()}</tbody>