Notifikasi Forum

# feat
- Notif jika ada postingan baru
## No issue

src/app_modules/forum/component/beranda/beranda_button_more.tsx

@@ -219,12 +219,14 @@ 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;
       } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
+        // ComponentGlobal_NotifikasiGagal(res.message);
+        return null;
       }
     });
   }
@@ -273,19 +275,34 @@ function ButtonStatus({
   async function onTutupForum() {
     setOpenStatus(false);
 
-    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 upateStatusClose = await forum_funEditStatusPostingById(
+      postingId as any,
+      2
     );
+    if (upateStatusClose.status === 200) {
+      const loadData = await forum_getListAllPosting();
+      // ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
+      setData(loadData);
+      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);
+    //     }
+    //   }
+    // );
   }
 
   async function onBukaForum() {

src/app_modules/forum/component/beranda/beranda_card.tsx

@@ -37,9 +37,6 @@ export default function ComponentForum_BerandaCardView({
         {data.map((e, i) => (
           <Card key={i}>
             <Card.Section>
-              {/* <pre>{JSON.stringify(e.Author.id, null, 2)}</pre>
-              <pre>{JSON.stringify(userLoginId, null, 2)}</pre> */}
-
               <ComponentForum_BerandaAuthorNameOnHeader
                 authorName={e?.Author?.Profile?.name}
                 imagesId={e?.Author?.Profile?.imagesId}
@@ -52,11 +49,11 @@ export default function ComponentForum_BerandaCardView({
                 setData={setData}
               />
             </Card.Section>
+
             <Card.Section
               sx={{ zIndex: 0 }}
               p={"lg"}
               onClick={() => {
-                // console.log("halaman forum");
                 setLoadingDetail(true);
                 router.push(RouterForum.main_detail + e.id);
               }}
@@ -65,6 +62,7 @@ export default function ComponentForum_BerandaCardView({
                 <div dangerouslySetInnerHTML={{ __html: e.diskusi }} />
               </Text>
             </Card.Section>
+            
             <Card.Section>
               <Stack>
                 <Group spacing={"xs"} px={"sm"}>

src/app_modules/forum/component/card_loader.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Overlay, Center, Loader } from "@mantine/core";
+
+export default function ComponentForum_CardLoadingOverlay({
+  size,
+  variant,
+}: {
+  size?: number;
+  variant?: any;
+}) {
+  return (
+    <>
+      <Overlay h={"100%"} opacity={0.1} >
+        <Center h={"100%"}>
+          <Loader
+            variant={variant ? variant : "oval"}
+            size={size ? size : 20}
+            color="gray"
+          />
+        </Center>
+      </Overlay>
+    </>
+  );
+}

src/app_modules/forum/component/main_component/card_header.tsx

@@ -0,0 +1,146 @@
+"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,
+} 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";
+
+export default function ComponentForum_V2_HeaderCard({
+  data,
+  isMoreButton,
+  userLoginId,
+  onLoadData,
+}: {
+  data: MODEL_FORUM_POSTING;
+  isMoreButton: boolean;
+  userLoginId: string;
+  onLoadData: (val: any) => void
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid align="center">
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (data.Author.id) {
+                setIsLoading(true);
+                router.push(RouterForum.forumku + data.Author.id);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
+            }}
+          >
+            {isLoading ? (
+              <Loader color="gray" variant="dots" />
+            ) : (
+              <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 justify="center" h={"100%"} spacing={3}>
+              <Grid>
+                <Grid.Col span={"auto"}>
+                  <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                    {data.Author.username
+                      ? data.Author.username
+                      : "Nama author  "}
+                  </Text>
+                </Grid.Col>
+                <Grid.Col span={"content"}></Grid.Col>
+              </Grid>
+
+              <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"}>
+            <Group position="center" spacing={"xs"}>
+              <Group spacing={3}>
+                <Text c={"gray"} fz={"sm"}>
+                  {data.createdAt
+                    ? data.createdAt.toLocaleDateString(["id-ID"], {
+                        day: "numeric",
+                        month: "short",
+                      })
+                    : new Date().toLocaleDateString(["id-ID"], {
+                        day: "numeric",
+                        month: "short",
+                      })}
+
+                  <IconCircle
+                    size={5}
+                    color="gray"
+                    style={{ marginLeft: "5px" }}
+                  />
+                </Text>
+              </Group>
+
+              {isMoreButton ? (
+                <Group position="right">
+                  <ComponentForum_V2_CardMoreButton
+                    authorId={data?.Author.id}
+                    postingId={data?.id}
+                    statusId={data?.ForumMaster_StatusPosting.id}
+                    userLoginId={userLoginId}
+                    onLoadData={onLoadData}
+                  />
+
+                </Group>
+              ) : (
+                ""
+              )}
+            </Group>
+          </Grid.Col>
+        </Grid>
+        {/* {isPembatas ? <Divider /> : ""} */}
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/component/main_component/card_more_button.tsx

@@ -0,0 +1,350 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import {
+  ActionIcon,
+  Button,
+  Drawer,
+  Grid,
+  Group,
+  Loader,
+  Modal,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import {
+  IconDots,
+  IconEdit,
+  IconFlag3,
+  IconSquareCheck,
+  IconSquareRoundedX,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+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";
+
+export default function ComponentForum_V2_CardMoreButton({
+  authorId,
+  postingId,
+  statusId,
+  userLoginId,
+  onLoadData,
+}: {
+  authorId: any;
+  postingId?: any;
+  statusId?: any;
+  userLoginId: any;
+  onLoadData: (val: any) => void;
+}) {
+  const router = useRouter();
+
+  // modal & drawer
+  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}
+          onLoadData={onLoadData}
+        />
+      </Modal>
+
+      <Modal
+        opened={openStatusClose}
+        onClose={() => setOpenStatusClose(false)}
+        centered
+        withCloseButton={false}
+      >
+        <ButtonStatus
+          postingId={postingId}
+          setOpenStatus={setOpenStatusClose}
+          statusId={statusId}
+          onLoadData={onLoadData}
+          userLoginId={userLoginId}
+          authorId={authorId}
+        />
+      </Modal>
+
+      <ActionIcon variant="transparent" onClick={() => open()}>
+        <IconDots size={20} />
+      </ActionIcon>
+    </>
+  );
+}
+
+function ButtonDelete({
+  postingId,
+  setOpenDel,
+  onLoadData,
+}: {
+  postingId?: string;
+  setOpenDel: any;
+  onLoadData: (val: any) => void;
+}) {
+  const [loading, setLoading] = useState(false);
+
+  async function onDelete() {
+    setOpenDel(false);
+    await forum_funDeletePostingById(postingId as any).then(async (res) => {
+      if (res.status === 200) {
+        // ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
+        setLoading(true);
+        const loadData = await forum_new_getAllPosting({ page: 1 });
+        onLoadData(loadData);
+        return null;
+      } else {
+        // ComponentGlobal_NotifikasiGagal(res.message);
+        return null;
+      }
+    });
+  }
+  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,
+  userLoginId,
+  authorId,
+}: {
+  postingId?: string;
+  setOpenStatus: any;
+  statusId?: any;
+  onLoadData: (val: any) => void;
+  userLoginId: string;
+  authorId: string;
+}) {
+  const [loading, setLoading] = useState(false);
+
+  async function onTutupForum() {
+    setOpenStatus(false);
+
+    const upateStatusClose = await forum_funEditStatusPostingById(
+      postingId as any,
+      2
+    );
+    if (upateStatusClose.status === 200) {
+      ComponentGlobal_NotifikasiBerhasil(`Forum Ditutup`, 2000);
+
+      const loadData = await forum_v2_getAllPosting({})
+      onLoadData(loadData);
+      setLoading(true);
+
+    } else {
+       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);
+        }
+      }
+    );
+  }
+
+  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>
+    </>
+  );
+}

src/app_modules/forum/component/main_component/card_view.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import { Stack, Card, Group, ActionIcon, Divider, 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";
+
+export default function ComponentForum_V2_MainCardView({
+  data,
+  userLoginId,
+  onLoadData,
+}: {
+  data: MODEL_FORUM_POSTING[];
+  userLoginId: string;
+  onLoadData: (val: any) => void;
+}) {
+  const router = useRouter();
+  const [loadingKomen, setLoadingKomen] = useState(false);
+  const [loadingDetail, setLoadingDetail] = useState(false);
+
+  const [postingId, setPostingId] = useState("");
+
+  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>
+
+            <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>
+              <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>
+
+                  {/* <TotalKomentar postingId={e?.id} /> */}
+
+                  <Text c={"gray"}>{e?.Forum_Komentar.length}</Text>
+                </Group>
+                <Divider />
+              </Stack>
+            </Card.Section>
+          </Card>
+        ))}
+      </Stack>
+    </>
+  );
+}