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

fix event

Browse Source 
deskripsi:
- mengubah tampilan text biasa ke html view
- menambahkan text editor pada create & edit
This commit is contained in:
Bagasbanuna02
2025-04-28 16:14:15 +08:00
parent 48150f789c
commit 22dc70fb27
20 changed files with 277 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app_modules/event/component/box_list_status.tsx
View File

@@ -1,14 +1,15 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import {
ComponentGlobal_CardLoadingOverlay,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import { Card, Group, Stack, Text, Title } from "@mantine/core";
import { Group, Stack, Text, Title } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_EVENT } from "../_lib/interface";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
export default function ComponentEvent_BoxListStatus({
data,
@@ -44,7 +45,7 @@ export default function ComponentEvent_BoxListStatus({
</Group>
<Text c={MainColor.white} fz={"sm"} lineClamp={2}>
{data.deskripsi}
<Comp_DangerouslySetInnerHTML props={data.deskripsi} />
</Text>
</Stack>
{visible && eventId !== "" ? (

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

@@ -14,6 +14,8 @@ 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,
@@ -82,14 +84,16 @@ export default function Event_ComponentCreateButton({
disabled={
value.title === "" ||
value.lokasi === "" ||
value.deskripsi === "" ||
value.eventMaster_TipeAcaraId === 0 ||
value.tanggal === "function Date() { [native code] }" ||
// moment(value.tanggal).diff(moment(), "minutes") < 0
diffTimeEnd - 1 < diffTimeStart
diffTimeEnd - 1 < diffTimeStart ||
// value.deskripsi === "" ||
funReplaceHtml({ html: value.deskripsi }).length > maxInputLength ||
funReplaceHtml({ html: value.deskripsi }).length === 0
}
loaderPosition="center"
loading={isLoading ? true : false}
loading={isLoading}
radius={"xl"}
mt={"xl"}
onClick={() => {

14
src/app_modules/event/component/button/comp_daftar_peserta_dan_sponsor.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Admin_V3_ComponentBreakpoint } from "@/app_modules/admin/_components_v3/comp_simple_grid_breakpoint";
import Event_ComponentBoxDaftarPeserta from "../detail/comp_box_daftar_peserta";
import Event_ComponentBoxDaftarSponsor from "../detail/comp_box_sponsor";
export const Event_ComponentDaftarPesertaDanSponsor = () => {
return (
<>
<Admin_V3_ComponentBreakpoint>
<Event_ComponentBoxDaftarPeserta />
{/* <Event_ComponentBoxDaftarSponsor /> */}
</Admin_V3_ComponentBreakpoint>
</>
);
};

3
src/app_modules/event/component/card_view/card_beranda.tsx
View File

@@ -8,6 +8,7 @@ import {
import { Box, Group, Stack, Text, Title } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
export function ComponentEvent_CardBeranda({ data }: { data: any }) {
const router = useRouter();
@@ -43,7 +44,7 @@ export function ComponentEvent_CardBeranda({ data }: { data: any }) {
</Group>
<Text c={MainColor.white} fz={"sm"} lineClamp={2}>
{data.deskripsi}
<Comp_DangerouslySetInnerHTML props={data.deskripsi} />
</Text>
</Stack>

3
src/app_modules/event/component/card_view/card_riwayat.tsx
View File

@@ -9,6 +9,7 @@ import {
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_EVENT } from "../../_lib/interface";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
const router = useRouter();
@@ -43,7 +44,7 @@ export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
</Group>
<Text fz={"sm"} lineClamp={2}>
{data.deskripsi}
<Comp_DangerouslySetInnerHTML props={data.deskripsi}/>
</Text>
</Stack>

127
src/app_modules/event/component/detail/detail_data.tsx
View File

@@ -5,12 +5,14 @@ import {
ComponentGlobal_BoxInformation,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import { Grid, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";
import { Component_V3_MomentDateAndTime } from "@/app_modules/_global/component/new/comp_V3_moment_date_and_time";
import { SimpleGrid, Stack, Title } from "@mantine/core";
import "moment/locale/id";
import { MODEL_EVENT } from "../../_lib/interface";
import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
import Event_ComponentBoxDaftarPeserta from "./comp_box_daftar_peserta";
import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
export default function ComponentEvent_DetailData({
isDaftarPeserta,
isReport,
@@ -20,114 +22,61 @@ export default function ComponentEvent_DetailData({
isReport?: boolean;
data: MODEL_EVENT | null;
}) {
const listData = [
{
title: "Lokasi",
value: data?.lokasi ?? "-",
},
{
title: "Tipe Acara",
value: `${data?.EventMaster_TipeAcara?.name}`,
},
{
title: "Tanggal Mulai ",
value: <Component_V3_MomentDateAndTime dateTime={data?.tanggal} />,
},
{
title: "Tanggal Selesai ",
value: <Component_V3_MomentDateAndTime dateTime={data?.tanggalSelesai} />,
},
{
title: "Deskripsi",
value: <Comp_DangerouslySetInnerHTML props={data?.deskripsi ?? ""} />,
},
];
return (
<>
{!data ? (
<Event_ComponentSkeletonDetail />
) : (
<Stack>
{isReport && (
{isReport && data.catatan ? (
<ComponentGlobal_BoxInformation
isReport
informasi={data?.catatan}
/>
) : (
""
)}
<ComponentGlobal_CardStyles marginBottom={"16px"}>
<Stack>
<Stack px={"sm"} spacing={"xl"}>
<Stack spacing={"xl"}>
<Title
color={MainColor.white}
lineClamp={2}
// lineClamp={2}
align="center"
w={"100%"}
order={4}
>
{data ? data?.title : null}
</Title>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Lokasi
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{data ? data?.lokasi : null}
</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Tipe Acara
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{data ? data.EventMaster_TipeAcara?.name : null}
</Text>
</Grid.Col>
</Grid>
<Stack spacing={"xs"}>
<Text c={MainColor.white} fw={"bold"}>
Tanggal & Waktu
</Text>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Mulai
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{" "}
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "full",
}).format(new Date(data?.tanggal))}
,{" "}
<Text span inherit c={MainColor.white}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "short",
}).format(new Date(data?.tanggal))}
</Text>
</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Selesai
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{" "}
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "full",
}).format(new Date(data?.tanggalSelesai))}
,{" "}
<Text span inherit c={MainColor.white}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "short",
}).format(new Date(data?.tanggalSelesai))}
</Text>
</Text>
</Grid.Col>
</Grid>
</Stack>
<Stack spacing={2}>
<Text c={MainColor.white} fw={"bold"}>
Deskripsi
</Text>
<Text c={MainColor.white}>
{data ? data?.deskripsi : null}
</Text>
<Stack>
{listData.map((e, i) => (
<Component_V3_GridDetailData item={e} key={i} />
))}
</Stack>
</Stack>
@@ -140,7 +89,7 @@ export default function ComponentEvent_DetailData({
]}
>
<Event_ComponentBoxDaftarPeserta />
<Event_ComponentBoxDaftarSponsor />
{/* <Event_ComponentBoxDaftarSponsor /> */}
</SimpleGrid>
)}
</Stack>

119
src/app_modules/event/component/detail/detail_main.tsx
View File

@@ -5,18 +5,19 @@ import {
ComponentGlobal_AvatarAndUsername,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";
import { Component_V3_MomentDateAndTime } from "@/app_modules/_global/component/new/comp_V3_moment_date_and_time";
import { clientLogger } from "@/util/clientLogger";
import { Grid, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { Stack, Title } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import moment from "moment";
import "moment/locale/id";
import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetEventDetailById } from "../../_lib/api_event";
import { MODEL_EVENT } from "../../_lib/interface";
import { Event_ComponentDaftarPesertaDanSponsor } from "../button/comp_daftar_peserta_dan_sponsor";
import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
import Event_ComponentBoxDaftarPeserta from "./comp_box_daftar_peserta";
import Event_ComponentBoxDaftarSponsor from "./comp_box_sponsor";
export default function ComponentEvent_DetailMainData() {
const params = useParams<{ id: string }>();
@@ -41,13 +42,36 @@ export default function ComponentEvent_DetailMainData() {
}
}
const listData = [
{
title: "Lokasi",
value: data?.lokasi ?? "-",
},
{
title: "Tipe Acara",
value: `${data?.EventMaster_TipeAcara?.name}`,
},
{
title: "Tanggal Mulai ",
value: <Component_V3_MomentDateAndTime dateTime={data?.tanggal} />,
},
{
title: "Tanggal Selesai ",
value: <Component_V3_MomentDateAndTime dateTime={data?.tanggalSelesai} />,
},
{
title: "Deskripsi",
value: <Comp_DangerouslySetInnerHTML props={data?.deskripsi ?? ""} />,
},
];
return (
<>
{data == null ? (
<Event_ComponentSkeletonDetail />
) : (
<ComponentGlobal_CardStyles>
<Stack px={"xs"} spacing={"xl"}>
<Stack spacing={"xl"}>
<ComponentGlobal_AvatarAndUsername
profile={data?.Author?.Profile as any}
/>
@@ -56,87 +80,12 @@ export default function ComponentEvent_DetailMainData() {
<Title color={MainColor.white} align="center" order={4}>
{data ? data.title : null}
</Title>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Lokasi
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>{data ? data.lokasi : null}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Tipe Acara
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{data ? data.EventMaster_TipeAcara.name : null}
</Text>
</Grid.Col>
</Grid>
<Stack spacing={"xs"}>
<Text c={MainColor.white} fw={"bold"}>
Tanggal & Waktu
</Text>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Mulai
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{moment(
data.tanggal?.toLocaleString("id-ID", {
dateStyle: "full",
})
).format("dddd, DD MMMM YYYY, LT")}
</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={4}>
<Text c={MainColor.white} fw={"bold"}>
Selesai
</Text>
</Grid.Col>
<Grid.Col span={1}>:</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={MainColor.white}>
{moment(
data.tanggalSelesai?.toLocaleString("id-ID", {
dateStyle: "full",
})
).format("dddd, DD MMMM YYYY, LT")}
</Text>
</Grid.Col>
</Grid>
<Stack>
{listData.map((e, i) => (
<Component_V3_GridDetailData item={e} key={i} />
))}
</Stack>
<Stack spacing={2}>
<Text c={MainColor.white} fw={"bold"}>
Deskripsi
</Text>
<Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
</Stack>
<SimpleGrid
cols={2}
breakpoints={[
{ maxWidth: "48rem", cols: 2, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
]}
>
<Event_ComponentBoxDaftarPeserta />
<Event_ComponentBoxDaftarSponsor />
</SimpleGrid>
<Event_ComponentDaftarPesertaDanSponsor />
</Stack>
</Stack>
</ComponentGlobal_CardStyles>

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

@@ -16,6 +16,9 @@ import { useState } from "react";
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";
export default function Event_Create({
listTipeAcara,
@@ -55,7 +58,7 @@ export default function Event_Create({
},
input: {
backgroundColor: MainColor.white,
}
},
}}
label="Judul"
placeholder="Masukan judul"
@@ -81,7 +84,7 @@ export default function Event_Create({
},
dropdown: {
backgroundColor: MainColor.white,
}
},
}}
withAsterisk
label="Tipe Acara"
@@ -108,7 +111,7 @@ export default function Event_Create({
},
input: {
backgroundColor: MainColor.white,
}
},
}}
label="Lokasi"
placeholder="Masukan lokasi acara"
@@ -122,7 +125,6 @@ export default function Event_Create({
}}
/>
<DateTimePicker
styles={{
label: {
@@ -133,7 +135,7 @@ export default function Event_Create({
},
input: {
backgroundColor: MainColor.white,
}
},
}}
excludeDate={(date) => {
return moment(date).diff(Date.now(), "days") < 0;
@@ -179,7 +181,7 @@ export default function Event_Create({
},
input: {
backgroundColor: MainColor.white,
}
},
}}
excludeDate={(date) => {
return moment(date).diff(Date.now(), "days") < 0;
@@ -218,6 +220,30 @@ export default function Event_Create({
/>
<Stack spacing={5}>
<Text c={MainColor.white} fz={"sm"}>
Deskripsi
<Text inherit span c={"red"} px={5}>
*
</Text>
</Text>
<Component_V3_TextEditor
data={value.deskripsi}
onSetData={(val) => {
setValue({
...value,
deskripsi: val,
});
}}
/>
<ComponentGlobal_InputCountDown
lengthInput={funReplaceHtml({ html: value.deskripsi }).length}
maxInput={maxInputLength}
/>
</Stack>
{/* <Stack spacing={5}>
<Textarea
styles={{
label: {
@@ -228,7 +254,7 @@ export default function Event_Create({
},
input: {
backgroundColor: MainColor.white,
}
},
}}
label="Deskripsi"
placeholder="Deskripsikan acara yang akan di selenggarakan"
@@ -246,7 +272,7 @@ export default function Event_Create({
lengthInput={value.deskripsi.length}
maxInput={300}
/>
</Stack>
</Stack> */}
<Event_ComponentCreateButton
value={value}

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

@@ -25,6 +25,9 @@ import { Event_funEditById } from "../fun/edit/fun_edit_by_id";
import { MODEL_EVENT } from "../_lib/interface";
import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
import { clientLogger } from "@/util/clientLogger";
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";
export default function Event_Edit({
dataEvent,
@@ -57,8 +60,8 @@ export default function Event_Edit({
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
color: MainColor.red,
},
}}
label="Judul"
placeholder="judul"
@@ -89,7 +92,7 @@ export default function Event_Edit({
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
color: MainColor.red,
},
dropdown: {
backgroundColor: MainColor.white,
@@ -122,8 +125,8 @@ export default function Event_Edit({
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
color: MainColor.red,
},
}}
label="Lokasi"
placeholder="lokasi acara"
@@ -164,8 +167,8 @@ export default function Event_Edit({
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
color: MainColor.red,
},
}}
excludeDate={(date) => {
return moment(date).diff(Date.now(), "days") < 0;
@@ -208,8 +211,8 @@ export default function Event_Edit({
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
color: MainColor.red,
},
}}
excludeDate={(date) => {
return moment(date).diff(Date.now(), "days") < 0;
@@ -247,6 +250,34 @@ export default function Event_Edit({
/>
<Stack spacing={5}>
<Text c={MainColor.white} fz={"sm"}>
Deskripsi
<Text inherit span c={"red"} px={5}>
*
</Text>
</Text>
<Component_V3_TextEditor
data={value.deskripsi}
onSetData={(val) => {
setValue({
...value,
deskripsi: val.trim(),
});
}}
/>
{funReplaceHtml({ html: value.deskripsi }).length === 0 && (
<ComponentGlobal_ErrorInput text="Masukan deskripsi" />
)}
<ComponentGlobal_InputCountDown
lengthInput={funReplaceHtml({ html: value.deskripsi }).length}
maxInput={maxInputLength}
/>
</Stack>
{/* <Stack spacing={5}>
<Textarea
styles={{
label: {
@@ -256,8 +287,8 @@ export default function Event_Edit({
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
color: MainColor.red,
},
}}
label="Deskripsi"
placeholder="Deskripsikan acara yang akan di selenggarakan"
@@ -283,7 +314,7 @@ export default function Event_Edit({
maxInput={300}
lengthInput={value.deskripsi.length}
/>
</Stack>
</Stack> */}
<Button
style={{
@@ -292,10 +323,11 @@ export default function Event_Edit({
disabled={
value.title === "" ||
value.lokasi === "" ||
value.deskripsi === "" ||
value.eventMaster_TipeAcaraId === 0 ||
moment(value.tanggalSelesai?.toISOString().toString()) <
moment(value.tanggal.toISOString().toString())
moment(value.tanggal.toISOString().toString()) ||
funReplaceHtml({ html: value.deskripsi }).length > maxInputLength ||
funReplaceHtml({ html: value.deskripsi }).length === 0
}
loaderPosition="center"
loading={isLoading ? true : false}
@@ -325,13 +357,13 @@ async function onUpdate(
setLoading(true);
const res = await Event_funEditById(value);
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
setLoading(false);
ComponentGlobal_NotifikasiGagal(res.message);
}
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
setLoading(false);
ComponentGlobal_NotifikasiGagal(res.message);
}
} catch (error) {
setLoading(false);
clientLogger.error("Error update event", error);

14
src/app_modules/event/main/beranda.tsx
View File

@@ -1,30 +1,28 @@
"use client";
import { gs_eventTriggerBeranda } from "@/lib/global_state";
import { RouterEvent } from "@/lib/router_hipmi/router_event";
import { AccentColor } from "@/app_modules/_global/color";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
import { gs_eventTriggerBeranda } from "@/lib/global_state";
import { RouterEvent } from "@/lib/router_hipmi/router_event";
import {
Affix,
Box,
Button,
Center,
Loader,
rem,
Skeleton,
Paper,
rem
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useAtom } from "jotai";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import { ComponentEvent_CardBeranda } from "../component/card_view/card_beranda";
import { event_getListAllPublish } from "../fun/get/get_list_all_publish";
import { MODEL_EVENT } from "../_lib/interface";
import { Event_ComponentSkeletonBeranda } from "../component";
import { API_RouteEvent } from "@/lib/api_user_router/route_api_event";
import { ComponentEvent_CardBeranda } from "../component/card_view/card_beranda";
import { event_getListAllPublish } from "../fun/get/get_list_all_publish";
export default function Event_Beranda() {
const [data, setData] = useState<MODEL_EVENT[] | null>(null);