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

Notifiaksi Forum

Browse Source 
# feat
- Notifikasi user to user
- Realtime user to user
## No issuee
This commit is contained in:
Bagasbanuna02
2024-06-20 21:52:14 +08:00
parent edd13ffe0f
commit d904042dfb
32 changed files with 1182 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

466
src/app_modules/forum/component/detail_component/detail_header.tsx Normal file
View File

@@ -0,0 +1,466 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
Stack,
Grid,
Avatar,
Divider,
Text,
Group,
ThemeIcon,
ActionIcon,
Badge,
Button,
Drawer,
Loader,
Modal,
Title,
} 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,
IconSquareCheck,
IconSquareRoundedX,
IconTrash,
} from "@tabler/icons-react";
import { IconCircle } from "@tabler/icons-react";
import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
import ComponentForum_DetailMoreButton from "../more_button/detail_more_button";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import { useDisclosure } from "@mantine/hooks";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
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 { useState } from "react";
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_getOnePostingById } from "../../fun/get/get_one_posting_by_id";
import mqtt_client from "@/util/mqtt_client";
export default function ComponentForum_DetailHeader({
data,
userLoginId,
onLoadData,
}: {
data?: MODEL_FORUM_POSTING;
userLoginId: string;
onLoadData: (val: any) => void;
}) {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Grid>
<Grid.Col
span={"content"}
onClick={() => {
if (data?.Author?.id) {
router.push(RouterForum.forumku + data?.Author?.id);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
}}
>
<Avatar
size={40}
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
radius={"xl"}
bg={"gray.1"}
src={
data?.Author.Profile.imagesId
? RouterProfile.api_foto_profile +
data?.Author.Profile.imagesId
: "/aset/global/avatar.png"
}
/>
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack spacing={0}>
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
{data?.Author.username ? data?.Author.username : "Nama author "}
</Text>
<Badge
w={70}
variant="light"
color={
(data?.ForumMaster_StatusPosting.id as any) === 1
? "green"
: "red"
}
>
<Text fz={10}>
{(data?.ForumMaster_StatusPosting.id as any) === 1
? "Open"
: "Close"}
</Text>
</Badge>
</Stack>
</Grid.Col>
<Grid.Col span={"content"}>
<ComponentForum_DetailButtonMore_V2
postingId={data?.id}
authorId={data?.Author.id}
userLoginId={userLoginId}
statusId={data?.forumMaster_StatusPostingId}
onLoadData={(val) => {
onLoadData(val);
}}
/>
</Grid.Col>
</Grid>
{/* {isPembatas ? <Divider /> : ""} */}
</Stack>
</>
);
}
function ComponentForum_DetailButtonMore_V2({
authorId,
postingId,
statusId,
userLoginId,
onLoadData,
}: {
authorId: any;
postingId?: any;
statusId: any;
userLoginId: any;
onLoadData: (val: any) => void;
}) {
const router = useRouter();
const [opened, { open, close }] = useDisclosure(false);
const [openDel, setOpenDel] = useState(false);
const [openStatusClose, setOpenStatusClose] = useState(false);
// loading
const [loadingEdit, setLoadingEdit] = useState(false);
const [loadingReport, setLoadingReport] = useState(false);
// if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
<Drawer
// className={classes.radiusCustom}
opened={opened}
onClose={close}
withCloseButton={false}
overlayProps={{ opacity: 0.1, blur: 1 }}
position="bottom"
size={"auto"}
>
<Stack>
{userLoginId != authorId ? (
""
) : (
<Stack>
<Grid
onClick={() => {
close();
setOpenStatusClose(true);
}}
>
<Grid.Col span={"content"}>
{statusId === 1 ? (
<IconSquareRoundedX color="red" />
) : (
<IconSquareCheck />
)}
</Grid.Col>
<Grid.Col span={"auto"}>
{statusId === 1 ? (
<Text c={"red"}>Tutup forum</Text>
) : (
<Text>Buka forum</Text>
)}
</Grid.Col>
</Grid>
<Grid
onClick={() => {
close();
setOpenDel(true);
}}
>
<Grid.Col span={"content"}>
<IconTrash color="red" />
</Grid.Col>
<Grid.Col span={"auto"}>
<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>
)}
{userLoginId == authorId ? (
""
) : (
<Grid
onClick={() => {
setLoadingReport(true);
router.push(RouterForum.report_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconFlag3 color={loadingReport ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingReport ? "gray" : "black"}>
Laporkan posting
</Text>{" "}
{loadingReport ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
)}
<Button variant="outline" radius={"xl"} onClick={close}>
Batal
</Button>
</Stack>
</Drawer>
<Modal
opened={openDel}
onClose={() => {
setOpenDel(false);
}}
centered
withCloseButton={false}
>
<ButtonDelete postingId={postingId} setOpenDel={setOpenDel} />
</Modal>
<Modal
opened={openStatusClose}
onClose={() => setOpenStatusClose(false)}
centered
withCloseButton={false}
>
<ButtonStatus
postingId={postingId}
setOpenStatus={setOpenStatusClose}
statusId={statusId}
onLoadData={(val) => {
onLoadData(val);
}}
/>
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
);
}
function ButtonDelete({
postingId,
setOpenDel,
}: {
postingId?: string;
setOpenDel: any;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
if (loading) return <ComponentGlobal_V2_LoadingPage />;
async function onDelete() {
setOpenDel(false);
await forum_funDeletePostingById(postingId as any).then((res) => {
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
setLoading(true);
router.back();
// mqtt_client.publish(
// "Forum_detail_hapus_data",
// JSON.stringify({
// id: postingId,
// })
// );
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}
return (
<>
<Stack>
<Title order={6}>Yakin menghapus posting ini ?</Title>
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenDel(false)}>
Batal
</Button>
<Button
loaderPosition="center"
loading={loading ? true : false}
color="red"
radius={"xl"}
onClick={() => {
onDelete();
}}
>
Hapus
</Button>
</Group>
</Stack>
</>
);
}
function ButtonStatus({
postingId,
setOpenStatus,
statusId,
onLoadData,
}: {
postingId?: string;
setOpenStatus: any;
statusId?: any;
onLoadData: (val: any) => void;
}) {
const [loading, setLoading] = useState(false);
async function onTutupForum() {
setOpenStatus(false);
const closeForum = await forum_funEditStatusPostingById(
postingId as any,
2
);
if (closeForum.status === 200) {
ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
setLoading(true);
const loadData = await forum_getOnePostingById(postingId as any);
onLoadData(loadData);
if (loadData) {
const updateData = {
...loadData,
ForumMaster_StatusPosting: {
id: 2,
status: "Close",
},
};
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
id: postingId,
data: updateData.ForumMaster_StatusPosting,
})
);
}
} else {
ComponentGlobal_NotifikasiGagal(closeForum.message);
}
}
async function onBukaForum() {
setOpenStatus(false);
const openForum = await forum_funEditStatusPostingById(postingId as any, 1);
if (openForum.status === 200) {
ComponentGlobal_NotifikasiBerhasil(`Forum Dibuka`, 2000);
setLoading(true);
const loadData = await forum_getOnePostingById(postingId as any);
onLoadData(loadData);
if (loadData) {
const updateData = {
...loadData,
ForumMaster_StatusPosting: {
id: 1,
status: "Open",
},
};
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
id: postingId,
data: updateData.ForumMaster_StatusPosting,
})
);
}
} else {
ComponentGlobal_NotifikasiGagal(openForum.message);
}
}
return (
<>
<Stack>
{statusId === 1 ? (
<Title order={6}>Yakin menutup forum ini ?</Title>
) : (
<Title order={6}>Yakin membuka forum ini ?</Title>
)}
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenStatus(false)}>
Batal
</Button>
{statusId === 1 ? (
<Button
loaderPosition="center"
loading={loading ? true : false}
color="orange"
radius={"xl"}
onClick={() => {
onTutupForum();
}}
>
Tutup
</Button>
) : (
<Button
loaderPosition="center"
loading={loading ? true : false}
color="green"
radius={"xl"}
onClick={() => {
onBukaForum();
}}
>
Buka
</Button>
)}
</Group>
</Stack>
</>
);
}

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

