From 248ceada52e68c87c1476ed839a9f41b9b88d907 Mon Sep 17 00:00:00 2001
From: rizky <rizky@avolut.com>
Date: Thu, 1 Aug 2024 04:04:44 -0700
Subject: [PATCH] fix

---
 comps/custom/Popover.tsx                  |   2 +-
 comps/form/field/table-edit/TableEdit.tsx | 272 +++++++++++++++++++++-
 comps/form/field/type/TypeUpload.tsx      |   2 +-
 3 files changed, 271 insertions(+), 5 deletions(-)

diff --git a/comps/custom/Popover.tsx b/comps/custom/Popover.tsx
index 6607642..357805a 100755
--- a/comps/custom/Popover.tsx
+++ b/comps/custom/Popover.tsx
@@ -9,7 +9,7 @@ import {
   offset,
   shift,
   useClick,
-  useDismiss,
+  useDismiss, 
   useFloating,
   useId,
   useInteractions,
diff --git a/comps/form/field/table-edit/TableEdit.tsx b/comps/form/field/table-edit/TableEdit.tsx
index ec687ba..65af597 100755
--- a/comps/form/field/table-edit/TableEdit.tsx
+++ b/comps/form/field/table-edit/TableEdit.tsx
@@ -2,6 +2,7 @@ import { TableList } from "lib/comps/list/TableList";
 import { useLocal } from "lib/utils/use-local";
 import { FC, useEffect, useRef } from "react";
 import { FMLocal } from "../../typings";
+import get from "lodash.get";
 
 export const TableEdit: FC<{
   on_init: () => FMLocal;
@@ -30,11 +31,268 @@ export const TableEdit: FC<{
     }
   }
   const value = fm.data[name];
-
   useEffect(() => {
-    local.tbl.render();
-  }, [3000]);
+    local.tbl = {
+      data: value,
+      render: () => {},
+    };
+    local.render();
+  }, []);
+  const raw_childs = get(
+    child,
+    "props.meta.item.component.props.child.content.childs"
+  );
 
