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

fix admin forum

Browse Source 
deskripsi:
- fix tampilan table admin untuk set inner html : unutk stiker view
This commit is contained in:
Bagasbanuna02
2025-04-28 11:15:02 +08:00
parent a338dafc80
commit 48150f789c
7 changed files with 206 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app_modules/admin/forum/component/comp_table_set_html_stiker.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { Box, Spoiler } from "@mantine/core";
export const AdminForum_CompTableSetHtmlStiker = ({
data,
classname,
maxHeight,
boxWidth,
}: {
data: string;
classname: string;
maxHeight?: number;
boxWidth?: number;
}) => {
return (
<>
<Box w={boxWidth ?? 250}>
<Spoiler
maxHeight={maxHeight ?? 50}
hideLabel="sembunyikan"
showLabel="tampilkan"
>
<Comp_V3_SetHtmlWithSticker props={data} className={classname} />
</Spoiler>
</Box>
</>
);
};

32
src/app_modules/admin/forum/component/detail_one_komentar.tsx
View File

@@ -17,12 +17,30 @@ import {
Text,
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { AdminForum_CompTableSetHtmlStiker } from "./comp_table_set_html_stiker";
export default function ComponentAdminForum_ViewOneDetailKomentar({
dataKomentar,
}: {
dataKomentar: MODEL_FORUM_KOMENTAR;
}) {
useShallowEffect(() => {
// Add custom style for stickers inside Quill editor
const style = document.createElement("style");
style.textContent = `
.chat-content img {
max-width: 70px !important;
max-height: 70px !important;
}
`;
document.head.appendChild(style);
return () => {
// Clean up when component unmounts
document.head.removeChild(style);
};
}, []);
return (
<>
<Stack spacing={"xs"} h={"100%"}>
@@ -40,15 +58,11 @@ export default function ComponentAdminForum_ViewOneDetailKomentar({
{/* <Divider /> */}
</Stack>
<Box>
<Spoiler
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<Comp_DangerouslySetInnerHTML props={dataKomentar?.komentar} />
</Spoiler>
</Box>
<AdminForum_CompTableSetHtmlStiker
data={dataKomentar.komentar}
classname="chat-content"
maxHeight={100}
/>
</Stack>
</Paper>
</Stack>

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

@@ -4,68 +4,71 @@ import { AdminColor } from "@/app_modules/_global/color/color_pallet";
import { MODEL_FORUM_POSTING } from "@/app_modules/forum/model/interface";
import {
Badge,
Box,
Divider,
Group,
Paper,
Spoiler,
Stack,
Text,
Title,
Text
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
import { AdminForum_CompTableSetHtmlStiker } from "./comp_table_set_html_stiker";
export default function ComponentAdminForum_ViewOneDetailPosting({
dataPosting,
}: {
dataPosting: MODEL_FORUM_POSTING;
}) {
useShallowEffect(() => {
// Add custom style for stickers inside Quill editor
const style = document.createElement("style");
style.textContent = `
.chat-content img {
max-width: 70px !important;
max-height: 70px !important;
}
`;
document.head.appendChild(style);
return () => {
// Clean up when component unmounts
document.head.removeChild(style);
};
}, []);
return (
<>
<Admin_V3_ComponentBreakpoint cols={2}>
<Paper p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
<Stack>
<Stack spacing={5}>
<Admin_V3_ComponentBreakpoint allCols={2}>
<Text c={AdminColor.white} fw={"bold"}>
Username:{" "}
<Text span inherit lineClamp={1}>
{dataPosting?.Author?.username}
</Text>
<Paper p={"md"} radius={"md"} bg={AdminColor.softBlue} shadow="sm">
<Stack>
<Stack spacing={5}>
<Admin_V3_ComponentBreakpoint allCols={2}>
<Text c={AdminColor.white} fw={"bold"}>
Username:{" "}
<Text span inherit lineClamp={1}>
{dataPosting?.Author?.username}
</Text>
</Text>
<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}
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<div
dangerouslySetInnerHTML={{
__html: dataPosting?.diskusi,
}}
/>
</Spoiler>
</Box>
<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>
</Paper>
</Admin_V3_ComponentBreakpoint>
<AdminForum_CompTableSetHtmlStiker
data={dataPosting.diskusi}
classname="chat-content"
maxHeight={100}
/>
</Stack>
</Paper>
</>
);
}

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

@@ -1,21 +1,20 @@
"use client";
import { RouterAdminForum } from "@/lib/router_admin/router_admin_forum";
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 ComponentAdminDonasi_TombolKembali from "@/app_modules/admin/donasi/component/tombol_kembali";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import {
MODEL_FORUM_KOMENTAR,
MODEL_FORUM_POSTING,
} from "@/app_modules/forum/model/interface";
import { RouterAdminForum } from "@/lib/router_admin/router_admin_forum";
import {
Badge,
Box,
Button,
Center,
Grid,
Group,
Modal,
Pagination,
Paper,
ScrollArea,
Spoiler,
@@ -25,27 +24,21 @@ import {
TextInput,
Title,
} from "@mantine/core";
import { IconSearch, IconTrash } from "@tabler/icons-react";
import { IconFlag3 } from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
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, 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 { IconFlag3, IconSearch, IconTrash } from "@tabler/icons-react";
import moment from "moment";
import "moment/locale/id";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import { Admin_ComponentModal } from "../../_admin_global/_component/comp_admin_modal";
import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import ComponentAdminForum_ViewOneDetailPosting from "../component/detail_one_posting";
import { adminForum_funDeleteKomentarById } from "../fun/delete/fun_delete_komentar_by_id";
import { apiAdminGetKomentarForumById } from "../lib/api_fetch_admin_forum";
import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
export default function AdminForum_DetailPosting({
dataPosting,
@@ -54,11 +47,12 @@ export default function AdminForum_DetailPosting({
}) {
return (
<>
{/* <pre>{JSON.stringify(listKomentar, null, 2)}</pre> */}
<Stack>
<ComponentAdminGlobal_HeaderTamplate name="Forum: Detail" />
<AdminGlobal_ComponentBackButton />
<ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
<Admin_V3_ComponentBreakpoint>
<ComponentAdminForum_ViewOneDetailPosting dataPosting={dataPosting} />
</Admin_V3_ComponentBreakpoint>
<TableKomentar postingId={dataPosting.id} />
</Stack>
</>
@@ -90,6 +84,7 @@ function TableKomentar({ postingId }: { postingId: string }) {
if (response && response.success) {
setData(response.data.data);
setDelete(false);
setNPage(response.data.nCount || 1);
}
} catch (error) {
console.error("Invalid data format received:", error);
@@ -106,6 +101,22 @@ function TableKomentar({ postingId }: { postingId: string }) {
setActivePage(p);
}
useShallowEffect(() => {
// Add custom style for stickers inside Quill editor
const style = document.createElement("style");
style.textContent = `
.chat-content img {
max-width: 70px !important;
max-height: 70px !important;
}
`;
document.head.appendChild(style);
return () => {
// Clean up when component unmounts
document.head.removeChild(style);
};
}, []);
const rowTable = () => {
if (!Array.isArray(data) || data.length === 0) {
return (
@@ -120,26 +131,17 @@ 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>
</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>
<AdminForum_CompTableSetHtmlStiker
data={e.komentar}
classname="chat-content"
/>
</td>
<td>
<Box c={AdminColor.white} w={100}>

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

@@ -28,6 +28,8 @@ import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/com
import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
import { apiGetAdminForumPublish } from "../lib/api_fetch_admin_forum";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
export default function AdminForum_TablePosting() {
return (
@@ -48,6 +50,22 @@ function TablePublish() {
const [isSearch, setSearch] = useState("");
const [isDelete, setDelete] = useState(false);
useShallowEffect(() => {
// Add custom style for stickers inside Quill editor
const style = document.createElement("style");
style.textContent = `
.chat-content img {
max-width: 70px !important;
max-height: 70px !important;
}
`;
document.head.appendChild(style);
return () => {
// Clean up when component unmounts
document.head.removeChild(style);
};
}, []);
useShallowEffect(() => {
const loadInitialData = async () => {
try {
@@ -123,20 +141,11 @@ function TablePublish() {
{e?.ForumMaster_StatusPosting?.status}
</Badge>
</Center>
</td>
</td>
{/* Deskripsi */}
<td>
<Box w={250}>
<Spoiler
// w={400}
maxHeight={50}
hideLabel="sembunyikan"
showLabel="tampilkan"
>
<Comp_DangerouslySetInnerHTML props={e?.diskusi} />
</Spoiler>
</Box>
<AdminForum_CompTableSetHtmlStiker data={e.diskusi} classname="chat-content" />
</td>
{/* Jumlah komentar */}

39
src/app_modules/admin/forum/sub_menu/table_report_komentar.tsx
View File

@@ -16,7 +16,7 @@ import {
Stack,
Table,
Text,
TextInput
TextInput,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconFlag3, IconSearch } from "@tabler/icons-react";
@@ -25,6 +25,7 @@ import { useState } from "react";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import { apiGetAdminForumReportKomentar } from "../lib/api_fetch_admin_forum";
import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
export default function AdminForum_TableReportKomentar() {
return (
@@ -45,6 +46,22 @@ function TableView() {
const [activePage, setActivePage] = useState(1);
const [isSearch, setSearch] = useState("");
useShallowEffect(() => {
// Add custom style for stickers inside Quill editor
const style = document.createElement("style");
style.textContent = `
.chat-content img {
max-width: 70px !important;
max-height: 70px !important;
}
`;
document.head.appendChild(style);
return () => {
// Clean up when component unmounts
document.head.removeChild(style);
};
}, []);
useShallowEffect(() => {
const loadInitialData = async () => {
try {
@@ -111,22 +128,10 @@ function TableView() {
</td>
<td>
<Box w={150}>
<Spoiler
style={{ textAlign: "justify", textJustify: "auto" }}
c={AdminColor.white}
// w={400}
maxHeight={50}
hideLabel="sembunyikan"
showLabel="tampilkan"
>
<div
dangerouslySetInnerHTML={{
__html: e?.Forum_Komentar.komentar,
}}
/>
</Spoiler>
</Box>
<AdminForum_CompTableSetHtmlStiker
data={e.Forum_Komentar.komentar}
classname="chat-content"
/>
</td>
<td>

41
src/app_modules/admin/forum/sub_menu/table_report_posting.tsx
View File

@@ -17,7 +17,7 @@ import {
Stack,
Table,
Text,
TextInput
TextInput,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconFlag3, IconSearch } from "@tabler/icons-react";
@@ -26,6 +26,7 @@ import { useState } from "react";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import { apiGetAdminForumReportPosting } from "../lib/api_fetch_admin_forum";
import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
export default function AdminForum_TableReportPosting() {
return (
@@ -46,6 +47,22 @@ function TableView() {
const [activePage, setActivePage] = useState(1);
const [isSearch, setSearch] = useState("");
useShallowEffect(() => {
// Add custom style for stickers inside Quill editor
const style = document.createElement("style");
style.textContent = `
.chat-content img {
max-width: 70px !important;
max-height: 70px !important;
}
`;
document.head.appendChild(style);
return () => {
// Clean up when component unmounts
document.head.removeChild(style);
};
}, []);
useShallowEffect(() => {
const loadInitialData = async () => {
try {
@@ -106,20 +123,10 @@ function TableView() {
</td>
<td>
<Box w={150}>
<Spoiler
// w={400}
maxHeight={50}
hideLabel="sembunyikan"
showLabel="tampilkan"
>
<div
dangerouslySetInnerHTML={{
__html: e?.Forum_Posting.diskusi,
}}
/>
</Spoiler>
</Box>
<AdminForum_CompTableSetHtmlStiker
data={e.Forum_Posting.diskusi}
classname="chat-content"
/>
</td>
<td>
@@ -187,9 +194,7 @@ function TableView() {
<Text c={AdminColor.white}>Postingan</Text>
</th>
<th>
<Center c={AdminColor.white}>
Status Posting
</Center>
<Center c={AdminColor.white}>Status Posting</Center>
</th>
<th>