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

fix: event

Browse Source 
- deskripsi:
- fix use server untuk pengambilan userid , sekarang menggunakan API
This commit is contained in:
Bagasbanuna02
2025-05-30 17:25:04 +08:00
parent 5a9f9e4cf4
commit 6f686b6abf
16 changed files with 377 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/api/master/tipe-acara/route.ts Normal file
View File

@@ -0,0 +1,34 @@
import { NextResponse } from "next/server";
import prisma from "@/lib/prisma";
export async function GET(request: Request) {
try {
const data = await prisma.eventMaster_TipeAcara.findMany({
orderBy: {
id: "asc",
},
where: {
active: true,
},
});
return NextResponse.json(
{
success: true,
message: "Berhasil mendapatkan data",
data: data,
},
{ status: 200 }
);
} catch (error) {
console.error("Error Get Master Tipe Acara ", error);
return NextResponse.json(
{
success: false,
message: "API Error Get Data",
reason: (error as Error).message,
},
{ status: 500 }
);
}
}

12
src/app/dev/(user)/event/create/page.tsx
View File

@@ -1,15 +1,5 @@
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { Event_Create } from "@/app_modules/event";
import { Event_getMasterTipeAcara } from "@/app_modules/event/fun/master/get_tipe_acara";
export default async function Page() {
const userLoginId = await funGetUserIdByToken();
const listTipeAcara = await Event_getMasterTipeAcara();
return (
<Event_Create
listTipeAcara={listTipeAcara as any}
authorId={userLoginId as string}
/>
);
return <Event_Create />;
}

4
src/app/dev/(user)/event/detail/detail_sponsor/[id]/layout.tsx
View File

@@ -3,10 +3,10 @@ import LayoutEvent_DetailSponsor from '@/app_modules/event/detail/detail_sponsor
import React from 'react';
async function Layout({children} : {children: React.ReactNode}) {
const userLoginId = await funGetUserIdByToken()
// const userLoginId = await funGetUserIdByToken()
return (
<>
<LayoutEvent_DetailSponsor userLoginId={userLoginId}>
<LayoutEvent_DetailSponsor userLoginId={""}>
{children}
</LayoutEvent_DetailSponsor>
</>

4
src/app/dev/(user)/event/detail/detail_sponsor/[id]/page.tsx
View File

@@ -3,10 +3,10 @@ import DetailSponsor_Event from '@/app_modules/event/detail/detail_sponsor';
import React from 'react';
async function Page() {
const userLoginId = await funGetUserIdByToken();
// const userLoginId = await funGetUserIdByToken();
return (
<>
<DetailSponsor_Event userLoginId={userLoginId} />
<DetailSponsor_Event userLoginId={""} />
</>
);
}

7
src/app/dev/(user)/event/detail/main/[id]/page.tsx
View File

@@ -1,14 +1,9 @@
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { Event_DetailMain } from "@/app_modules/event";
export default async function Page() {
const userLoginId = await funGetUserIdByToken();
return (
<>
<Event_DetailMain
userLoginId={userLoginId as string}
/>
<Event_DetailMain />
</>
);
}

14
src/app/dev/(user)/event/edit/[id]/layout.tsx
View File

@@ -1,8 +1,14 @@
import { LayoutEvent_Edit } from "@/app_modules/event";
import React from "react";
export default async function Layout({children}: {children: React.ReactNode}) {
return <>
<LayoutEvent_Edit>{children}</LayoutEvent_Edit>
export default async function Layout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<LayoutEvent_Edit>{children}</LayoutEvent_Edit>
</>
}
);
}

20
src/app/dev/(user)/event/edit/[id]/page.tsx
View File

@@ -1,25 +1,9 @@
import { Event_Edit } from "@/app_modules/event";
import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
import { Event_getMasterTipeAcara } from "@/app_modules/event/fun/master/get_tipe_acara";
import _ from "lodash";
export default async function Page({ params }: { params: { id: string } }) {
let eventId = params.id;
const data = await event_getOneById(eventId);
const dataEvent = _.omit(data, [
"Author",
"EventMaster_Status",
"Event_Peserta",
"createdAt",
"updatedAt",
"active",
]);
const listTipeAcara = await Event_getMasterTipeAcara()
export default async function Page() {
return (
<>
<Event_Edit dataEvent={dataEvent as any} listTipeAcara={listTipeAcara as any}/>
<Event_Edit />
</>
);
}

4
src/app/dev/(user)/event/invoice/[id]/page.tsx
View File

@@ -3,10 +3,10 @@ import Event_Invoice from '@/app_modules/event/detail/invoice';
import React from 'react';
async function Page() {
const userLoginId = await funGetUserIdByToken();
// const userLoginId = await funGetUserIdByToken();
return (
<>
<Event_Invoice userLoginId={userLoginId} />
<Event_Invoice userLoginId={""} />
</>
);
}

5
src/app/dev/(user)/event/konfirmasi/[id]/page.tsx
View File

@@ -1,13 +1,10 @@
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import UiEvent_V2_Konfirmasi from "@/app_modules/event/_ui/V2_konfirmasi";
export default async function Page() {
const userLoginId = await funGetUserIdByToken();
return (
<>
{/* <Ui_Konfirmasi userLoginId={userLoginId as string} /> */}
<UiEvent_V2_Konfirmasi userLoginId={userLoginId as string} />
<UiEvent_V2_Konfirmasi />
</>
);
}

12
src/app/dev/(user)/event/main/status/[id]/page.tsx
View File

@@ -1,18 +1,6 @@
import { Event_StatusPage } from "@/app_modules/event";
import {
event_getAllByStatusId,
event_getMasterStatus,
} from "@/app_modules/event/fun";
async function Page({ params }: { params: { id: string } }) {
// let statusId = params.id;
// const listStatus = await event_getMasterStatus();
// const dataStatus = await event_getAllByStatusId({
// page: 1,
// statusId: statusId,
// });
return (
<>
<Event_StatusPage />

105
src/app_modules/event/_lib/api_event.ts
View File

@@ -1,19 +1,41 @@
import { IEventSponsor } from "./interface";
export const apiGetEventDetailById = async ({ id }: { id: string }) => {
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
if (!token) return await token.json().catch(() => null);
try {
// Fetch token from cookie
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
if (!token) {
console.error("No token found");
return null;
}
const response = await fetch(`/api/event/${id}`, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
const response = await fetch(`/api/event/${id}`, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
return await response.json().catch(() => null);
// Check if the response is OK
if (!response.ok) {
const errorData = await response.json().catch(() => null);
console.error(
"Failed to get event detail",
response.statusText,
errorData
);
throw new Error(errorData?.message || "Failed to get event detail");
}
// Return the JSON response
const data = await response.json();
return data;
} catch (error) {
console.error("Error get event detail", error);
throw error; // Re-throw the error to handle it in the calling function
}
};
export const apiGetEventCekPeserta = async ({
@@ -129,7 +151,13 @@ export const apiGetOneSponsorEventById = async ({ id }: { id: string }) => {
return await response.json().catch(() => null);
};
export const apiGetEventKonfirmasiById = async ({ id, userId }: { id: string; userId: string }) => {
export const apiGetEventKonfirmasiById = async ({
id,
userId,
}: {
id: string;
userId: string;
}) => {
try {
// Fetch token from cookie
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
@@ -138,7 +166,46 @@ export const apiGetEventKonfirmasiById = async ({ id, userId }: { id: string; us
return null;
}
const response = await fetch(`/api/event/${id}/konfirmasi?userId=${userId}`, {
const response = await fetch(
`/api/event/${id}/konfirmasi?userId=${userId}`,
{
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
}
);
// Check if the response is OK
if (!response.ok) {
const errorData = await response.json().catch(() => null);
console.error(
"Failed to get event konfirmasi",
response.statusText,
errorData
);
throw new Error(errorData?.message || "Failed to get event konfirmasi");
}
// Return the JSON response
return await response.json();
} catch (error) {
console.error("Error get event konfirmasi", error);
throw error; // Re-throw the error to handle it in the calling function
}
};
export const apiGetMasterTipeAcara = async () => {
try {
// Fetch token from cookie
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
if (!token) {
console.error("No token found");
return null;
}
const response = await fetch(`/api/master/tipe-acara`, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
@@ -149,14 +216,18 @@ export const apiGetEventKonfirmasiById = async ({ id, userId }: { id: string; us
// Check if the response is OK
if (!response.ok) {
const errorData = await response.json().catch(() => null);
console.error("Failed to get event konfirmasi", response.statusText, errorData);
throw new Error(errorData?.message || "Failed to get event konfirmasi");
console.error(
"Failed to get master tipe acara",
response.statusText,
errorData
);
throw new Error(errorData?.message || "Failed to get master tipe acara");
}
// Return the JSON response
return await response.json();
} catch (error) {
console.error("Error get event konfirmasi", error);
console.error("Error get master tipe acara", error);
throw error; // Re-throw the error to handle it in the calling function
}
};
};

32
src/app_modules/event/_ui/V2_konfirmasi.tsx
View File

@@ -29,6 +29,7 @@ import { Event_funJoinAndConfirmEvent } from "../fun/create/fun_join_and_confirm
import { Event_funJoinEvent } from "../fun/create/fun_join_event";
import { gs_event_hotMenu } from "../global_state";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
interface IKonfirmasiProps {
dataEvent: {
@@ -50,11 +51,7 @@ interface IKonfirmasiProps {
kehadiran: boolean | null;
}
export default function UiEvent_V2_Konfirmasi({
userLoginId,
}: {
userLoginId: string;
}) {
export default function UiEvent_V2_Konfirmasi() {
const params = useParams<{ id: string }>();
const eventId = params.id;
@@ -63,6 +60,7 @@ export default function UiEvent_V2_Konfirmasi({
const router = useRouter();
const [isLoading, setLoading] = useState(false);
const [hotMenu, setHotMenu] = useAtom(gs_event_hotMenu);
const [userLoginId, setUserLoginId] = useState<string | null>(null);
// Load Data
useShallowEffect(() => {
@@ -71,15 +69,19 @@ export default function UiEvent_V2_Konfirmasi({
async function onLoadData() {
try {
const response = await apiGetEventKonfirmasiById({
id: eventId,
userId: userLoginId,
});
const responseUser = await apiNewGetUserIdByToken();
if (responseUser.success) {
setUserLoginId(responseUser.userId);
const response = await apiGetEventKonfirmasiById({
id: eventId,
userId: responseUser.userId,
});
if (response.res) {
setData(response.res);
} else {
setData(null);
if (response.res) {
setData(response.res);
} else {
setData(null);
}
}
} catch (error) {
setData(null);
@@ -87,8 +89,10 @@ export default function UiEvent_V2_Konfirmasi({
}
}
// Jika data kosong
if (data === undefined) {
if (data === undefined || !userLoginId) {
return <SkeletonIsDataNull />;
}

6
src/app_modules/event/component/button/button_create_event.tsx
View File

@@ -1,4 +1,6 @@
import { MainColor } from "@/app_modules/_global/color";
import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
import {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
@@ -6,6 +8,7 @@ import {
import { notifikasiToAdmin_funCreate } from "@/app_modules/notifikasi/fun";
import { IRealtimeData } from "@/lib/global_state";
import { RouterEvent } from "@/lib/router_hipmi/router_event";
import { clientLogger } from "@/util/clientLogger";
import { Button } from "@mantine/core";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
@@ -13,9 +16,6 @@ import { useState } from "react";
import { WibuRealtime } from "wibu-pkg";
import { Event_funCreate } from "../../fun/create/fun_create";
import { gs_event_hotMenu } from "../../global_state";
import { clientLogger } from "@/util/clientLogger";
import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
export default function Event_ComponentCreateButton({
value,

161
src/app_modules/event/create/create.tsx
View File

@@ -1,40 +1,31 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
import { baseStylesTextInput } from "@/app_modules/_global/lib/base_style_text_input";
import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
import {
Button,
Select,
Stack,
Text,
TextInput,
Textarea,
} from "@mantine/core";
import { Select, Stack, TextInput } from "@mantine/core";
import { DateTimePicker } from "@mantine/dates";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import moment from "moment";
import { useState } from "react";
import { apiGetMasterTipeAcara } from "../_lib/api_event";
import { Event_ComponentCreateButton } from "../component";
import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
import { MainColor } from "@/app_modules/_global/color";
import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
export default function Event_Create({
listTipeAcara,
authorId,
}: {
listTipeAcara: MODEL_DEFAULT_MASTER_OLD[];
authorId: string;
}) {
const [listTipe, setListTipe] = useState(listTipeAcara);
export default function Event_Create() {
const [listTipe, setListTipe] = useState<MODEL_DEFAULT_MASTER_OLD[] | null>();
const [isTimeStart, setIsTimeStart] = useState(false);
const [diffTimeStart, setDiffTimeStart] = useState(0);
const [isTimeEnd, setIsTimeEnd] = useState(false);
const [diffTimeEnd, setDiffTimeEnd] = useState(0);
const [value, setValue] = useState({
title: "",
lokasi: "",
@@ -42,24 +33,61 @@ export default function Event_Create({
tanggal: Date.toString(),
tanggalSelesai: Date.toString(),
eventMaster_TipeAcaraId: 0,
authorId: authorId,
authorId: "",
});
useShallowEffect(() => {
handleGetUserLoginId();
}, []);
async function handleGetUserLoginId() {
try {
const response = await apiNewGetUserIdByToken();
if (response.success) {
setValue({
...value,
authorId: response.userId,
});
}
} catch (error) {
setValue({
...value,
authorId: "",
});
}
}
useShallowEffect(() => {
handleGetMasterTipeAcara();
}, []);
async function handleGetMasterTipeAcara() {
try {
const response = await apiGetMasterTipeAcara();
if (response.success) {
setListTipe(response.data);
} else {
setListTipe([]);
}
} catch (error) {
setListTipe([]);
}
}
if (!listTipe || !value.authorId) {
return <CustomSkeleton height={400} />;
}
return (
<>
{/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
<Stack px={"xl"}>
<Stack px={"sm"}>
<TextInput
styles={{
label: {
color: MainColor.white,
},
...baseStylesTextInput,
required: {
color: MainColor.red,
},
input: {
backgroundColor: MainColor.white,
},
}}
label="Judul"
placeholder="Masukan judul"
@@ -74,15 +102,10 @@ export default function Event_Create({
/>
<Select
styles={{
label: {
color: MainColor.white,
},
...baseStylesTextInput,
required: {
color: MainColor.red,
},
input: {
backgroundColor: MainColor.white,
},
dropdown: {
backgroundColor: MainColor.white,
},
@@ -90,10 +113,14 @@ export default function Event_Create({
withAsterisk
label="Tipe Acara"
placeholder="Pilih Tipe Acara"
data={listTipe.map((e) => ({
value: e.id,
label: e.name,
}))}
data={
_.isEmpty(listTipe)
? []
: listTipe.map((e) => ({
value: e.id,
label: e.name,
}))
}
onChange={(val: any) =>
setValue({
...value,
@@ -104,15 +131,10 @@ export default function Event_Create({
<TextInput
styles={{
label: {
color: MainColor.white,
},
...baseStylesTextInput,
required: {
color: MainColor.red,
},
input: {
backgroundColor: MainColor.white,
},
}}
label="Lokasi"
placeholder="Masukan lokasi acara"
@@ -128,15 +150,10 @@ export default function Event_Create({
<DateTimePicker
styles={{
label: {
color: MainColor.white,
},
...baseStylesTextInput,
required: {
color: MainColor.red,
},
input: {
backgroundColor: MainColor.white,
},
}}
excludeDate={(date) => {
return moment(date).diff(Date.now(), "days") < 0;
@@ -174,15 +191,10 @@ export default function Event_Create({
<DateTimePicker
styles={{
label: {
color: MainColor.white,
},
...baseStylesTextInput,
required: {
color: MainColor.red,
},
input: {
backgroundColor: MainColor.white,
},
}}
excludeDate={(date) => {
return moment(date).diff(Date.now(), "days") < 0;
@@ -239,37 +251,6 @@ export default function Event_Create({
/>
</Stack>
{/* <Stack spacing={5}>
<Textarea
styles={{
label: {
color: MainColor.white,
},
required: {
color: MainColor.red,
},
input: {
backgroundColor: MainColor.white,
},
}}
label="Deskripsi"
placeholder="Deskripsikan acara yang akan di selenggarakan"
withAsterisk
autosize
maxLength={300}
onChange={(val) => {
setValue({
...value,
deskripsi: val.target.value,
});
}}
/>
<ComponentGlobal_InputCountDown
lengthInput={value.deskripsi.length}
maxInput={300}
/>
</Stack> */}
<Event_ComponentCreateButton
value={value}
diffTimeStart={diffTimeStart}

54
src/app_modules/event/detail/main_detail/index.tsx
View File

@@ -15,37 +15,61 @@ import { WibuRealtime } from "wibu-pkg";
import { apiGetEventCekPeserta } from "../../_lib/api_event";
import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
export default function Event_DetailMain({
userLoginId,
}: {
userLoginId: string;
}) {
export default function Event_DetailMain() {
const params = useParams<{ id: string }>();
const eventId = params.id;
const [isLoading, setLoading] = useState(false);
const [isJoinSuccess, setIsJoinSuccess] = useState<boolean | null>(null);
// const [isNewPeserta, setIsNewPeserta] = useState<boolean | null>(null);
const [userLoginId, setUserLoginId] = useState<string | null>(null);
useShallowEffect(() => {
onCheckPeserta();
handleGetUserLoginId();
}, []);
async function onCheckPeserta() {
async function handleGetUserLoginId() {
try {
const respone = await apiGetEventCekPeserta({
userId: userLoginId,
eventId: eventId,
});
const response = await apiNewGetUserIdByToken();
if (response.success) {
setUserLoginId(response.userId);
const responseData = await apiGetEventCekPeserta({
userId: response.userId,
eventId: eventId,
});
if (respone) {
setIsJoinSuccess(respone.data);
if (responseData) {
setIsJoinSuccess(responseData.data);
}
} else {
setUserLoginId(null);
}
} catch (error) {
clientLogger.error("Error check peserta", error);
setUserLoginId(null);
}
}
// useShallowEffect(() => {
// onCheckPeserta();
// }, []);
// async function onCheckPeserta() {
// try {
// const respone = await apiGetEventCekPeserta({
// userId: userLoginId,
// eventId: eventId,
// });
// if (respone) {
// setIsJoinSuccess(respone.data);
// }
// } catch (error) {
// clientLogger.error("Error check peserta", error);
// }
// }
// [ON JOIN BUTTON]
async function onJoin() {
const body = {
@@ -97,7 +121,7 @@ export default function Event_DetailMain({
<Stack spacing={"lg"} pb={"md"}>
<ComponentEvent_DetailMainData />
{isJoinSuccess == null ? (
{isJoinSuccess == null || !userLoginId ? (
<CustomSkeleton radius={"xl"} h={40} />
) : isJoinSuccess ? (
<Button disabled radius={"xl"} color="green">

216
src/app_modules/event/edit/index.tsx
View File

@@ -3,50 +3,100 @@
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
import { clientLogger } from "@/util/clientLogger";
import {
Button,
Select,
Stack,
Text,
TextInput
} from "@mantine/core";
import { Button, Select, Stack, TextInput } from "@mantine/core";
import { DateTimePicker } from "@mantine/dates";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import moment from "moment";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { useState } from "react";
import {
apiGetEventDetailById,
apiGetMasterTipeAcara,
} from "../_lib/api_event";
import { MODEL_EVENT } from "../_lib/interface";
import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
import { Event_funEditById } from "../fun/edit/fun_edit_by_id";
import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
import { useParams } from "next/navigation";
import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
import { baseStylesTextInput } from "@/app_modules/_global/lib/base_style_text_input";
export default function Event_Edit({
dataEvent,
listTipeAcara,
}: {
dataEvent: MODEL_EVENT;
listTipeAcara: MODEL_DEFAULT_MASTER_OLD[];
}) {
export default function Event_Edit() {
const router = useRouter();
const { id } = useParams();
const [isLoading, setLoading] = useState(false);
const [value, setValue] = useState(dataEvent);
const [tipe, setTipe] = useState(listTipeAcara);
const [data, setData] = useState<MODEL_EVENT | null | any>();
const [listTipeAcara, setListTipeAcara] = useState<
MODEL_DEFAULT_MASTER_OLD[]
>([]);
const [isTimeStart, setIsTimeStart] = useState(false);
const [diffTimeStart, setDiffTimeStart] = useState(0);
const [isTimeEnd, setIsTimeEnd] = useState(false);
const [diffTimeEnd, setDiffTimeEnd] = useState(0);
useShallowEffect(() => {
handleGetMasterTipeAcara();
}, []);
async function handleGetMasterTipeAcara() {
try {
const response = await apiGetMasterTipeAcara();
if (response.success) {
setListTipeAcara(response.data);
} else {
setListTipeAcara([]);
}
} catch (error) {
setListTipeAcara([]);
}
}
useShallowEffect(() => {
handleGetDetailEvent();
}, []);
async function handleGetDetailEvent() {
try {
const response = await apiGetEventDetailById({ id: id as string });
if (response.success) {
const fixData = _.omit(response.data, [
"Author",
"EventMaster_Status",
"Event_Peserta",
"createdAt",
"updatedAt",
"active",
]);
setData(fixData as any);
} else {
setData(null);
}
} catch (error) {
setData(null);
}
}
if (!listTipeAcara.length || !data) {
return <CustomSkeleton height={400} />;
}
if (data === undefined) {
return <ComponentGlobal_BoxInformation informasi="Data Tidak Ditemukan" />;
}
return (
<>
{/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
@@ -66,18 +116,18 @@ export default function Event_Edit({
label="Judul"
placeholder="judul"
withAsterisk
value={value.title}
value={data?.title}
maxLength={100}
error={
value.title === "" ? (
data?.title === "" ? (
<ComponentGlobal_ErrorInput text="Masukan judul" />
) : (
""
)
}
onChange={(val) => {
setValue({
...value,
setData({
...(data as any),
title: val.target.value,
});
}}
@@ -101,14 +151,14 @@ export default function Event_Edit({
withAsterisk
label="Tipe Acara"
placeholder="Pilih Tipe Acara"
data={tipe.map((e) => ({
data={listTipeAcara.map((e) => ({
value: e.id,
label: e.name,
}))}
value={value.EventMaster_TipeAcara.id}
value={data.EventMaster_TipeAcara.id}
onChange={(val) => {
setValue({
...(value as any),
setData({
...(data as any),
EventMaster_TipeAcara: {
id: val,
},
@@ -131,41 +181,26 @@ export default function Event_Edit({
label="Lokasi"
placeholder="lokasi acara"
withAsterisk
value={value.lokasi}
value={data.lokasi}
maxLength={100}
error={
value.lokasi === "" ? (
data.lokasi === "" ? (
<ComponentGlobal_ErrorInput text="Masukan lokasi" />
) : (
""
)
}
onChange={(val) => {
setValue({
...value,
setData({
...data,
lokasi: val.target.value,
});
}}
/>
{/* <Text c={"green"}>{JSON.stringify(diffTimeStart, null, 2)}</Text>
<Text c={"red"}>{JSON.stringify(diffTimeEnd, null, 2)}</Text>
<Text c={"yellow"}>
{JSON.stringify(
moment(value.tanggal.toISOString().toString()),
null,
2
)}
</Text> */}
<DateTimePicker
styles={{
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
...baseStylesTextInput,
required: {
color: MainColor.red,
},
@@ -176,7 +211,7 @@ export default function Event_Edit({
withAsterisk
label="Tanggal & Waktu Mulai"
placeholder="Masukan tangal dan waktu"
value={value.tanggal}
value={moment(data.tanggal).toDate()}
error={
isTimeStart ? (
<ComponentEvent_ErrorMaximalInput text="Invalid Time !" />
@@ -195,8 +230,8 @@ export default function Event_Edit({
? setIsTimeStart(true)
: setIsTimeStart(false);
setValue({
...(value as any),
setData({
...data,
tanggal: val,
});
}}
@@ -204,12 +239,7 @@ export default function Event_Edit({
<DateTimePicker
styles={{
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
...baseStylesTextInput,
required: {
color: MainColor.red,
},
@@ -220,12 +250,11 @@ export default function Event_Edit({
withAsterisk
label="Tanggal & Waktu Berakhir"
placeholder="Masukan tangal dan waktu"
value={value.tanggalSelesai}
value={moment(data.tanggalSelesai).toDate()}
error={
isTimeEnd ? (
<ComponentEvent_ErrorMaximalInput text="Invalid Time !" />
) : moment(value.tanggalSelesai?.toISOString().toString()) <
moment(value.tanggal.toISOString().toString()) ? (
) : moment(data.tanggalSelesai) < moment(data.tanggal) ? (
<ComponentGlobal_ErrorInput text="Invalid Time !" />
) : (
""
@@ -242,8 +271,8 @@ export default function Event_Edit({
? setIsTimeEnd(true)
: setIsTimeEnd(false);
setValue({
...(value as any),
setData({
...data,
tanggalSelesai: val,
});
}}
@@ -253,82 +282,43 @@ export default function Event_Edit({
<Component_V3_Label_TextInput text="Deskripsi" />
<Component_V3_TextEditor
data={value.deskripsi}
data={data.deskripsi}
onSetData={(val) => {
setValue({
...value,
setData({
...data,
deskripsi: val.trim(),
});
}}
/>
{funReplaceHtml({ html: value.deskripsi }).length === 0 && (
{funReplaceHtml({ html: data.deskripsi }).length === 0 && (
<ComponentGlobal_ErrorInput text="Masukan deskripsi" />
)}
<ComponentGlobal_InputCountDown
lengthInput={funReplaceHtml({ html: value.deskripsi }).length}
lengthInput={funReplaceHtml({ html: data.deskripsi }).length}
maxInput={maxInputLength}
/>
</Stack>
{/* <Stack spacing={5}>
<Textarea
styles={{
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
},
}}
label="Deskripsi"
placeholder="Deskripsikan acara yang akan di selenggarakan"
withAsterisk
autosize
value={value.deskripsi}
maxLength={300}
error={
value.deskripsi === "" ? (
<ComponentGlobal_ErrorInput text="Masukan deskripsi" />
) : (
""
)
}
onChange={(val) => {
setValue({
...value,
deskripsi: val.target.value,
});
}}
/>
<ComponentGlobal_InputCountDown
maxInput={300}
lengthInput={value.deskripsi.length}
/>
</Stack> */}
<Button
style={{
transition: "0.5s",
}}
disabled={
value.title === "" ||
value.lokasi === "" ||
value.eventMaster_TipeAcaraId === 0 ||
moment(value.tanggalSelesai?.toISOString().toString()) <
moment(value.tanggal.toISOString().toString()) ||
funReplaceHtml({ html: value.deskripsi }).length > maxInputLength ||
funReplaceHtml({ html: value.deskripsi }).length === 0
}
// disabled={
// data.title === "" ||
// data.lokasi === "" ||
// data.eventMaster_TipeAcaraId === 0 ||
// moment(data.tanggalSelesai?.toISOString().toString()) <
// moment(data.tanggal.toISOString().toString()) ||
// funReplaceHtml({ html: data.deskripsi }).length > maxInputLength ||
// funReplaceHtml({ html: data.deskripsi }).length === 0
// }
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}
mt={"xl"}
onClick={() => onUpdate(router, value, setLoading)}
onClick={() => onUpdate(router, data, setLoading)}
bg={MainColor.yellow}
color="yellow"
c={MainColor.darkblue}