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

2
src/app_modules/_global/color/color_pallet.ts
View File

@@ -1,7 +1,7 @@
export const MainColor = {
black: "#202020",
darkblue: "#001D3D",
soft_darkblue: "#17406E",
soft_darkblue: "#0e3763",
yellow: "#E1B525",
white: "#D4D0D0",
red: "#FF4B4C",

17
src/app_modules/_global/component/box_information.tsx
View File

@@ -1,6 +1,7 @@
import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
import { AccentColor, MainColor } from "../color/color_pallet";
import { Grid, Stack, Text } from "@mantine/core";
import { IconInfoCircle } from "@tabler/icons-react";
import { MainColor } from "../color/color_pallet";
import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
export default function ComponentGlobal_BoxInformation({
informasi,
@@ -13,15 +14,7 @@ export default function ComponentGlobal_BoxInformation({
}) {
return (
<>
<Paper
bg={"blue.3"}
p={10}
style={{
backgroundColor: AccentColor.blue,
border: `2px solid ${AccentColor.softblue}`,
borderRadius: "10px",
}}
>
<ComponentGlobal_CardStyles>
{isReport ? (
<Stack spacing={0}>
<Text
@@ -54,7 +47,7 @@ export default function ComponentGlobal_BoxInformation({
</Grid.Col>
</Grid>
)}
</Paper>
</ComponentGlobal_CardStyles>
</>
);
}

29
src/app_modules/_global/component/new/comp_V3_grid_detail_data.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { MainColor } from "@/app_modules/_global/color";
import { Grid, Paper, Text } from "@mantine/core";
export function Component_V3_GridDetailData({
item,
}: {
item: Record<string, any>;
}) {
return (
<>
<Paper
bg={MainColor.soft_darkblue}
style={{
color: MainColor.white,
}}
>
<Grid m={0}>
<Grid.Col lg={3} md={3} sm={3} xs={3} span={4}>
<Text fw={"bold"}>{item.title || item.label}</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{item.value}</Text>
</Grid.Col>
</Grid>
</Paper>
</>
);
}

26
src/app_modules/_global/component/new/comp_V3_moment_date_and_time.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Text } from "@mantine/core";
import moment from "moment";
import "moment/locale/id";
import { MainColor } from "../../color/color_pallet";
export const Component_V3_MomentDateAndTime = ({
dateTime,
color,
}: {
dateTime: Date | string | undefined
color?: string;
}) => {
return (
<>
<Text c={color ?? MainColor.white}>
{dateTime
? moment(
dateTime.toLocaleString("id-ID", {
dateStyle: "full",
})
).format("dddd, DD MMMM YYYY, LT")
: "-"}
</Text>
</>
);
};

7
src/app_modules/_global/component/new/comp_V3_text_editor.tsx
View File

@@ -12,13 +12,9 @@ const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
export function Component_V3_TextEditor({
data,
onSetData,
// lengthData,
onSetLengthData,
}: {
data: string;
onSetData: (value: string) => void;
// lengthData: number;
onSetLengthData: (value: number) => void;
}) {
const [isReady, setIsReady] = useState<boolean>(false);
@@ -31,14 +27,13 @@ export function Component_V3_TextEditor({
// if (text.length <= maxInputLength) {
// }
onSetData(input);
onSetLengthData(text.length);
// Input diabaikan jika panjang > maxLength
};
return (
<>
{isReady ? (
<Paper p="sm" withBorder shadow="lg" mah={300} bg={MainColor.white} >
<Paper p={5} withBorder shadow="lg" mah={300} bg={MainColor.white} >
<ScrollArea h={280}>
<ReactQuill
placeholder="Apa yang sedang ingin dibahas ?"

19
src/app_modules/_global/component/new/comp_set_inner_html.tsx
View File

@@ -1,6 +1,4 @@
import React from "react";
import { MainColor } from "../../color";
import { useShallowEffect } from "@mantine/hooks";
export function Comp_DangerouslySetInnerHTML({
props,
@@ -9,23 +7,6 @@ export function Comp_DangerouslySetInnerHTML({
props: string;
color?: string;
}) {
// useShallowEffect(() => {
// // Add custom style for stickers inside Quill editor
// const style = document.createElement("style");
// style.textContent = `
// .chat-content img {
// max-width: 100px !important;
// max-height: 100px !important;
// }
// `;
// document.head.appendChild(style);
// return () => {
// // Clean up when component unmounts
// document.head.removeChild(style);
// };
// }, []);
return (
<>
<div

2
src/app_modules/_global/lib/stiker/react_quill_format_for_stiker.ts
View File

@@ -8,7 +8,7 @@ export {
const modulesReactQuill = {
toolbar: [
[{ header: [1, 2, false] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
["bold", "italic", "underline", "strike", "blockquote"],
[{ list: "ordered" }, { list: "bullet" }],
["link"],

27
src/app_modules/admin/_components_v3/comp_detail_data.tsx
View File

@@ -1,5 +1,5 @@
import { MainColor } from "@/app_modules/_global/color";
import { Grid, Text } from "@mantine/core";
import { Grid, Paper, Text } from "@mantine/core";
export function Admin_V3_ComponentDetail({
item,
@@ -8,17 +8,22 @@ export function Admin_V3_ComponentDetail({
}) {
return (
<>
<Grid m={0} bg={MainColor.soft_darkblue}>
<Grid.Col lg={3} md={3} sm={3} xs={3} span={4}>
<Text fw={"bold"}>{item.title || item.label}</Text>
</Grid.Col>
<Paper
bg={MainColor.soft_darkblue}
style={{
color: MainColor.white,
}}
>
<Grid m={0}>
<Grid.Col lg={3} md={3} sm={3} xs={3} span={4}>
<Text fw={"bold"}>{item.title || item.label}</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>
{item.value}
</Text>
</Grid.Col>
</Grid>
<Grid.Col span={"auto"}>
<Text>{item.value}</Text>
</Grid.Col>
</Grid>
</Paper>
</>
);
}

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);

5
src/app_modules/forum/create/new_create.tsx
View File

@@ -11,7 +11,6 @@ import { useRouter } from "next/navigation";
import { useState } from "react";
import "react-quill/dist/quill.snow.css";
import { forum_funCreate } from "../fun/create/fun_create";
import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
export default function Forum_NewCreate() {
const [data, setData] = useState<string>("");
@@ -19,7 +18,7 @@ export default function Forum_NewCreate() {
return (
<Stack>
<Component_V3_TextEditor
{/* <Component_V3_TextEditor
data={data}
onSetData={(val) => {
setData(val);
@@ -27,7 +26,7 @@ export default function Forum_NewCreate() {
onSetLengthData={(val) => {
setLengthData(val);
}}
/>
/> */}
<Group position="apart">
<ComponentGlobal_InputCountDown

5
src/app_modules/forum/edit/posting/index.tsx
View File

@@ -2,7 +2,6 @@
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
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";
@@ -45,7 +44,7 @@ export default function Forum_EditPosting() {
return (
<>
<Stack>
<Component_V3_TextEditor
{/* <Component_V3_TextEditor
data={data.diskusi}
onSetData={(value) => {
setData({
@@ -57,7 +56,7 @@ export default function Forum_EditPosting() {
console.log(value);
setLengthData(value);
}}
/>
/> */}
{/* <Paper withBorder shadow="lg" p={"xs"}>
<ReactQuill