From 8425b4ea95bfd7abf32db703bbef0763bae085cf Mon Sep 17 00:00:00 2001
From: rizky <rizky@avolut.com>
Date: Fri, 22 Nov 2024 06:26:59 -0700
Subject: [PATCH] fix

---
 comps/form/Form.tsx           |   2 +-
 comps/form/base/BaseField.tsx |  59 ++++++++++++++----
 comps/form/base/BaseForm.tsx  | 112 +++++++++++++++++++++++++++-------
 comps/form/field/Field.tsx    |  29 ++++++---
 comps/list/TableList.tsx      |   7 +--
 5 files changed, 163 insertions(+), 46 deletions(-)

diff --git a/comps/form/Form.tsx b/comps/form/Form.tsx
index c623ca6..e4d5407 100755
--- a/comps/form/Form.tsx
+++ b/comps/form/Form.tsx
@@ -10,7 +10,7 @@ import { getPathname } from "lib/utils/pathname";
 import { sofDeleteField as softDeleteField } from "lib/utils/soft-del-rel";
 import { toast } from "../ui/toast";
 
-const editorFormWidth = {} as Record<string, { w: number; f: any }>;
+export const editorFormWidth = {} as Record<string, { w: number; f: any }>;
 
 export type { FMLocal } from "./typings";
 
