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>