fix: enhance FilePreview component to limit filename display and add findLastEducation utility for education level mapping

2025-03-14 10:37:09 +07:00 · 2025-03-14 10:37:09 +07:00 · 7f503e7050
parent c0dd392de0
commit 7f503e7050
5 changed files with 245 additions and 110 deletions
--- a/components/form/FormBetter.tsx
+++ b/components/form/FormBetter.tsx
@ -17,6 +17,7 @@ export const FormBetter: React.FC<any> = ({
  className,
  onInit,
  afterLoad,
+  disabledScroll,
 }) => {
  const [fm, setFM] = useState<any>({
    data: null as any,
@ -37,6 +38,59 @@ export const FormBetter: React.FC<any> = ({
      )}
      <div className="w-full flex-grow flex flex-row rounded-lg">
        <div className="w-full flex flex-row flex-grow bg-white rounded-lg border border-gray-300 relative ">
+          {disabledScroll ? (
+            <>
+              {" "}
+              <Form
+                {...{
+                  children,
+                  header,
+                  onTitle,
+                  onLoad: async () => {
+                    try {
+                      const res = await onLoad();
+                      return res;
+                    } catch (ex: any) {
+                      setShow(false);
+                      throw new Error(
+                        get(ex, "response.data.meta.message") || ex.message
+                      );
+                    }
+                  },
+                  onSubmit,
+                  onFooter,
+                  showResize,
+                  mode,
+                  className: cx(className, "top-0 left-0 w-full"),
+                  afterLoad,
+                  onInit: (form: any) => {
+                    setFM(form);
+
+                    const originalRender = form.render;
+
+                    // Buat versi baru dari `local.render`
+                    form.render = () => {
+                      // Panggil fungsi asli
+                      originalRender();
+
+                      // Tambahkan logika tambahan untuk sinkronisasi
+                      setFM({
+                        ...form,
+                        submit: form.submit,
+                        render: form.render,
+                        data: form.data,
+                      });
+                    };
+                    form.render();
+                    if (typeof onInit === "function") {
+                      onInit(form);
+                    }
+                  },
+                }}
+              />
+            </>
+          ) : (
+            <>
              <ScrollArea className="flex-grow">
                <Form
                  {...{
@ -86,6 +140,8 @@ export const FormBetter: React.FC<any> = ({
                  }}
                />
              </ScrollArea>
+            </>
+          )}
        </div>
      </div>
    </div>
--- a/components/form/field/FilePreview.tsx
+++ b/components/form/field/FilePreview.tsx
@ -242,7 +242,11 @@ export const FilePreview = ({
        >
          <div className="flex flex-row gap-x-1 items-center">
            <div className="h-[30px] flex flex-row items-center">{content}</div>
-            <div className="text-xs filename">{file?.name}</div>
+            <div className="text-xs filename">
+              {limit_name && file?.name
+                ? file?.name.substring(0, limit_name)
+                : file?.name}
+            </div>
          </div>

          <div className="ml-2">
--- a/components/form/field/TypeInput.tsx
+++ b/components/form/field/TypeInput.tsx
@ -11,6 +11,7 @@ import { getNumber } from "@/lib/utils/getNumber";
 import MaskedInput from "../../ui/MaskedInput";
 import { cn } from "@/lib/utils";
 import { getLabel } from "@/lib/utils/getLabel";
+import { time } from "@/lib/utils/date";

 export const TypeInput: React.FC<any> = ({
  name,
@ -30,7 +31,7 @@ export const TypeInput: React.FC<any> = ({
  let value: any = fm.data?.[name] || "";

  if (type === "time") {
-    value = convertToTimeOnly(value) || "";
+    value = time(value) || "";
  }
  const [rating, setRating] = useState(value); // State untuk menyimpan nilai rating
  const handleClick = (index: number) => {
@ -70,7 +71,7 @@ export const TypeInput: React.FC<any> = ({
      meta.rgbValue = convertColor.toRgbString();
      meta.render();
    } else if (type === "time") {
-      if (fm.data?.[name]) fm.data[name] = convertToTimeOnly(fm.data[name]);
+      if (fm.data?.[name]) fm.data[name] = time(fm.data[name]);
      fm.render();
    } else {
      setRating(value ? value - 1 : value);
@ -246,7 +247,8 @@ export const TypeInput: React.FC<any> = ({
      );
      break;
    case "money":
-      return <>
+      return (
+        <>
          <Input
            id={name}
            name={name}
@ -300,7 +302,8 @@ export const TypeInput: React.FC<any> = ({
              }
            }}
          />
-      </>;
+        </>
+      );
      break;
  }
  let type_field = type;
--- a/components/ui/DocumentBiodata.tsx
+++ b/components/ui/DocumentBiodata.tsx
@ -80,6 +80,7 @@ const styles = StyleSheet.create({
 });
 // Create Document Component
 export const DocumentBiodata: FC<any> = ({ data, onRender }) => {
+  console.log({ data });
  return (
    <PDFViewer className="flex-grow w-full">
      <Document
@ -134,8 +135,14 @@ export const DocumentBiodata: FC<any> = ({ data, onRender }) => {
                <Text>DATA DIRI 个人资料</Text>
              </View>
              {[
-                { label: "Nama Lengkap 姓名", value: "" },
-                { label: "Tempat & Tanggal Lahir 出生地点，日期", value: "" },
+                { label: "Nama Lengkap 姓名", value: data?.name },
+                {
+                  label: "Tempat & Tanggal Lahir 出生地点，日期",
+                  value:
+                    data?.birth_place && data?.birth_date
+                      ? `${data?.birth_place}, ${dayDate(data?.birth_date)}`
+                      : "",
+                },
              ].map((row: any, rowIndex) => {
                return <RowPDF row={row} rowIndex={rowIndex} key={rowIndex} />;
              })}
@ -159,7 +166,12 @@ export const DocumentBiodata: FC<any> = ({ data, onRender }) => {
            [
              {
                label: "Jenis Kelamin 性别",
-                value: "L 男 / P 女",
+                value:
+                  data?.gender === "FEMALE"
+                    ? "P 女"
+                    : data?.gender === "MALE"
+                    ? "L 男"
+                    : "L 男 / P 女",
                mode: "noline",
              },
              {
@ -180,7 +192,7 @@ export const DocumentBiodata: FC<any> = ({ data, onRender }) => {
            ],
            [
              { label: "No. KTP 身份证号码", value: "" },
-              { label: "Agama 宗教", value: "" },
+              { label: "Agama 宗教", value: data?.religion },
            ],
            [
              { label: "Masa Berlaku KTP 身份证有效期", value: "" },
@ -202,9 +214,9 @@ export const DocumentBiodata: FC<any> = ({ data, onRender }) => {
              value: "",
              // mode: "placeholder",
            },
-            { label: "Alamat Lengkap 地址", value: "" },
+            { label: "Alamat Lengkap 地址", value: data?.address },
            { label: "Alamat Lengkap Asal 故乡地址", value: "" },
-            { label: "Alamat Email 电子邮件地址", value: "" },
+            { label: "Alamat Email 电子邮件地址", value: data?.user?.email },
          ].map((row: any, rowIndex) => {
            return <RowPDF row={row} rowIndex={rowIndex} key={rowIndex} />;
          })}
@ -726,7 +738,9 @@ export const DocumentBiodata: FC<any> = ({ data, onRender }) => {
                    borderRight: 1,
                    borderColor: "black",
                  }}
-                ></Text>
+                >
+                  {}
+                </Text>
                <Text
                  style={{
                    width: 200,
--- a/utils/findLastEducation.ts
+++ b/utils/findLastEducation.ts
@ -0,0 +1,58 @@
+export const findLastEducation = (searchTerm: string, userEducation: any[]) => {
+  if (!Array.isArray(userEducation) || userEducation.length === 0) {
+    return null; // Jika array kosong, kembalikan null
+  }
+
+  const educationMapping: Record<string, string | string[]> = {
+    SD: "10 - Junior High School",
+    SLTP: "9 - Senior High School",
+    SLTA: "3 - Bachelor",
+    "D 1": "4 - Diploma 1",
+    "D 2": "5 - Diploma 2",
+    "D 3": "6 - Diploma 3",
+    "D 1/2/3": ["4 - Diploma 1", "5 - Diploma 2", "6 - Diploma 3"], // Cari D1/D2/D3 tertinggi & terbaru
+    S1: ["3 - Bachelor", "7 - Diploma 4"], // S1 setara dengan D4
+    S2: "2 - Master Degree",
+    S3: "1 - Doctoral / Professor",
+  };
+
+  const mappedValue = educationMapping[searchTerm];
+  if (!mappedValue) return null;
+
+  let filteredEducations;
+
+  if (Array.isArray(mappedValue)) {
+    // Jika "D 1/2/3" atau "S1" (D4)
+    filteredEducations = userEducation.filter((edu) =>
+      mappedValue.includes(edu.education_level)
+    );
+    if (filteredEducations.length === 0) return null;
+
+    // Pilih jenjang tertinggi, jika sama maka pilih graduate_year terbaru
+    return filteredEducations.reduce((highest, current) => {
+      const highestIndex = mappedValue.indexOf(highest.education_level);
+      const currentIndex = mappedValue.indexOf(current.education_level);
+
+      if (currentIndex > highestIndex) {
+        return current;
+      }
+      if (currentIndex === highestIndex) {
+        return current.graduate_year > highest.graduate_year
+          ? current
+          : highest;
+      }
+      return highest;
+    });
+  } else {
+    // Jika hanya satu jenjang (misalnya SD, SLTP, SLTA, S2, S3)
+    filteredEducations = userEducation.filter(
+      (edu) => edu.education_level === mappedValue
+    );
+    if (filteredEducations.length === 0) return null;
+
+    // Pilih graduate_year terbaru
+    return filteredEducations.reduce((latest, current) =>
+      current.graduate_year > latest.graduate_year ? current : latest
+    );
+  }
+};