wip
This commit is contained in:
rizrmd
parent
8d716531be
commit
13bd7e3858
|
|
@ -1,13 +1,21 @@
|
||||||
import { useLocal } from "@/utils/use-local";
|
import { useLocal } from "@/utils/use-local";
|
||||||
import get from "lodash.get";
|
import get from "lodash.get";
|
||||||
import { FC, useEffect, useRef } from "react";
|
import { FC, ReactNode, useEffect, useRef } from "react";
|
||||||
|
import { FMLocal } from "../form/Form";
|
||||||
|
import { createPortal, render } from "react-dom";
|
||||||
|
import { Label } from "@/comps/ui/label";
|
||||||
|
import { Input } from "@/comps/ui/input";
|
||||||
|
|
||||||
|
type FilterPosition = 'regular' | 'inline' | 'popup';
|
||||||
|
|
||||||
type FilterForm = {
|
type FilterForm = {
|
||||||
gen_fields: GenField[];
|
gen_fields: GenField[];
|
||||||
gen_table: string;
|
gen_table: string;
|
||||||
name: string;
|
name: string;
|
||||||
value: any;
|
value: any;
|
||||||
child: any;
|
position: FilterPosition;
|
||||||
|
children?: ReactNode;
|
||||||
|
onClose?: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type GenField = {
|
type GenField = {
|
||||||
|
|
@ -17,13 +25,23 @@ type GenField = {
|
||||||
optional: boolean
|
optional: boolean
|
||||||
};
|
};
|
||||||
|
|
||||||
export const MasterFilter: FC<FilterForm> = ({ gen_fields, gen_table, name, value, child }) => {
|
export const MasterFilter: FC<FilterForm> = ({ gen_fields, gen_table, name, value, position, children, onClose }): ReactNode => {
|
||||||
const local = useLocal({
|
const local = useLocal({
|
||||||
data: [] as any[],
|
data: [] as any[],
|
||||||
columns: [] as string[],
|
columns: [] as string[],
|
||||||
fields: [] as GenField[],
|
fields: [] as GenField[],
|
||||||
tableName: "",
|
tableName: "",
|
||||||
isGenerated: false,
|
isGenerated: false,
|
||||||
|
// fm: {} as FMLocal,
|
||||||
|
argInit: {} as { fm: FMLocal; submit: any; reload: any },
|
||||||
|
argOnLoad: {} as { arg: { fm: FMLocal } },
|
||||||
|
argOnSubmit: {} as {
|
||||||
|
arg: {
|
||||||
|
fm: FMLocal;
|
||||||
|
form: any;
|
||||||
|
error: any;
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isEditor) {
|
if (!isEditor) {
|
||||||
|
|
@ -40,6 +58,30 @@ export const MasterFilter: FC<FilterForm> = ({ gen_fields, gen_table, name, valu
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
const renderContent = (): ReactNode => (
|
||||||
|
<div className={`filter-content filter-${position}`}>
|
||||||
|
<h3>Filter</h3>
|
||||||
|
<form>
|
||||||
|
{local.fields.map((field) => (
|
||||||
|
<div>
|
||||||
|
{field.type === 'varchar' && (
|
||||||
|
<div className="grid w-full max-w-sm items-center gap-1.5" >
|
||||||
|
<Label htmlFor={field.name}>{field.name}</Label>
|
||||||
|
<Input id={field.name} type="text" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{field.type === "number" && (
|
||||||
|
<div className="grid w-full max-w-sm items-center gap-1.5" >
|
||||||
|
<Label htmlFor={field.name}>{field.name}</Label>
|
||||||
|
<Input id={field.name} type="number" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</form >
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
|
||||||
const generateFilter = () => {
|
const generateFilter = () => {
|
||||||
local.isGenerated = true;
|
local.isGenerated = true;
|
||||||
local.tableName = gen_table;
|
local.tableName = gen_table;
|
||||||
|
|
@ -51,10 +93,48 @@ export const MasterFilter: FC<FilterForm> = ({ gen_fields, gen_table, name, valu
|
||||||
console.log('fields', local.fields);
|
console.log('fields', local.fields);
|
||||||
};
|
};
|
||||||
|
|
||||||
// return <div>{child}</div>;
|
if (position === 'popup') {
|
||||||
|
let popup = document.querySelector(".main-content-preview > .portal");
|
||||||
|
if (!popup) {
|
||||||
|
popup = document.createElement("div");
|
||||||
|
popup.classList.add("portal");
|
||||||
|
|
||||||
|
const main = document.querySelector(".main-content-preview");
|
||||||
|
if (main) {
|
||||||
|
main.appendChild(popup);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{createPortal(
|
||||||
|
<div
|
||||||
|
onClick={onClose}
|
||||||
|
className={cx(
|
||||||
|
css`
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
background: white;
|
||||||
|
z-index: 100;
|
||||||
|
`,
|
||||||
|
"c-flex c-flex-col"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{renderContent()}
|
||||||
|
</div>,
|
||||||
|
popup
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (local.isGenerated) {
|
||||||
|
return renderContent();
|
||||||
|
} else {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{!local.isGenerated && (
|
|
||||||
<button
|
<button
|
||||||
onClick={generateFilter}
|
onClick={generateFilter}
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -73,7 +153,7 @@ export const MasterFilter: FC<FilterForm> = ({ gen_fields, gen_table, name, valu
|
||||||
>
|
>
|
||||||
Generate
|
Generate
|
||||||
</button>
|
</button>
|
||||||
)}
|
</div >
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { FC, ReactNode } from "react";
|
||||||
|
|
||||||
|
export const Label: FC<{ children: ReactNode; text: string }> = ({
|
||||||
|
children,
|
||||||
|
text,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<label className="field c-flex c-w-full c-flex-col c-space-y-1 c-px-2">
|
||||||
|
<div className="label c-text-sm c-flex c-items-center c-mt-3 c-capitalize">
|
||||||
|
{text}
|
||||||
|
</div>
|
||||||
|
<div className="field-inner c-flex c-flex-1 c-flex-col">
|
||||||
|
<div
|
||||||
|
className={cx(
|
||||||
|
"field-outer c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm c-flex-wrap",
|
||||||
|
css`
|
||||||
|
> * {
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
.filter-content {
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-regular {
|
||||||
|
width: 250px;
|
||||||
|
/* Styles specific to sidebar */
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-inline {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/* Styles specific to topbar */
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-popup {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 1000;
|
||||||
|
/* Styles specific to popup */
|
||||||
|
}
|
||||||
|
|
@ -16,8 +16,7 @@ export const generateMasterDetail: GenFn<{ item: PrasiItem, table: string, field
|
||||||
master_detail: true,
|
master_detail: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
await generateList(arg, data);
|
await generateList(arg, data, false);
|
||||||
|
|
||||||
// const childs = item.edit.childs[0].edit.childs;
|
// const childs = item.edit.childs[0].edit.childs;
|
||||||
|
|
||||||
// const master = childs.find(
|
// const master = childs.find(
|
||||||
|
|
@ -31,6 +30,8 @@ export const generateMasterDetail: GenFn<{ item: PrasiItem, table: string, field
|
||||||
// }`,
|
// }`,
|
||||||
// });
|
// });
|
||||||
|
|
||||||
// await master.edit.commit();
|
//
|
||||||
// }
|
// }
|
||||||
|
await item.edit.commit();
|
||||||
|
console.log({item})
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
import { createItem } from "lib/gen/utils";
|
import { createItem } from "lib/gen/utils";
|
||||||
import get from "lodash.get";
|
import get from "lodash.get";
|
||||||
|
import { generateTableList } from "./md-table-list";
|
||||||
|
|
||||||
export const generateList = async (
|
export const generateList = async (
|
||||||
arg: { item: PrasiItem; table: string; fields: any },
|
arg: { item: PrasiItem; table: string; fields: any },
|
||||||
data: any
|
data: any,
|
||||||
|
commit: boolean
|
||||||
) => {
|
) => {
|
||||||
const item = arg.item;
|
const item = arg.item;
|
||||||
const tab_master = item.edit.childs[0].edit.childs.find(
|
const tab_master = item.edit.childs[0].edit.childs.find(
|
||||||
(e) => get(e, "component.id") === "c68415ca-dac5-44fe-aeb6-936caf8cc491"
|
(e) => get(e, "component.id") === "c68415ca-dac5-44fe-aeb6-936caf8cc491"
|
||||||
);
|
);
|
||||||
tab_master?.edit.setChilds([
|
const props: Record<string, PropVal> = {
|
||||||
{
|
gen_table: {
|
||||||
type: "item",
|
mode: "string",
|
||||||
name: "item",
|
value: arg.table,
|
||||||
component: {
|
},
|
||||||
id: "567d5362-2cc8-4ca5-a531-f771a5c866c2",
|
|
||||||
props: {
|
|
||||||
name: {
|
name: {
|
||||||
mode: "string",
|
mode: "string",
|
||||||
value: arg.table,
|
value: arg.table,
|
||||||
|
|
@ -32,218 +32,97 @@ export const generateList = async (
|
||||||
mode: "raw",
|
mode: "raw",
|
||||||
value: `\
|
value: `\
|
||||||
({ row, rows, idx, event }: OnRowClick) => {
|
({ row, rows, idx, event }: OnRowClick) => {
|
||||||
md.selected = row;
|
md.selected = row;
|
||||||
md.internal.action_should_refresh = true;
|
md.internal.action_should_refresh = true;
|
||||||
md.params.apply();
|
md.params.apply();
|
||||||
md.render();
|
md.render();
|
||||||
};
|
};
|
||||||
|
|
||||||
type OnRowClick = {
|
type OnRowClick = {
|
||||||
row: any;
|
row: any;
|
||||||
rows: any[];
|
rows: any[];
|
||||||
idx: any;
|
idx: any;
|
||||||
event: React.MouseEvent<HTMLDivElement, MouseEvent>;
|
event: React.MouseEvent<HTMLDivElement, MouseEvent>;
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
},
|
},
|
||||||
selected: {
|
selected: {
|
||||||
mode: "raw",
|
mode: "raw",
|
||||||
value: `\
|
value: `\
|
||||||
({ row, rows, idx }: SelectedRow) => {
|
({ row, rows, idx }: SelectedRow) => {
|
||||||
try {
|
try {
|
||||||
if (typeof md === "object") {
|
if (typeof md === "object") {
|
||||||
if (Array.isArray(md.selected)) {
|
if (Array.isArray(md.selected)) {
|
||||||
if (md.selected.length) {
|
if (md.selected.length) {
|
||||||
let select = md.selected.find((e) => e === row)
|
let select = md.selected.find((e) => e === row)
|
||||||
if(select) return true
|
if(select) return true
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (md.selected === row) {
|
if (md.selected === row) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
type SelectedRow = {
|
type SelectedRow = {
|
||||||
row: any;
|
row: any;
|
||||||
rows: any[];
|
rows: any[];
|
||||||
idx: any;
|
idx: any;
|
||||||
}`,
|
}`,
|
||||||
},
|
},
|
||||||
|
gen_fields: {
|
||||||
|
mode: "raw",
|
||||||
|
value: `${JSON.stringify(arg.fields)}`,
|
||||||
},
|
},
|
||||||
},
|
child: {
|
||||||
},
|
mode: "jsx",
|
||||||
]);
|
value: createItem({
|
||||||
await item.edit.commit();
|
name: "halo"
|
||||||
// childs.edit.childs[0].edit.setProp("selected", {
|
})
|
||||||
// mode: "raw",
|
}
|
||||||
// value: `\
|
};
|
||||||
// ({ row, rows, idx }: SelectedRow) => {
|
// console.log(true);
|
||||||
// try {
|
console.log({ tab_master });
|
||||||
// if (typeof md === "object") {
|
const tablelist = tab_master?.childs[0];
|
||||||
// if (Array.isArray(md.selected)) {
|
// generateTableList(
|
||||||
// if (md.selected.length) {
|
// async (props: any) => {},
|
||||||
// let select = md.selected.find((e) => e === row)
|
// props,
|
||||||
// if(select) return true
|
// tablelist,
|
||||||
|
// { mode: "table" },
|
||||||
|
// false
|
||||||
|
// );
|
||||||
|
// // console.log({modify: async (props: any) => {}, data, item, arg: { mode: "table" }});
|
||||||
|
// const tablelist: PrasiItem= get(item,"edit.childs[0].edit.childs[0].edit.childs[0]");
|
||||||
|
// const data_tbl = get(tablelist, "component.props")
|
||||||
|
// console.log({tablelist, data_tbl})
|
||||||
|
// if(typeof tab_master === "object"){
|
||||||
|
// // const master_child: PrasiItem= tab_master;
|
||||||
|
// // const prop_tablelist = get(tablelist, "component.props")
|
||||||
|
// // console.log({tablelist})
|
||||||
|
// //
|
||||||
// }
|
// }
|
||||||
// } else {
|
|
||||||
// if (md.selected === row) {
|
|
||||||
// return true;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// } catch (e) {
|
|
||||||
|
|
||||||
// }
|
// tab_master?.edit.setChilds([
|
||||||
// return false;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// type SelectedRow = {
|
|
||||||
// row: any;
|
|
||||||
// rows: any[];
|
|
||||||
// idx: any;
|
|
||||||
// }`,
|
|
||||||
// });
|
|
||||||
// childs.edit.childs[0].edit.setProp("row_click", {
|
|
||||||
// mode: "raw",
|
|
||||||
// value: `\
|
|
||||||
// ({ row, rows, idx, event }: OnRowClick) => {
|
|
||||||
// md.selected = row;
|
|
||||||
// md.internal.action_should_refresh = true;
|
|
||||||
// md.params.apply();
|
|
||||||
// md.render();
|
|
||||||
// };
|
|
||||||
|
|
||||||
// type OnRowClick = {
|
|
||||||
// row: any;
|
|
||||||
// rows: any[];
|
|
||||||
// idx: any;
|
|
||||||
// event: React.MouseEvent<HTMLDivElement, MouseEvent>;
|
|
||||||
// }
|
|
||||||
// `,
|
|
||||||
// });
|
|
||||||
// await item.edit.commit();
|
|
||||||
// console.log("halo");
|
|
||||||
|
|
||||||
// console.log({tab_master})
|
|
||||||
// // for (const c of get(data, "child.content.childs") || []) {
|
|
||||||
// // if (c.component?.id === "c68415ca-dac5-44fe-aeb6-936caf8cc491") {
|
|
||||||
|
|
||||||
// const res = await codeBuild({
|
|
||||||
// row_click: `\
|
|
||||||
// ({ row, rows, idx, event }: OnRowClick) => {
|
|
||||||
// md.selected = row;
|
|
||||||
// md.internal.action_should_refresh = true;
|
|
||||||
// md.params.apply();
|
|
||||||
// md.render();
|
|
||||||
// };
|
|
||||||
|
|
||||||
// type OnRowClick = {
|
|
||||||
// row: any;
|
|
||||||
// rows: any[];
|
|
||||||
// idx: any;
|
|
||||||
// event: React.MouseEvent<HTMLDivElement, MouseEvent>;
|
|
||||||
// }
|
|
||||||
// `,
|
|
||||||
// selected: `\
|
|
||||||
// ({ row, rows, idx }: SelectedRow) => {
|
|
||||||
// try {
|
|
||||||
// if (typeof md === "object") {
|
|
||||||
// if (Array.isArray(md.selected)) {
|
|
||||||
// if (md.selected.length) {
|
|
||||||
// let select = md.selected.find((e) => e === row)
|
|
||||||
// if(select) return true
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// if (md.selected === row) {
|
|
||||||
// return true;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// } catch (e) {
|
|
||||||
|
|
||||||
// }
|
|
||||||
// return false;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// type SelectedRow = {
|
|
||||||
// row: any;
|
|
||||||
// rows: any[];
|
|
||||||
// idx: any;
|
|
||||||
// }`,
|
|
||||||
// breadcrumb: `\
|
|
||||||
// async () => {
|
|
||||||
// return [{ label: "List ${formatName(arg.gen_table)}" }] as BreadItem[];
|
|
||||||
// };
|
|
||||||
|
|
||||||
// type BreadItem = {
|
|
||||||
// label: React.ReactNode;
|
|
||||||
// url?: string;
|
|
||||||
// onClick?: () => void;
|
|
||||||
// }`,
|
|
||||||
// actions: `\
|
|
||||||
// async () => {
|
|
||||||
// return [
|
|
||||||
// {
|
// {
|
||||||
// label: "Add ${formatName(arg.gen_table)}",
|
// type: "item",
|
||||||
// onClick: async () => {
|
// name: "item",
|
||||||
// md.selected = {};
|
|
||||||
// md.render();
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// ] as ActionItem[];
|
|
||||||
// };
|
|
||||||
|
|
||||||
// type ActionItem =
|
|
||||||
// | {
|
|
||||||
// action?: string;
|
|
||||||
// label: React.ReactNode;
|
|
||||||
// onClick?: (e: any) => Promise<void>;
|
|
||||||
// }
|
|
||||||
// | React.ReactNode`,
|
|
||||||
// });
|
|
||||||
// const comp = createItem({
|
|
||||||
// component: {
|
|
||||||
// id: "c68415ca-dac5-44fe-aeb6-936caf8cc491",
|
|
||||||
// props: {
|
|
||||||
// breadcrumb: res.breadcrumb,
|
|
||||||
// actions: res.actions,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// for (const [k, v] of Object.entries(comp.component.props)) {
|
|
||||||
// c.component.props[k] = v;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const childs = get(c, "component.props.child.content.childs") || [];
|
|
||||||
// childs.length = 0;
|
|
||||||
// childs.push(
|
|
||||||
// createItem({
|
|
||||||
// component: {
|
// component: {
|
||||||
// id: "567d5362-2cc8-4ca5-a531-f771a5c866c2",
|
// id: "567d5362-2cc8-4ca5-a531-f771a5c866c2",
|
||||||
// props: {
|
// props,
|
||||||
// name: arg.gen_table,
|
|
||||||
// gen_table: arg.gen_table,
|
|
||||||
// generate: "y",
|
|
||||||
// on_load: "",
|
|
||||||
// row_click: res.row_click,
|
|
||||||
// selected: res.selected,
|
|
||||||
// gen_fields: [JSON.stringify(arg.gen_fields)],
|
|
||||||
// child: {
|
|
||||||
// childs: [],
|
|
||||||
// },
|
// },
|
||||||
// },
|
// },
|
||||||
// },
|
// ]);
|
||||||
// })
|
console.log({
|
||||||
// );
|
type: "item",
|
||||||
// const data = childs[0].component.props;
|
name: "item",
|
||||||
// const modify = async (props: any) => {};
|
component: {
|
||||||
// gen_table_list(modify, data, { mode: "table" });
|
id: "567d5362-2cc8-4ca5-a531-f771a5c866c2",
|
||||||
// }
|
props,
|
||||||
// }
|
},
|
||||||
|
})
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
export const generateSelect = (data: Array<any>) => {
|
||||||
|
const select = {} as any;
|
||||||
|
let pk = "";
|
||||||
|
for (const f of data) {
|
||||||
|
select[f.name] = true;
|
||||||
|
if (f.relation) {
|
||||||
|
select[f.name] = {
|
||||||
|
select: {},
|
||||||
|
};
|
||||||
|
for (const r of f.relation.fields) {
|
||||||
|
select[f.name].select[r.name] = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (f.is_pk) {
|
||||||
|
pk = f.name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
pk,
|
||||||
|
select,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,241 @@
|
||||||
|
import capitalize from "lodash.capitalize";
|
||||||
|
import { GFCol, createItem, parseGenField } from "../../../gen/utils";
|
||||||
|
import { generateSelect } from "./md-select";
|
||||||
|
import { on_load } from "./tbl-list/on_load";
|
||||||
|
import { modeTableList } from "./mode-table-list";
|
||||||
|
import get from "lodash.get";
|
||||||
|
import set from "lodash.set";
|
||||||
|
|
||||||
|
export const generateTableList = async (
|
||||||
|
modify: (data: any) => void,
|
||||||
|
data: any,
|
||||||
|
item: PrasiItem,
|
||||||
|
arg: { mode: "table" | "list" | "grid" | "auto"; id_parent?: string },
|
||||||
|
commit: boolean
|
||||||
|
) => {
|
||||||
|
|
||||||
|
item.edit.setChilds([
|
||||||
|
{
|
||||||
|
type: "item",
|
||||||
|
name: "1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "item",
|
||||||
|
name: "2",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
await item.edit.commit();
|
||||||
|
// console.log({ data, item, arg });
|
||||||
|
// const table = data.gen_table.value as string;
|
||||||
|
// const raw_fields = JSON.parse(data.gen_fields.value) as (
|
||||||
|
// | string
|
||||||
|
// | { value: string; checked: string[] }
|
||||||
|
// )[];
|
||||||
|
// let pk = "";
|
||||||
|
// let pks: Record<string, string> = {};
|
||||||
|
// const fields = parseGenField(raw_fields);
|
||||||
|
// // const result = {} as any;
|
||||||
|
// // generate value dari raw_field array string convert ke value selected prisma
|
||||||
|
// const res = generateSelect(fields);
|
||||||
|
// pk = res.pk;
|
||||||
|
// const select = res.select as any;
|
||||||
|
// const result: Record<string, PropVal> = {};
|
||||||
|
// if (arg.id_parent) {
|
||||||
|
// select[arg.id_parent] = true;
|
||||||
|
// }
|
||||||
|
// if (!pk) {
|
||||||
|
// alert("Failed to generate! Primary Key not found. ");
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// let childs = [] as any;
|
||||||
|
// if (pk) {
|
||||||
|
// let sub_name = modeTableList(arg.mode);
|
||||||
|
// let rows = Array.isArray(get(data, "child.content.childs"))
|
||||||
|
// ? get(data, "child.content.childs")
|
||||||
|
// : Array.isArray(get(data, "child.childs"))
|
||||||
|
// ? get(data, "child.childs")
|
||||||
|
// : [];
|
||||||
|
|
||||||
|
// rows = rows.filter((e: PrasiItem) => e.name !== sub_name);
|
||||||
|
// childs = childs.concat(rows);
|
||||||
|
|
||||||
|
// if (data["on_load"]) {
|
||||||
|
// result.on_load = {
|
||||||
|
// mode: "raw",
|
||||||
|
// value: on_load({ pk, table, select, pks }),
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// let first = true;
|
||||||
|
|
||||||
|
// const child_sub_name = createItem({
|
||||||
|
// name: sub_name,
|
||||||
|
// childs: fields
|
||||||
|
// .map((e, idx) => {
|
||||||
|
// if (idx >= 1 && arg.mode === "list") {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (e.is_pk && arg.mode === "table") return;
|
||||||
|
// let tree_depth = "";
|
||||||
|
// let tree_depth_built = "";
|
||||||
|
// if (first) {
|
||||||
|
// tree_depth = `tree_depth={col.depth}`;
|
||||||
|
// tree_depth_built = `tree_depth:col.depth`;
|
||||||
|
// first = false;
|
||||||
|
// }
|
||||||
|
// return {
|
||||||
|
// component: {
|
||||||
|
// id: "297023a4-d552-464a-971d-f40dcd940b77",
|
||||||
|
// props: {
|
||||||
|
// name: e.name,
|
||||||
|
// title: formatName(e.name),
|
||||||
|
// child: createItem({
|
||||||
|
// childs: [
|
||||||
|
// createItem({
|
||||||
|
// name: "cell",
|
||||||
|
// padding: {
|
||||||
|
// l: 8,
|
||||||
|
// b: 0,
|
||||||
|
// t: 0,
|
||||||
|
// r: 8,
|
||||||
|
// },
|
||||||
|
// adv: {
|
||||||
|
// js: `\
|
||||||
|
// <div {...props} className={cx(props.className, "")}>
|
||||||
|
// <FormatValue value={col.value} name={col.name} gen_fields={gen_fields} ${tree_depth} />
|
||||||
|
// </div>`,
|
||||||
|
// jsBuilt: `\
|
||||||
|
// render(React.createElement("div", Object.assign({}, props, { className: cx(props.className, "") }),React.createElement(FormatValue, { value: col.value, name: col.name, gen_fields: gen_fields, ${tree_depth_built} })));
|
||||||
|
// `,
|
||||||
|
// },
|
||||||
|
// }),
|
||||||
|
// ],
|
||||||
|
// }),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// };
|
||||||
|
// })
|
||||||
|
// .filter((e) => e) as any,
|
||||||
|
// });
|
||||||
|
// childs.push(child_sub_name);
|
||||||
|
|
||||||
|
// // result.child = {
|
||||||
|
// // mode: "jsx",
|
||||||
|
// // value: createItem({ name: "child", childs: [child] }),
|
||||||
|
// // };
|
||||||
|
// // item.edit.setChilds([child]);
|
||||||
|
|
||||||
|
// if (commit) {
|
||||||
|
// Object.keys(result).map((e) => {
|
||||||
|
// item.edit.setProp(e, result[e]);
|
||||||
|
// });
|
||||||
|
// console.log({ childs });
|
||||||
|
// item.edit.setChilds([
|
||||||
|
// {
|
||||||
|
// name: sub_name,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "123",
|
||||||
|
// },
|
||||||
|
// ]);
|
||||||
|
// await item.edit.commit();
|
||||||
|
// } else {
|
||||||
|
// set(item, "childs", childs);
|
||||||
|
// Object.keys(result).map((e) => {
|
||||||
|
// set(data, e, result[e]);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// console.log({ res, item });
|
||||||
|
// console.log({ data });
|
||||||
|
// console.log({ result });
|
||||||
|
// }
|
||||||
|
// return;
|
||||||
|
// if (pk) {
|
||||||
|
// console.log("pk");
|
||||||
|
// const code = {} as any;
|
||||||
|
// if (data["on_load"]) {
|
||||||
|
// result["on_load"] = data["on_load"];
|
||||||
|
// result["on_load"].value = on_load({ pk, table, select, pks });
|
||||||
|
// delete result["on_load"].valueBuilt;
|
||||||
|
// code.on_load = result["on_load"].value;
|
||||||
|
// }
|
||||||
|
// let sub_name = "fields";
|
||||||
|
// switch (arg.mode) {
|
||||||
|
// case "table":
|
||||||
|
// sub_name = "tbl-col";
|
||||||
|
// break;
|
||||||
|
// case "list":
|
||||||
|
// sub_name = "md-list";
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
// let first = true;
|
||||||
|
// console.log(sub_name);
|
||||||
|
// const child = {
|
||||||
|
// name: sub_name,
|
||||||
|
// childs: fields
|
||||||
|
// .map((e, idx) => {
|
||||||
|
// if (idx >= 1 && arg.mode === "list") {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (e.is_pk && arg.mode === "table") return;
|
||||||
|
// let tree_depth = "";
|
||||||
|
// let tree_depth_built = "";
|
||||||
|
// if (first) {
|
||||||
|
// tree_depth = `tree_depth={col.depth}`;
|
||||||
|
// tree_depth_built = `tree_depth:col.depth`;
|
||||||
|
// first = false;
|
||||||
|
// }
|
||||||
|
// return {
|
||||||
|
// component: {
|
||||||
|
// id: "297023a4-d552-464a-971d-f40dcd940b77",
|
||||||
|
// props: {
|
||||||
|
// name: {
|
||||||
|
// mode: "string",
|
||||||
|
// value: e.name
|
||||||
|
// },
|
||||||
|
// title: {
|
||||||
|
// mode: "string",
|
||||||
|
// value: formatName(e.name)
|
||||||
|
// },
|
||||||
|
// child: createItem({
|
||||||
|
// childs: [
|
||||||
|
// createItem({
|
||||||
|
// name: "cell",
|
||||||
|
// padding: {
|
||||||
|
// l: 8,
|
||||||
|
// b: 0,
|
||||||
|
// t: 0,
|
||||||
|
// r: 8,
|
||||||
|
// },
|
||||||
|
// adv: {
|
||||||
|
// js: `\
|
||||||
|
// <div {...props} className={cx(props.className, "")}>
|
||||||
|
// <FormatValue value={col.value} name={col.name} gen_fields={gen_fields} ${tree_depth} />
|
||||||
|
// </div>`,
|
||||||
|
// jsBuilt: `\
|
||||||
|
// render(React.createElement("div", Object.assign({}, props, { className: cx(props.className, "") }),React.createElement(FormatValue, { value: col.value, name: col.name, gen_fields: gen_fields, ${tree_depth_built} })));
|
||||||
|
// `,
|
||||||
|
// },
|
||||||
|
// }),
|
||||||
|
// ],
|
||||||
|
// }),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// };
|
||||||
|
// })
|
||||||
|
// .filter((e) => e) as any,
|
||||||
|
// };
|
||||||
|
// data.child.value = child;
|
||||||
|
// result["child"] = data.child
|
||||||
|
// }
|
||||||
|
// modify(result);
|
||||||
|
// console.log({ child: data["child"] });
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatName = (name: string) => {
|
||||||
|
return name
|
||||||
|
.split("_")
|
||||||
|
.filter((e) => e.length > 1)
|
||||||
|
.map((e) => capitalize(e))
|
||||||
|
.join(" ");
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
export const modeTableList = (mode: string) => {
|
||||||
|
let sub_name = "fields";
|
||||||
|
switch (mode) {
|
||||||
|
case "table":
|
||||||
|
sub_name = "tbl-col";
|
||||||
|
break;
|
||||||
|
case "list":
|
||||||
|
sub_name = "md-list";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return sub_name;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
export const on_load = ({
|
||||||
|
pk,
|
||||||
|
table,
|
||||||
|
select,
|
||||||
|
pks,
|
||||||
|
}: {
|
||||||
|
pk: string;
|
||||||
|
table: string;
|
||||||
|
select: any;
|
||||||
|
pks: Record<string, string>;
|
||||||
|
}) => {
|
||||||
|
const sample = {} as any;
|
||||||
|
|
||||||
|
for (const [k, v] of Object.entries(select) as any) {
|
||||||
|
if (typeof v === "object") {
|
||||||
|
sample[k] = {};
|
||||||
|
|
||||||
|
Object.keys(v.select)
|
||||||
|
.filter((e) => e !== pks[k])
|
||||||
|
.map((e) => {
|
||||||
|
sample[k][e] = "sample";
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
sample[k] = "sample";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return `\
|
||||||
|
(arg: TableOnLoad) => {
|
||||||
|
if (isEditor) return [${JSON.stringify(sample)}];
|
||||||
|
|
||||||
|
return new Promise(async (done) => {
|
||||||
|
if (arg.mode === 'count') {
|
||||||
|
return await db.${table}.count();
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = await db.${table}.findMany({
|
||||||
|
select: ${JSON.stringify(select, null, 2).split("\n").join("\n ")},
|
||||||
|
orderBy: arg.orderBy || {
|
||||||
|
${pk}: "desc"
|
||||||
|
},
|
||||||
|
...arg.paging,
|
||||||
|
});
|
||||||
|
|
||||||
|
done(items);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
type TableOnLoad = {
|
||||||
|
reload: () => Promise<void>;
|
||||||
|
orderBy?: Record<string, "asc" | "desc">;
|
||||||
|
paging: { take: number; skip: number };
|
||||||
|
mode: 'count' | 'query'
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -54,6 +54,7 @@ export { TableListType } from "lib/comps/list/utils/typings";
|
||||||
export { Button, FloatButton } from "@/comps/ui/button";
|
export { Button, FloatButton } from "@/comps/ui/button";
|
||||||
export { prasi_gen } from "@/gen/prasi_gen";
|
export { prasi_gen } from "@/gen/prasi_gen";
|
||||||
export { password } from "@/utils/password";
|
export { password } from "@/utils/password";
|
||||||
|
export {generateTableList} from "@/comps/md/gen/md-table-list"
|
||||||
|
|
||||||
/** Session */
|
/** Session */
|
||||||
export {
|
export {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import { codeBuild } from "../master_detail/utils";
|
||||||
export const gen_table_list = async (
|
export const gen_table_list = async (
|
||||||
modify: (data: any) => void,
|
modify: (data: any) => void,
|
||||||
data: any,
|
data: any,
|
||||||
arg: { mode: "table" | "list" | "grid" | "auto"; id_parent?: string }
|
arg: { mode: "table" | "list" | "grid" | "auto"; id_parent?: string}
|
||||||
) => {
|
) => {
|
||||||
const table = JSON.parse(data.gen_table.value) as string;
|
const table = JSON.parse(data.gen_table.value) as string;
|
||||||
const raw_fields = JSON.parse(data.gen_fields.value) as (
|
const raw_fields = JSON.parse(data.gen_fields.value) as (
|
||||||
|
|
@ -53,7 +53,6 @@ export const gen_table_list = async (
|
||||||
|
|
||||||
if (data["child"]) {
|
if (data["child"]) {
|
||||||
result["child"] = data["child"];
|
result["child"] = data["child"];
|
||||||
|
|
||||||
let sub_name = "fields";
|
let sub_name = "fields";
|
||||||
switch (arg.mode) {
|
switch (arg.mode) {
|
||||||
case "table":
|
case "table":
|
||||||
|
|
|
||||||
|
|
@ -1,176 +0,0 @@
|
||||||
import capitalize from "lodash.capitalize";
|
|
||||||
import { GFCol, createItem, parseGenField } from "../utils";
|
|
||||||
import { on_load } from "./on_load";
|
|
||||||
import { codeBuild } from "../master_detail/utils";
|
|
||||||
|
|
||||||
export const generateTableList = async (
|
|
||||||
modify: (data: any) => void,
|
|
||||||
data: any,
|
|
||||||
item: PrasiItem,
|
|
||||||
arg: { mode: "table" | "list" | "grid" | "auto"; id_parent?: string }
|
|
||||||
) => {
|
|
||||||
const table = JSON.parse(data.gen_table.value) as string;
|
|
||||||
const raw_fields = JSON.parse(data.gen_fields.value) as (
|
|
||||||
| string
|
|
||||||
| { value: string; checked: string[] }
|
|
||||||
)[];
|
|
||||||
const select = {} as any;
|
|
||||||
let pk = "";
|
|
||||||
let pks: Record<string, string> = {};
|
|
||||||
|
|
||||||
const fields = parseGenField(raw_fields);
|
|
||||||
const result = {} as any;
|
|
||||||
for (const f of fields) {
|
|
||||||
select[f.name] = true;
|
|
||||||
if (f.relation) {
|
|
||||||
select[f.name] = {
|
|
||||||
select: {},
|
|
||||||
};
|
|
||||||
for (const r of f.relation.fields) {
|
|
||||||
select[f.name].select[r.name] = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (f.is_pk) {
|
|
||||||
pk = f.name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (arg.id_parent) {
|
|
||||||
select[arg.id_parent] = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!pk) {
|
|
||||||
alert("Failed to generate! Primary Key not found. ");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (pk) {
|
|
||||||
const code = {} as any;
|
|
||||||
if (data["on_load"]) {
|
|
||||||
result["on_load"] = data["on_load"];
|
|
||||||
result["on_load"].value = on_load({ pk, table, select, pks });
|
|
||||||
delete result["on_load"].valueBuilt;
|
|
||||||
code.on_load = result["on_load"].value;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data["child"]) {
|
|
||||||
result["child"] = data["child"];
|
|
||||||
|
|
||||||
let sub_name = "fields";
|
|
||||||
switch (arg.mode) {
|
|
||||||
case "table":
|
|
||||||
sub_name = "tbl-col";
|
|
||||||
break;
|
|
||||||
case "list":
|
|
||||||
sub_name = "md-list";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
result["child"].content.childs = result["child"].content.childs.filter(
|
|
||||||
(e: any) => {
|
|
||||||
return e.name !== sub_name;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
let first = true;
|
|
||||||
const child = createItem({
|
|
||||||
name: sub_name,
|
|
||||||
childs: fields
|
|
||||||
.map((e, idx) => {
|
|
||||||
if (idx >= 1 && arg.mode === "list") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (e.is_pk && arg.mode === "table") return;
|
|
||||||
let tree_depth = "";
|
|
||||||
let tree_depth_built = "";
|
|
||||||
if (first) {
|
|
||||||
tree_depth = `tree_depth={col.depth}`;
|
|
||||||
tree_depth_built = `tree_depth:col.depth`;
|
|
||||||
first = false;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
component: {
|
|
||||||
id: "297023a4-d552-464a-971d-f40dcd940b77",
|
|
||||||
props: {
|
|
||||||
name: e.name,
|
|
||||||
title: formatName(e.name),
|
|
||||||
child: createItem({
|
|
||||||
childs: [
|
|
||||||
createItem({
|
|
||||||
name: "cell",
|
|
||||||
padding: {
|
|
||||||
l: 8,
|
|
||||||
b: 0,
|
|
||||||
t: 0,
|
|
||||||
r: 8,
|
|
||||||
},
|
|
||||||
adv: {
|
|
||||||
js: `\
|
|
||||||
<div {...props} className={cx(props.className, "")}>
|
|
||||||
<FormatValue value={col.value} name={col.name} gen_fields={gen_fields} ${tree_depth} />
|
|
||||||
</div>`,
|
|
||||||
jsBuilt: `\
|
|
||||||
render(React.createElement("div", Object.assign({}, props, { className: cx(props.className, "") }),React.createElement(FormatValue, { value: col.value, name: col.name, gen_fields: gen_fields, ${tree_depth_built} })));
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.filter((e) => e) as any,
|
|
||||||
});
|
|
||||||
result["child"].content.childs = [
|
|
||||||
child,
|
|
||||||
...result["child"].content.childs,
|
|
||||||
];
|
|
||||||
}
|
|
||||||
// detect row yang aktif
|
|
||||||
if (data["selected"]) {
|
|
||||||
result["selected"] = data["selected"];
|
|
||||||
result["selected"].value = `\
|
|
||||||
({ row, rows, idx }: SelectedRow) => {
|
|
||||||
try {
|
|
||||||
if (typeof md === "object") {
|
|
||||||
if (Array.isArray(md.selected)) {
|
|
||||||
if (md.selected.length) {
|
|
||||||
let select = md.selected.find((e) => e === row)
|
|
||||||
if(select) return true
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (md.selected === row) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
type SelectedRow = {
|
|
||||||
row: any;
|
|
||||||
rows: any[];
|
|
||||||
idx: any;
|
|
||||||
}`;
|
|
||||||
delete result["selected"].valueBuilt;
|
|
||||||
code.selected = result["selected"].value;
|
|
||||||
}
|
|
||||||
|
|
||||||
const res = await codeBuild(code);
|
|
||||||
for (const [k, v] of Object.entries(res)) {
|
|
||||||
result[k].valueBuilt = v[1];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
modify(result);
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatName = (name: string) => {
|
|
||||||
return name
|
|
||||||
.split("_")
|
|
||||||
.filter((e) => e.length > 1)
|
|
||||||
.map((e) => capitalize(e))
|
|
||||||
.join(" ");
|
|
||||||
};
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
import { GFCol } from "../utils";
|
|
||||||
|
|
||||||
export const on_load = ({
|
export const on_load = ({
|
||||||
pk,
|
pk,
|
||||||
table,
|
table,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue