From d64ed7bf550ad5958fcfd1041bad95b4a600b2aa Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Fri, 2 Feb 2024 15:28:39 +0800
Subject: [PATCH] Event Done

---
 .../admin/event/child/tipe_acara.tsx          |  2 +-
 .../admin/event/create/tipe_acara.tsx         |  5 --
 .../event/component/error_maksimal_input.tsx  | 17 +++++
 src/app_modules/event/create/create.tsx       | 66 ++++++++++++++-----
 src/app_modules/event/edit/index.tsx          | 49 +++++++++++++-
 src/app_modules/event/main/beranda.tsx        | 16 +++--
 src/app_modules/event/main/layout.tsx         | 14 +---
 .../event/main/status_page/review.tsx         |  5 +-
 8 files changed, 127 insertions(+), 47 deletions(-)
 delete mode 100644 src/app_modules/admin/event/create/tipe_acara.tsx
 create mode 100644 src/app_modules/event/component/error_maksimal_input.tsx

diff --git a/src/app_modules/admin/event/child/tipe_acara.tsx b/src/app_modules/admin/event/child/tipe_acara.tsx
index 3b82f480..f55ba6c4 100644
--- a/src/app_modules/admin/event/child/tipe_acara.tsx
+++ b/src/app_modules/admin/event/child/tipe_acara.tsx
@@ -63,7 +63,7 @@ function DetailTipeAcara({ listTipe }: { listTipe: MODEL_DEFAULT_MASTER[] }) {
               <TextInput
                 value={name ? name : ""}
                 label="Masukan Tipe"
-                placeholder="Contoh: Ramah Tamah, dll"
+                placeholder="Contoh: Seminar, Workshop, dll."
                 onChange={(val) => {
                   setName(val.target.value);
                 }}
diff --git a/src/app_modules/admin/event/create/tipe_acara.tsx b/src/app_modules/admin/event/create/tipe_acara.tsx
deleted file mode 100644
index 3487d23e..00000000
--- a/src/app_modules/admin/event/create/tipe_acara.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-"use client"
-
-export default function AdminEvent_CreateTipeAcara(){
-
-}
\ No newline at end of file
diff --git a/src/app_modules/event/component/error_maksimal_input.tsx b/src/app_modules/event/component/error_maksimal_input.tsx
new file mode 100644
index 00000000..2118cc1d
--- /dev/null
+++ b/src/app_modules/event/component/error_maksimal_input.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Group, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+export default function ComponentEvent_ErrorMaximalInput({max}:{max: number}){
+    return (
+      <>
+        <Group spacing={"xs"}>
+          <IconAlertTriangle size={15} />
+          <Text fz={10} fs={"italic"}>
+            Maksimal {max} karakter !
+          </Text>
+        </Group>
+      </>
+    );
+}
\ No newline at end of file
diff --git a/src/app_modules/event/create/create.tsx b/src/app_modules/event/create/create.tsx
index effe4274..0edcb1ec 100644
--- a/src/app_modules/event/create/create.tsx
+++ b/src/app_modules/event/create/create.tsx
@@ -15,6 +15,7 @@ import {
   Paper,
   Select,
   Stack,
+  Text,
   TextInput,
   Textarea,
 } from "@mantine/core";
@@ -34,6 +35,7 @@ import _ from "lodash";
 import toast from "react-simple-toasts";
 import moment from "moment";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
 
 export default function Event_Create({
   listTipeAcara,
@@ -47,6 +49,11 @@ export default function Event_Create({
   const [listTipe, setListTipe] = useState(listTipeAcara);
   const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);
 
+  // Masimal karakter state
+  const [maxTitle, setMaxTitle] = useState("");
+  const [maxLokasi, setMaxLokasi] = useState("");
+  const [maxDeskripsi, setMaxDeskripsi] = useState("");
+
   const [value, setValue] = useState({
     title: "",
     lokasi: "",
@@ -63,15 +70,25 @@ export default function Event_Create({
           label="Judul"
           placeholder="Masukan judul"
           withAsterisk
-          onChange={(val) =>
+          maxLength={100}
+          error={
+            maxTitle.length >= 100 ? (
+              <ComponentEvent_ErrorMaximalInput max={100} />
+            ) : (
+              ""
+            )
+          }
+          onChange={(val) => {
+            setMaxTitle(val.target.value);
             setValue({
               ...value,
               title: val.target.value,
-            })
-          }
+            });
+          }}
         />
 
         <Select
+          withAsterisk
           label="Tipe Acara"
           placeholder="Pilih Tipe Acara"
           data={listTipe.map((e) => ({
@@ -90,12 +107,21 @@ export default function Event_Create({
           label="Lokasi"
           placeholder="Masukan lokasi acara"
           withAsterisk
-          onChange={(val) =>
+          maxLength={200}
+          error={
+            maxLokasi.length >= 200 ? (
+              <ComponentEvent_ErrorMaximalInput max={200} />
+            ) : (
+              ""
+            )
+          }
+          onChange={(val) => {
+            setMaxLokasi(val.target.value);
             setValue({
               ...value,
               lokasi: val.target.value,
-            })
-          }
+            });
+          }}
         />
         <DateTimePicker
           // onClick={() => {
@@ -118,14 +144,22 @@ export default function Event_Create({
           label="Deskripsi"
           placeholder="Deskripsikan acara yang akan di selenggarakan"
           withAsterisk
-          maxLength={500}
           autosize
-          onChange={(val) =>
+          maxLength={500}
+          error={
+            maxDeskripsi.length >= 500 ? (
+              <ComponentEvent_ErrorMaximalInput max={500} />
+            ) : (
+              ""
+            )
+          }
+          onChange={(val) => {
+            setMaxDeskripsi(val.target.value);
             setValue({
               ...value,
               deskripsi: val.target.value,
-            })
-          }
+            });
+          }}
         />
 
         <Button
@@ -146,15 +180,17 @@ async function onSave(
   value: any,
   setHotMenu: any
 ) {
-  if (_.values(value).includes("")) return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
-  if (value.eventMaster_TipeAcaraId === 0) return ComponentGlobal_NotifikasiPeringatan("Pilih Tipe Acara");
-  if (moment(value.tanggal).format() === "Invalid date") return ComponentGlobal_NotifikasiPeringatan("Lengkapi Tanggal");
-
+  if (_.values(value).includes(""))
+    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+  if (value.eventMaster_TipeAcaraId === 0)
+    return ComponentGlobal_NotifikasiPeringatan("Pilih Tipe Acara");
+  if (moment(value.tanggal).format() === "Invalid date")
+    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Tanggal");
   await Event_funCreate(value).then((res) => {
     if (res.status === 201) {
       ComponentGlobal_NotifikasiBerhasil(res.message);
       setTabsStatus("Review");
-      setHotMenu(1)
+      setHotMenu(1);
       router.push(RouterEvent.status_page);
     } else {
       ComponentGlobal_NotifikasiGagal(res.message);
diff --git a/src/app_modules/event/edit/index.tsx b/src/app_modules/event/edit/index.tsx
index 9c8b3fe3..7f121764 100644
--- a/src/app_modules/event/edit/index.tsx
+++ b/src/app_modules/event/edit/index.tsx
@@ -1,7 +1,15 @@
 "use client";
 
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
-import { Stack, TextInput, Textarea, Button, Select } from "@mantine/core";
+import {
+  Stack,
+  TextInput,
+  Textarea,
+  Button,
+  Select,
+  Text,
+  Group,
+} from "@mantine/core";
 import { DateTimePicker } from "@mantine/dates";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useRouter } from "next/navigation";
@@ -13,6 +21,8 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/
 import moment from "moment";
 import _ from "lodash";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
 
 export default function Event_Edit({
   dataEvent,
@@ -24,6 +34,11 @@ export default function Event_Edit({
   const router = useRouter();
   const [value, setValue] = useState(dataEvent);
   const [tipe, setTipe] = useState(listTipeAcara);
+
+  // Masimal karakter state
+  const [maxTitle, setMaxTitle] = useState("");
+  const [maxLokasi, setMaxLokasi] = useState("");
+  const [maxDeskripsi, setMaxDeskripsi] = useState("");
   return (
     <>
       {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
@@ -33,7 +48,16 @@ export default function Event_Edit({
           placeholder="Masukan judul"
           withAsterisk
           value={value.title}
+          maxLength={100}
+          error={
+            maxTitle.length >= 100 ? (
+              <ComponentEvent_ErrorMaximalInput max={100} />
+            ) : (
+              ""
+            )
+          }
           onChange={(val) => {
+            setMaxTitle(val.target.value);
             setValue({
               ...value,
               title: val.target.value,
@@ -42,6 +66,7 @@ export default function Event_Edit({
         />
 
         <Select
+          withAsterisk
           label="Tipe Acara"
           placeholder="Pilih Tipe Acara"
           data={tipe.map((e) => ({
@@ -64,7 +89,16 @@ export default function Event_Edit({
           placeholder="Masukan lokasi acara"
           withAsterisk
           value={value.lokasi}
+          maxLength={200}
+          error={
+            maxLokasi.length >= 200 ? (
+              <ComponentEvent_ErrorMaximalInput max={200} />
+            ) : (
+              ""
+            )
+          }
           onChange={(val) => {
+            setMaxLokasi(val.target.value);
             setValue({
               ...value,
               lokasi: val.target.value,
@@ -91,9 +125,17 @@ export default function Event_Edit({
           placeholder="Deskripsikan acara yang akan di selenggarakan"
           withAsterisk
           autosize
-          maxLength={500}
           value={value.deskripsi}
+          maxLength={500}
+          error={
+            maxDeskripsi.length >= 500 ? (
+              <ComponentEvent_ErrorMaximalInput max={500} />
+            ) : (
+              ""
+            )
+          }
           onChange={(val) => {
+            setMaxDeskripsi(val.target.value);
             setValue({
               ...value,
               deskripsi: val.target.value,
@@ -110,7 +152,8 @@ export default function Event_Edit({
 }
 
 async function onUpdate(router: AppRouterInstance, value: MODEL_EVENT) {
-  if (_.values(value).includes("")) return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+  if (_.values(value).includes(""))
+    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
 
   await Event_funEditById(value).then((res) => {
     if (res.status === 200) {
diff --git a/src/app_modules/event/main/beranda.tsx b/src/app_modules/event/main/beranda.tsx
index 64197041..5f5a31df 100644
--- a/src/app_modules/event/main/beranda.tsx
+++ b/src/app_modules/event/main/beranda.tsx
@@ -2,6 +2,7 @@
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
 import {
+  ActionIcon,
   Affix,
   Avatar,
   Badge,
@@ -47,16 +48,17 @@ export default function Event_Beranda({
   //   );
   return (
     <>
-      {/* <Affix position={{ bottom: rem(100), right: rem(20) }}>
-        <Button 
+      <Affix position={{ bottom: rem(100), right: rem(30) }}>
+        <ActionIcon
+          size={"xl"}
           radius={"xl"}
-          color="blue"
-          leftIcon={<IconCirclePlus />}
+          variant="transparent"
+          bg={"blue"}
           onClick={() => router.push(RouterEvent.create)}
         >
-         <Text fz={"sm"}> Tambah Event</Text>
-        </Button>
-      </Affix> */}
+          <IconCirclePlus color="white" size={40} />
+        </ActionIcon>
+      </Affix>
 
       {_.isEmpty(dataEvent) ? (
         <Center h={"80vh"}>
diff --git a/src/app_modules/event/main/layout.tsx b/src/app_modules/event/main/layout.tsx
index fded5554..31500431 100644
--- a/src/app_modules/event/main/layout.tsx
+++ b/src/app_modules/event/main/layout.tsx
@@ -71,19 +71,7 @@ export default function LayoutEvent_Main({
         }
         footer={
           <Footer height={70} bg={"dark"} sx={{ borderTop: "px solid blue" }}>
-           <Center>
-           <ActionIcon
-              sx={{ zIndex: 1, position: "absolute" }}
-              mt={-5}
-              size={"xl"}
-              radius={"xl"}
-              variant="transparent"
-              bg={"white"}
-              onClick={() => router.push(RouterEvent.create)}
-            >
-              <IconCirclePlus color="#347aeb" size={40} />
-            </ActionIcon>
-           </Center>
+          
             <Grid>
               {listFooter.map((e, i) => (
                 <Grid.Col
diff --git a/src/app_modules/event/main/status_page/review.tsx b/src/app_modules/event/main/status_page/review.tsx
index 1ecaec0e..c14d91a2 100644
--- a/src/app_modules/event/main/status_page/review.tsx
+++ b/src/app_modules/event/main/status_page/review.tsx
@@ -19,10 +19,9 @@ export default function Event_StatusReview({
   authorId: string;
 }) {
   const router = useRouter();
-  const [data, setData] = useState(listReview);
 
 
-  if (_.isEmpty(data))
+  if (_.isEmpty(listReview))
     return (
       <Center h={"50vh"} fz={"sm"} fw={"bold"}>
         Tidak Ada Event
@@ -30,7 +29,7 @@ export default function Event_StatusReview({
     );
   return (
     <>
-      {data.map((e, i) => (
+      {listReview.map((e, i) => (
         <Box key={e.id}>
           <ComponentEvent_BoxListStatus
             data={e}