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

fix text editor voting

Browse Source 
deskripsi:
- fix on create & edit
- fix tampilan html di detail
This commit is contained in:
Bagasbanuna02
2025-04-30 12:13:18 +08:00
parent ec0e7b1211
commit 801fa8af8b
12 changed files with 146 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app_modules/_global/component/new/comp_V3_label_text_input.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { Text } from "@mantine/core";
import { MainColor } from "../../color";
export default function Component_V3_Label_TextInput({
text,
}: {
text: string;
}) {
return (
<>
<Text c={MainColor.white} fz={"sm"} fw={500}>
{text}
<Text inherit span c={"red"} px={5}>
*
</Text>
</Text>
</>
);
}

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

@@ -3,7 +3,7 @@ import { MainColor } from "../../color";
export const Comp_DangerouslySetInnerHTML = ({
props,
color,
style,
style: styleInput,
}: {
props: string | undefined;
color?: string;
@@ -11,20 +11,43 @@ export const Comp_DangerouslySetInnerHTML = ({
}) => {
const baseStyle: React.CSSProperties = {
color: color ?? MainColor.white,
wordBreak: "break-word",
overflow: "hidden",
};
return (
<>
<div
style={{
...baseStyle,
...style,
// wordBreak: "break-word",
...styleInput,
}}
className="rich-html-content"
dangerouslySetInnerHTML={{
__html: props ?? "",
}}
/>
<style>
{`
div p {
margin: 0 0 8px 0;
}
div ul, div ol {
margin: 0 0 8px 20px;
padding-left: 16px;
}
div h1, div h2, div h3 {
margin: 0 0 12px 0;
}
div li {
margin-bottom: 4px;
}
`}
</style>
</>
);
};

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

@@ -19,6 +19,7 @@ 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,
@@ -220,12 +221,7 @@ 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_Label_TextInput text="Deskripsi" />
<Component_V3_TextEditor
data={value.deskripsi}

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

@@ -3,17 +3,20 @@
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_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 { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
import { clientLogger } from "@/util/clientLogger";
import {
Button,
Select,
Stack,
Text,
TextInput,
Textarea,
TextInput
} from "@mantine/core";
import { DateTimePicker } from "@mantine/dates";
import _ from "lodash";
@@ -21,13 +24,10 @@ 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 { 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";
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";
export default function Event_Edit({
dataEvent,
@@ -250,12 +250,7 @@ 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_Label_TextInput text="Deskripsi" />
<Component_V3_TextEditor
data={value.deskripsi}

7
src/app_modules/vote/component/detail/comp_layout_header_detail_publish.tsx
View File

@@ -27,7 +27,6 @@ import { MODEL_VOTING } from "../../model/interface";
import { voting_funGetOneVotingbyId } from "../../fun/get/fun_get_one_by_id";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
export function Voting_ComponentLayoutHeaderDetailPublish({
votingId,
title,
@@ -42,8 +41,10 @@ export function Voting_ComponentLayoutHeaderDetailPublish({
const [data, setData] = useState<MODEL_VOTING>(dataVoting);
const [openDrawer, setOpenDrawer] = useState(false);
const [openModal, setOpenModal] = useState(false);
const [isLoading, setIsLoading] = useState(false);
async function onUpdateStatusArsip({ isArsip }: { isArsip: boolean }) {
setIsLoading(true);
const res = await voting_funUpdateIsArsipById({
votingId,
isArsip: isArsip,
@@ -57,9 +58,11 @@ export function Voting_ComponentLayoutHeaderDetailPublish({
} finally {
setOpenModal(false);
ComponentGlobal_NotifikasiBerhasil(res.message);
setIsLoading(false);
}
} else {
ComponentGlobal_NotifikasiGagal(res.message);
setIsLoading(false);
}
}
@@ -139,6 +142,8 @@ export function Voting_ComponentLayoutHeaderDetailPublish({
title={`Anda yakin ingin ${data?.isArsip ? "mempublish" : "mengarsipkan"} voting?`}
buttonKanan={
<Button
loading={isLoading}
loaderPosition="center"
onClick={() => {
data?.isArsip
? onUpdateStatusArsip({ isArsip: false })

3
src/app_modules/vote/component/detail/detail_data_sebelum_publish.tsx
View File

@@ -11,6 +11,7 @@ import {
import { IconCircle } from "@tabler/icons-react";
import { MODEL_VOTING } from "../../model/interface";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
export default function ComponentVote_DetailDataSebelumPublish
({
@@ -36,7 +37,7 @@ export default function ComponentVote_DetailDataSebelumPublish
{data?.title}
</Title>
</Center>
<Text>{data?.deskripsi}</Text>
<Comp_DangerouslySetInnerHTML props={data?.deskripsi} />
<Stack spacing={0} align="center">
<Center>

3
src/app_modules/vote/component/detail/detail_data_setelah_publish.tsx
View File

@@ -8,6 +8,7 @@ import { Badge, Center, Group, Stack, Text, Title } from "@mantine/core";
import { MODEL_VOTING } from "../../model/interface";
import moment from "moment"
import "moment/locale/id"
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
export default function ComponentVote_DetailDataSetelahPublish({
data,
@@ -33,7 +34,7 @@ export default function ComponentVote_DetailDataSetelahPublish({
{data?.title}
</Title>
</Center>
<Text>{data?.deskripsi}</Text>
<Comp_DangerouslySetInnerHTML props={data?.deskripsi} />
<Stack spacing={0} pb={authorName ? 0 : "xs"}>
<Stack align="center" spacing={"xs"}>

46
src/app_modules/vote/create/index.tsx
View File

@@ -29,6 +29,10 @@ import { WibuRealtime } from "wibu-pkg";
import { Vote_funCreate } from "../fun/create/create_vote";
import { gs_vote_hotMenu } from "../global_state";
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";
import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
export default function Vote_Create() {
const router = useRouter();
@@ -102,17 +106,14 @@ export default function Vote_Create() {
setHotMenu(2);
router.replace(RouterVote.status({ id: "2" }));
ComponentGlobal_NotifikasiBerhasil(res.message);
}
} else {
setIsLoading(false);
ComponentGlobal_NotifikasiGagal(res.message);
}
} catch (error) {
setIsLoading(false);
clientLogger.error("Error create voting", error);
}
}
@@ -130,7 +131,7 @@ export default function Vote_Create() {
},
required: {
color: MainColor.red,
}
},
}}
label="Judul"
withAsterisk
@@ -143,7 +144,27 @@ export default function Vote_Create() {
});
}}
/>
<Stack spacing={5}>
<Component_V3_Label_TextInput text="Deskripsi" />
<Component_V3_TextEditor
data={data.deskripsi}
onSetData={(val) => {
setData({
...data,
deskripsi: val,
});
}}
/>
<ComponentGlobal_InputCountDown
lengthInput={funReplaceHtml({ html: data.deskripsi }).length}
maxInput={maxInputLength}
/>
</Stack>
{/* <Stack spacing={5}>
<Textarea
styles={{
label: {
@@ -174,7 +195,7 @@ export default function Vote_Create() {
maxInput={300}
lengthInput={data.deskripsi.length}
/>
</Stack>
</Stack> */}
<DatePickerInput
styles={{
@@ -186,7 +207,7 @@ export default function Vote_Create() {
},
required: {
color: MainColor.red,
}
},
}}
label="Jangka Waktu"
placeholder="Masukan jangka waktu voting"
@@ -227,7 +248,7 @@ export default function Vote_Create() {
},
required: {
color: MainColor.red,
}
},
}}
label={e.name}
withAsterisk
@@ -283,12 +304,11 @@ export default function Vote_Create() {
<Button
disabled={
!data.title ||
!data.deskripsi ||
!data.awalVote ||
!data.akhirVote ||
listVote.map((e, i) => e.value).includes("")
? true
: false
!data.awalVote ||
!data.akhirVote ||
listVote.map((e, i) => e.value).includes("") ||
funReplaceHtml({ html: data.deskripsi }).length > maxInputLength ||
funReplaceHtml({ html: data.deskripsi }).length === 0
}
loaderPosition="center"
loading={isLoading ? true : false}

43
src/app_modules/vote/detail/kontribusi/index.tsx
View File

@@ -70,49 +70,6 @@ export default function Vote_DetailKontribusi() {
return (
<>
<Stack pb={"md"}>
{/* <ComponentGlobal_CardStyles marginBottom={"0px"}>
<Stack>
<ComponentGlobal_AvatarAndUsername
profile={data?.Author.Profile as any}
/>
<Stack spacing={"lg"}>
<Center>
<Title order={4} align="center">
{data?.title}
</Title>
</Center>
<Text>{data?.deskripsi}</Text>
<Stack spacing={0} pb={"xs"}>
<Stack align="center" spacing={"xs"}>
<Text fz={10} fw={"bold"}>
Batas Voting
</Text>
<Badge
styles={{
root: {
backgroundColor: AccentColor.blue,
border: `1px solid ${AccentColor.skyblue}`,
color: "white",
width: "80%",
},
}}
>
<Text>
{data
? moment(data.awalVote).format("ll")
: "tgl awal voting"}{" "}
-{" "}
{data
? moment(data.akhirVote).format("ll")
: "tgl akhir voting"}
</Text>
</Badge>
</Stack>
</Stack>
</Stack>
</Stack>
</ComponentGlobal_CardStyles> */}
<ComponentVote_DetailDataSetelahPublish
data={data as any}
authorName={true}

3
src/app_modules/vote/detail/main/index.tsx
View File

@@ -42,6 +42,7 @@ import { Voting_ComponentSkeletonDetail } from "../../component/skeleton_view";
import { Vote_funCreateHasil } from "../../fun/create/create_hasil";
import { MODEL_VOTING } from "../../model/interface";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
export default function Vote_MainDetail({
userLoginId,
@@ -222,7 +223,7 @@ export default function Vote_MainDetail({
{data?.title}
</Title>
</Center>
<Text>{data?.deskripsi}</Text>
<Comp_DangerouslySetInnerHTML props={data?.deskripsi} />
<Stack spacing={0}>
<Stack align="center" spacing={"xs"}>

59
src/app_modules/vote/edit/index.tsx
View File

@@ -14,7 +14,7 @@ import {
Stack,
Text,
TextInput,
Textarea
Textarea,
} from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
import { useShallowEffect } from "@mantine/hooks";
@@ -32,6 +32,10 @@ import {
MODEL_VOTING_DAFTAR_NAMA_VOTE,
} from "../model/interface";
import { clientLogger } from "@/util/clientLogger";
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";
export default function Vote_Edit({
dataVote,
@@ -88,6 +92,28 @@ export default function Vote_Edit({
/>
<Stack spacing={5}>
<Component_V3_Label_TextInput text="Deskripsi" />
<Component_V3_TextEditor
data={data.deskripsi}
onSetData={(val) => {
setData({
...data,
deskripsi: val,
});
}}
/>
{funReplaceHtml({ html: data.deskripsi }).length === 0 && (
<ComponentGlobal_ErrorInput text="Masukan deskripsi" />
)}
<ComponentGlobal_InputCountDown
lengthInput={funReplaceHtml({ html: data.deskripsi }).length}
maxInput={maxInputLength}
/>
</Stack>
{/* <Stack spacing={5}>
<Textarea
styles={{
label: {
@@ -126,19 +152,19 @@ export default function Vote_Edit({
lengthInput={data.deskripsi.length}
maxInput={300}
/>
</Stack>
</Stack> */}
<DatePickerInput
styles={{
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
},
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
},
}}
label="Jangka Waktu"
placeholder="Masukan jangka waktu voting"
@@ -284,17 +310,20 @@ function ButtonAction({
ComponentGlobal_NotifikasiGagal(res.message);
}
});
} catch (error) {
setIsLoading(false);
clientLogger.error("Error update voting", error);
}
clientLogger.error("Error update voting", error);
}
}
return (
<>
<Button
disabled={!data.title || !data.deskripsi ? true : false}
disabled={
!data.title ||
funReplaceHtml({ html: data.deskripsi }).length > maxInputLength ||
funReplaceHtml({ html: data.deskripsi }).length === 0
}
loaderPosition="center"
loading={isLoading ? true : false}
mt={"lg"}

2
src/app_modules/vote/fun/edit/fun_edit_by_id.ts
View File

@@ -19,7 +19,7 @@ export async function Vote_funEditById(
},
data: {
title: data.title,
deskripsi: data.deskripsi,
deskripsi: data.deskripsi.trim(),
awalVote: data.awalVote,
akhirVote: data.akhirVote,
},