fix collaboration

deskripsi: - create & edit di tambah text editor - tampilan khusus untuk html
2025-05-02 11:52:02 +08:00
parent 6e26499657
commit cc3adc092c
6 changed files with 197 additions and 123 deletions
--- a/src/app_modules/colab/component/card_view/card_section_data.tsx
+++ b/src/app_modules/colab/component/card_view/card_section_data.tsx
@@ -6,6 +6,8 @@ import { useRouter } from "next/navigation";
 import { MODEL_COLLABORATION } from "../../model/interface";
 import { useState } from "react";
 import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";
+import { MainColor } from "@/app_modules/_global/color";

 export default function ComponentColab_CardSectionData({
  colabId,
@@ -19,10 +21,25 @@ export default function ComponentColab_CardSectionData({
  const router = useRouter();
  const [visible, setVisible] = useState(false);

+  const listData = [
+    {
+      title: "Industri",
+      value: data?.ProjectCollaborationMaster_Industri.name
+        ? data.ProjectCollaborationMaster_Industri.name
+        : "Industri",
+    },
+    {
+      title: "Lokasi",
+      value: data?.lokasi ? data.lokasi : "-",
+    },
+  ];
+
  return (
    <>
      <Card.Section
-        px={"md"}
+        mt={0}
+        bg={MainColor.soft_darkblue}
+        p={"sm"}
        onClick={() => {
          if (path) {
            setVisible(true);
@@ -37,51 +54,10 @@ export default function ComponentColab_CardSectionData({
            {data?.title ? data.title : "Judul Proyek"}
          </Title>
        </Center>
-        <Stack spacing={"xs"}>
-          <Grid>
-            <Grid.Col span={2}>
-              <Text fw={"bold"} >
-                Industri
-              </Text>
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <Text >:</Text>
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text  lineClamp={1}>
-                {data?.ProjectCollaborationMaster_Industri.name
-                  ? data?.ProjectCollaborationMaster_Industri?.name
-                  : "Industri"}
-              </Text>
-            </Grid.Col>
-          </Grid>
-
-          <Grid>
-            <Grid.Col span={2}>
-              <Text fw={"bold"} >
-                Lokasi
-              </Text>
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <Text >:</Text>
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text  lineClamp={1}>
-                {data?.lokasi ? data?.lokasi : "Lokasi dari proyek"}
-              </Text>
-            </Grid.Col>
-          </Grid>
-
-          <Stack spacing={5}>
-            <Text fw={"bold"} >
-              Tujuan proyek
-            </Text>
-            <Text lineClamp={2} >
-              {data?.purpose
-                ? data?.purpose
-                : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores odio nihil in animi expedita, suscipit excepturi pariatur totam esse officiis enim cumque. Quidem, facere aliquam. Sunt laboriosam incidunt iste amet"}
-            </Text>
-          </Stack>
+        <Stack spacing={5}>
+          {listData.map((e, i) => (
+            <Component_V3_GridDetailData item={e} key={i} />
+          ))}
        </Stack>
        {visible && <ComponentGlobal_CardLoadingOverlay />}
      </Card.Section>
--- a/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx
+++ b/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx
@@ -12,7 +12,7 @@ export default function ComponentColab_JumlahPartisipan({
    <>
      <Card.Section px={"md"} >
        <Stack>
-          <Divider />
+          {/* <Divider /> */}
          <Center>
            <Grid>
              <Grid.Col span={"content"}>
--- a/src/app_modules/colab/component/detail/detail_data.tsx
+++ b/src/app_modules/colab/component/detail/detail_data.tsx
@@ -3,31 +3,60 @@
 import { Stack, Box, Center, Title, Grid, Text } from "@mantine/core";
 import ComponentColab_AuthorNameOnHeader from "../header_author_name";
 import { MODEL_COLLABORATION } from "../../model/interface";
+import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";

 export default function ComponentColab_DetailData({
  data,
 }: {
  data?: MODEL_COLLABORATION;
 }) {
+
+  const listData = [
+    {
+      title: "Industri",
+      value: data?.ProjectCollaborationMaster_Industri.name
+        ? data.ProjectCollaborationMaster_Industri.name
+        : "Industri",
+    },
+    {
+      title: "Lokasi",
+      value: data?.lokasi ? data.lokasi : "-",
+    },
+    {
+      title: "Tujuan Proyek",
+      value: <Comp_V3_SetInnerHTML props={data?.purpose} />,
+    },
+    {
+      title: "Keuntungan Proyek",
+      value: <Comp_V3_SetInnerHTML props={data?.benefit} />,
+    },
+  ];
+
+
  return (
    <>
-      <Stack>
-        <Box>
-          <Center px={"md"} mb={"lg"}>
-            <Title order={4}>{data?.title ? data.title : "Judul Proyek"}</Title>
-          </Center>
-          <Stack spacing={"sm"}>
+      <Box>
+        <Center px={"md"} mb={"lg"}>
+          <Title order={3}>{data?.title ? data.title : "Judul Proyek"}</Title>
+        </Center>
+
+        <Stack>
+          {listData.map((e, i) => (
+            <Component_V3_GridDetailData item={e} key={i} />
+          ))}
+        </Stack>
+
+        {/* <Stack spacing={"sm"}>
            <Grid>
              <Grid.Col span={2}>
-                <Text fw={"bold"} >
-                  Industri
-                </Text>
+                <Text fw={"bold"}>Industri</Text>
              </Grid.Col>
              <Grid.Col span={1}>
-                <Text >:</Text>
+                <Text>:</Text>
              </Grid.Col>
              <Grid.Col span={"auto"}>
-                <Text >
+                <Text>
                  {data?.ProjectCollaborationMaster_Industri.name
                    ? data.ProjectCollaborationMaster_Industri.name
                    : "Industri"}
@@ -37,35 +66,32 @@ export default function ComponentColab_DetailData({

            <Grid>
              <Grid.Col span={2}>
-                <Text fw={"bold"} >
-                  Lokasi
-                </Text>
+                <Text fw={"bold"}>Lokasi</Text>
              </Grid.Col>
              <Grid.Col span={1}>
-                <Text >:</Text>
+                <Text>:</Text>
              </Grid.Col>
              <Grid.Col span={"auto"}>
-                <Text  lineClamp={1}>
+                <Text lineClamp={1}>
                  {data?.lokasi ? data.lokasi : " Lokasi dari proyek"}
                </Text>
              </Grid.Col>
            </Grid>

            <Stack spacing={5}>
-              <Text fw={"bold"} >
-                Tujuan proyek
-              </Text>
-              <Text >{data?.purpose ? data?.purpose : "-"}</Text>
+              <Text fw={"bold"}>Tujuan proyek</Text>
+              <Comp_V3_SetInnerHTML
+                props={data?.purpose}
+              />
            </Stack>
            <Stack spacing={5}>
-              <Text fw={"bold"} >
-                Keuntungan
-              </Text>
-              <Text >{data?.benefit ? data?.benefit : "-"}</Text>
+              <Text fw={"bold"}>Keuntungan</Text>
+              <Comp_V3_SetInnerHTML
+                props={data?.benefit}
+              />
            </Stack>
-          </Stack>
-        </Box>
-      </Stack>
+          </Stack> */}
+      </Box>
    </>
  );
 }
--- a/src/app_modules/colab/create/index.tsx
+++ b/src/app_modules/colab/create/index.tsx
@@ -2,12 +2,16 @@

 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+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";
 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 { clientLogger } from "@/util/clientLogger";
 import mqtt_client from "@/util/mqtt_client";
-import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import { Button, Select, Stack, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -16,14 +20,21 @@ import { apiGetMasterCollaboration } from "../component/lib/api_collaboration";
 import colab_funCreateProyek from "../fun/create/fun_create_proyek";
 import { MODEL_COLLABORATION_MASTER } from "../model/interface";

+interface IValue {
+  title: string;
+  lokasi: string;
+  purpose: string;
+  benefit: string;
+  projectCollaborationMaster_IndustriId: number;
+}
+
 export default function Colab_Create() {
-  const [value, setValue] = useState({
+  const [value, setValue] = useState<IValue>({
    title: "",
    lokasi: "",
    purpose: "",
    benefit: "",
    projectCollaborationMaster_IndustriId: 0,
-    // jumlah_partisipan: 0,
  });

  const [listIndustri, setListIndustri] = useState<
@@ -55,7 +66,7 @@ export default function Colab_Create() {

  return (
    <>
-      <Stack px={"xl"} pb={"md"}>
+      <Stack px={"xs"} pb={"md"}>
        <TextInput
          maxLength={100}
          styles={{
@@ -115,6 +126,44 @@ export default function Colab_Create() {
        />

        <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Tujuan Proyek" />
+
+          <Component_V3_TextEditor
+            data={value.purpose}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                purpose: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.purpose }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Keuntungan" />
+
+          <Component_V3_TextEditor
+            data={value.benefit}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                benefit: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.benefit }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        {/* <Stack spacing={5}>
          <Textarea
            styles={{
              label: { color: MainColor.white },
@@ -137,9 +186,9 @@ export default function Colab_Create() {
            lengthInput={value.purpose.length}
            maxInput={500}
          />
-        </Stack>
+        </Stack> */}

-        <Stack spacing={5}>
+        {/* <Stack spacing={5}>
          <Textarea
            styles={{
              label: { color: MainColor.white },
@@ -160,7 +209,7 @@ export default function Colab_Create() {
            lengthInput={value.benefit.length}
            maxInput={500}
          />
-        </Stack>
+        </Stack> */}

        <ButtonAction value={value as any} />
      </Stack>
@@ -168,7 +217,7 @@ export default function Colab_Create() {
  );
 }

-function ButtonAction({ value }: { value: any }) {
+function ButtonAction({ value }: { value: IValue }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

@@ -190,7 +239,7 @@ function ButtonAction({ value }: { value: any }) {
    try {
      setLoading(true);

-      const res = await colab_funCreateProyek(value);
+      const res = await colab_funCreateProyek(value as any);
      if (res.status === 201) {
        router.back();
        ComponentGlobal_NotifikasiBerhasil(res.message);
@@ -210,11 +259,13 @@ function ButtonAction({ value }: { value: any }) {
        disabled={
          !value.title ||
          !value.lokasi ||
-          !value.purpose ||
-          !value.benefit ||
-          value.projectCollaborationMaster_IndustriId === 0
-            ? true
-            : false
+          value.projectCollaborationMaster_IndustriId === 0 ||
+          // value.purpose
+          // value.benefit
+          funReplaceHtml({ html: value.purpose }).length > maxInputLength ||
+          funReplaceHtml({ html: value.purpose }).length === 0 ||
+          funReplaceHtml({ html: value.benefit }).length > maxInputLength ||
+          funReplaceHtml({ html: value.benefit }).length === 0
        }
        loaderPosition="center"
        loading={loading ? true : false}
--- a/src/app_modules/colab/edit/index.tsx
+++ b/src/app_modules/colab/edit/index.tsx
@@ -14,6 +14,10 @@ import {
  MODEL_COLLABORATION_MASTER,
 } 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 Colab_Edit({
  selectedData,
@@ -25,8 +29,7 @@ export default function Colab_Edit({
  const [value, setValue] = useState(selectedData);
  return (
    <>
-      <Stack px={"xl"} py={"md"}>
-        {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
+      <Stack px={"xs"} py={"md"}>
        <TextInput
          maxLength={100}
          styles={{
@@ -38,7 +41,7 @@ export default function Colab_Edit({
            },
            required: {
              color: MainColor.red,
-            }
+            },
          }}
          label="Judul"
          withAsterisk
@@ -63,7 +66,7 @@ export default function Colab_Edit({
            },
            required: {
              color: MainColor.red,
-            }
+            },
          }}
          label="Lokasi"
          withAsterisk
@@ -90,7 +93,7 @@ export default function Colab_Edit({
            },
            dropdown: {
              backgroundColor: MainColor.white,
-            }
+            },
          }}
          placeholder="Pilih kategori industri"
          label="Pilih Industri"
@@ -112,26 +115,45 @@ export default function Colab_Edit({
          }
        />

-        {/* <TextInput
-          description={
-            <Text fz={10}>
-              minimal partisipan yang akan di pilih untuk mendiskusikan proyek
-            </Text>
-          }
-          type="number"
-          withAsterisk
-          label="Jumlah Partisipan"
-          placeholder={"2"}
-          value={value.jumlah_partisipan ? value.jumlah_partisipan : ""}
-          onChange={(val) => {
-            setValue({
-              ...value,
-              jumlah_partisipan: + val.currentTarget.value
-            });
-          }}
-        /> */}
+        <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Tujuan Proyek" />
+
+          <Component_V3_TextEditor
+            data={value.purpose}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                purpose: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.purpose }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>

        <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Keuntungan" />
+
+          <Component_V3_TextEditor
+            data={value.benefit}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                benefit: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.benefit }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        {/* <Stack spacing={5}>
          <Textarea
            styles={{
              label: {
@@ -160,9 +182,9 @@ export default function Colab_Edit({
            lengthInput={value.purpose.length}
            maxInput={500}
          />
-        </Stack>
+        </Stack> */}

-        <Stack spacing={5}>
+        {/* <Stack spacing={5}>
          <Textarea
            styles={{
              label: {
@@ -187,7 +209,7 @@ export default function Colab_Edit({
            lengthInput={value.benefit.length}
            maxInput={500}
          />
-        </Stack>
+        </Stack> */}

        <ButtonAction value={value as any} />
      </Stack>
@@ -211,18 +233,18 @@ function ButtonAction({ value }: { value: any }) {
    // if (value.jumlah_partisipan < 2)
    //   return ComponentGlobal_NotifikasiPeringatan("Minimal Ada 2 Partisipan");

+    setLoading(true);
    await colab_funEditById(value as any).then((res) => {
      try {
-        setLoading(true);
        if (res.status === 200) {
          router.back();
          ComponentGlobal_NotifikasiBerhasil(res.message);
        } else {
-        setLoading(false)
+          setLoading(false);
          ComponentGlobal_NotifikasiGagal(res.message);
        }
      } catch (error) {
-        setLoading(false)
+        setLoading(false);
        clientLogger.error("Error update proyek", error);
      }
    });
@@ -234,11 +256,11 @@ function ButtonAction({ value }: { value: any }) {
        disabled={
          !value.title ||
          !value.lokasi ||
-          !value.purpose ||
-          !value.benefit ||
-          value.projectCollaborationMaster_IndustriId === 0
-            ? true
-            : false
+          value.projectCollaborationMaster_IndustriId === 0 ||
+          funReplaceHtml({ html: value.purpose }).length > maxInputLength ||
+          funReplaceHtml({ html: value.purpose }).length === 0 ||
+          funReplaceHtml({ html: value.benefit }).length > maxInputLength ||
+          funReplaceHtml({ html: value.benefit }).length === 0
        }
        loaderPosition="center"
        loading={loading ? true : false}
--- a/src/app_modules/colab/fun/edit/fun_edit_by_id.ts
+++ b/src/app_modules/colab/fun/edit/fun_edit_by_id.ts
@@ -6,7 +6,6 @@ import { revalidatePath } from "next/cache";
 import { RouterColab } from "@/lib/router_hipmi/router_colab";

 export default async function colab_funEditById(value: MODEL_COLLABORATION) {
-  console.log(value);
  const updt = await prisma.projectCollaboration.update({
    where: {
      id: value.id,