From 02a0b485f91b545a1cee2ba37c32e40072fa6a7c Mon Sep 17 00:00:00 2001
From: Rizky <rizky@avolut.com>
Date: Sat, 29 Jun 2024 21:52:21 -0700
Subject: [PATCH] fix

---
 comps/form/Form.tsx             |  3 +-
 comps/form/base/BaseField.tsx   | 19 +++++++----
 comps/form/field/Field.tsx      | 15 ++++-----
 comps/form/field/FieldInput.tsx |  9 +++--
 comps/form/field/Label.tsx      |  6 +---
 comps/form/gen/gen-form.ts      | 38 +++++++++++++++------
 comps/form/typings.ts           | 12 +++----
 comps/list/TableList.tsx        | 60 ++++++++++++++++++---------------
 exports.tsx                     |  2 +-
 9 files changed, 94 insertions(+), 70 deletions(-)

diff --git a/comps/form/Form.tsx b/comps/form/Form.tsx
index aadc9e0..84a921b 100755
--- a/comps/form/Form.tsx
+++ b/comps/form/Form.tsx
@@ -14,7 +14,7 @@ const editorFormWidth = {} as Record<string, { w: number; f: any }>;
 export { FMLocal } from "./typings";
 
 export const Form: FC<FMProps> = (props) => {
-  const { PassProp, body, feature, sfd_field, style } = props;
+  const { PassProp, body, feature, sfd_field } = props;
   const fm = useLocal<FMInternal>({
     data: editorFormData[props.item.id]
       ? editorFormData[props.item.id].data
@@ -168,7 +168,6 @@ export const Form: FC<FMProps> = (props) => {
       <div
         className={cx(
           "form-inner c-flex c-flex-1 c-flex-wrap c-items-start c-content-start",
-          style === "flex" ? "" : "c-absolute c-inset-0",
           css`
             padding-right: 10px;
           `
diff --git a/comps/form/base/BaseField.tsx b/comps/form/base/BaseField.tsx
index b0632a4..688acf9 100755
--- a/comps/form/base/BaseField.tsx
+++ b/comps/form/base/BaseField.tsx
@@ -15,7 +15,6 @@ export const BaseField = (prop: {
 }) => {
   const { field, fm, arg } = prop;
   const w = field.width;
-  const mode = fm.props.label_mode;
   const prefix =
     typeof field.prefix === "function"
       ? field.prefix()
@@ -30,8 +29,8 @@ export const BaseField = (prop: {
       : null;
   const name = field.name;
   const errors = fm.error.get(name);
-  let type_field = typeof arg.type === "function" ? arg.type() : arg.type; // tipe field
 
+  const showlabel = arg.show_label || "y";
   return (
     <label
       className={cx(
@@ -48,8 +47,9 @@ export const BaseField = (prop: {
         w === "½" && "c-w-1/2",
         w === "⅓" && "c-w-1/3",
         w === "¼" && "c-w-1/4",
-        mode === "horizontal" && "c-flex-row c-items-center",
-        mode === "vertical" && "c-flex-col c-space-y-1",
+        field.type === "link"
+          ? "c-flex-row c-items-stretch c-min-h-[78px]"
+          : "c-flex-col c-space-y-1",
         field.focused && "focused",
         field.disabled && "disabled",
         typeof fm.data[name] !== "undefined" &&
@@ -58,12 +58,17 @@ export const BaseField = (prop: {
           "filled"
       )}
     >
-      {mode !== "hidden" && <Label field={field} fm={fm} />}
+      {arg.show_label !== "n" && <Label field={field} fm={fm} />}
       <div className="field-input c-flex c-flex-1 c-flex-col">
         <div
           className={cx(
             !["toogle", "button", "radio", "checkbox"].includes(arg.sub_type)
-              ? "field-outer c-overflow-hidden c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm"
+              ? cx(
+                  "field-outer c-overflow-hidden c-flex-1 c-flex c-flex-row c-text-sm c-bg-white",
+                  field.type === "link"
+                    ? " c-items-center"
+                    : "c-border c-rounded "
+                )
               : "",
             fm.status === "loading"
               ? css`
@@ -100,6 +105,8 @@ export const BaseField = (prop: {
             <div
               className={cx(
                 "field-inner c-flex-1 c-flex c-items-center",
+                field.type === "link" && "c-justify-end",
+                field.focused && "focused",
                 field.disabled && "c-pointer-events-none"
               )}
             >
diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx
index 05d0684..a284a7c 100755
--- a/comps/form/field/Field.tsx
+++ b/comps/form/field/Field.tsx
@@ -9,7 +9,6 @@ import { validate } from "../utils/validate";
 export const Field: FC<FieldProp> = (arg) => {
   const showlabel = arg.show_label || "y";
 
-  let type: any = typeof arg.type === "function" ? arg.type() : arg.type; // tipe field
   let sub_type: any = arg.sub_type; // tipe field
 
   const { fm } = arg;
@@ -17,7 +16,6 @@ export const Field: FC<FieldProp> = (arg) => {
   const name = field.name;
   const local = useLocal({ prev_val: fm.data[name] });
 
-  const mode = fm.props.label_mode;
   const w = field.width;
 
   useEffect(() => {
@@ -42,7 +40,7 @@ export const Field: FC<FieldProp> = (arg) => {
       className={cx(
         "field",
         "c-flex",
-        type === "single-option" && sub_type === "checkbox"
+        field.type === "single-option" && sub_type === "checkbox"
           ? css`
               padding: 5px 0px 0px 7.5px;
             `
@@ -56,16 +54,15 @@ export const Field: FC<FieldProp> = (arg) => {
         w === "½" && "c-w-1/2",
         w === "⅓" && "c-w-1/3",
         w === "¼" && "c-w-1/4",
-        mode === "horizontal" && "c-flex-row c-items-center",
-        mode === "vertical" && "c-flex-col c-space-y-1"
+        field.type === "link"
+          ? "c-flex-row c-items-stretch c-min-h-[78px]"
+          : "c-flex-col c-space-y-1"
       )}
       {...props}
       ref={typeof arg.field_ref === "function" ? arg.field_ref : undefined}
     >
-      {mode !== "hidden" && showlabel === "y" && (
-        <Label field={field} fm={fm} />
-      )}
-      <div className="field-inner c-flex c-flex-1 c-flex-col">
+      {showlabel !== "n" && <Label field={field} fm={fm} />}
+      <div className="field-input c-flex c-flex-1 c-flex-col">
         <FieldInput
           field={field}
           fm={fm}
diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx
index 6da6bca..33d41e0 100755
--- a/comps/form/field/FieldInput.tsx
+++ b/comps/form/field/FieldInput.tsx
@@ -104,7 +104,10 @@ export const FieldInput: FC<{
     <div
       className={cx(
         !["toogle", "button", "radio", "checkbox"].includes(arg.sub_type)
-          ? "field-outer c-overflow-hidden c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm c-bg-white"
+          ? cx(
+              "field-outer c-overflow-hidden c-flex-1 c-flex c-flex-row c-text-sm c-bg-white",
+              field.type === "link" ? " c-items-center" : "c-border c-rounded "
+            )
           : "",
         fm.status === "loading"
           ? css`
@@ -140,6 +143,7 @@ export const FieldInput: FC<{
         <div
           className={cx(
             "field-inner c-flex-1 c-flex c-items-center",
+            field.type === "link" && "c-justify-end",
             field.focused && "focused",
             field.disabled && "c-pointer-events-none"
           )}
@@ -152,6 +156,7 @@ export const FieldInput: FC<{
                 <>{custom}</>
               ) : (
                 <>
+                  {type_field === "link" && <>ini link</>}
                   {["date", "input"].includes(type_field) ? (
                     <FieldTypeInput
                       field={field}
@@ -161,7 +166,7 @@ export const FieldInput: FC<{
                         {
                           type: type_field as any,
                           sub_type: arg.sub_type,
-                          model_upload: arg.model_upload
+                          model_upload: arg.model_upload,
                         } as PropTypeInput
                       }
                     />
diff --git a/comps/form/field/Label.tsx b/comps/form/field/Label.tsx
index 7d9d2ea..e90fdd5 100755
--- a/comps/form/field/Label.tsx
+++ b/comps/form/field/Label.tsx
@@ -11,11 +11,7 @@ export const Label: FC<{ field: FieldLocal; fm: FMLocal }> = ({
     <div
       className={cx(
         "label c-text-sm c-flex c-items-center",
-        fm.props.label_mode === "horizontal" &&
-          css`
-            width: ${fm.props.label_width}px;
-          `,
-        fm.props.label_mode === "vertical" && "c-mt-3"
+        field.type === "link" ? "" : "c-mt-3"
       )}
     >
       <span className={cx(errors.length > 0 && `c-text-red-600`)}>
diff --git a/comps/form/gen/gen-form.ts b/comps/form/gen/gen-form.ts
index a00f234..0e5400e 100755
--- a/comps/form/gen/gen-form.ts
+++ b/comps/form/gen/gen-form.ts
@@ -37,6 +37,9 @@ export const generateForm = async (
     return;
   }
   if (pk) {
+    const is_md =
+      item.edit?.parent?.item?.component?.id ===
+      "cb52075a-14ab-455a-9847-6f1d929a2a73";
     if (data["on_load"]) {
       result.on_load = {
         mode: "raw",
@@ -45,14 +48,16 @@ export const generateForm = async (
           table,
           select,
           pks,
-          opt: {
-            after_load: `
-if (typeof md === "object") {
-  opt.fm.status = "ready";
-  md.render();
-}
+          opt: is_md
+            ? {
+                after_load: `
+      if (typeof md === "object") {
+        opt.fm.status = "ready";
+        md.render();
+      }
 `,
-          },
+              }
+            : {},
         }),
       };
     }
@@ -63,10 +68,15 @@ if (typeof md === "object") {
 async ({ form, error, fm }: IForm) => {
   let result = false;
   try {
+
+${
+  is_md &&
+  `\
     if (typeof md !== "undefined") {
       fm.status = "saving";
       md.render();
-    }
+    }`
+}
 
     const data = { ...form };
     const record = {} as Record<string, any>;
@@ -84,13 +94,17 @@ async ({ form, error, fm }: IForm) => {
     for (const [k, field] of Object.entries(fm.fields)) {
       validateField(field, fm);
     }
+${
+  is_md &&
+  `\
     if (fm.error.list.length > 0) {
       if (typeof md !== "undefined") {
         fm.status = "ready";
         md.render();
       }
       return false;
-    }
+    }`
+}
 
     // pisahkan antara has_many dengan field biasa
     for (const [k, v] of Object.entries(data) as any) {
@@ -183,6 +197,9 @@ async ({ form, error, fm }: IForm) => {
     result = false;
   }
 
+${
+  is_md &&
+  `\
   if (typeof md !== "undefined") {
     fm.status = "ready";
     // kembali ke tabel
@@ -193,7 +210,8 @@ async ({ form, error, fm }: IForm) => {
       md.params.apply();
       md.render();
     }, 500);
-  }
+  }`
+}
 
   return result;
 };
diff --git a/comps/form/typings.ts b/comps/form/typings.ts
index a3b5ee1..d6b5799 100755
--- a/comps/form/typings.ts
+++ b/comps/form/typings.ts
@@ -13,14 +13,12 @@ export type FMProps = {
   layout: "auto" | "1-col" | "2-col";
   meta: any;
   item: any;
-  label_mode: "vertical" | "horizontal" | "hidden";
   label_width: number;
   gen_fields: any;
   gen_table: string;
   on_load_deps?: any[];
   feature?: any[];
   sfd_field?: any;
-  style: "default" | "flex";
 };
 
 export type GenField =
@@ -37,8 +35,8 @@ export type GenField =
 
 type FieldType =
   | "-"
-  | "relation"
-  | "switch"
+  | "date"
+  | "link"
   | "input"
   | "single-option"
   | "multi-option";
@@ -71,7 +69,7 @@ export type FieldProp = {
   opt_get_label: (
     row: any,
     mode: "list" | "label",
-    opt?: { next?: any; prev?: any, }
+    opt?: { next?: any; prev?: any }
   ) => string;
   opt_get_value: (arg: {
     options: { label: string; value: string; item?: string }[];
@@ -95,11 +93,11 @@ export type FieldProp = {
   pk: string;
   sub_type: string;
   placeholder: string;
-  show_label: boolean;
+  show_label: boolean | "y" | "n";
   msg_error: string;
   gen_table?: string;
   gen_fields?: string;
-  model_upload?: "upload" | "import"
+  model_upload?: "upload" | "import";
 };
 
 export type FMInternal = {
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index f7d1b4d..b434adf 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -20,14 +20,14 @@ import DataGrid, {
   SELECT_COLUMN_KEY,
   SortColumn,
 } from "react-data-grid";
+import "react-data-grid/lib/styles.css";
 import { createPortal } from "react-dom";
 import { Toaster, toast } from "sonner";
+import { call_prasi_events } from "../../..";
 import { filterWhere } from "../filter/parser/filter-where";
 import { getFilter } from "../filter/utils/get-filter";
 import { Skeleton } from "../ui/skeleton";
-import "react-data-grid/lib/styles.css";
 import { sortTree } from "./utils/sort-tree";
-import { call_prasi_events } from "../../..";
 
 type OnRowClick = (arg: {
   row: any;
@@ -519,12 +519,12 @@ export const TableList: FC<TableListProp> = ({
         if (id_parent) load_args.paging = {};
         if (typeof on_load === "function") {
           let res = on_load({ ...load_args, mode: "query" }) as any;
-          if(typeof res === "object" && res instanceof Promise){
+          if (typeof res === "object" && res instanceof Promise) {
             res.then((e) => {
-              local.data = e
-            })
-          }else{
-            local.data = e
+              local.data = e;
+            });
+          } else {
+            local.data = res;
           }
         }
       }
@@ -715,27 +715,31 @@ export const TableList: FC<TableListProp> = ({
                 className="w-full h-full overflow-y-auto"
                 onScroll={local.paging.scroll}
               >
-                {Array.isArray(data) ? data.map((e, idx) => {
-                  return (
-                    <div
-                      className="flex-grow"
-                      onClick={(ev) => {
-                        if (!isEditor && typeof row_click === "function") {
-                          row_click({
-                            event: ev,
-                            idx: idx,
-                            row: e,
-                            rows: local.data,
-                          });
-                        }
-                      }}
-                    >
-                      <PassProp idx={idx} row={e} col={{}} rows={local.data}>
-                        {child}
-                      </PassProp>
-                    </div>
-                  );
-                }) : <>No Data</>}
+                {Array.isArray(data) ? (
+                  data.map((e, idx) => {
+                    return (
+                      <div
+                        className="flex-grow"
+                        onClick={(ev) => {
+                          if (!isEditor && typeof row_click === "function") {
+                            row_click({
+                              event: ev,
+                              idx: idx,
+                              row: e,
+                              rows: local.data,
+                            });
+                          }
+                        }}
+                      >
+                        <PassProp idx={idx} row={e} col={{}} rows={local.data}>
+                          {child}
+                        </PassProp>
+                      </div>
+                    );
+                  })
+                ) : (
+                  <>No Data</>
+                )}
               </div>
             </>
           )}
diff --git a/exports.tsx b/exports.tsx
index e809294..8a46fd5 100755
--- a/exports.tsx
+++ b/exports.tsx
@@ -49,7 +49,7 @@ export const MasterFilter = lazify(
 export const FilterField = lazify(
   async () => (await import("@/comps/filter/FilterField")).FilterField
 );
-
+ 
 /** Generator */
 export { generateFilter as genereteFilter } from "@/comps/filter/gen/gen-filter";
 export { generateRelation } from "@/comps/form/gen/gen-rel";