wip fix

comps/md/MasterDetail.tsx

@@ -1,5 +1,5 @@
 import { useLocal } from "@/utils/use-local";
-import { FC, useEffect, useRef } from "react";
+import { FC, useRef } from "react";
 import { ModeFull } from "./mode/full";
 import { ModeHSplit } from "./mode/h-split";
 import { ModeVSplit } from "./mode/v-split";
@@ -9,13 +9,12 @@ import {
   masterDetailApplyParams,
   masterDetailParseHash as masterDetailParseParams,
 } from "./utils/md-hash";
-import { masterDetailInit, masterDetailSelected } from "./utils/md-init";
 import { MDLocalInternal, MDProps } from "./utils/typings";
+import { mdRenderLoop } from "./utils/md-render-loop";
 
 export const MasterDetail: FC<MDProps> = (arg) => {
   const {
     PassProp,
-    child,
     name,
     mode,
     show_head,
@@ -26,10 +25,11 @@ export const MasterDetail: FC<MDProps> = (arg) => {
     on_init,
     _item,
   } = arg;
-  const _ref = useRef({ PassProp, child, item: _item });
+  const _ref = useRef({ PassProp, item: _item });
   const mdr = _ref.current;
   const md = useLocal<MDLocalInternal>({
     name,
+    status: "init",
     actions: [],
     breadcrumb: [],
     selected: null,
@@ -65,26 +65,14 @@ export const MasterDetail: FC<MDProps> = (arg) => {
     },
   });
 
-  const local = useLocal({ init: false });
-  if (isEditor) {
-    editorMDInit(md, arg);
-  }
-
   mdr.PassProp = PassProp;
-  mdr.child = child;
   mdr.item = _item;
-
+  if (isEditor && md.status === "init") {
-  useEffect(() => {
+    editorMDInit(md, mdr, arg);
-    local.init = false;
-    local.render();
-  }, [editor_tab]);
-
-  if (!local.init || isEditor) {
-    local.init = true;
-    masterDetailInit(md, child, editor_tab);
-    masterDetailSelected(md);
   }
 
+  mdRenderLoop(md, mdr, arg); 
+
   return (
     <div
       className={cx(
@@ -92,9 +80,9 @@ export const MasterDetail: FC<MDProps> = (arg) => {
       )}
     >
       {md.props.show_head === "always" && <MDHeader md={md} mdr={mdr} />}
-      {md.props.mode === "full" && <ModeFull md={md} mdr={mdr} />}
+      {/* {md.props.mode === "full" && <ModeFull md={md} mdr={mdr} />}
       {md.props.mode === "v-split" && <ModeVSplit md={md} mdr={mdr} />}
-      {md.props.mode === "h-split" && <ModeHSplit md={md} mdr={mdr} />}
+      {md.props.mode === "h-split" && <ModeHSplit md={md} mdr={mdr} />} */}
     </div>
   );
 };

comps/md/parts/MDHeader.tsx

@@ -1,9 +1,8 @@
-import get from "lodash.get";
 import { FC } from "react";
 import { MDLocal, MDRef } from "../utils/typings";
 
 export const MDHeader: FC<{ md: MDLocal; mdr: MDRef }> = ({ md, mdr }) => {
-  const head = get(mdr.child, "props.meta.item.component.props.header.content");
+  const head = mdr.item.edit.props?.header.value;
   const PassProp = mdr.PassProp;
   return <PassProp md={md}>{head}</PassProp>;
 };

comps/md/utils/editor-init.ts

@@ -1,24 +0,0 @@
-import { MDLocal, MDProps } from "./typings";
-
-export const editorMDInit = (md: MDLocal, arg: MDProps) => {
-  const {
-    PassProp,
-    child,
-    name,
-    _item,
-    mode,
-    show_head,
-    tab_mode,
-    editor_tab,
-    gen_fields,
-    gen_table,
-    on_init,
-  } = arg;
-  md.props.mode = mode;
-  md.props.show_head = show_head;
-  md.props.tab_mode = tab_mode;
-  md.props.editor_tab = editor_tab;
-  md.props.gen_fields = gen_fields;
-  md.props.gen_table = gen_table;
-  md.props.on_init = on_init;
-};

comps/md/utils/editor-init.tsx

@@ -0,0 +1,58 @@
+import { MDLocal, MDProps, MDRef } from "./typings";
+
+export const editorMDInit = (md: MDLocal, mdr: MDRef, arg: MDProps) => {
+  const {
+    mode,
+    show_head,
+    tab_mode,
+    editor_tab,
+    gen_fields,
+    gen_table,
+    on_init,
+  } = arg;
+  md.props.mode = mode;
+  md.props.show_head = show_head;
+  md.props.tab_mode = tab_mode;
+  md.props.editor_tab = editor_tab;
+  md.props.gen_fields = gen_fields;
+  md.props.gen_table = gen_table;
+  md.props.on_init = on_init;
+
+  const props = mdr.item.edit.props;
+  if (props) {
+    const child = props.child.value as PrasiItem;
+    let master = child.edit.childs.find(
+      (e) => e.component?.id === "c68415ca-dac5-44fe-aeb6-936caf8cc491"
+    );
+    let details = child.edit.childs.filter(
+      (e) => e.component?.id === "cb52075a-14ab-455a-9847-6f1d929a2a73"
+    );
+
+    if (master?.childs.length === 0 && md.breadcrumb.length === 0) {
+      md.breadcrumb = [
+        {
+          label: (
+            <>
+              ⚠️ Master Detail is not ready
+              <br />
+              <div
+                className={css`
+                  font-size: 12px;
+                  font-weight: normal;
+                `}
+              >
+                Please generate master detail props first
+              </div>
+            </>
+          ),
+        },
+      ];
+      md.status = "unready";
+    }
+
+    if (master && details.length > 0) {
+      md.breadcrumb = [];
+      md.status = "ready";
+    }
+  }
+};

comps/md/utils/md-init.ts

@@ -1,75 +0,0 @@
-import { MDLocal, w } from "./typings";
-import get from "lodash.get";
-import { parseGenField } from "@/gen/utils";
-
-export const masterDetailInit = (
-  md: MDLocal,
-  child: any,
-  editor_tab: string
-) => {
-  const childs = get(
-    child,
-    "props.meta.item.component.props.child.content.childs"
-  );
-
-  if (Array.isArray(childs)) {
-    md.master.internal = null;
-    md.childs = {};
-    md.tab.list = [];
-    if (isEditor && editor_tab === "master") {
-      if (md.tab.active) {
-        md.tab.active = "";
-        setTimeout(md.render);
-      }
-    }
-
-    for (const child of childs) {
-      const cid = child?.component?.id;
-      if (cid) {
-        if (cid === "c68415ca-dac5-44fe-aeb6-936caf8cc491") {
-          md.master.internal = child;
-          const pk = parseGenField(md.props.gen_fields).find((e) => e.is_pk);
-          if (pk) {
-            md.pk = pk;
-          }
-        }
-        if (cid === "cb52075a-14ab-455a-9847-6f1d929a2a73") {
-          // const name = getProp(child, "name", { md });
-          // const label = getProp(child, "label", { md });
-          // if (typeof name === "string") {
-          //   if (isEditor && editor_tab !== "master") {
-          //     if (name === editor_tab && md.tab.active !== name) {
-          //       md.tab.active = name;
-          //       setTimeout(md.render);
-          //     }
-          //   }
-          //   md.tab.list.push(name);
-          //   md.childs[name] = {
-          //     internal: child,
-          //     label,
-          //     name,
-          //     hide() {},
-          //     show() {},
-          //     render() {},
-          //   };
-          // }
-        }
-      }
-    }
-  }
-};
-
-export const masterDetailSelected = (md: MDLocal) => {
-  md.params.parse();
-  const pk = md.pk;
-  if (pk) {
-    const value = md.params.hash[md.name];
-    if (value) {
-      md.selected = { [pk.name]: value };
-      const tab = md.params.tabs[md.name];
-      if (tab && md.tab.list.includes(tab)) {
-        md.tab.active = tab;
-      }
-    }
-  }
-};

comps/md/utils/md-render-loop.tsx

@@ -0,0 +1,13 @@
+import { MDLocal, MDProps, MDRef } from "./typings";
+
+export const mdRenderLoop = (md: MDLocal, mdr: MDRef, props: MDProps) => {
+  console.log(mdr.item.childs);
+  const childs = mdr.item.edit.childs.filter(
+    (e) => e?.component?.id === "cb52075a-14ab-455a-9847-6f1d929a2a73"
+  );
+
+  console.log(mdr.item.edit.childs);
+  for (const c of childs) {
+    console.log(c);
+  }
+};

comps/md/utils/typings.ts

@@ -33,6 +33,7 @@ export type MDActions = {
 
 export type MDLocalInternal = {
   name: string;
+  status: "init" | "unready" | "ready";
   breadcrumb: BreadItem[];
   actions: MDActions;
   selected: any;
@@ -77,11 +78,12 @@ export type MDLocalInternal = {
     min_size: number;
   };
 };
-export type MDRef = { PassProp: any; child: any };
+export type MDRef = { PassProp: any; item: PrasiItem };
 export type MDLocal = MDLocalInternal & { render: (force?: boolean) => void };
 
 export const MasterDetailType = `const md = {
   name: string;
+  status: "init" | "unready" | "ready";
   breadcrumb: {
     label: React.ReactNode;
     url?: string;