+  let columns: any[] = [];
+  let childs: any[] = [];
+  const mode_child = raw_childs.find((e: any) =>
+    ["tbl-col", "table: columns"].includes(e.name)
+  );
+  const tbl = item.edit.childs[0].edit.childs.find(
+    (e: any) => get(e, "id") === mode_child.id
+  );
+  const meta = tbl;
+  if (meta && meta.childs) {
+    childs = meta.childs;
+  }
+  for (const child of childs) {
+    let key = getProp(child, "name", {});
+    const label = getProp(child, "title", "");
+    const type = getProp(child, "type", "");
+    const width = parseInt(getProp(child, "width", {}));
+    if (type === "checkbox") {
+      const on_click = getProp(child, "opt__on_click", "");
+      columns.push({
+        key,
+        name,
+        width: 35,
+        minWidth: 45,
+        resizable: true,
+        sortable: true,
+        frozen: true,
+        renderCell(arg: any) {
+          // return <></>;
+          const { props, tbl } = arg;
+          const fm_row = { ...fm, render: local.render };
+          return (
+            <PassProp
+              idx={props.rowIdx}
+              row={props.row}
+              fm_parent={parent}
+              col={{
+                name: props.column.key,
+                value: get(props.row, props.column.key),
+                depth: 0,
+              }}
+              fm={fm_row}
+              ext_fm={{
+                idx: props.rowIdx,
+                change: () => {},
+                remove: () => {
+                  const data =
+                    tbl.data.filter((e: any) => e !== props.row) || [];
+                  fm.data[name] = data;
+                  fm.render();
+                },
+                add: (e: any) => {
+                  tbl.data.push(e ? e : {});
+                  fm.render();
+                },
+              }}
+            >
+              {child}
+            </PassProp>
+          );
+        },
+      });
+    } else {
+      columns.push({
+        key,
+        label,
+        width: width > 0 ? width : undefined,
+        resizable: true,
+        sortable: true,
+        renderCell(arg: any) {
+          const { props, tbl } = arg;
+          const fm_row = { ...fm, render: local.render };
+          fm_row.data = props.row;
+          local.tbl = tbl;
+          const key = props.column.key;
+          return (
+            <PassProp
+              idx={props.rowIdx}
+              row={props.row}
+              col={{
+                name: key,
+                value: props.row[props.column.key],
+                depth: props.row.__depth || 0,
+              }}
+              rows={tbl.data}
+              fm={fm_row}
+              fm_parent={parent}
+              ext_fm={{
+                idx: props.rowIdx,
+                change: () => {},
+                remove: () => {
+                  const data =
+                    tbl.data.filter((e: any) => e !== props.row) || [];
+                  fm.data[name] = data;
+                  fm.render();
+                },
+                add: (e: any) => {
+                  tbl.data.push(e ? e : {});
+                  fm.render();
+                },
+              }}
+            >
+              {child}
+            </PassProp>
+          );
+        },
+      });
+    }
+  }
+  return (
+    <>
+    
+      <div
+        className={cx(
+          `c-w-full c-h-full c-flex c-flex-col`,
+          css`
+            .rdg {
+              overflow-y: hidden !important;
+              height: var(--rdg-scroll-height) !important;
+            }
+            .rdg-cell > div {
+              flex-direction: row;
+              align-items: center;
+              padding-right: 5px;
+              .field {
+                flex: 1;
+                padding-top: 0px;
+              }
+            }
+            .field-error {
+              display: none;
+            }
+            .rdg-header-row {
+              border-top-right-radius: 5px;
+              border-top-left-radius: 5px;
+            }
+            .table-list-inner {
+              position: relative !important;
+            }
+            .typeahead-arrow {
+              margin-right: 10px;
+            }
+          `
+        )}
+      >
+        <table
+          className={cx(
+            "c-table-auto",
+            css`
+              border-collapse: collapse;
+              table-layout: auto; /* Kolom akan menyesuaikan konten */
+            `
+          )}
+        >
+          <thead>
+            <tr className=" ">
+              {columns.map((header) => {
+                return (
+                  <th
+                    key={header.key}
+                    className={cx(
+                      css`
+                        background-color: #f9f9f9;
+                      `,
+                      header.width > 0
+                        ? css`
+                            width: ${header.width}px;
+                          `
+                        : ""
+                    )}
+                  >
+                    <div
+                      className={cx(
+                        "rdg-cell c-py-2 c-px-4 c-flex c-flex-row c-items-center c-h-full",
+
+                        header.width > 0
+                          ? css`
+                              width: ${header.width}px;
+                            `
+                          : ""
+                      )}
+                    >
+                      {header.label}
+                    </div>
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody className="c-pb-2">
+            {Array.isArray(value) && value.length ? (
+              <>
+                {value.map((row: any, idx: number) => {
+                  return (
+                    <tr>
+                      {columns.map((header) => {
+                        return (
+                          <td>
+                            <div className="c-flex c-flex-row c-py-2 c-w-full">
+                              {header.renderCell({
+                                props: {
+                                  row: row,
+                                  rowIdx: idx,
+                                  column: header,
+                                },
+                                tbl: {
+                                  data: value,
+                                },
+                              })}
+                            </div>
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+              </>
+            ) : (
+              <></>
+            )}
+          </tbody>
+        </table>
+
+        <PassProp
+          ext_fm={{
+            add: (e: any) => {
+              if (Array.isArray(fm.data[name])) {
+                fm.data[name].push({});
+              } else {
+                fm.data[name] = [{}];
+              }
+              fm.render();
+              setTimeout(() => {
+                const last = Array.from(
+                  ref.current?.querySelectorAll(".rdg-row") || []
+                ).pop();
+                const input = last?.querySelector("input");
+                if (input) {
+                  input.focus();
+                }
+              }, 100);
+            },
+          }}
+          fm_parent={parent}
+        >
+          {bottom}
+        </PassProp>
+      </div>
+    </>
+  );
   return (
     <>
       <div className="c-w-full c-h-full c-flex c-flex-col">
@@ -201,3 +459,11 @@ export const TableEdit: FC<{
     </>
   );
 };
+
+function getProp(child: any, name: string, defaultValue?: any) {
+  const fn = new Function(
+    `return ${get(child, `component.props.${name}.valueBuilt`) || `null`}`
+  );
+
+  return fn() || defaultValue;
+}
diff --git a/comps/form/field/type/TypeUpload.tsx b/comps/form/field/type/TypeUpload.tsx
index 27e57ed..3fc71ff 100755
--- a/comps/form/field/type/TypeUpload.tsx
+++ b/comps/form/field/type/TypeUpload.tsx
@@ -157,7 +157,7 @@ export const FieldUpload: FC<{
                       input.ref.click();
                     }
                   }}
-                  className="c-items-center c-flex c-text-base c-px-5 c-outline-none c-rounded c-cursor-pointer "
+                  className="c-items-center c-flex c-text-base c-px-3 c-outline-none c-rounded c-cursor-pointer "
                 >
                   <div className="c-flex c-flex-row c-items-center c-px-2">
                     <Upload className="c-h-4 c-w-4" />