UI Forum untuk user

- UI selesai - Realtime dan notifikasi selesai ## No Issuee
2024-07-02 17:38:13 +08:00
parent 11b5e8f722
commit bca5a2ac15
43 changed files with 719 additions and 638 deletions
--- a/src/app_modules/forum/report/komentar/index.tsx
+++ b/src/app_modules/forum/report/komentar/index.tsx
@@ -9,11 +9,14 @@ import { toNumber } from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { forum_funCreateReportKomentar } from "../../fun/create/fun_create_report_komentar";
-import forum_funCreateNotifikasiToAdmin from "../../fun/forum_notifikasi/fun_create_notifikasi";

-import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
-import getMaster_NamaBank from "@/app_modules/investasi/fun/master/get_nama_bank";
+import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";

 export default function Forum_ReportKomentar({
  komentarId,
@@ -24,12 +27,21 @@ export default function Forum_ReportKomentar({
  listReport: MODEL_FORUM_MASTER_REPORT[];
  userLoginId: string;
 }) {
-  const [reportValue, setReportValue] = useState("Kebencian");
+  const [reportValue, setReportValue] = useState("1");

  return (
    <>
-      <Stack px={"sm"}>
+      <Stack
+        mb={"md"}
+        p={"sm"}
+        bg={MainColor.darkblue}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px 10px 10px 10px",
+        }}
+      >
        <Radio.Group
+          c={"white"}
          value={reportValue as any}
          onChange={(val) => {
            setReportValue(val);
@@ -37,10 +49,14 @@ export default function Forum_ReportKomentar({
        >
          <Stack spacing={"xl"}>
            {listReport.map((e) => (
-              <Stack key={e.id}>
+              <Stack key={e?.id.toString()}>
                <Radio
-                  value={e.title}
-                  label={<Title order={5}>{e.title}</Title>}
+                  value={e?.id.toString()}
+                  label={
+                    <Title c={"white"} order={5}>
+                      {e.title}
+                    </Title>
+                  }
                />
                <Text>{e.deskripsi}</Text>
              </Stack>
@@ -48,7 +64,7 @@ export default function Forum_ReportKomentar({
          </Stack>
        </Radio.Group>
        <ButtonAction
-          kategoriId={reportValue}
+          kategoriId={toNumber(reportValue)}
          komentarId={komentarId}
          userLoginId={userLoginId}
        />
@@ -62,12 +78,13 @@ function ButtonAction({
  komentarId,
  userLoginId,
 }: {
-  kategoriId: string;
+  kategoriId: number;
  komentarId: string;
  userLoginId: string;
 }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
+  const [isLoadingLain, setIsLoadingLain] = useState(false);

  async function onReport() {
    const report = await forum_funCreateReportKomentar({
@@ -76,35 +93,29 @@ function ButtonAction({
    });

    if (report.status === 201) {
-      ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
+      const getKategori = await forum_getOneKategoriById({
+        kategoriId: kategoriId,
+      });
+      // console.log(getKategori);
+      const dataNotif = {
+        appId: komentarId,
+        pesan: getKategori?.deskripsi,
+        kategoriApp: "FORUM",
+        title: getKategori?.title,
+        userId: userLoginId,
+        status: "Report Komentar",
+      };
+      const createNotif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (createNotif.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+      }
+
      setLoading(true);
      router.back();
-
-      // const get = await getMaster_NamaBank();
-      // console.log(get);
-
-      // await forum_getOneKategoriById({
-      //   kategoriId: kategoriId,
-      // });
-
-      // console.log(getKategori);
-
-      // const dataNotif = {
-      //   appId: komentarId,
-      //   pesan: getKategori?.deskripsi,
-      //   kategoriApp: "FORUM",
-      //   title: getKategori?.title,
-      //   userId: userLoginId,
-      //   status: "Report Komentar",
-      // };
-
-      // const createNotif = await forum_funCreateNotifikasiToAdmin({
-      //   data: dataNotif as any,
-      // });
-
-      // if (createNotif.status === 201) {
-      //   mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
-      // }
+      return ComponentGlobal_NotifikasiBerhasil(report.message, 2000);
    } else {
      ComponentGlobal_NotifikasiGagal(report.message);
    }
@@ -113,10 +124,13 @@ function ButtonAction({
    <>
      <Stack mt={"md"}>
        <Button
+          loaderPosition="center"
+          loading={isLoadingLain ? true : false}
          radius={"xl"}
-          onClick={() =>
-            router.replace(RouterForum.report_komentar_lainnya + komentarId)
-          }
+          onClick={() => {
+            setIsLoadingLain(true);
+            router.replace(RouterForum.report_komentar_lainnya + komentarId);
+          }}
        >
          Lainnya
        </Button>
--- a/src/app_modules/forum/report/komentar/lainnya.tsx
+++ b/src/app_modules/forum/report/komentar/lainnya.tsx
@@ -9,8 +9,16 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_glob
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import { forum_funCreateReportPostingLainnya } from "../../fun/create/fun_create_report_posting_lainnya";
 import { forum_funCreateReportKomentarLainnya } from "../../fun/create/fun_create_report_komentar_lainnya";
+import mqtt_client from "@/util/mqtt_client";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";

-export default function Forum_ReportKomentarLainnya({ komentarId }: { komentarId: string }) {
+export default function Forum_ReportKomentarLainnya({
+  komentarId,
+  userLoginId,
+}: {
+  komentarId: string;
+  userLoginId: string;
+}) {
  const [deskripsi, setDeskripsi] = useState("");
  return (
    <>
@@ -23,7 +31,11 @@ export default function Forum_ReportKomentarLainnya({ komentarId }: { komentarId
            setDeskripsi(val.currentTarget.value);
          }}
        />
-        <ButtonAction komentarId={komentarId} deskripsi={deskripsi} />
+        <ButtonAction
+          komentarId={komentarId}
+          deskripsi={deskripsi}
+          userLoginId={userLoginId}
+        />
      </Stack>
    </>
  );
@@ -32,23 +44,43 @@ export default function Forum_ReportKomentarLainnya({ komentarId }: { komentarId
 function ButtonAction({
  komentarId,
  deskripsi,
+  userLoginId,
 }: {
  komentarId: string;
  deskripsi: string;
+  userLoginId: string;
 }) {
  const router = useRouter();

  async function onReport() {
-    await forum_funCreateReportKomentarLainnya(komentarId, deskripsi).then(
-      (res) => {
-        if (res.status === 201) {
-          ComponentGlobal_NotifikasiBerhasil(res.message);
-          router.back();
-        } else {
-          ComponentGlobal_NotifikasiGagal(res.message);
-        }
-      }
+    const report = await forum_funCreateReportKomentarLainnya(
+      komentarId,
+      deskripsi
    );
+
+    if (report.status === 201) {
+      const dataNotif = {
+        appId: komentarId,
+        pesan: deskripsi,
+        kategoriApp: "FORUM",
+        title: "Lainnya",
+        userId: userLoginId,
+        status: "Report Komentar",
+      };
+
+      const createNotifikasi = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (createNotifikasi.status === 201) {
+        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
+      }
+
+      ComponentGlobal_NotifikasiBerhasil(report.message);
+      router.back();
+    } else {
+      ComponentGlobal_NotifikasiGagal(report.message);
+    }
  }
  return (
    <>
@@ -61,7 +93,15 @@ function ButtonAction({
        >
          Batal
        </Button>
-        <Button radius={"xl"} color="orange" onClick={() => onReport()}>
+        <Button
+          style={{
+            transition: "0.5s",
+          }}
+          disabled={deskripsi === "" ? true : false}
+          radius={"xl"}
+          color="orange"
+          onClick={() => onReport()}
+        >
          Report
        </Button>
      </Group>
--- a/src/app_modules/forum/report/komentar/layout.tsx
+++ b/src/app_modules/forum/report/komentar/layout.tsx
@@ -1,12 +1,10 @@
 "use client";

-import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
-import React from "react";
-import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
-import { IconChevronLeft, IconX } from "@tabler/icons-react";
-import router from "next/router";
-import ComponentForum_HeaderRataKiri from "../../component/header/header_rata_kiri";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import React from "react";
+import ComponentForum_HeaderRataKiri from "../../component/header/header_rata_kiri";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";

 export default function LayoutForum_ReportKomentar({
  children,
@@ -15,13 +13,20 @@ export default function LayoutForum_ReportKomentar({
 }) {
  return (
    <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
+        header={
+          <ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Komentar" />
+        }
+      >
+        {children}
+      </ComponentGlobal_UI_LayoutTamplate>
+      {/* <AppComponentGlobal_LayoutTamplate
        header={
          <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Komentar"/>
        }
      >
        {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </AppComponentGlobal_LayoutTamplate> */}
    </>
  );
 }
--- a/src/app_modules/forum/report/posting/index.tsx
+++ b/src/app_modules/forum/report/posting/index.tsx
@@ -1,18 +1,21 @@
 "use client";

-import { Box, Button, Paper, Radio, Stack, Text, Title } from "@mantine/core";
-import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/component_global/color/color_pallet";
+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 notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import mqtt_client from "@/util/mqtt_client";
+import { Button, Radio, Stack, Text, Title } from "@mantine/core";
+import { toNumber } from "lodash";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { forum_funCreateReportPosting } from "../../fun/create/fun_create_report_posting";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { useRouter } from "next/navigation";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import mqtt_client from "@/util/mqtt_client";
-import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import forum_getOneKategoriById from "../../fun/get/get_one_kategori_by_id";
-import { toNumber } from "lodash";
+import { MODEL_FORUM_MASTER_REPORT } from "../../model/interface";

 export default function Forum_ReportPosting({
  postingId,
@@ -27,8 +30,17 @@ export default function Forum_ReportPosting({

  return (
    <>
-      <Stack px={"sm"}>
+      <Stack
+        mb={"md"}
+        p={"sm"}
+        bg={MainColor.darkblue}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px 10px 10px 10px",
+        }}
+      >
        <Radio.Group
+          c={"white"}
          value={reportValue as any}
          onChange={(val: any) => {
            setReportValue(val);
@@ -39,7 +51,11 @@ export default function Forum_ReportPosting({
              <Stack key={e?.id.toString()}>
                <Radio
                  value={e.id.toString()}
-                  label={<Title order={5}>{e.title}</Title>}
+                  label={
+                    <Title c={"white"} order={5}>
+                      {e.title}
+                    </Title>
+                  }
                />
                <Text>{e.deskripsi}</Text>
              </Stack>
@@ -66,7 +82,8 @@ function ButtonAction({
  userLoginId: string;
 }) {
  const router = useRouter();
-  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingLain, setIsLoadingLain] = useState(false);

  async function onReport() {
    const report = await forum_funCreateReportPosting({
@@ -98,8 +115,7 @@ function ButtonAction({
      if (createNotifikasi.status === 201) {
        mqtt_client.publish("ADMIN", JSON.stringify({ count: 1 }));
      }
-      setLoading(true);
-
+      setIsLoading(true);
    } else {
      ComponentGlobal_NotifikasiGagal(report.message);
    }
@@ -108,10 +124,13 @@ function ButtonAction({
    <>
      <Stack mt={"md"}>
        <Button
+          loaderPosition="center"
+          loading={isLoadingLain ? true : false}
          radius={"xl"}
-          onClick={() =>
-            router.replace(RouterForum.report_posting_lainnya + postingId)
-          }
+          onClick={() => {
+            setIsLoadingLain(true);
+            router.replace(RouterForum.report_posting_lainnya + postingId);
+          }}
        >
          Lainnya
        </Button>
@@ -119,7 +138,7 @@ function ButtonAction({
          radius={"xl"}
          color="orange"
          loaderPosition="center"
-          loading={loading ? true : false}
+          loading={isLoading ? true : false}
          onClick={() => onReport()}
        >
          Report
--- a/src/app_modules/forum/report/posting/layout.tsx
+++ b/src/app_modules/forum/report/posting/layout.tsx
@@ -1,12 +1,8 @@
 "use client";

-import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
+import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
+import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
 import React from "react";
-import ComponentForum_HeaderTamplate from "../../component/header/header_tamplate";
-import { IconChevronLeft, IconX } from "@tabler/icons-react";
-import router from "next/router";
-import ComponentForum_HeaderRataKiri from "../../component/header/header_rata_kiri";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";

 export default function LayoutForum_ReportPosting({
  children,
@@ -15,13 +11,15 @@ export default function LayoutForum_ReportPosting({
 }) {
  return (
    <>
-      <AppComponentGlobal_LayoutTamplate
+      <ComponentGlobal_UI_LayoutTamplate
        header={
-          <ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Posting" />
+          <ComponentGlobal_UI_HeaderTamplate title="Mengumpulkan Informasi Posting" />
        }
      >
        {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </ComponentGlobal_UI_LayoutTamplate>
+
+  
    </>
  );
 }