fix form

comps/form/Form.tsx

@@ -113,6 +113,7 @@ export const Form: FC<FMProps> = (props) => {
       className={cx(
         "form c-flex-1 c-w-full c-h-full c-relative c-overflow-auto"
       )}
+      action="#"
     >
       {toaster_el && createPortal(<Toaster cn={cx} />, toaster_el)}
       <div
@@ -132,6 +133,7 @@ export const Form: FC<FMProps> = (props) => {
               </PassProp>
             );
           })}
+        <button type="submit" className="c-hidden"></button>
       </div>
     </form>
   );

comps/form/field/FieldInput.tsx

@@ -1,11 +1,10 @@
-import { Skeleton } from "@/comps/ui/skeleton";
+import { createItem } from "@/gen/utils";
 import get from "lodash.get";
 import { FC, useEffect } from "react";
 import { FMLocal, FieldLocal } from "../typings";
-import { fieldMapping } from "./mapping";
-import { Loader2 } from "lucide-react";
 import { genFieldMitem, updateFieldMItem } from "../utils/gen-mitem";
-import { createItem } from "@/gen/utils";
+import { fieldMapping } from "./mapping";
+import { FieldLoading } from "./raw/FieldLoading";
 
 const modify = {
   timeout: null as any,
@@ -97,28 +96,7 @@ export const FieldInput: FC<{
     >
       {prefix && <></>}
       {fm.status === "loading" ? (
-        <div className="c-flex c-flex-col c-space-y-1 c-p-1 c-justify-center">
-          <div className="c-flex c-space-x-1">
-            <Skeleton
-              className={css`
-                width: 50px;
-                height: 10px;
-              `}
-            />
-            <Skeleton
-              className={css`
-                width: 50px;
-                height: 10px;
-              `}
-            />
-          </div>
-          <Skeleton
-            className={css`
-              width: 80px;
-              height: 10px;
-            `}
-          />
-        </div>
+        <FieldLoading />
       ) : (
         <div
           className={cx(
@@ -126,7 +104,7 @@ export const FieldInput: FC<{
             field.disabled && "c-pointer-events-none"
           )}
         >
-          {!found && <Loader2 className="c-h-4 c-w-4 c-animate-spin" />}
+          {!found && <FieldLoading />}
           {found && (
             <PassProp field={field} fm={fm}>
               {found}

comps/form/field/raw/FieldLoading.tsx

@@ -0,0 +1,28 @@
+import { Skeleton } from "@/comps/ui/skeleton";
+
+export const FieldLoading = () => {
+  return (
+    <div className="c-flex c-flex-col c-space-y-1 c-p-1 c-justify-center">
+      <div className="c-flex c-space-x-1">
+        <Skeleton
+          className={css`
+            width: 50px;
+            height: 10px;
+          `}
+        />
+        <Skeleton
+          className={css`
+            width: 50px;
+            height: 10px;
+          `}
+        />
+      </div>
+      <Skeleton
+        className={css`
+          width: 80px;
+          height: 10px;
+        `}
+      />
+    </div>
+  );
+};

comps/form/field/type/TypeRelation.tsx

@@ -2,7 +2,7 @@ import { useLocal } from "@/utils/use-local";
 import { FC, useEffect } from "react";
 import { FMLocal, FieldLocal } from "../../typings";
 import { OptionItem, RawDropdown } from "../raw/Dropdown";
-import { Loader2 } from "lucide-react";
+import { FieldLoading } from "../raw/FieldLoading";
 
 export type PropTypeRelation = {
   type: "has-one" | "has-many";
@@ -68,9 +68,7 @@ export const FieldTypeRelation: FC<{
   return (
     <>
       {field.status === "loading" ? (
-        <div className="c-w-full c-h-full c-items-center c-flex c-px-2">
-          <Loader2 className="c-h-4 c-w-4 c-animate-spin" />
-        </div>
+        <FieldLoading />
       ) : (
         <RawDropdown
           options={list}

comps/form/field/type/TypeText.tsx

@@ -25,7 +25,7 @@ export const FieldTypeText: FC<{
       }}
       value={value || ""}
       disabled={field.disabled}
-      className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm"
+      className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
       spellCheck={false}
       onFocus={() => {
         field.focused = true;

comps/form/typings.ts

@@ -9,7 +9,7 @@ import { PropTypeRelation } from "./field/type/TypeRelation";
 export type FMProps = {
   on_init: (arg: { fm: FMLocal; submit: any; reload: any }) => any;
   on_load: (arg: { fm: FMLocal }) => any;
-  on_submit: (arg: { form: any; error: any }) => Promise<any>;
+  on_submit: (arg: { fm: FMLocal; form: any; error: any }) => Promise<any>;
   body: any;
   form: FormHook;
   PassProp: any;
@@ -68,6 +68,7 @@ export type FMInternal = {
   fields: Record<string, FieldLocal>;
   field_def: Record<string, GFCol>;
   error: {
+    readonly object: Record<string, string>;
     readonly list: { name: string; error: string[] }[];
     set: (name: string, error: string[]) => void;
     get: (name: string) => string[];

comps/form/utils/error.ts

@@ -12,6 +12,13 @@ export const formError = (fm: FMLocal) => {
 
       return res;
     },
+    get object() {
+      const result: any = {};
+      Object.entries(this._internal).map(([name, error]) => {
+        result[name] = error.join("\n");
+      });
+      return {};
+    },
     clear(name) {
       if (name) delete this._internal[name];
       else this._internal = {};

comps/form/utils/init.tsx

@@ -86,6 +86,12 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
     return promise;
   };
 
-  fm.submit = async () => {};
-  fm.props.on_init({ fm, submit: fm.submit, reload: fm.reload });
+  fm.submit = async () => {
+    if (typeof fm.props.on_submit === "function") {
+      fm.props.on_submit({ fm, form: fm.data, error: fm.error.object });
+    }
+  };
+  if (typeof fm.props.on_init === "function") {
+    fm.props.on_init({ fm, submit: fm.submit, reload: fm.reload });
+  }
 };

gen/gen_form/gen_form.ts

@@ -24,6 +24,9 @@ export const gen_form = async (modify: (data: any) => void, data: any) => {
       };
       for (const r of f.relation.fields) {
         select[f.name].select[r.name] = true;
+        if (r.is_pk) {
+          pks[f.name] = r.name;
+        }
       }
     }
 

gen/gen_form/on_load.ts

@@ -56,20 +56,6 @@ async (opt) => {
       select: ${JSON.stringify(select, null, 2).split("\n").join("\n      ")},
     });
 
-    if (item){
-      for (const [k, v] of Object.entries(item)) {
-  ${Object.entries(pks)
-    .map(([k, v]) => {
-      return `\
-        if (k === "${k}" && !(v as any)?.connect) {
-          if (v?.["${v}"]) item[k] = { connect: { ${v}: v?.["${v}"] } } as any;
-          else delete item[k];
-        }`;
-    })
-    .join("\n")}
-      }
-    }
-
     ${opt?.after_load ? opt?.after_load : ""}
 
     return item;

gen/gen_form/on_submit.ts

@@ -30,6 +30,21 @@ async ({ form, error }: IForm) => {
     const data = { ...form };
     delete data.${id};
 
+    if (data) {
+      const pks = ${JSON.stringify(pks)};
+      for (const [k, v] of Object.entries(pks)) {
+        if (typeof data[k] === 'object') {
+          if (data[k][v]) {
+            data[k] = {
+              connect: {
+                [v]: data[k][v]
+              }
+            }
+          }
+        }
+      }
+    }
+
     if (form.${id}) {
       await db.${table}.update({
         where: {

gen/gen_relation/new_field.ts

@@ -38,6 +38,16 @@ export const newField = (arg: GFCol) => {
 </div>`,
       jsBuilt: `render(React.createElement("div", Object.assign({}, props, { className: cx(props.className, "") }), item["${arg.name}"]));`,
     },
+    dim: {
+      h: "full",
+      w: "fit",
+    },
+    padding: {
+      l: 0,
+      b: 0,
+      t: 0,
+      r: 10,
+    },
     layout: {
       dir: "row",
       align: "left",

gen/utils.ts

@@ -66,6 +66,7 @@ type SimplifiedItem = {
     jsBuilt: string;
   };
   padding?: any;
+  dim?: any;
   layout?: any;
 };
 
@@ -121,10 +122,12 @@ export const createItem = (arg: SimplifiedItem): any => {
 
   return {
     id: createId(),
-    dim: {
-      h: "full",
-      w: "full",
-    },
+    dim: arg.dim
+      ? arg.dim
+      : {
+          h: "full",
+          w: "full",
+        },
     padding: arg.padding,
     layout: arg.layout,
     name: arg.name || "item",