midsuit
/
prasi-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip fix

This commit is contained in:
rizky 2024-03-26 14:11:22 -07:00
parent 9957e9d626
commit 83351ca7c2
18 changed files with 886 additions and 663 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
comps/form/Form.tsx
View File

@ -1,16 +1,17 @@
import { Form as FForm } from "@/comps/ui/form";
import { Toaster } from "@/comps/ui/sonner";
import { useLocal } from "@/utils/use-local";
import { FC } from "react";
import { FC, useEffect } from "react";
import { createPortal } from "react-dom";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { FormHook } from "./utils/utils";
import { AlertTriangle, Check, Loader2 } from "lucide-react";
import { cn } from "@/utils";
import { Skeleton } from "../ui/skeleton";
export const Form: FC<{
on_init: (arg: { submit: any }) => any;
on_init: (arg: { submit: any; reload: any }) => any;
on_load: () => any;
on_submit: (arg: { form: any; error: any }) => Promise<any>;
body: any;
@ -63,7 +64,7 @@ export const Form: FC<{
toast.loading(
<>
<Loader2 className="c-h-4 c-w-4 c-animate-spin" />
Saving ...
Processing ...
</>,
{
dismissible: true,
@ -112,7 +113,7 @@ export const Form: FC<{
toast.success(
<div className="c-flex c-text-blue-700 c-items-center">
<Check className="c-h-4 c-w-4 c-mr-1 " />
Data saved
Done
</div>,
{
className: css`
@ -127,7 +128,19 @@ export const Form: FC<{
if (!local.init) {
local.init = true;
on_init({ submit });
on_init({
submit,
reload: () => {
local.init = false;
form.unload = () => {
form.hook.clearErrors();
form.hook.reset();
delete form.unload;
local.render();
};
local.render();
},
});
const res = on_load();
const loaded = (values: any) => {
setTimeout(() => {
@ -166,8 +179,16 @@ export const Form: FC<{
}
const toaster_el = document.getElementsByClassName("prasi-toaster")[0];
if (form.unload)
return (
<FForm {...form_hook}>
<div className="c-p-6 c-flex c-flex-col c-space-y-2 c-w-full c-flex-1 c-items-start">
<Skeleton className="c-h-3 c-w-[50%]" />
<Skeleton className="c-h-3 c-w-[40%]" />
</div>
);
return (
<FormInternal {...form_hook} form={form}>
{toaster_el && createPortal(<Toaster cn={cn} />, toaster_el)}
<form
className={
@ -225,6 +246,17 @@ export const Form: FC<{
</PassProp>
</div>
</form>
</FForm>
</FormInternal>
);
};
const FormInternal = (props: any) => {
useEffect(() => {
return () => {
if (props.form && props.form.unload) {
props.form.unload();
}
};
}, []);
return <FForm {...props} />;
};

11
comps/form/Radio/index.tsx
View File

@ -103,20 +103,11 @@ export const Radio: FC<{
current_name={name}
item_click={() => {
if (selection === "single") {
console.log(value, "====single", name);
local.mod(name, { value: item.value });
local.render();
} else if (selection === "multi") {
const val = [];
console.log();
val.push( ...value, item.value);
local.mod(name, { value: val });
local.mod(name, { value: item.value });
local.render();
console.log(item.value, "value", form.hook.getValues());
return;
console.log(value, "====multi", name);
} else {
null;
}

1
comps/form/utils/utils.ts
View File

@ -27,4 +27,5 @@ export type FormHook = {
cache: any;
validation: Record<string, "required">;
render: () => void;
unload?: () => void;
};

93
comps/list/Table.tsx
View File

@ -1,7 +1,8 @@
import { useLocal } from "@/utils/use-local";
import { FC, useEffect } from "react";
import { FC, useEffect, useRef } from "react";
import DataGrid, {
ColumnOrColumnGroup,
DataGridHandle,
Row,
SortColumn,
} from "react-data-grid";
@ -14,13 +15,20 @@ type OnRowClick = {
idx: any;
event: React.MouseEvent<HTMLDivElement, MouseEvent>;
};
type RowSelected = {
row: any;
rows: any[];
idx: any;
};
export const Table: FC<{
columns: () => Promise<ColumnOrColumnGroup<any>[]>;
on_load: () => Promise<any[]>;
on_load: (opt: { reload: () => Promise<void> }) => Promise<any[]>;
child: any;
PassProp: any;
row_click: (arg: OnRowClick) => void;
}> = ({ columns, on_load, child, PassProp, row_click }) => {
selected: (arg: RowSelected) => boolean;
}> = ({ columns, on_load, child, PassProp, row_click, selected }) => {
const local = useLocal({
loading: false,
data: undefined as unknown as any[],
@ -58,7 +66,19 @@ export const Table: FC<{
useEffect(() => {
local.loading = true;
on_load().then((data) => {
const arg = {
reload: async () => {
local.loading = true;
local.render();
const data = await on_load(arg);
local.data = data;
local.loading = false;
local.render();
},
};
on_load(arg).then((data) => {
local.data = data;
local.loading = false;
local.render();
@ -67,6 +87,7 @@ export const Table: FC<{
return (
<TableInternal
selected={selected}
row_click={row_click}
columns={local.columns}
data={local.loading ? undefined : local.data}
@ -80,7 +101,8 @@ const TableInternal: FC<{
data?: any[];
render: () => void;
row_click: (arg: OnRowClick) => void;
}> = ({ columns, data, render, row_click }) => {
selected: (arg: RowSelected) => boolean;
}> = ({ columns, data, render, row_click, selected }) => {
const local = useLocal({
width: 0,
height: 0,
@ -91,7 +113,9 @@ const TableInternal: FC<{
}),
el: null as any,
sort: [] as SortColumn[],
scrolled: false,
});
const rdg = useRef<null | DataGridHandle>(null);
useEffect(() => {
return () => {
@ -100,22 +124,45 @@ const TableInternal: FC<{
}, []);
const sort = local.sort;
let sorted = data;
if (sort.length > 0 && data) {
sorted = data.sort((a, b) => {
const va = a[sort[0].columnKey];
const vb = b[sort[0].columnKey];
if (typeof va === "string" && typeof vb === "string") {
if (sort[0].direction === "ASC") {
return va.localeCompare(vb);
} else {
return vb.localeCompare(va);
// let sorted = data;
// if (sort.length > 0 && data) {
// sorted = data.sort((a, b) => {
// const va = a[sort[0].columnKey];
// const vb = b[sort[0].columnKey];
// if (typeof va === "string" && typeof vb === "string") {
// if (sort[0].direction === "ASC") {
// return va.localeCompare(vb);
// } else {
// return vb.localeCompare(va);
// }
// }
// return 0;
// });
// }
let selected_idx = -1;
if (data) {
for (let i = 0; i < data.length; i++) {
const row = data[i];
if (
typeof selected === "function"
? selected({
idx: i,
row: row,
rows: data,
})
: false
) {
selected_idx = i;
break;
}
}
return 0;
});
}
useEffect(() => {
rdg.current!.scrollToCell({ rowIdx: selected_idx, idx: 0 });
}, [selected_idx]);
return (
<div
className={cx(
@ -136,6 +183,10 @@ const TableInternal: FC<{
div[aria-selected="true"] {
outline: none;
}
.row-selected {
background: #e2f1ff;
}
`
)}
ref={(el) => {
@ -148,6 +199,7 @@ const TableInternal: FC<{
<DataGrid
columns={columns}
sortColumns={sort}
ref={rdg}
onSortColumnsChange={([col]) => {
local.sort = [];
if (col) {
@ -173,6 +225,8 @@ const TableInternal: FC<{
? undefined
: {
renderRow(key, props) {
const is_selected = selected_idx === props.rowIdx;
return (
<Row
key={key}
@ -187,6 +241,11 @@ const TableInternal: FC<{
});
}
}}
isRowSelected={is_selected}
className={cx(
props.className,
is_selected && "row-selected"
)}
/>
);
},

172
comps/mst/MasterDetail.tsx
View File

@ -1,17 +1,18 @@
import { GFCol } from "@/gen/utils";
import { useLocal } from "@/utils/use-local";
import get from "lodash.get";
import { FC, useEffect } from "react";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import { Tabs, TabsList, TabsTrigger } from "../ui/tabs";
import {
MasterDetailConfig,
MasterDetailLocal,
MasterDetailProp,
} from "./type";
import { GFCol } from "@/gen/utils";
import { master_detail_gen_hash, master_detail_params } from "./utils";
export const MasterDetail: FC<MasterDetailProp> = (props) => {
const { header, name, mode, title, actions, gen_fields } = props;
const { header, name, mode, title, actions, gen_fields, md_parent } = props;
const md = useLocal<MasterDetailLocal & { cache_internal: any }>(
{
name,
@ -28,25 +29,53 @@ export const MasterDetail: FC<MasterDetailProp> = (props) => {
cache_internal: {},
cache: null as any,
pk: null as null | GFCol,
parent: md_parent,
},
() => {
if (!isEditor) {
const hash = master_detail_params(md);
const params = master_detail_params(md);
const hash = params.hash;
if (params.tabs && params.tabs[md.name]) {
md.active_tab = params.tabs[md.name];
}
if (md.mode === "breadcrumb") {
if (hash && hash[name] && md.pk) {
if (md.pk.type === "int") {
md.selected = { [md.pk.name]: parseInt(hash[name]) };
} else {
md.selected = { [md.pk.name]: hash[name] };
}
}
}
md.render();
}
}
}
);
const local = useLocal({ init: false }, () => {
local.init = true;
local.render();
});
if (local.init) {
const params = master_detail_params(md);
const hash = params.hash;
delete hash.parent_id;
if (!md.selected) {
delete hash[md.name];
master_detail_gen_hash(params);
} else if (md.pk) {
hash[md.name] = md.selected[md.pk.name];
master_detail_gen_hash(params);
}
}
if (!md.pk && gen_fields) {
for (const str of gen_fields) {
try {
const f = JSON.parse(str) as GFCol;
if (f.is_pk) md.pk = f;
} catch (e) {}
}
}
@ -67,6 +96,11 @@ export const MasterDetail: FC<MasterDetailProp> = (props) => {
md.ui.title = title;
md.render();
}, [title]);
useEffect(() => {
md.mode = mode;
md.render();
}, [mode]);
}
useEffect(() => {
@ -85,9 +119,89 @@ export const MasterDetail: FC<MasterDetailProp> = (props) => {
className={cx(
"c-flex-1 c-flex-col c-flex c-w-full c-h-full c-overflow-hidden"
)}
>
{md.mode === "breadcrumb" && (
<BreadcrumbMode props={props} md={md} header={header} />
)}
{md.mode === "vertical" && (
<VerticalMode props={props} md={md} header={header} />
)}
{md.mode === "horizontal" && (
<HorizontalMode props={props} md={md} header={header} />
)}
{isEditor && (
<div className="c-hidden">
<props.PassProp md={md}>{props.detail}</props.PassProp>
</div>
)}
</div>
);
};
const VerticalMode: FC<{
props: MasterDetailProp;
md: MasterDetailConfig;
header: any;
}> = ({ props, md, header }) => {
return (
<div className={cx("c-flex-1")}>
<PanelGroup direction="vertical">
<Panel className="c-border-b">
<props.PassProp md={md}>{props.master}</props.PassProp>
</Panel>
<>
<PanelResizeHandle />
<Panel
className="c-flex c-flex-col c-items-stretch"
defaultSize={
parseInt(localStorage.getItem(`prasi-md-h-${md.name}`) || "") ||
undefined
}
onResize={(e) => {
if (e < 80) {
localStorage.setItem(`prasi-md-h-${md.name}`, e.toString());
}
}}
>
<props.PassProp md={md}>{header}</props.PassProp>
<BreadcrumbMode props={props} md={md} />
<Detail props={props} md={md} />
</Panel>
</>
</PanelGroup>
</div>
);
};
const HorizontalMode: FC<{
props: MasterDetailProp;
md: MasterDetailConfig;
header: any;
}> = ({ props, md, header }) => {
return (
<div className={cx("c-flex-1")}>
<PanelGroup direction="horizontal">
<Panel className="c-border-r">
<props.PassProp md={md}>{props.master}</props.PassProp>
</Panel>
<>
<PanelResizeHandle />
<Panel
className="c-flex c-flex-col c-items-stretch"
defaultSize={
parseInt(localStorage.getItem(`prasi-md-h-${md.name}`) || "") ||
undefined
}
onResize={(e) => {
if (e < 80) {
localStorage.setItem(`prasi-md-h-${md.name}`, e.toString());
}
}}
>
<props.PassProp md={md}>{header}</props.PassProp>
<Detail props={props} md={md} />
</Panel>
</>
</PanelGroup>
</div>
);
};
@ -95,39 +209,23 @@ export const MasterDetail: FC<MasterDetailProp> = (props) => {
const BreadcrumbMode: FC<{
props: MasterDetailProp;
md: MasterDetailConfig;
}> = ({ props, md }) => {
const local = useLocal({ init: false }, () => {
local.init = true;
local.render();
});
if (local.init) {
const hash = master_detail_params(md);
delete hash.parent_id;
if (!md.selected) {
delete hash[md.name];
location.hash = master_detail_gen_hash(hash);
} else if (md.pk) {
hash[md.name] = md.selected[md.pk.name];
location.hash = master_detail_gen_hash(hash);
}
}
header: any;
}> = ({ props, md, header }) => {
return (
<>
<props.PassProp md={md}>{header}</props.PassProp>
<div className={cx("c-flex-1 c-flex-col c-flex")}>
<div
className={cx(md.selected && "c-hidden", "c-flex c-flex-1 c-flex-col")}
className={cx(
md.selected && "c-hidden",
"c-flex c-flex-1 c-flex-col"
)}
>
<props.PassProp md={md}>{props.master}</props.PassProp>
</div>
{md.selected && <Detail props={props} md={md} />}
{isEditor && !local.init && (
<div className="c-hidden">
<Detail props={props} md={md} />
</div>
)}
</div>
</>
);
};
@ -145,7 +243,9 @@ const Detail: FC<{
);
if (idx < 0) {
idx = 0;
if (childs[idx]) {
md.active_tab = childs[idx].name;
}
setTimeout(md.render);
}
const content = childs[idx];
@ -170,6 +270,7 @@ const Detail: FC<{
"c-flex c-w-full c-rounded-none c-border-b c-border-gray-300 c-justify-start",
css`
padding: 0 !important;
padding-left: 20px !important;
height: auto !important;
`
)}
@ -179,6 +280,13 @@ const Detail: FC<{
<TabsTrigger
value={e.name}
onClick={() => {
const params = master_detail_params(md);
const hash = params.hash;
delete hash.parent_id;
params.tabs[md.name] = e.name;
master_detail_gen_hash(params);
md.active_tab = e.name;
md.render();
}}

5
comps/mst/type.ts
View File

@ -11,6 +11,7 @@ export type MasterDetailProp = {
actions: (md: any) => MasterDetailAction[];
gen_fields: any;
name: string;
md_parent?: MasterDetailConfig;
};
type MasterDetailAction = {
@ -34,6 +35,7 @@ export type MasterDetailLocal = {
};
cache: (name: string, opt?: { reset: boolean }) => any;
pk: null | GFCol;
parent?: MasterDetailConfig;
};
export type MasterDetailConfig = MasterDetailLocal & { render: () => void };
@ -59,7 +61,8 @@ export const master_detail_typings = {
actions: ${action_type}[];
};
cache: (name: string, opt?: { reset: boolean }) => any;
pk: null | any
pk: null | any;
parent?: typeof md;
}`,
action_type,
};

41
comps/mst/utils.ts
View File

@ -7,27 +7,52 @@ export const master_detail_params = (md: MasterDetailConfig) => {
: md.selected?.[md.pk?.name || ""];
const hash: any = {};
for (const h of location.hash.split("#")) {
const tabs: any = {};
let raw_hash = decodeURIComponent(location.hash);
if (isEditor) {
raw_hash = localStorage.getItem("prasi-md-hash") || "";
}
for (const h of raw_hash.split("#")) {
if (h) {
if (h.includes("=")) {
const [tab_name, tab_val] = h.split("=");
if (tab_name && tab_val) {
hash[tab_name] = tab_val;
}
} else if (h.includes("~")) {
const [tab_name, tab_val] = h.split("~");
if (tab_name && tab_val) {
tabs[tab_name] = tab_val;
}
}
}
}
if (parent_id) {
return { ...hash, parent_id };
return { hash, parent_id, tabs };
}
return hash;
return { hash, tabs };
};
export const master_detail_gen_hash = (
obj: Record<string, number | string>
) => {
export const master_detail_gen_hash = (obj: {
hash: Record<string, number | string>;
tabs: Record<string, string>;
parent_id?: string;
}) => {
let hash = "";
for (const [k, v] of Object.entries(obj)) {
for (const [k, v] of Object.entries(obj.hash)) {
hash += `#${k}=${v}`;
}
return hash;
for (const [k, v] of Object.entries(obj.tabs)) {
hash += `#${k}~${v}`;
}
if (isEditor) {
localStorage.setItem("prasi-md-hash", hash);
} else {
location.hash = hash;
}
};

20
comps/ui/tabs.tsx
View File

@ -10,18 +10,22 @@ const TabsList = React.forwardRef<
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
overrideClassName?: boolean;
}
>(({ className, ...props }, ref) => (
>(({ className, ...props }, ref) => {
const overrideClassName = props.overrideClassName;
delete props.overrideClassName;
return (
<TabsPrimitive.List
ref={ref}
className={cn(
props.overrideClassName === true
overrideClassName === true
? ""
: "c-inline-flex c-h-10 c-items-center c-justify-center c-rounded-md c-bg-muted c-p-1 c-text-muted-foreground",
className
)}
{...props}
/>
));
);
});
TabsList.displayName = TabsPrimitive.List.displayName;
const TabsTrigger = React.forwardRef<
@ -29,18 +33,22 @@ const TabsTrigger = React.forwardRef<
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
overrideClassName?: boolean;
}
>(({ className, ...props }, ref) => (
>(({ className, ...props }, ref) => {
const overrideClassName = props.overrideClassName;
delete props.overrideClassName;
return (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
props.overrideClassName === true
overrideClassName === true
? ""
: "c-inline-flex c-items-center c-justify-center c-whitespace-nowrap c-rounded-sm c-px-3 c-py-1.5 c-text-sm c-font-medium c-ring-offset-background c-transition-all focus-visible:c-outline-none focus-visible:c-ring-2 focus-visible:c-ring-ring focus-visible:c-ring-offset-2 disabled:c-pointer-events-none disabled:c-opacity-50 data-[state=active]:c-bg-background data-[state=active]:c-text-foreground data-[state=active]:c-shadow-sm",
className
)}
{...props}
/>
));
);
});
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
const TabsContent = React.forwardRef<

2
gen/gen_form/gen_form.ts
View File

@ -66,6 +66,7 @@ export const gen_form = (modify: (data: any) => void, data: any) => {
return;
}
if (pk) {
if (mode) {
if (mode.includes("on_load")) {
result["on_load"] = data["on_load"];
result["on_load"].value = on_load({ pk, pks, select, table });
@ -75,6 +76,7 @@ export const gen_form = (modify: (data: any) => void, data: any) => {
result["on_submit"] = data["on_submit"];
result["on_submit"].value = on_submit({ pk, table, select, pks });
}
}
result["body"] = data["body"];
const childs = get(result, "body.content.childs");

4
gen/gen_form/on_submit.ts
View File

@ -36,6 +36,10 @@ export const on_submit = ({
if (res) form.${id} = res.${id};
}
if (md.mode !== "breadcrumb") {
md.cache("master")?.reload();
}
return true;
};

11
gen/gen_md/form_before_load.ts
View File

@ -7,6 +7,9 @@ export const form_before_load = (
label: string
) => {
return `
const master = md.cache("master") as
| { reload: () => Promise<void> }
| undefined;
const id = master_detail_params(md).parent_id;
@ -31,6 +34,9 @@ export const form_before_load = (
md.ui.back = false;
md.selected = null;
md.render();
if (md.mode !== "breadcrumb") {
master?.reload();
}
});
}
},
@ -41,10 +47,13 @@ export const form_before_load = (
onClick: async () => {
md.ui.actions = [{ label: "Saving...", type: "ghost" }];
md.render();
await md.cache("form")._submit();
await md.cache("master")._submit();
setTimeout(() => {
set_actions();
md.render();
if (md.mode !== "breadcrumb") {
master?.reload();
}
}, 500);
},
icon: \`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>\`,

47
gen/gen_md/gen_detail.ts
View File

@ -18,6 +18,31 @@ export const gen_detail = () => {
w: "full",
h: "full",
},
adv: {
css: "",
js: "",
jsBuilt: "render();\n",
},
childs: [
{
id: createId(),
name: "selected",
type: "item",
dim: {
w: "full",
h: "full",
},
adv: {
css: "",
js: `<>
{(md.selected || isEditor) && (
<div {...props} className={cx(props.className, "")}>
{children}
</div>
)}
</>`,
jsBuilt: `render(React.createElement(React.Fragment, null, (md.selected || isEditor) && (React.createElement("div", Object.assign({}, props, { className: cx(props.className, "") }), children))));`,
},
childs: [
{
id: createId(),
@ -257,7 +282,8 @@ export const gen_detail = () => {
ref_ids: {},
instances: {
npj543t5rpwx932a153hsfyl: {
zmit41kbgkbqcsmm8aspp8zy: "mo4m0rnyey4y6v7tlajod95l",
zmit41kbgkbqcsmm8aspp8zy:
"mo4m0rnyey4y6v7tlajod95l",
},
},
},
@ -417,10 +443,14 @@ export const gen_detail = () => {
},
name: "prop_5",
type: "string",
value:
'({ submit }: Init) => {\n // on init\n md.cache("form")._submit = submit;\n};\n\ntype Init = { submit: () => void }',
valueBuilt:
' ({ submit }) => {\n md.cache("form")._submit = submit;\n};\n',
value: `\
({ submit, reload }: Init) => {
// on init
md.cache("detail").submit = submit;
md.cache("detail").reload = reload;
};
type Init = { submit: () => void; reload: () => Promise<void> };`,
},
on_load: {
idx: 1,
@ -479,11 +509,8 @@ export const gen_detail = () => {
originalid: createId(),
},
],
adv: {
css: "",
js: "",
jsBuilt: "render();\n",
},
],
},
],
adv: {
@ -495,6 +522,6 @@ export const gen_detail = () => {
return {
content: res.childs[0],
props: res.childs[0].childs[0].component.props,
props: res.childs[0].childs[0].childs[0].component.props,
};
};

9
gen/gen_md/gen_header.ts
View File

@ -13,7 +13,7 @@ export const gen_header = () => {
childs: [
{
id: createId(),
name: "breadcrumb",
name: "wrapper",
type: "item",
dim: {
w: "full",
@ -71,9 +71,9 @@ export const gen_header = () => {
},
],
adv: {
js: '<>\n {md.ui.back && (\n <div\n {...props}\n className={cx(props.className, "")}\n onClick={() => {\n md.ui.actions = [...md.ui.default_actions];\n md.ui.breadcrumb = [];\n md.ui.back = false;\n md.selected = null;\n md.render();\n }}\n >\n {children}\n </div>\n )}\n</>',
js: '<>\n {md.selected && (\n <div\n {...props}\n className={cx(props.className, "")}\n onClick={() => {\n md.ui.actions = [...md.ui.default_actions];\n md.ui.breadcrumb = [];\n md.ui.back = false;\n md.selected = null;\n md.render();\n }}\n >\n {children}\n </div>\n )}\n</>',
jsBuilt:
'render(/* @__PURE__ */ React.createElement(React.Fragment, null, md.ui.back && /* @__PURE__ */ React.createElement(\n "div",\n {\n ...props,\n className: cx(props.className, ""),\n onClick: () => {\n md.ui.actions = [...md.ui.default_actions];\n md.ui.breadcrumb = [];\n md.ui.back = false;\n md.selected = null;\n md.render();\n }\n },\n children\n)));\n',
'render(/* @__PURE__ */ React.createElement(React.Fragment, null, md.selected && /* @__PURE__ */ React.createElement(\n "div",\n {\n ...props,\n className: cx(props.className, ""),\n onClick: () => {\n md.ui.actions = [...md.ui.default_actions];\n md.ui.breadcrumb = [];\n md.ui.back = false;\n md.selected = null;\n md.render();\n }\n },\n children\n)));\n',
css: "& {\n display: flex;\n cursor: pointer;\n\n // &.mobile {}\n // &.desktop {}\n &:hover {\n background: rgb(237, 246, 255);\n }\n}",
},
script: {},
@ -188,9 +188,6 @@ export const gen_header = () => {
},
],
adv: {
js: '<>\n {md.mode === "breadcrumb" && (\n <div {...props} className={cx(props.className, "")}>\n {children}\n </div>\n )}\n</>',
jsBuilt:
'render(/* @__PURE__ */ React.createElement(React.Fragment, null, md.mode === "breadcrumb" && /* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children)));\n',
css: "",
},
script: {},

151
gen/gen_md/gen_master.ts
View File

@ -100,110 +100,7 @@ export const gen_master = () => {
},
name: "prop_3",
type: "item",
childs: [
{
id: createId(),
adv: {
js: '<>\n {cell.key === "id" && (\n <div {...props} className={cx(props.className, "")}>\n {cell.value}\n </div>\n )}\n</>',
css: "",
jsBuilt:
'render(\n React.createElement(\n React.Fragment,\n null,\n cell.key === "id" &&\n React.createElement(\n "div",\n Object.assign({}, props, { className: cx(props.className, "") }),\n cell.value\n )\n )\n)',
},
dim: {
h: "full",
w: "full",
},
name: "id",
type: "item",
childs: [],
script: {},
},
{
id: createId(),
adv: {
js: '<>\n {cell.key === "nama_aset_komersial" && (\n <div {...props} className={cx(props.className, "")}>\n {cell.value}\n </div>\n )}\n</>',
css: "",
jsBuilt:
'render(\n React.createElement(\n React.Fragment,\n null,\n cell.key === "nama_aset_komersial" &&\n React.createElement(\n "div",\n Object.assign({}, props, { className: cx(props.className, "") }),\n cell.value\n )\n )\n)',
},
dim: {
h: "full",
w: "full",
},
name: "nama_aset_komersial",
type: "item",
childs: [],
script: {},
},
{
id: createId(),
adv: {
js: '<>\n {cell.key === "m_cabang" && (\n <div {...props} className={cx(props.className, "")}>\n {cell.value?.["nama_cabang"]}\n </div>\n )}\n</>',
css: "",
jsBuilt:
'render(\n React.createElement(\n React.Fragment,\n null,\n cell.key === "m_cabang" &&\n React.createElement(\n "div",\n Object.assign({}, props, { className: cx(props.className, "") }),\n cell.value?.["nama_cabang"]\n )\n )\n)',
},
dim: {
h: "full",
w: "full",
},
name: "m_cabang",
type: "item",
childs: [],
script: {},
},
{
id: createId(),
adv: {
js: '<>\n {cell.key === "m_regional" && (\n <div {...props} className={cx(props.className, "")}>\n {cell.value?.["regional"]}\n </div>\n )}\n</>',
css: "",
jsBuilt:
'render(\n React.createElement(\n React.Fragment,\n null,\n cell.key === "m_regional" &&\n React.createElement(\n "div",\n Object.assign({}, props, { className: cx(props.className, "") }),\n cell.value?.["regional"]\n )\n )\n)',
},
dim: {
h: "full",
w: "full",
},
name: "m_regional",
type: "item",
childs: [],
script: {},
},
{
id: createId(),
adv: {
js: '<>\n {cell.key === "luas_setifikat" && (\n <div {...props} className={cx(props.className, "")}>\n {cell.value}\n </div>\n )}\n</>',
css: "",
jsBuilt:
'render(\n React.createElement(\n React.Fragment,\n null,\n cell.key === "luas_setifikat" &&\n React.createElement(\n "div",\n Object.assign({}, props, { className: cx(props.className, "") }),\n cell.value\n )\n )\n)',
},
dim: {
h: "full",
w: "full",
},
name: "luas_setifikat",
type: "item",
childs: [],
script: {},
},
{
id: createId(),
adv: {
js: '<>\n {cell.key === "tanggal_sertifikat" && (\n <div {...props} className={cx(props.className, "")}>\n {cell.value}\n </div>\n )}\n</>',
css: "",
jsBuilt:
'render(\n React.createElement(\n React.Fragment,\n null,\n cell.key === "tanggal_sertifikat" &&\n React.createElement(\n "div",\n Object.assign({}, props, { className: cx(props.className, "") }),\n cell.value\n )\n )\n)',
},
dim: {
h: "full",
w: "full",
},
name: "tanggal_sertifikat",
type: "item",
childs: [],
script: {},
},
],
childs: [] as any,
hidden: false,
},
typings:
@ -217,7 +114,7 @@ export const gen_master = () => {
name: "prop_1",
type: "string",
value:
'async (): Promise<\n { key: string; name: string; width?: number; frozen?: boolean }[]\n > => {\n return [\n { key: "id", name: "#", width: 60, frozen: true },\n {"key":"nama_aset_komersial","name":"Nama Aset Komersial"},\n {"key":"m_cabang","name":"Cabang"},\n {"key":"m_regional","name":"Regional"},\n {"key":"luas_setifikat","name":"Luas Setifikat"},\n {"key":"tanggal_sertifikat","name":"Tanggal Sertifikat"}\n ];\n }',
'async (): Promise<\n { key: string; name: string; width?: number; frozen?: boolean }[]\n > => {\n return [\n { key: "id", name: "#", width: 60, frozen: true },\n {"key":"m_cabang","name":"Cabang"},\n {"key":"m_regional","name":"Regional"},\n {"key":"nama_aset_komersial","name":"Nama Aset Komersial"},\n {"key":"asset_number","name":"Asset Number"}\n ];\n }',
},
on_load: {
idx: 1,
@ -227,7 +124,7 @@ export const gen_master = () => {
name: "prop_1",
type: "string",
value:
"async () => {\n if (isEditor)\n return [\n {\n },\n });\n\n return items;\n}",
'async (arg: TableOnLoad) => {\n md.cache("master").reload = arg.reload;\n\n if (isEditor)\n return [\n {\n id: "sample",\n m_cabang: { nama_cabang: "sample" },\n m_regional: { regional: "sample" },\n nama_aset_komersial: "sample",\n asset_number: "sample",\n },\n ];\n\n const items = await db.m_aset.findMany({\n select: {\n id: true,\n m_cabang: {\n select: {\n id: true,\n nama_cabang: true,\n },\n },\n m_regional: {\n select: {\n regional: true,\n id: true,\n },\n },\n nama_aset_komersial: true,\n asset_number: true,\n },\n orderBy: {\n id: createId(),\n },\n });\n\n return items;\n};\n\ntype TableOnLoad = {\n reload: () => Promise<void>;\n}',
},
generate: {
idx: 5,
@ -263,10 +160,32 @@ export const gen_master = () => {
idx: 11,
name: "prop_11",
type: "string",
value:
"({ row, rows, idx, event }: OnRowClick) => {\n md.selected = row;\n md.render();\n};\n\ntype OnRowClick = {\n row: any;\n rows: any[];\n idx: any;\n event: React.MouseEvent<HTMLDivElement, MouseEvent>;\n}",
valueBuilt:
" ({ row, rows, idx, event }) => {\n md.selected = row;\n md.render();\n};\n",
value: `\
({ row, rows, idx, event }: OnRowClick) => {
md.selected = row;
md.render();
const reload = md.cache("detail")?.reload;
if (typeof reload === 'function') {
reload()
}
};
type OnRowClick = {
row: any;
rows: any[];
idx: any;
event: React.MouseEvent<HTMLDivElement, MouseEvent>;
}`,
valueBuilt: `({ row, rows, idx, event }) => {
var _a;
md.selected = row;
md.render();
const reload = (_a = md.cache("detail")) === null || _a === void 0 ? void 0 : _a.reload;
if (typeof reload === 'function') {
reload();
}
};
`,
meta: {
type: "text",
},
@ -281,6 +200,18 @@ export const gen_master = () => {
type: "button",
},
},
selected: {
idx: 3,
name: "prop_9",
type: "string",
value:
"({ row, rows, idx }: SelectedRow) => {\n return md.selected?.id === row?.id;\n};\n\ntype SelectedRow = {\n row: any;\n rows: any[];\n idx: any;\n}",
valueBuilt:
" ({ row, rows, idx }) => {\n return md.selected?.id === row?.id;\n};\n",
meta: {
type: "text",
},
},
},
ref_ids: {},
instances: {},

6
gen/gen_md/gen_md.ts
View File

@ -28,17 +28,21 @@ export const gen_md = (modify: (data: any) => void, data: any) => {
const col = JSON.parse(sel.value) as Col;
select[col.name] = {};
const fields: string[] = [];
const subsel: any = {};
for (let s of sel.checked) {
const c = JSON.parse(s) as Col;
if (c.is_pk) {
pks[col.name] = c.name;
fields.push(`::${c.name}`);
select[col.name] = { select: { [c.name]: true } };
col.relation = { table: col.name, pk: sel.name };
} else {
fields.push(c.name);
}
subsel[c.name] = true;
}
select[col.name] = { select: subsel };
columns.push(col);
new_fields.push({
name: col.name,

13
gen/gen_table/gen_table.ts
View File

@ -56,6 +56,19 @@ export const gen_table = (modify: (data: any) => void, data: any) => {
result["child"] = data["child"];
result["child"].content.childs = newField(select, pks);
}
if (data["selected"]) {
result["selected"] = data["selected"];
result["selected"].value = `\
({ row, rows, idx }: SelectedRow) => {
return md.selected?.id === row?.id;
};
type SelectedRow = {
row: any;
rows: any[];
idx: any;
}`;
}
}
modify(result);

5
gen/gen_table/new_field.ts
View File

@ -1,5 +1,4 @@
import { createId } from "@paralleldrive/cuid2";
import { GFCol } from "../utils";
export const newField = (select: any, pks: Record<string, string>) => {
const result = [];
@ -8,7 +7,7 @@ export const newField = (select: any, pks: Record<string, string>) => {
if (typeof v === "object") {
const res = Object.keys(v.select)
.filter((e) => e !== pks[k])
.map((e) => `cell.value?.["${e}"]`)
.map((e) => `cell.value?.["${k}"]?.["${e}"] || ''`)
.join('+ " " +');
result.push({
@ -18,7 +17,7 @@ export const newField = (select: any, pks: Record<string, string>) => {
<>
{cell.key === "${k}" && (
<div {...props} className={cx(props.className, "")}>
{${res}}
{Array.isArray(cell.value) ? cell.value.length + ' items' : ${res}}
</div>
)}
</>`,

14
gen/gen_table/on_load.ts
View File

@ -28,7 +28,12 @@ export const on_load = ({
}
return `\
async () => {
async (arg: TableOnLoad) => {
if (typeof md !== 'undefined') {
md.cache("master").reload = arg.reload;
}
if (isEditor) return [${JSON.stringify(sample)}];
const items = await db.${table}.findMany({
@ -39,5 +44,10 @@ async () => {
});
return items;
}`;
}
type TableOnLoad = {
reload: () => Promise<void>;
}
`;
};