fix text editor voting

deskripsi: - fix on create & edit - fix tampilan html di detail
2025-04-30 12:13:18 +08:00
parent ec0e7b1211
commit 801fa8af8b
12 changed files with 146 additions and 99 deletions
--- a/src/app_modules/vote/component/detail/comp_layout_header_detail_publish.tsx
+++ b/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 })
--- a/src/app_modules/vote/component/detail/detail_data_sebelum_publish.tsx
+++ b/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>
--- a/src/app_modules/vote/component/detail/detail_data_setelah_publish.tsx
+++ b/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"}>
--- a/src/app_modules/vote/create/index.tsx
+++ b/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("")
-              ? 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}
--- a/src/app_modules/vote/detail/kontribusi/index.tsx
+++ b/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}
--- a/src/app_modules/vote/detail/main/index.tsx
+++ b/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"}>
--- a/src/app_modules/vote/edit/index.tsx
+++ b/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,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"}
--- a/src/app_modules/vote/fun/edit/fun_edit_by_id.ts
+++ b/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,
    },