wip fix
This commit is contained in:
rizrmd
parent
1d99943361
commit
ad94d3afac
|
|
@ -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;
|
||||
|
||||
useEffect(() => {
|
||||
local.init = false;
|
||||
local.render();
|
||||
}, [editor_tab]);
|
||||
|
||||
if (!local.init || isEditor) {
|
||||
local.init = true;
|
||||
masterDetailInit(md, child, editor_tab);
|
||||
masterDetailSelected(md);
|
||||
if (isEditor && md.status === "init") {
|
||||
editorMDInit(md, mdr, arg);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue