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

Perbaikan UI pada Forum

Browse Source 
# style:
- Tampilan keseluruhan forum di ganti menguikuti UI
## No Issue
This commit is contained in:
Bagasbanuna02
2024-07-01 14:26:26 +08:00
parent af6fc79ef7
commit 11b5e8f722
91 changed files with 2711 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/app_modules/forum/component/beranda/beranda_card.tsx
View File

@@ -1,99 +0,0 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { Stack, Card, Group, ActionIcon, Divider, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleOff } from "@tabler/icons-react";
import { useState } from "react";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useAtom } from "jotai";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { IconMessageCircleX } from "@tabler/icons-react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_BerandaAuthorNameOnHeader from "./beranda_author_header";
export default function ComponentForum_BerandaCardView({
data,
setData,
setLoadingKomen,
setLoadingDetail,
userLoginId,
}: {
data: MODEL_FORUM_POSTING[];
setData: any;
setLoadingKomen: any;
setLoadingDetail: any;
userLoginId: any;
}) {
const router = useRouter();
return (
<>
<Stack spacing={"xl"}>
{data.map((e, i) => (
<Card key={i}>
<Card.Section>
<ComponentForum_BerandaAuthorNameOnHeader
authorName={e?.Author?.Profile?.name}
imagesId={e?.Author?.Profile?.imagesId}
tglPublish={e?.createdAt}
isMoreButton={true}
authorId={e?.Author?.id}
postingId={e?.id}
statusId={e?.ForumMaster_StatusPosting?.id}
userLoginId={userLoginId}
setData={setData}
/>
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"lg"}
onClick={() => {
setLoadingDetail(true);
router.push(RouterForum.main_detail + e.id);
}}
>
<Text fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: e.diskusi }} />
</Text>
</Card.Section>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
// loading={loadingKomen ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
onClick={() => {
(e?.ForumMaster_StatusPosting.id as any) === 1
? (router.push(RouterForum.komentar + e?.id),
setLoadingKomen(true))
: router.push(RouterForum.main_detail + e?.id);
}}
>
{(e?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="gray" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
</ActionIcon>
{/* <TotalKomentar postingId={e?.id} /> */}
<Text c={"gray"}>{e?._count}</Text>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>
))}
</Stack>
</>
);
}

119
src/app_modules/forum/component/detail_component/detail_create_komentar.tsx Normal file
View File

@@ -0,0 +1,119 @@
"use client"
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
import { Stack, Paper, Group, Button, Divider } from "@mantine/core";
import { useState } from "react";
import dynamic from "next/dynamic";
const ReactQuill = dynamic(
() => {
return import("react-quill");
},
{ ssr: false }
);
import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import { useRouter } from "next/navigation";
export default function ComponentForum_DetailCreateKomentar({
postingId,
onSetKomentar,
data,
userLoginId,
}: {
postingId: string;
onSetKomentar: (val: any) => void;
data: MODEL_FORUM_POSTING;
userLoginId: string;
}) {
const router = useRouter();
const [value, setValue] = useState("");
const [loading, setLoading] = useState(false);
const [isEmpty, setIsEmpty] = useState(false);
async function onComment() {
if (value.length > 500) {
return null;
}
const createComment = await forum_funCreateKomentar(postingId, value);
if (createComment.status === 201) {
const loadKomentar = await forum_funGetAllKomentarById(data.id);
onSetKomentar(loadKomentar);
setValue("");
setIsEmpty(true);
ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);
if (userLoginId !== data.Author.id) {
const dataNotif = {
appId: data.id,
userId: data.authorId,
pesan: value,
kategoriApp: "FORUM",
title: "Komentar baru",
};
const createNotifikasi = await notifikasiToUser_funCreate({
data: dataNotif as any,
});
if (createNotifikasi.status === 201) {
mqtt_client.publish(
"USER",
JSON.stringify({
userId: dataNotif.userId,
count: 1,
})
);
}
}
} else {
ComponentGlobal_NotifikasiGagal(createComment.message);
}
}
return (
<>
<Stack>
<Paper withBorder shadow="lg">
<ReactQuill
value={value}
theme="bubble"
placeholder="Ketik komentar anda?"
onChange={(val) => {
setValue(val);
}}
/>
</Paper>
<Group position="apart">
<ComponentGlobal_InputCountDown
maxInput={500}
lengthInput={value.length}
/>
<Button
style={{
transition: "0.5s",
}}
disabled={
value === "" || value === "<p><br></p>" || value.length > 500
? true
: false
}
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}
onClick={() => onComment()}
>
Balas
</Button>
</Group>
<Divider />
</Stack>
</>
);
}

82
src/app_modules/forum/component/detail_component/detail_list_komentar.tsx Normal file
View File

@@ -0,0 +1,82 @@
"use client"
import { Stack, Center, Box, Card, Spoiler, Divider, Text } from "@mantine/core";
import _ from "lodash";
import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
export default function ComponentForum_ListKomentarView({
listKomentar,
setKomentar,
postingId,
userLoginId,
}: {
listKomentar: MODEL_FORUM_KOMENTAR[];
setKomentar: any;
postingId: string;
userLoginId: string;
}) {
return (
<>
<Stack>
{_.isEmpty(listKomentar) ? (
<Center>
<Text fw={"bold"} fz={"xs"} c={"gray"}>
Belum ada komentar
</Text>
</Center>
) : (
<Box>
<Center>
<Text fz={"xs"} c={"gray"}>
{" "}
Komentar
</Text>
</Center>
{listKomentar.map((e, i) => (
<Card key={i} mt={"xs"}>
<Card.Section>
<ComponentForum_KomentarAuthorNameOnHeader
authorName={e?.Author?.Profile?.name}
imagesId={e?.Author?.Profile?.imagesId}
tglPublish={e?.createdAt}
userId={e?.Author?.id}
komentarId={e?.id}
isMoreButton={true}
setKomentar={setKomentar}
postingId={postingId}
userLoginId={userLoginId}
/>
</Card.Section>
<Card.Section sx={{ zIndex: 0 }} p={"sm"}>
<Stack spacing={"xs"}>
<Text fz={"sm"} lineClamp={4}>
{e.komentar ? (
<Spoiler
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<div
dangerouslySetInnerHTML={{ __html: e.komentar }}
/>
</Spoiler>
) : (
""
)}
</Text>
</Stack>
</Card.Section>
<Card.Section>
<Stack>
<Divider />
</Stack>
</Card.Section>
</Card>
))}
</Box>
)}
</Stack>
</>
);
}

81
src/app_modules/forum/component/detail_component/detail_view.tsx Normal file
View File

@@ -0,0 +1,81 @@
"use client";
import { Card, Stack, Group, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_DetailHeader from "./detail_header";
export default function ComponentForum_DetailForumView({
data,
totalKomentar,
userLoginId,
onLoadData,
}: {
data: MODEL_FORUM_POSTING;
totalKomentar: number;
userLoginId: string;
onLoadData: (val: any) => void;
}) {
return (
<>
<Card style={{ position: "relative", width: "100%" }}>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
{/* HEADER */}
<Card.Section>
<ComponentForum_DetailHeader
data={data}
userLoginId={userLoginId}
onLoadData={(val) => {
onLoadData(val);
}}
/>
</Card.Section>
{/* CONTENT */}
<Card.Section sx={{ zIndex: 0 }} py={"sm"}>
<Stack spacing={"xs"}>
<Text fz={"sm"}>
{data?.diskusi ? (
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
) : (
""
)}
</Text>
</Stack>
</Card.Section>
{/* FOOTER */}
<Card.Section>
<Stack>
<Group position="apart">
<Group spacing={"xs"}>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="gray" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
<Text c={"gray"}>{totalKomentar}</Text>
</Group>
<Group>
<Text c={"gray"} fz={"sm"}>
{new Date(data?.createdAt).toLocaleTimeString()}
{/* {new Intl.RelativeTimeFormat("id", {style: "short"}).format(-1,"day")} */}
</Text>
<Text c={"gray"} fz={"sm"}>
{data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})
: new Date().toLocaleDateString(["id-ID"], {
dateStyle: "medium",
})}
</Text>
</Group>
</Group>
</Stack>
</Card.Section>
</Card>
</>
);
}

121
src/app_modules/forum/component/beranda/beranda_author_header.tsx → src/app_modules/forum/component/forumku_component/forumku_header.tsx
View File

@@ -1,79 +1,48 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
Stack,
Grid,
Avatar,
Divider,
Text,
Group,
Badge,
Loader,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import moment from "moment";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import {
IconCircleFilled,
IconDots,
IconEdit,
IconFlag3,
IconMessageCircle,
IconTrash,
} from "@tabler/icons-react";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { Avatar, Badge, Grid, Group, Loader, Stack, Text } from "@mantine/core";
import { IconCircle } from "@tabler/icons-react";
import { IoIosMore } from "react-icons/io";
import { useDisclosure } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import { data } from "autoprefixer";
import ComponentForum_BerandaButtonMore from "./beranda_button_more";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_ForumkuMoreButton from "./forumku_more_button";
export default function ComponentForum_BerandaAuthorNameOnHeader({
authorId,
postingId,
imagesId,
authorName,
tglPublish,
isPembatas,
export default function ComponentForum_ForumkuHeaderCard({
data,
isMoreButton,
statusId,
userLoginId,
setData,
onLoadData,
allData,
}: {
authorId?: string;
postingId?: string;
imagesId?: string;
authorName?: string;
tglPublish?: Date;
isPembatas?: boolean;
isMoreButton?: boolean;
statusId?: string;
data: MODEL_FORUM_POSTING;
isMoreButton: boolean;
userLoginId: string;
setData?: any;
onLoadData: (val: any) => void;
allData: any[];
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
return (
<>
<Stack spacing={"xs"}>
<Grid>
<Grid align="center">
<Grid.Col
span={"content"}
onClick={() => {
if (authorId) {
setLoading(true);
router.push(RouterForum.forumku + authorId);
if (data.Author.id) {
setIsLoading(true);
router.push(RouterForum.forumku + data.Author.id);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
}}
>
{loading ? (
{isLoading ? (
<Loader color="gray" variant="dots" />
) : (
<Avatar
@@ -82,8 +51,9 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
radius={"xl"}
bg={"gray.1"}
src={
imagesId
? RouterProfile.api_foto_profile + imagesId
data.Author.Profile.imagesId
? RouterProfile.api_foto_profile +
data.Author.Profile.imagesId
: "/aset/global/avatar.png"
}
/>
@@ -91,23 +61,28 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack justify="center" h={"100%"} spacing={0}>
<Stack justify="center" h={"100%"} spacing={3}>
<Grid>
<Grid.Col span={"auto"}>
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
{authorName ? authorName : "Nama author "}
<Text lineClamp={1} fz={"sm"} fw={"bold"} c={"white"}>
{data.Author.username
? data.Author.username
: "Nama author "}
</Text>
</Grid.Col>
<Grid.Col span={"content"}></Grid.Col>
</Grid>
<Badge
w={70}
variant="light"
color={(statusId as any) === 1 ? "green" : "red"}
variant="outline"
color={
(data.ForumMaster_StatusPosting.id as any) === 1
? "green"
: "red"
}
>
<Text fz={10}>
{(statusId as any) === 1 ? "Open" : "Close"}
</Text>
<Text c={"white"} fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
</Badge>
</Stack>
</Grid.Col>
@@ -115,9 +90,9 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
<Grid.Col span={"content"}>
<Group position="center" spacing={"xs"}>
<Group spacing={3}>
<Text c={"gray"} fz={"sm"}>
{tglPublish
? tglPublish.toLocaleDateString(["id-ID"], {
<Text c={"white"} fz={"sm"} >
{data.createdAt !== undefined && data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
day: "numeric",
month: "short",
})
@@ -125,9 +100,10 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
day: "numeric",
month: "short",
})}
<IconCircle
size={5}
color="gray"
color="white"
style={{ marginLeft: "5px" }}
/>
</Text>
@@ -135,12 +111,13 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
{isMoreButton ? (
<Group position="right">
<ComponentForum_BerandaButtonMore
authorId={authorId}
postingId={postingId as any}
statusId={statusId}
<ComponentForum_ForumkuMoreButton
authorId={data?.Author.id}
postingId={data?.id}
statusId={data?.ForumMaster_StatusPosting.id}
userLoginId={userLoginId}
setData={setData}
onLoadData={onLoadData}
allData={allData}
/>
</Group>
) : (
@@ -149,7 +126,7 @@ export default function ComponentForum_BerandaAuthorNameOnHeader({
</Group>
</Grid.Col>
</Grid>
{isPembatas ? <Divider /> : ""}
{/* {isPembatas ? <Divider /> : ""} */}
</Stack>
</>
);

228
src/app_modules/forum/component/beranda/beranda_button_more.tsx → src/app_modules/forum/component/forumku_component/forumku_more_button.tsx
View File

@@ -3,55 +3,50 @@
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import {
Drawer,
Stack,
Grid,
Button,
Modal,
Title,
Group,
ActionIcon,
Text,
Box,
Center,
Button,
Drawer,
Grid,
Group,
Loader,
Modal,
Stack,
Text,
Title,
} from "@mantine/core";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { useDisclosure } from "@mantine/hooks";
import {
IconTrash,
IconDots,
IconEdit,
IconFlag3,
IconDots,
IconSquareRoundedX,
IconSquareCheck,
IconSquareRoundedX,
IconTrash,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { createStyles } from "@mantine/core";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import { useAtom } from "jotai";
import { gs_forum_loading_edit_posting } from "../../global_state";
import ComponentForum_LoadingDrawer from "../loading_drawer";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import mqtt_client from "@/util/mqtt_client";
import _ from "lodash";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
import { forum_getListAllPosting } from "../../fun/get/get_list_all_posting";
import { forum_getListPostingByAuhtorId } from "../../fun/get/get_list_posting_by_author_id";
import { MODEL_FORUM_POSTING } from "../../model/interface";
export default function ComponentForum_BerandaButtonMore({
export default function ComponentForum_ForumkuMoreButton({
authorId,
postingId,
statusId,
userLoginId,
setData,
onLoadData,
allData,
}: {
authorId: any;
postingId?: any;
statusId?: any;
userLoginId: any;
setData: any;
onLoadData: (val: any) => void;
allData: any[];
}) {
const router = useRouter();
@@ -177,8 +172,12 @@ export default function ComponentForum_BerandaButtonMore({
<ButtonDelete
postingId={postingId}
setOpenDel={setOpenDel}
setData={setData}
onLoadData={(val) => {
onLoadData(val);
}}
allData={allData}
/>
{/* <pre>{JSON.stringify(allData, null, 2)}</pre> */}
</Modal>
<Modal
@@ -191,13 +190,16 @@ export default function ComponentForum_BerandaButtonMore({
postingId={postingId}
setOpenStatus={setOpenStatusClose}
statusId={statusId}
setData={setData}
onLoadData={(val) => {
onLoadData(val);
}}
userLoginId={userLoginId}
authorId={authorId}
allData={allData}
/>
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<ActionIcon c="white" variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
@@ -207,11 +209,13 @@ export default function ComponentForum_BerandaButtonMore({
function ButtonDelete({
postingId,
setOpenDel,
setData,
onLoadData,
allData,
}: {
postingId?: string;
setOpenDel: any;
setData: any;
onLoadData: (val: any) => void;
allData: MODEL_FORUM_POSTING[];
}) {
const [loading, setLoading] = useState(false);
@@ -219,14 +223,22 @@ function ButtonDelete({
setOpenDel(false);
await forum_funDeletePostingById(postingId as any).then(async (res) => {
if (res.status === 200) {
// ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
setLoading(true);
const listForum = await forum_getListAllPosting();
setData(listForum);
return null;
const cloneData = _.clone(allData);
const hapusData = cloneData.filter((e) => e.id !== postingId);
onLoadData(hapusData);
mqtt_client.publish(
"Forum_hapus_data",
JSON.stringify({
data: hapusData,
})
);
} else {
// ComponentGlobal_NotifikasiGagal(res.message);
return null;
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}
@@ -259,16 +271,18 @@ function ButtonStatus({
postingId,
setOpenStatus,
statusId,
setData,
onLoadData,
userLoginId,
authorId,
allData,
}: {
postingId?: string;
setOpenStatus: any;
statusId?: any;
setData: any;
onLoadData: (val: any) => void;
userLoginId: string;
authorId: string;
allData: MODEL_FORUM_POSTING[];
}) {
const [loading, setLoading] = useState(false);
@@ -280,48 +294,116 @@ function ButtonStatus({
2
);
if (upateStatusClose.status === 200) {
const loadData = await forum_getListAllPosting();
// ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
setData(loadData);
ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
setLoading(true);
return null;
} else {
// ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
return null;
}
// await forum_funEditStatusPostingById(postingId as any, 2).then(
// async (res) => {
// if (res.status === 200) {
// await forum_getListAllPosting().then((val) => {
// setData(val as any);
// ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
// setLoading(true);
// });
// } else {
// ComponentGlobal_NotifikasiGagal(res.message);
// }
// }
// );
const cloneData = _.clone(allData);
const loadData = cloneData.map(
(e) => (
e.id === postingId,
{
...e,
ForumMaster_StatusPosting: {
id: e.id === postingId ? 2 : e.ForumMaster_StatusPosting.id,
status:
e.id === postingId
? "Close"
: e.ForumMaster_StatusPosting.status,
},
}
)
);
onLoadData(loadData);
//
mqtt_client.publish(
"Forum_ganti_status",
JSON.stringify({
id: postingId,
data: loadData,
})
);
const findData = cloneData.find((val) => val.id === postingId);
const updateDetail = {
...findData,
ForumMaster_StatusPosting: {
id: 2,
status: "Close",
},
};
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
id: postingId,
data: updateDetail.ForumMaster_StatusPosting,
})
);
} else {
ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
}
}
async function onBukaForum() {
setOpenStatus(false);
await forum_funEditStatusPostingById(postingId as any, 1).then(
async (res) => {
if (res.status === 200) {
await forum_getListAllPosting().then((val) => {
setData(val as any);
ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
setLoading(true);
});
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
}
const updateStatusOpen = await forum_funEditStatusPostingById(
postingId as any,
1
);
if (updateStatusOpen.status === 200) {
ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
setLoading(true);
const cloneData = _.clone(allData);
const loadData = cloneData.map(
(e) => (
e.id === postingId,
{
...e,
ForumMaster_StatusPosting: {
id: e.id === postingId ? 1 : e.ForumMaster_StatusPosting.id,
status:
e.id === postingId
? "Open"
: e.ForumMaster_StatusPosting.status,
},
}
)
);
mqtt_client.publish(
"Forum_ganti_status",
JSON.stringify({
id: postingId,
data: loadData,
})
);
onLoadData(loadData);
const findData = cloneData.find((val) => val.id === postingId);
const updateDetail = {
...findData,
ForumMaster_StatusPosting: {
id: 1,
status: "Open",
},
};
console.log(updateDetail.ForumMaster_StatusPosting);
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
id: postingId,
data: updateDetail.ForumMaster_StatusPosting,
})
);
} else {
ComponentGlobal_NotifikasiGagal(updateStatusOpen.message);
}
}
return (

88
src/app_modules/forum/component/forumku_component/forumku_view.tsx Normal file
View File

@@ -0,0 +1,88 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { ActionIcon, Card, Divider, Group, Stack, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_ForumkuHeaderCard from "./forumku_header";
import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_ForumkuMainCardView({
data,
userLoginId,
onLoadData,
allData,
}: {
data: MODEL_FORUM_POSTING;
userLoginId: string;
onLoadData: (val: any) => void;
allData: any[];
}) {
const router = useRouter();
const [loadingKomen, setLoadingKomen] = useState(false);
const [loadingDetail, setLoadingDetail] = useState(false);
const [postingId, setPostingId] = useState("");
return (
<>
{/* <pre>{JSON.stringify(data, null,2)}</pre> */}
<Card
mb={"md"}
p={"xl"}
bg={MainColor.darkblue}
style={{
border: `2px solid ${AccentColor.blue}`,
}}
radius={"md"}
>
<Card.Section>
<ComponentForum_ForumkuHeaderCard
data={data}
isMoreButton={true}
userLoginId={userLoginId}
onLoadData={onLoadData}
allData={allData}
/>
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"lg"}
onClick={() => {
router.push(RouterForum.main_detail + data?.id);
}}
>
<Text c={"white"} fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
</Text>
</Card.Section>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
loading={loadingKomen && data?.id === postingId ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="white" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
</ActionIcon>
{/* <TotalKomentar postingId={e?.id} /> */}
<Text c={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" : "gray"}>{data?.Forum_Komentar.length}</Text>
</Group>
</Stack>
</Card.Section>
</Card>
</>
);
}

2
src/app_modules/forum/component/header/komentar_author_header_name.tsx → src/app_modules/forum/component/komentar_component/komentar_author_header_name.tsx
View File

@@ -19,7 +19,7 @@ import { IoIosMore } from "react-icons/io";
import { useDisclosure } from "@mantine/hooks";
import { useState } from "react";
import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
import ComponentForum_KomentarButtonMore from "../more_button/komentar_button_more";
import ComponentForum_KomentarButtonMore from "./komentar_button_more";
export default function ComponentForum_KomentarAuthorNameOnHeader({
userId,

4
src/app_modules/forum/component/more_button/komentar_button_more.tsx → src/app_modules/forum/component/komentar_component/komentar_button_more.tsx
View File

@@ -30,7 +30,7 @@ import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { forum_funDeleteKomentarById } from "../../fun/delete/fun_delete_komentar_by_id";
import { forum_getKomentarById } from "../../fun/get/get_komentar_by_id";
import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
export default function ComponentForum_KomentarButtonMore({
userId,
@@ -178,7 +178,7 @@ function ButtonDelete({
async function onDelete() {
await forum_funDeleteKomentarById(komentarId as any).then(async (res) => {
if (res.status === 200) {
await forum_getKomentarById(postingId as any).then((val) => {
await forum_funGetAllKomentarById(postingId as any).then((val) => {
setKomentar(val);
setOpenDel(false);
setLoading(true);

32
src/app_modules/forum/component/main_component/card_header.tsx
View File

@@ -1,28 +1,24 @@
"use client";
import loading from "@/app/dev/home/loading";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import {
Stack,
Loader,
Avatar,
Badge,
Group,
Divider,
Grid,
Text,
Group,
Loader,
Stack,
Text
} from "@mantine/core";
import { IconCircle } from "@tabler/icons-react";
import ComponentForum_BerandaButtonMore from "../beranda/beranda_button_more";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_V2_CardMoreButton from "./card_more_button";
import ComponentForum_BerandaMoreButton from "./card_more_button";
export default function ComponentForum_V2_HeaderCard({
export default function ComponentForum_BerandaHeaderCard({
data,
isMoreButton,
userLoginId,
@@ -58,7 +54,11 @@ export default function ComponentForum_V2_HeaderCard({
) : (
<Avatar
size={40}
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
sx={{
borderStyle: "solid",
borderWidth: "1px",
borderColor: "white",
}}
radius={"xl"}
bg={"gray.1"}
src={
@@ -75,7 +75,7 @@ export default function ComponentForum_V2_HeaderCard({
<Stack justify="center" h={"100%"} spacing={3}>
<Grid>
<Grid.Col span={"auto"}>
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
<Text lineClamp={1} fz={"sm"} fw={"bold"} color={"white"}>
{data.Author.username
? data.Author.username
: "Nama author "}
@@ -86,7 +86,7 @@ export default function ComponentForum_V2_HeaderCard({
<Badge
w={70}
variant="light"
variant="outline"
color={
(data.ForumMaster_StatusPosting.id as any) === 1
? "green"
@@ -101,7 +101,7 @@ export default function ComponentForum_V2_HeaderCard({
<Grid.Col span={"content"}>
<Group position="center" spacing={"xs"}>
<Group spacing={3}>
<Text c={"gray"} fz={"sm"}>
<Text color={"white"} fz={"sm"}>
{data.createdAt !== undefined && data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
day: "numeric",
@@ -114,7 +114,7 @@ export default function ComponentForum_V2_HeaderCard({
<IconCircle
size={5}
color="gray"
color="white"
style={{ marginLeft: "5px" }}
/>
</Text>
@@ -122,7 +122,7 @@ export default function ComponentForum_V2_HeaderCard({
{isMoreButton ? (
<Group position="right">
<ComponentForum_V2_CardMoreButton
<ComponentForum_BerandaMoreButton
authorId={data?.Author.id}
postingId={data?.id}
statusId={data?.ForumMaster_StatusPosting.id}

52
src/app_modules/forum/component/main_component/card_more_button.tsx
View File

@@ -4,6 +4,7 @@ import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import {
ActionIcon,
Box,
Button,
Drawer,
Grid,
@@ -32,8 +33,12 @@ import _ from "lodash";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_V2_CardMoreButton({
export default function ComponentForum_BerandaMoreButton({
authorId,
postingId,
statusId,
@@ -59,12 +64,15 @@ export default function ComponentForum_V2_CardMoreButton({
const [loadingEdit, setLoadingEdit] = useState(false);
const [loadingReport, setLoadingReport] = useState(false);
// if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
<Drawer
// className={classes.radiusCustom}
// styles={{
// content: {
// backgroundColor: MainColor.darkblue,
// borderTop: `1px solid ${AccentColor.blue}`,
// },
// }}
opened={opened}
onClose={close}
withCloseButton={false}
@@ -77,6 +85,22 @@ export default function ComponentForum_V2_CardMoreButton({
""
) : (
<Stack>
<Grid
onClick={() => {
setLoadingEdit(true);
router.push(RouterForum.edit_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
<Grid
onClick={() => {
close();
@@ -112,23 +136,6 @@ export default function ComponentForum_V2_CardMoreButton({
<Text c={"red"}>Hapus</Text>
</Grid.Col>
</Grid>
<Grid
onClick={() => {
setLoadingEdit(true);
router.push(RouterForum.edit_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
</Stack>
)}
@@ -199,7 +206,7 @@ export default function ComponentForum_V2_CardMoreButton({
/>
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<ActionIcon c="white" variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
@@ -237,7 +244,6 @@ function ButtonDelete({
data: hapusData,
})
);
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}

36
src/app_modules/forum/component/main_component/card_view.tsx
View File

@@ -6,9 +6,13 @@ import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_V2_HeaderCard from "./card_header";
import ComponentForum_BerandaHeaderCard from "./card_header";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_V2_MainCardView({
export default function ComponentForum_BerandaCardView({
data,
userLoginId,
onLoadData,
@@ -27,10 +31,18 @@ export default function ComponentForum_V2_MainCardView({
return (
<>
{/* <pre>{JSON.stringify(data, null,2)}</pre> */}
<Card mb={"md"}>
{/* <pre>{JSON.stringify(data, null,2)}</pre> */}
<Card
mb={"md"}
p={"xl"}
bg={MainColor.darkblue}
style={{
border: `2px solid ${AccentColor.blue}`,
}}
radius={"md"}
>
<Card.Section>
<ComponentForum_V2_HeaderCard
<ComponentForum_BerandaHeaderCard
data={data}
isMoreButton={true}
userLoginId={userLoginId}
@@ -46,7 +58,7 @@ export default function ComponentForum_V2_MainCardView({
router.push(RouterForum.main_detail + data?.id);
}}
>
<Text fz={"sm"} lineClamp={4}>
<Text c="white" fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
</Text>
</Card.Section>
@@ -58,16 +70,9 @@ export default function ComponentForum_V2_MainCardView({
loading={loadingKomen && data?.id === postingId ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
// onClick={() => {
// setPostingId(data?.id),
// (data?.ForumMaster_StatusPosting.id as any) === 1
// ? (router.push(RouterForum.komentar + data?.id),
// setLoadingKomen(true))
// : router.push(RouterForum.main_detail + data?.id);
// }}
>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="gray" size={25} />
<IconMessageCircle color="white" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
@@ -75,9 +80,8 @@ export default function ComponentForum_V2_MainCardView({
{/* <TotalKomentar postingId={e?.id} /> */}
<Text c={"gray"}>{data?.Forum_Komentar.length}</Text>
<Text color={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" :"gray"}>{data?.Forum_Komentar.length}</Text>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>

6
src/app_modules/forum/component/more_button/posting_button_more.tsx
View File

@@ -38,7 +38,7 @@ import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
import { forum_getListAllPosting } from "../../fun/get/get_list_all_posting";
import { forum_getListPostingByAuhtorId } from "../../fun/get/get_list_posting_by_author_id";
import { forum_getAllPostingByAuhtorId } from "../../fun/get/get_list_posting_by_author_id";
export default function ComponentForum_PostingButtonMore({
authorId,
@@ -277,7 +277,7 @@ function ButtonStatus({
async (res) => {
if (res.status === 200) {
if (userLoginId === authorId) {
await forum_getListPostingByAuhtorId(authorId).then((val: any) =>
await forum_getAllPostingByAuhtorId({authorId: authorId, page: 1}).then((val: any) =>
setData(val)
);
} else {
@@ -299,7 +299,7 @@ function ButtonStatus({
async (res) => {
if (res.status === 200) {
if (userLoginId === authorId) {
await forum_getListPostingByAuhtorId(authorId).then((val: any) =>
await forum_getAllPostingByAuhtorId({authorId: authorId, page: 1}).then((val: any) =>
setData(val)
);
} else {