@@ -27,11 +27,13 @@ export default function ComponentForum_V2_HeaderCard({
isMoreButton,
userLoginId,
onLoadData,
allData,
}: {
data: MODEL_FORUM_POSTING;
isMoreButton: boolean;
userLoginId: string;
onLoadData: (val: any) => void
onLoadData: (val: any) => void;
allData: any[];
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
@@ -91,11 +93,7 @@ export default function ComponentForum_V2_HeaderCard({
: "red"
}
>
<Text fz={10}>
{(data.ForumMaster_StatusPosting.id as any) === 1
? "Open"
: "Close"}
</Text>
<Text fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
</Badge>
</Stack>
</Grid.Col>
@@ -104,8 +102,8 @@ export default function ComponentForum_V2_HeaderCard({
<Group position="center" spacing={"xs"}>
<Group spacing={3}>
<Text c={"gray"} fz={"sm"}>
{data.createdAt
? data.createdAt.toLocaleDateString(["id-ID"], {
{data.createdAt !== undefined && data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
day: "numeric",
month: "short",
})
@@ -130,8 +128,8 @@ export default function ComponentForum_V2_HeaderCard({
statusId={data?.ForumMaster_StatusPosting.id}
userLoginId={userLoginId}
onLoadData={onLoadData}
allData={allData}
/>
</Group>
) : (
""

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

@@ -29,9 +29,11 @@ import { useState } from "react";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
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_new_getAllPosting } from "../../fun/get/new_get_all_posting";
import forum_v2_getAllPosting from "../../fun/get/v2_get_all_posting";
import { forum_new_getAllPosting } from "../../fun/get/new_get_all_posting";
import _ from "lodash";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import mqtt_client from "@/util/mqtt_client";
export default function ComponentForum_V2_CardMoreButton({
authorId,
@@ -39,12 +41,14 @@ export default function ComponentForum_V2_CardMoreButton({
statusId,
userLoginId,
onLoadData,
allData,
}: {
authorId: any;
postingId?: any;
statusId?: any;
userLoginId: any;
onLoadData: (val: any) => void;
allData: any[];
}) {
const router = useRouter();
@@ -170,8 +174,12 @@ export default function ComponentForum_V2_CardMoreButton({
<ButtonDelete
postingId={postingId}
setOpenDel={setOpenDel}
onLoadData={onLoadData}
onLoadData={(val) => {
onLoadData(val);
}}
allData={allData}
/>
{/* <pre>{JSON.stringify(allData, null, 2)}</pre> */}
</Modal>
<Modal
@@ -184,9 +192,12 @@ export default function ComponentForum_V2_CardMoreButton({
postingId={postingId}
setOpenStatus={setOpenStatusClose}
statusId={statusId}
onLoadData={onLoadData}
onLoadData={(val) => {
onLoadData(val);
}}
userLoginId={userLoginId}
authorId={authorId}
allData={allData}
/>
</Modal>
@@ -201,10 +212,12 @@ function ButtonDelete({
postingId,
setOpenDel,
onLoadData,
allData,
}: {
postingId?: string;
setOpenDel: any;
onLoadData: (val: any) => void;
allData: MODEL_FORUM_POSTING[];
}) {
const [loading, setLoading] = useState(false);
@@ -212,14 +225,23 @@ 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 loadData = await forum_new_getAllPosting({ page: 1 });
onLoadData(loadData);
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);
}
});
}
@@ -255,6 +277,7 @@ function ButtonStatus({
onLoadData,
userLoginId,
authorId,
allData,
}: {
postingId?: string;
setOpenStatus: any;
@@ -262,6 +285,7 @@ function ButtonStatus({
onLoadData: (val: any) => void;
userLoginId: string;
authorId: string;
allData: MODEL_FORUM_POSTING[];
}) {
const [loading, setLoading] = useState(false);
@@ -274,35 +298,117 @@ function ButtonStatus({
);
if (upateStatusClose.status === 200) {
ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
const loadData = await forum_v2_getAllPosting({})
onLoadData(loadData);
setLoading(true);
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",
},
};
console.log(updateDetail);
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
id: postingId,
data: updateDetail.ForumMaster_StatusPosting,
})
);
} else {
ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
ComponentGlobal_NotifikasiGagal(upateStatusClose.message);
}
}
async function onBukaForum() {
setOpenStatus(false);
await forum_funEditStatusPostingById(postingId as any, 1).then(
async (res) => {
if (res.status === 200) {
const loadData = await forum_v2_getAllPosting({});
onLoadData(loadData);
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 (

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

@@ -1,24 +1,23 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { Stack, Card, Group, ActionIcon, Divider, Text } from "@mantine/core";
import { ActionIcon, Card, Divider, Group, Stack, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import ComponentForum_BerandaAuthorNameOnHeader from "../beranda/beranda_author_header";
import ComponentForum_V2_HeaderCard from "./card_header";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import { useState } from "react";
import ComponentGlobal_CardLoadingOverlay from "@/app_modules/component_global/loading_card";
import ComponentForum_CardLoadingOverlay from "../card_loader";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_V2_HeaderCard from "./card_header";
export default function ComponentForum_V2_MainCardView({
data,
userLoginId,
onLoadData,
allData,
}: {
data: MODEL_FORUM_POSTING[];
data: MODEL_FORUM_POSTING;
userLoginId: string;
onLoadData: (val: any) => void;
allData: any[];
}) {
const router = useRouter();
const [loadingKomen, setLoadingKomen] = useState(false);
@@ -28,70 +27,60 @@ export default function ComponentForum_V2_MainCardView({
return (
<>
<Stack spacing={"xl"}>
{data.map((e, i) => (
<Card key={i} >
<Card.Section>
<ComponentForum_V2_HeaderCard
data={e}
isMoreButton={true}
userLoginId={userLoginId}
onLoadData={onLoadData}
/>
{/* <ComponentForum_BerandaAuthorNameOnHeader
tglPublish={e?.createdAt}
isMoreButton={true}
postingId={e?.id}
statusId={e?.ForumMaster_StatusPosting?.id}
userLoginId={userLoginId}
setData={setData}
/> */}
</Card.Section>
{/* <pre>{JSON.stringify(data, null,2)}</pre> */}
<Card mb={"md"}>
<Card.Section>
<ComponentForum_V2_HeaderCard
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 + e.id)
}}
>
<Text fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: e.diskusi }} />
</Text>
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"lg"}
onClick={() => {
router.push(RouterForum.main_detail + data?.id);
}}
>
<Text fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
</Text>
</Card.Section>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
loading={loadingKomen && e?.id === postingId ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
onClick={() => {
setPostingId(e?.id),
(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>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
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} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
</ActionIcon>
{/* <TotalKomentar postingId={e?.id} /> */}
{/* <TotalKomentar postingId={e?.id} /> */}
<Text c={"gray"}>{e?.Forum_Komentar.length}</Text>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>
))}
</Stack>
<Text c={"gray"}>{data?.Forum_Komentar.length}</Text>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>
</>
);
}