diff --git a/comps/form/base/BaseField.tsx b/comps/form/base/BaseField.tsx
index f8cbb92..58623ed 100755
--- a/comps/form/base/BaseField.tsx
+++ b/comps/form/base/BaseField.tsx
@@ -19,18 +19,32 @@ export const BaseField = (prop: {
     typeof field.prefix === "function"
       ? field.prefix()
       : typeof field.prefix === "string"
-      ? field.prefix
-      : null;
+        ? field.prefix
+        : null;
   const suffix =
     typeof field.suffix === "function"
       ? field.suffix()
       : typeof field.suffix === "string"
-      ? field.prefix
-      : null;
+        ? field.prefix
+        : null;
   const name = field.name;
   const errors = fm.error.get(name);
 
   const showlabel = arg.show_label || "y";
+
+  const disabled =
+    typeof field.disabled === "function" ? field.disabled() : field.disabled;
+  const show =
+    typeof field.hidden === "function"
+      ? field.hidden()
+      : typeof field.hidden === "string"
+        ? field.hidden === "n"
+          ? false
+          : true
+        : typeof field.hidden === "boolean"
+          ? field.hidden
+          : true;
+
   return (
     <label
       className={cx(
@@ -48,6 +62,16 @@ export const BaseField = (prop: {
         w === "⅓" && "c-w-1/3",
         w === "¼" && "c-w-1/4",
         "c-flex-col c-space-y-1",
+        css`
+          .field-outer {
+            border: 1px solid ${disabled ? "#ececeb" : "#cecece"};
+
+            &.focused {
+              border: 1px solid #1c4ed8;
+              outline: 1px solid #1c4ed8;
+            }
+          }
+        `,
         field.focused && "focused",
         field.disabled && "disabled",
         typeof fm.data[name] !== "undefined" &&
@@ -56,8 +80,19 @@ export const BaseField = (prop: {
           "filled"
       )}
     >
-      {arg.show_label !== "n" && <Label field={field} fm={fm} arg={arg}/>}
-      <div className="field-input c-flex c-flex-1 c-flex-col">
+      {arg.show_label !== "n" && <Label field={field} fm={fm} arg={arg} />}
+      <div
+        className={cx(
+          "field-input c-flex c-flex-1 c-flex-col",
+          errors.length > 0 &&
+            css`
+              .field-outer {
+                border-color: red !important;
+                background: #fff0f0;
+              }
+            `
+        )}
+      >
         <div
           className={cx(
             !["toggle", "button", "radio", "checkbox"].includes(arg.sub_type)
@@ -71,12 +106,12 @@ export const BaseField = (prop: {
                   border-color: transparent;
                 `
               : field.disabled
-              ? "c-border-gray-100"
-              : errors.length > 0
-              ? field.focused
-                ? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700"
-                : "c-border-red-600 c-bg-red-50"
-              : field.focused && "focused",
+                ? "c-border-gray-100"
+                : errors.length > 0
+                  ? field.focused
+                    ? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700"
+                    : "c-border-red-600 c-bg-red-50"
+                  : field.focused && "focused",
             css`
               & > .field-inner {
                 min-height: 35px;
diff --git a/comps/form/base/BaseForm.tsx b/comps/form/base/BaseForm.tsx
index 1de2b02..ce4c1a5 100755
--- a/comps/form/base/BaseForm.tsx
+++ b/comps/form/base/BaseForm.tsx
@@ -1,8 +1,10 @@
 import { useLocal } from "lib/utils/use-local";
-import { ReactNode, useCallback, useEffect } from "react";
+import { ReactNode, useCallback, useEffect, useRef } from "react";
 import { FieldLocal, FieldProp, FMLocal } from "../typings";
 import { BaseFormLocal, default_base_form_local } from "./types";
 import { FieldLoading } from "lib/comps/ui/field-loading";
+import { editorFormWidth } from "../Form";
+import { ConsoleLogWriter } from "drizzle-orm";
 
 export type BaseFormProps<T> = {
   data: T;
@@ -12,6 +14,7 @@ export type BaseFormProps<T> = {
   render?: () => void;
   on_change?: (fm: FMLocal, name: string, new_value: any) => any;
   is_form?: boolean;
+  name: string;
 };
 export const BaseForm = <T extends Record<string, any>>(
   props: BaseFormProps<T>
@@ -107,10 +110,58 @@ export const BaseForm = <T extends Record<string, any>>(
     };
   };
 
-  useEffect(() => {
-    // form.data = data;
-    // form.render();
+  const ref = useRef({
+    el: null as null | HTMLFormElement,
+    timer: null as any,
+    rob: new ResizeObserver(async ([e]) => {
+      let fm = form.fm;
+      if (!fm) {
+        if (ref.current.timer) {
+          return;
+        }
+        ref.current.timer = await new Promise<void>((done) => {
+          const ival = setInterval(() => {
+            if (form.fm) {
+              ref.current.timer = null;
+              clearInterval(ival);
+              done();
+            }
+          }, 100);
+        });
+        fm = form.fm;
+      }
 
+      if (e.contentRect.width > 0 && fm) {
+        fm.size.height = e.contentRect.height;
+        fm.size.width = e.contentRect.width;
+
+        // if (fm.status === "ready" && !isEditor) fm.status = "resizing";
+
+        if (fm.props.layout === "auto" || !fm.props.layout) {
+          if (fm.size.width > 650) {
+            fm.size.field = "half";
+          } else {
+            fm.size.field = "full";
+          }
+        } else {
+          if (fm.props.layout === "1-col") fm.size.field = "full";
+          if (fm.props.layout === "2-col") fm.size.field = "half";
+        }
+
+        if (isEditor) {
+          editorFormWidth[props.name] = {
+            w: fm.size.width,
+            f: fm.size.field,
+          };
+        }
+        fm.status = "ready";
+
+        fm.render();
+      }
+    }),
+  });
+
+  useEffect(() => {
     if (form.internal.width === 0) {
       setTimeout(() => {
         form.render();
@@ -125,6 +176,7 @@ export const BaseForm = <T extends Record<string, any>>(
   if (!form.fm) {
     form.fm = form.createFm();
   }
+  const fm = form.fm;
 
   if (typeof props.is_form === "boolean") {
     if (!props.is_form) {
@@ -149,29 +201,45 @@ export const BaseForm = <T extends Record<string, any>>(
         e.stopPropagation();
         form.submit();
       }}
+      ref={(el) => {
+        if (el) {
+          if (!ref.current.el && fm && fm?.status !== "resizing") {
+            ref.current.el = el;
+            ref.current.rob.observe(el);
+            if (fm.status === "ready") {
+              fm.status = "resizing";
+              fm.render();
+            }
+          }
+        }
+      }}
       className={cx(
         "form c-flex-1 c-flex c-flex-col c-w-full c-h-full c-relative c-overflow-auto",
         className
       )}
     >
-      <div
-        className={cx(
-          "form-inner c-flex-1 c-flex c-flex-row c-flex-wrap c-items-start c-content-start c-absolute c-inset-0",
-          css`
-            padding-right: 10px;
-          `
-        )}
-        ref={(el) => {
-          if (el?.offsetWidth) {
-            form.internal.width = el?.offsetWidth;
-            form.createFm();
-          }
-        }}
-      >
-        {form.internal.width > 0 && (
-          <>{typeof children === "function" ? children(form) : children}</>
-        )}
-      </div>
+      {fm?.status === "ready" && (
+        <>
+          <div
+            className={cx(
+              "form-inner c-flex-1 c-flex c-flex-row c-flex-wrap c-items-start c-content-start c-absolute c-inset-0",
+              css`
+                padding-right: 10px;
+              `
+            )}
+            ref={(el) => {
+              if (el?.offsetWidth) {
+                form.internal.width = el?.offsetWidth;
+                form.createFm();
+              }
+            }}
+          >
+            {form.internal.width > 0 && (
+              <>{typeof children === "function" ? children(form) : children}</>
+            )}
+          </div>
+        </>
+      )}
     </form>
   );
 };
diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx
index 4700a90..9bdfd93 100755
--- a/comps/form/field/Field.tsx
+++ b/comps/form/field/Field.tsx
@@ -104,14 +104,16 @@ export const Field: FC<FieldProp> = (arg) => {
 
   const disabled =
     typeof field.disabled === "function" ? field.disabled() : field.disabled;
-    const show = 
+  const show =
     typeof field.hidden === "function"
       ? field.hidden()
       : typeof field.hidden === "string"
-      ? field.hidden === "n"
-        ? false
-        : true
-      : typeof field.hidden === "boolean"? field.hidden : true;
+        ? field.hidden === "n"
+          ? false
+          : true
+        : typeof field.hidden === "boolean"
+          ? field.hidden
+          : true;
   if (!show) return <></>;
 
   return (
@@ -153,8 +155,21 @@ export const Field: FC<FieldProp> = (arg) => {
       )}
       ref={typeof arg.field_ref === "function" ? arg.field_ref : undefined}
     >
-      {showlabel !== "n" && field.label && <Label field={field} fm={fm} arg={arg}/>}
-      <div className={cx("field-input c-flex c-flex-1 c-flex-col")}>
+      {showlabel !== "n" && field.label && (
+        <Label field={field} fm={fm} arg={arg} />
+      )}
+      <div
+        className={cx(
+          "field-input c-flex c-flex-1 c-flex-col",
+          errors.length > 0 &&
+            css`
+              .field-outer {
+                border-color: red !important;
+                background: #fff0f0;
+              }
+            `
+        )}
+      >
         <FieldInput
           field={field}
           fm={fm}
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index f98acf4..7a7e878 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -1,8 +1,9 @@
 import { GFCol, parseGenField } from "lib/gen/utils";
 import { cn } from "lib/utils";
 import { fields_map } from "lib/utils/format-value";
-import { useLocal } from "lib/utils/use-local";
+import { call_prasi_events } from "lib/utils/prasi-events";
 import { set } from "lib/utils/set";
+import { useLocal } from "lib/utils/use-local";
 import get from "lodash.get";
 import {
   AlertTriangle,
@@ -23,8 +24,7 @@ import DataGrid, {
   ColumnOrColumnGroup,
   RenderCellProps,
   Row,
-  SELECT_COLUMN_KEY,
-  SortColumn,
+  SortColumn
 } from "react-data-grid";
 import "react-data-grid/lib/styles.css";
 import { createPortal } from "react-dom";
@@ -38,7 +38,6 @@ import { TLList } from "./TLList";
 import { TLSlider } from "./TLSlider";
 import { sortTree } from "./utils/sort-tree";
 import { OnRowClick } from "./utils/type";
-import { call_prasi_events } from "lib/utils/prasi-events";
 
 let EMPTY_SET = new Set() as ReadonlySet<any>;