fix text editor voting

deskripsi:
- fix on create & edit
- fix tampilan html di detail

src/app_modules/_global/component/new/comp_V3_label_text_input.tsx

@@ -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>
+    </>
+  );
+}

src/app_modules/_global/component/new/comp_set_inner_html.tsx

@@ -3,7 +3,7 @@ import { MainColor } from "../../color";
 export const Comp_DangerouslySetInnerHTML = ({
   props,
   color,
-  style,
+  style: styleInput,
 }: {
   props: string | undefined;
   color?: string;
@@ -11,6 +11,8 @@ export const Comp_DangerouslySetInnerHTML = ({
 }) => {
   const baseStyle: React.CSSProperties = {
     color: color ?? MainColor.white,
+    wordBreak: "break-word",
+    overflow: "hidden",
   };
  
   return (
@@ -18,13 +20,34 @@ export const Comp_DangerouslySetInnerHTML = ({
       <div
         style={{
           ...baseStyle,
-          ...style,
+          ...styleInput,
-          // wordBreak: "break-word",
         }}
+        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>
     </>
   );
 };

src/app_modules/event/create/create.tsx

@@ -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"}>
+          <Component_V3_Label_TextInput text="Deskripsi" />
-            Deskripsi
-            <Text inherit span c={"red"} px={5}>
-              *
-            </Text>
-          </Text>
 
           <Component_V3_TextEditor
             data={value.deskripsi}

src/app_modules/event/edit/index.tsx

@@ -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,
+  TextInput
-  Textarea,
 } 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 { Event_funEditById } from "../fun/edit/fun_edit_by_id";
-import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
+import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
-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,
@@ -250,12 +250,7 @@ export default function Event_Edit({
         />
 
         <Stack spacing={5}>
-          <Text c={MainColor.white} fz={"sm"}>
+          <Component_V3_Label_TextInput text="Deskripsi" />
-            Deskripsi
-            <Text inherit span c={"red"} px={5}>
-              *
-            </Text>
-          </Text>
 
           <Component_V3_TextEditor
             data={value.deskripsi}

src/app_modules/vote/component/detail/comp_layout_header_detail_publish.tsx

@@ -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 })

src/app_modules/vote/component/detail/detail_data_sebelum_publish.tsx

@@ -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>

src/app_modules/vote/component/detail/detail_data_setelah_publish.tsx

@@ -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"}>

src/app_modules/vote/create/index.tsx

@@ -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("")
+            listVote.map((e, i) => e.value).includes("") ||
-              ? true
+            funReplaceHtml({ html: data.deskripsi }).length > maxInputLength ||
-              : false
+            funReplaceHtml({ html: data.deskripsi }).length === 0
           }
           loaderPosition="center"
           loading={isLoading ? true : false}

src/app_modules/vote/detail/kontribusi/index.tsx

@@ -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}

src/app_modules/vote/detail/main/index.tsx

@@ -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"}>

src/app_modules/vote/edit/index.tsx

@@ -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,7 +152,7 @@ export default function Vote_Edit({
             lengthInput={data.deskripsi.length}
             maxInput={300}
           />
-        </Stack>
+        </Stack> */}
 
         <DatePickerInput
           styles={{
@@ -284,7 +310,6 @@ function ButtonAction({
           ComponentGlobal_NotifikasiGagal(res.message);
         }
       });
-    
     } catch (error) {
       setIsLoading(false);
       clientLogger.error("Error update voting", error);
@@ -294,7 +319,11 @@ function ButtonAction({
   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"}

src/app_modules/vote/fun/edit/fun_edit_by_id.ts

@@ -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,
     },