fix
This commit is contained in:
rizky
parent
1a65145ab7
commit
5e8b25d174
|
|
@ -1,261 +0,0 @@
|
||||||
import {
|
|
||||||
FloatingFocusManager,
|
|
||||||
FloatingOverlay,
|
|
||||||
FloatingPortal,
|
|
||||||
useClick,
|
|
||||||
useDismiss,
|
|
||||||
useFloating,
|
|
||||||
useId,
|
|
||||||
useInteractions,
|
|
||||||
useMergeRefs,
|
|
||||||
useRole,
|
|
||||||
} from "@floating-ui/react";
|
|
||||||
import { useLocal } from "lib/utils/use-local";
|
|
||||||
import * as React from "react";
|
|
||||||
|
|
||||||
interface ModalOptions {
|
|
||||||
initialOpen?: boolean;
|
|
||||||
open?: boolean;
|
|
||||||
onOpenChange?: (open: boolean) => void;
|
|
||||||
fade?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useModal({
|
|
||||||
initialOpen = true,
|
|
||||||
open: controlledOpen,
|
|
||||||
onOpenChange: setControlledOpen,
|
|
||||||
}: ModalOptions) {
|
|
||||||
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
|
|
||||||
const [labelId, setLabelId] = React.useState<string | undefined>();
|
|
||||||
const [descriptionId, setDescriptionId] = React.useState<
|
|
||||||
string | undefined
|
|
||||||
>();
|
|
||||||
|
|
||||||
const open = controlledOpen ?? uncontrolledOpen;
|
|
||||||
const setOpen = setControlledOpen ?? setUncontrolledOpen;
|
|
||||||
|
|
||||||
const data = useFloating({
|
|
||||||
open,
|
|
||||||
onOpenChange: setOpen,
|
|
||||||
});
|
|
||||||
|
|
||||||
const context = data.context;
|
|
||||||
|
|
||||||
const click = useClick(context, {
|
|
||||||
enabled: controlledOpen == null,
|
|
||||||
});
|
|
||||||
const dismiss = useDismiss(context, {
|
|
||||||
outsidePressEvent: "mousedown",
|
|
||||||
escapeKey: false,
|
|
||||||
});
|
|
||||||
const role = useRole(context);
|
|
||||||
|
|
||||||
const interactions = useInteractions([click, dismiss, role]);
|
|
||||||
|
|
||||||
return React.useMemo(
|
|
||||||
() => ({
|
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
...interactions,
|
|
||||||
...data,
|
|
||||||
labelId,
|
|
||||||
descriptionId,
|
|
||||||
setLabelId,
|
|
||||||
setDescriptionId,
|
|
||||||
}),
|
|
||||||
[open, setOpen, interactions, data, labelId, descriptionId]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
type ContextType =
|
|
||||||
| (ReturnType<typeof useModal> & {
|
|
||||||
setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
||||||
setDescriptionId: React.Dispatch<
|
|
||||||
React.SetStateAction<string | undefined>
|
|
||||||
>;
|
|
||||||
})
|
|
||||||
| null;
|
|
||||||
|
|
||||||
const ModalContext = React.createContext<ContextType>(null);
|
|
||||||
|
|
||||||
export const useModalContext = () => {
|
|
||||||
const context = React.useContext(ModalContext);
|
|
||||||
|
|
||||||
if (context == null) {
|
|
||||||
throw new Error("Modal components must be wrapped in <Modal />");
|
|
||||||
}
|
|
||||||
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function Modal({
|
|
||||||
children,
|
|
||||||
...options
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
} & ModalOptions) {
|
|
||||||
const dialog = useModal(options);
|
|
||||||
return (
|
|
||||||
<ModalContext.Provider value={dialog}>
|
|
||||||
<ModalContent fade={options.fade} className={cx("modal", "outline-none")}>
|
|
||||||
{children}
|
|
||||||
</ModalContent>
|
|
||||||
</ModalContext.Provider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ModalTriggerProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
asChild?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ModalTrigger = React.forwardRef<
|
|
||||||
HTMLElement,
|
|
||||||
React.HTMLProps<HTMLElement> & ModalTriggerProps
|
|
||||||
>(function ModalTrigger({ children, asChild = false, ...props }, propRef) {
|
|
||||||
const context = useModalContext();
|
|
||||||
const childrenRef = (children as any).ref;
|
|
||||||
const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
|
|
||||||
|
|
||||||
// `asChild` allows the user to pass any element as the anchor
|
|
||||||
if (asChild && React.isValidElement(children)) {
|
|
||||||
return React.cloneElement(
|
|
||||||
children,
|
|
||||||
context.getReferenceProps({
|
|
||||||
ref,
|
|
||||||
...props,
|
|
||||||
...children.props,
|
|
||||||
"data-state": context.open ? "open" : "closed",
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
ref={ref}
|
|
||||||
data-state={context.open ? "open" : "closed"}
|
|
||||||
{...context.getReferenceProps(props as any)}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export const ModalContent = React.forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLProps<HTMLDivElement> & { fade?: boolean }
|
|
||||||
>(function ModalContent(props, propRef) {
|
|
||||||
const local = useLocal({ preview: false, timeout: null as any });
|
|
||||||
const { context: floatingContext, ...context } = useModalContext();
|
|
||||||
const ref = useMergeRefs([context.refs.setFloating, propRef]);
|
|
||||||
|
|
||||||
if (!floatingContext.open) return null;
|
|
||||||
const _props = { ...props };
|
|
||||||
if (typeof _props.fade !== "undefined") {
|
|
||||||
delete _props.fade;
|
|
||||||
}
|
|
||||||
|
|
||||||
const floatingDivProps = context.getFloatingProps(_props);
|
|
||||||
return (
|
|
||||||
<FloatingPortal>
|
|
||||||
<FloatingOverlay
|
|
||||||
className={cx(
|
|
||||||
"modal-overlay",
|
|
||||||
"flex items-center justify-center transition-all ",
|
|
||||||
css`
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
`,
|
|
||||||
local.preview ? "opacity-20 duration-1000" : "duration-300"
|
|
||||||
)}
|
|
||||||
lockScroll
|
|
||||||
>
|
|
||||||
<FloatingFocusManager context={floatingContext}>
|
|
||||||
<div
|
|
||||||
ref={ref}
|
|
||||||
onPointerMove={() => {
|
|
||||||
if (props.fade !== false) {
|
|
||||||
clearTimeout(local.timeout);
|
|
||||||
if (local.preview) {
|
|
||||||
local.preview = false;
|
|
||||||
local.render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onPointerLeave={(e) => {
|
|
||||||
// if (Object.keys(w.openedPopupID || {}).length > 0) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
|
|
||||||
if (props.fade !== false) {
|
|
||||||
clearTimeout(local.timeout);
|
|
||||||
local.timeout = setTimeout(() => {
|
|
||||||
local.preview = true;
|
|
||||||
local.render();
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
aria-labelledby={context.labelId}
|
|
||||||
aria-describedby={context.descriptionId}
|
|
||||||
{...floatingDivProps}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</div>
|
|
||||||
</FloatingFocusManager>
|
|
||||||
</FloatingOverlay>
|
|
||||||
</FloatingPortal>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export const ModalHeading = React.forwardRef<
|
|
||||||
HTMLHeadingElement,
|
|
||||||
React.HTMLProps<HTMLHeadingElement>
|
|
||||||
>(function ModalHeading({ children, ...props }, ref) {
|
|
||||||
const { setLabelId } = useModalContext();
|
|
||||||
const id = useId();
|
|
||||||
|
|
||||||
// Only sets `aria-labelledby` on the Modal root element
|
|
||||||
// if this component is mounted inside it.
|
|
||||||
React.useLayoutEffect(() => {
|
|
||||||
setLabelId(id);
|
|
||||||
return () => setLabelId(undefined);
|
|
||||||
}, [id, setLabelId]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<h2 {...props} ref={ref} id={id}>
|
|
||||||
{children}
|
|
||||||
</h2>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export const ModalDescription = React.forwardRef<
|
|
||||||
HTMLParagraphElement,
|
|
||||||
React.HTMLProps<HTMLParagraphElement>
|
|
||||||
>(function ModalDescription({ children, ...props }, ref) {
|
|
||||||
const { setDescriptionId } = useModalContext();
|
|
||||||
const id = useId();
|
|
||||||
|
|
||||||
// Only sets `aria-describedby` on the Modal root element
|
|
||||||
// if this component is mounted inside it.
|
|
||||||
React.useLayoutEffect(() => {
|
|
||||||
setDescriptionId(id);
|
|
||||||
return () => setDescriptionId(undefined);
|
|
||||||
}, [id, setDescriptionId]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<p {...props} ref={ref} id={id}>
|
|
||||||
{children}
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export const ModalClose = React.forwardRef<
|
|
||||||
HTMLButtonElement,
|
|
||||||
React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
||||||
>(function ModalClose(props, ref) {
|
|
||||||
const { setOpen } = useModalContext();
|
|
||||||
return (
|
|
||||||
<button type="button" {...props} ref={ref} onClick={() => setOpen(false)} />
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
@ -49,6 +49,13 @@ export const FilterContent: FC<{
|
||||||
}
|
}
|
||||||
.field-outer {
|
.field-outer {
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
|
|
||||||
|
border: 1px solid #cecece;
|
||||||
|
|
||||||
|
&.focused {
|
||||||
|
border: 1px solid #1c4ed8;
|
||||||
|
outline: 1px solid #1c4ed8;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-all {
|
.search-all {
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,11 @@ import { generateSelect } from "../../md/gen/md-select";
|
||||||
import { newField } from "./fields";
|
import { newField } from "./fields";
|
||||||
import { get_rel_many } from "./get_rel_many";
|
import { get_rel_many } from "./get_rel_many";
|
||||||
import { on_load } from "./on_load";
|
import { on_load } from "./on_load";
|
||||||
|
import { genFormOnLoad } from "./gen-form/on-load";
|
||||||
|
import { genFormOnSubmit } from "./gen-form/on-submit";
|
||||||
|
import { genFormOnInit } from "./gen-form/on-init";
|
||||||
|
import { genFormSubmit } from "./gen-form/submit";
|
||||||
|
import { walkGenForm } from "./walker";
|
||||||
|
|
||||||
export const generateForm = async (
|
export const generateForm = async (
|
||||||
_: any,
|
_: any,
|
||||||
|
|
@ -47,209 +52,15 @@ export const generateForm = async (
|
||||||
}
|
}
|
||||||
|
|
||||||
if (pk) {
|
if (pk) {
|
||||||
|
const gen_form_args = { result, pk, pks, table, select, is_md, rel_many };
|
||||||
if (data["on_load"]) {
|
if (data["on_load"]) {
|
||||||
result.on_load = {
|
genFormOnLoad(gen_form_args);
|
||||||
mode: "raw",
|
|
||||||
value: on_load({
|
|
||||||
pk,
|
|
||||||
table,
|
|
||||||
select,
|
|
||||||
pks,
|
|
||||||
opt: is_md
|
|
||||||
? {
|
|
||||||
after_load: `\
|
|
||||||
if (typeof md === "object") {
|
|
||||||
opt.fm.status = "ready";
|
|
||||||
md.selected = opt.fm.data;
|
|
||||||
if (!md.selected) {
|
|
||||||
md.tab.active = "master";
|
|
||||||
alert("Data Not Found");
|
|
||||||
md.params.apply();
|
|
||||||
}
|
|
||||||
md.header.render();
|
|
||||||
md.render();
|
|
||||||
}`,
|
|
||||||
is_md: true,
|
|
||||||
}
|
|
||||||
: { is_md },
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
if (data["on_submit"]) {
|
if (data["on_submit"]) {
|
||||||
result.on_submit = {
|
genFormOnSubmit(gen_form_args);
|
||||||
mode: "raw",
|
|
||||||
value: `\
|
|
||||||
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>;
|
|
||||||
|
|
||||||
const relation_ref = ${JSON.stringify(rel_many)};
|
|
||||||
const has_many = [] as Array<{
|
|
||||||
table: string;
|
|
||||||
data: Array<any>;
|
|
||||||
fk: string;
|
|
||||||
}>;
|
|
||||||
|
|
||||||
|
|
||||||
// validasi
|
|
||||||
fm.error.clear();
|
|
||||||
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;
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
|
|
||||||
call_prasi_events("form", "before_save", [fm, data]);
|
|
||||||
|
|
||||||
// pisahkan antara has_many dengan field biasa
|
|
||||||
for (const [k, v] of Object.entries(data) as any) {
|
|
||||||
if (Array.isArray(v)) {
|
|
||||||
const rel =
|
|
||||||
Array.isArray(relation_ref) && relation_ref.length
|
|
||||||
? relation_ref.find((e) => e.table === k)
|
|
||||||
: null;
|
|
||||||
if (rel) {
|
|
||||||
has_many.push({
|
|
||||||
table: k,
|
|
||||||
data: v,
|
|
||||||
fk: rel.fk,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
record[k] = v;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// prisma create / update ga boleh ada record.${pk}
|
|
||||||
if (record) delete record.${pk};
|
|
||||||
|
|
||||||
if (form.${pk}) {
|
|
||||||
await db.${table}.update({
|
|
||||||
where: {
|
|
||||||
${pk}: form.${pk},
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
...record,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
const res = await db.${table}.create({
|
|
||||||
//@ts-ignore
|
|
||||||
data: {
|
|
||||||
...record,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (res) {
|
|
||||||
form.id = res.id;
|
|
||||||
fm.is_newly_created = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (has_many.length) {
|
|
||||||
const exec_query_bulk = async (
|
|
||||||
current: { table: string; data: Array<any>; fk: string },
|
|
||||||
list: Array<{ table: string; data: Array<any>; fk: string }>,
|
|
||||||
index: number,
|
|
||||||
) => {
|
|
||||||
if (list.length) {
|
|
||||||
const data = current.data.map((e) => {
|
|
||||||
const record = {
|
|
||||||
...e,
|
|
||||||
${table}: {
|
|
||||||
connect: {
|
|
||||||
${pk}: form.${pk},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
call_prasi_events("form", "before_save", [fm, record]);
|
|
||||||
|
|
||||||
return record;
|
|
||||||
});
|
|
||||||
await db._batch.upsert({
|
|
||||||
table: current.table,
|
|
||||||
where: {
|
|
||||||
[current.fk]: form.${pk},
|
|
||||||
},
|
|
||||||
data: data,
|
|
||||||
mode: "relation",
|
|
||||||
} as any);
|
|
||||||
|
|
||||||
if (list.length > 1) {
|
|
||||||
try {
|
|
||||||
index++;
|
|
||||||
if (index <= list.length - 1) {
|
|
||||||
await exec_query_bulk(list[index], list, index);
|
|
||||||
}
|
|
||||||
} catch (ex) {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
await exec_query_bulk(has_many[0], has_many, 0);
|
|
||||||
}
|
|
||||||
result = true;
|
|
||||||
|
|
||||||
call_prasi_events("form", "after_save", [fm, data]);
|
|
||||||
|
|
||||||
${
|
|
||||||
is_md &&
|
|
||||||
`if (typeof md !== "undefined") {
|
|
||||||
fm.status = "ready";
|
|
||||||
fm.data = form;
|
|
||||||
md.selected = form;
|
|
||||||
md.render();
|
|
||||||
fm.render();
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
result = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
type IForm = { form: any; error: Record<string, string>; fm: FMLocal }
|
|
||||||
`,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
if (typeof is_md === "boolean" && is_md) {
|
if (typeof is_md === "boolean" && is_md) {
|
||||||
result.on_init = {
|
genFormOnInit(gen_form_args);
|
||||||
mode: "raw",
|
|
||||||
value: `\
|
|
||||||
({ submit, reload, fm }: Init) => {
|
|
||||||
// on init
|
|
||||||
if (!isEditor) {
|
|
||||||
if (typeof md === "object") {
|
|
||||||
md.childs["form"] = {
|
|
||||||
fm: fm
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
type Init = { submit: () => Promise<boolean>; reload: () => void; fm: FMLocal }
|
|
||||||
`,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
const child_fields = [];
|
const child_fields = [];
|
||||||
for (const item of fields.filter((e) => !e.is_pk)) {
|
for (const item of fields.filter((e) => !e.is_pk)) {
|
||||||
|
|
@ -262,175 +73,8 @@ type IForm = { form: any; error: Record<string, string>; fm: FMLocal }
|
||||||
}
|
}
|
||||||
let submit = null;
|
let submit = null;
|
||||||
if (typeof is_md === "boolean" && !is_md)
|
if (typeof is_md === "boolean" && !is_md)
|
||||||
submit = {
|
submit = genFormSubmit(gen_form_args);
|
||||||
id: createId(),
|
|
||||||
dim: { h: "fit", w: "full", hUnit: "px", wUnit: "px" },
|
|
||||||
name: "submit",
|
|
||||||
type: "item",
|
|
||||||
adv: {
|
|
||||||
css: "",
|
|
||||||
js: '<>\n {\n /** if */\n fm.status === "ready" ? (\n /** then */\n <div {...props} className={cx(props.className, "")}>\n {children}\n </div>\n ) : (\n /** else */\n <div {...props} className={cx(props.className, "")}>\n <FieldLoading />\n </div>\n )\n }\n</>',
|
|
||||||
jsBuilt:
|
|
||||||
'render(/* @__PURE__ */ React.createElement(\n React.Fragment,\n null,\n /** if */\n fm.status === "ready" ? (\n /** then */\n /* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children)\n ) : (\n /** else */\n /* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, /* @__PURE__ */ React.createElement(FieldLoading, null))\n )\n));\n',
|
|
||||||
},
|
|
||||||
childs: [
|
|
||||||
{
|
|
||||||
id: createId(),
|
|
||||||
dim: { h: "fit", w: "fit", hUnit: "px", wUnit: "px" },
|
|
||||||
name: "bottom",
|
|
||||||
type: "item",
|
|
||||||
childs: [
|
|
||||||
{
|
|
||||||
id: createId(),
|
|
||||||
adv: {
|
|
||||||
js: '<Button\n {...props}\n onClick={(e) => {\n console.log(isEditor);\n if (!isEditor) on_click(e);\n }}\n variant={variant !== "primary" ? variant : undefined}\n size={size !== "default" ? size : undefined}\n>\n {label}\n</Button>',
|
|
||||||
css: "& {\n display: flex;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n\n &:hover {\n cursor: pointer;\n\n\n\n\n\n // &.mobile {}\n // &.desktop {}\n // &:hover {}\n }\n}",
|
|
||||||
jsBuilt:
|
|
||||||
'render(/* @__PURE__ */ React.createElement(\n Button,\n {\n ...props,\n onClick: (e) => {\n console.log(isEditor);\n if (!isEditor)\n on_click(e);\n },\n variant: variant !== "primary" ? variant : void 0,\n size: size !== "default" ? size : void 0\n },\n label\n));\n',
|
|
||||||
},
|
|
||||||
dim: { h: "full", w: "full" },
|
|
||||||
name: "button",
|
|
||||||
type: "item",
|
|
||||||
childs: [],
|
|
||||||
mobile: { linktag: {} },
|
|
||||||
script: {
|
|
||||||
props: {
|
|
||||||
size: { value: ' "default";\n' },
|
|
||||||
variant: { value: ' "primary";\n' },
|
|
||||||
on_click: {
|
|
||||||
value:
|
|
||||||
" (e) => {\n e.preventDefault();\n e.stopPropagation();\n fm.submit();\n};\n",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
component: {
|
|
||||||
id: "a15d152d-0118-408f-89f1-f6b2dfbd2e05",
|
|
||||||
props: {
|
|
||||||
size: {
|
|
||||||
idx: 5,
|
|
||||||
meta: {
|
|
||||||
type: "option",
|
|
||||||
options: '["default", "sm", "lg", "icon","nosize"]',
|
|
||||||
optionsBuilt:
|
|
||||||
' ["default", "sm", "lg", "icon", "nosize"];\n',
|
|
||||||
},
|
|
||||||
name: "prop_5",
|
|
||||||
type: "string",
|
|
||||||
value: '"default"',
|
|
||||||
valueBuilt: ' "default";\n',
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
idx: 1,
|
|
||||||
meta: { type: "content-element" },
|
|
||||||
name: "prop_1",
|
|
||||||
type: "string",
|
|
||||||
value: '"hello"',
|
|
||||||
content: {
|
|
||||||
id: createId(),
|
|
||||||
adv: {
|
|
||||||
js: '<div {...props} className={cx(props.className, "")}>\n {children}\n</div>',
|
|
||||||
css: "",
|
|
||||||
jsBuilt:
|
|
||||||
'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children));\n',
|
|
||||||
},
|
|
||||||
dim: { h: "full", w: "full" },
|
|
||||||
name: "label",
|
|
||||||
type: "item",
|
|
||||||
childs: [
|
|
||||||
{
|
|
||||||
id: createId(),
|
|
||||||
name: "Wrapped",
|
|
||||||
type: "item",
|
|
||||||
childs: [
|
|
||||||
{
|
|
||||||
id: createId(),
|
|
||||||
adv: {
|
|
||||||
js: '<div {...props} className={cx(props.className, "")}>\n <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="2"><path d="M16 21v-2c0-1.886 0-2.828-.586-3.414C14.828 15 13.886 15 12 15h-1c-1.886 0-2.828 0-3.414.586C7 16.172 7 17.114 7 19v2" /><path strokeLinecap="round" d="M7 8h5" /><path d="M3 9c0-2.828 0-4.243.879-5.121C4.757 3 6.172 3 9 3h7.172c.408 0 .613 0 .796.076c.184.076.329.22.618.51l2.828 2.828c.29.29.434.434.51.618c.076.183.076.388.076.796V15c0 2.828 0 4.243-.879 5.121C19.243 21 17.828 21 15 21H9c-2.828 0-4.243 0-5.121-.879C3 19.243 3 17.828 3 15z" /></g></svg>\n</div>',
|
|
||||||
css: "",
|
|
||||||
jsBuilt:
|
|
||||||
'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("g", { fill: "none", stroke: "currentColor", "strokeWidth": "2" }, /* @__PURE__ */ React.createElement("path", { d: "M16 21v-2c0-1.886 0-2.828-.586-3.414C14.828 15 13.886 15 12 15h-1c-1.886 0-2.828 0-3.414.586C7 16.172 7 17.114 7 19v2" }), /* @__PURE__ */ React.createElement("path", { "strokeLinecap": "round", d: "M7 8h5" }), /* @__PURE__ */ React.createElement("path", { d: "M3 9c0-2.828 0-4.243.879-5.121C4.757 3 6.172 3 9 3h7.172c.408 0 .613 0 .796.076c.184.076.329.22.618.51l2.828 2.828c.29.29.434.434.51.618c.076.183.076.388.076.796V15c0 2.828 0 4.243-.879 5.121C19.243 21 17.828 21 15 21H9c-2.828 0-4.243 0-5.121-.879C3 19.243 3 17.828 3 15z" })))));\n',
|
|
||||||
},
|
|
||||||
dim: { h: "full", w: "full" },
|
|
||||||
html: "aadd",
|
|
||||||
name: "new_text",
|
|
||||||
text: "",
|
|
||||||
type: "text",
|
|
||||||
layout: { dir: "col", gap: 0, align: "center" },
|
|
||||||
script: {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: createId(),
|
|
||||||
adv: {
|
|
||||||
js: '<div {...props} className={cx(props.className, "")}>\n Save\n</div>',
|
|
||||||
css: "",
|
|
||||||
jsBuilt:
|
|
||||||
'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, "Save"));\n',
|
|
||||||
},
|
|
||||||
dim: { h: "full", w: "full" },
|
|
||||||
name: "new_item",
|
|
||||||
type: "item",
|
|
||||||
childs: [],
|
|
||||||
script: {},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
layout: {
|
|
||||||
dir: "row",
|
|
||||||
gap: 10,
|
|
||||||
wrap: "flex-nowrap",
|
|
||||||
align: "top-left",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
hidden: false,
|
|
||||||
layout: {
|
|
||||||
dir: "col",
|
|
||||||
gap: 0,
|
|
||||||
wrap: "flex-nowrap",
|
|
||||||
align: "center",
|
|
||||||
},
|
|
||||||
script: {},
|
|
||||||
},
|
|
||||||
valueBuilt: '"hello"',
|
|
||||||
},
|
|
||||||
variant: {
|
|
||||||
idx: 3,
|
|
||||||
meta: {
|
|
||||||
type: "option",
|
|
||||||
options:
|
|
||||||
'["primary", "secondary", "outline", "ghost", "link", "destructive"]',
|
|
||||||
option_mode: "button",
|
|
||||||
optionsBuilt:
|
|
||||||
' ["primary", "secondary", "outline", "ghost", "link", "destructive"];\n',
|
|
||||||
},
|
|
||||||
name: "prop_3",
|
|
||||||
type: "string",
|
|
||||||
value: '"primary"',
|
|
||||||
valueBuilt: ' "primary";\n',
|
|
||||||
},
|
|
||||||
on_click: {
|
|
||||||
idx: 1,
|
|
||||||
meta: { type: "text" },
|
|
||||||
name: "prop_1",
|
|
||||||
type: "string",
|
|
||||||
value:
|
|
||||||
"(e) => {\n e.preventDefault();\n e.stopPropagation();\n fm.submit();\n}",
|
|
||||||
valueBuilt:
|
|
||||||
" (e) => {\n e.preventDefault();\n e.stopPropagation();\n fm.submit();\n};\n",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
layout: {
|
|
||||||
dir: "col",
|
|
||||||
gap: 0,
|
|
||||||
wrap: "flex-nowrap",
|
|
||||||
align: "center",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
padding: { b: 10, l: 10, r: 10, t: 10 },
|
|
||||||
};
|
|
||||||
const body_prop = {
|
const body_prop = {
|
||||||
adv: {
|
adv: {
|
||||||
js: "<div\n {...props}\n className={cx(\n props.className,\n css`\n align-content: start;`,\n )}\n>\n {children}\n</div>",
|
js: "<div\n {...props}\n className={cx(\n props.className,\n css`\n align-content: start;`,\n )}\n>\n {children}\n</div>",
|
||||||
|
|
@ -448,7 +92,11 @@ type IForm = { form: any; error: Record<string, string>; fm: FMLocal }
|
||||||
align: "top-left",
|
align: "top-left",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const child_body = createItem({
|
const existing_childs = (
|
||||||
|
(item.component?.props.body as any)?.content as IItem
|
||||||
|
).childs;
|
||||||
|
|
||||||
|
let child_body = createItem({
|
||||||
name: "item",
|
name: "item",
|
||||||
...body_prop,
|
...body_prop,
|
||||||
childs: [
|
childs: [
|
||||||
|
|
@ -476,6 +124,11 @@ type IForm = { form: any; error: Record<string, string>; fm: FMLocal }
|
||||||
submit,
|
submit,
|
||||||
].filter((e) => e),
|
].filter((e) => e),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (Array.isArray(existing_childs) && existing_childs.length > 0) {
|
||||||
|
walkGenForm(child_body, existing_childs as any);
|
||||||
|
}
|
||||||
|
|
||||||
if (commit) {
|
if (commit) {
|
||||||
Object.keys(result).map((e) => {
|
Object.keys(result).map((e) => {
|
||||||
item.edit.setProp(e, result[e]);
|
item.edit.setProp(e, result[e]);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { GenFormArgs } from "./types";
|
||||||
|
|
||||||
|
export const genFormOnInit = ({
|
||||||
|
result,
|
||||||
|
pk,
|
||||||
|
pks,
|
||||||
|
table,
|
||||||
|
select,
|
||||||
|
is_md,
|
||||||
|
}: GenFormArgs) => {
|
||||||
|
result.on_init = {
|
||||||
|
mode: "raw",
|
||||||
|
value: `\
|
||||||
|
({ submit, reload, fm }: Init) => {
|
||||||
|
// on init
|
||||||
|
if (!isEditor) {
|
||||||
|
if (typeof md === "object") {
|
||||||
|
md.childs["form"] = {
|
||||||
|
fm: fm
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
type Init = { submit: () => Promise<boolean>; reload: () => void; fm: FMLocal }
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { on_load } from "../on_load";
|
||||||
|
import { GenFormArgs } from "./types";
|
||||||
|
|
||||||
|
export const genFormOnLoad = ({
|
||||||
|
result,
|
||||||
|
pk,
|
||||||
|
pks,
|
||||||
|
table,
|
||||||
|
select,
|
||||||
|
is_md,
|
||||||
|
}: GenFormArgs) => {
|
||||||
|
result.on_load = {
|
||||||
|
mode: "raw",
|
||||||
|
value: on_load({
|
||||||
|
pk,
|
||||||
|
table,
|
||||||
|
select,
|
||||||
|
pks,
|
||||||
|
opt: is_md
|
||||||
|
? {
|
||||||
|
after_load: `\
|
||||||
|
if (typeof md === "object") {
|
||||||
|
opt.fm.status = "ready";
|
||||||
|
md.selected = opt.fm.data;
|
||||||
|
if (!md.selected) {
|
||||||
|
md.tab.active = "master";
|
||||||
|
alert("Data Not Found");
|
||||||
|
md.params.apply();
|
||||||
|
}
|
||||||
|
md.header.render();
|
||||||
|
md.render();
|
||||||
|
}`,
|
||||||
|
is_md: true,
|
||||||
|
}
|
||||||
|
: { is_md },
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
import { GenFormArgs } from "./types";
|
||||||
|
|
||||||
|
export const genFormOnSubmit = ({
|
||||||
|
result,
|
||||||
|
pk,
|
||||||
|
pks,
|
||||||
|
table,
|
||||||
|
select,
|
||||||
|
is_md,
|
||||||
|
rel_many
|
||||||
|
}: GenFormArgs) => {
|
||||||
|
result.on_submit = {
|
||||||
|
mode: "raw",
|
||||||
|
value: `\
|
||||||
|
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>;
|
||||||
|
|
||||||
|
const relation_ref = ${JSON.stringify(rel_many)};
|
||||||
|
const has_many = [] as Array<{
|
||||||
|
table: string;
|
||||||
|
data: Array<any>;
|
||||||
|
fk: string;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
|
||||||
|
// validasi
|
||||||
|
fm.error.clear();
|
||||||
|
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;
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
|
||||||
|
call_prasi_events("form", "before_save", [fm, data]);
|
||||||
|
|
||||||
|
// pisahkan antara has_many dengan field biasa
|
||||||
|
for (const [k, v] of Object.entries(data) as any) {
|
||||||
|
if (Array.isArray(v)) {
|
||||||
|
const rel =
|
||||||
|
Array.isArray(relation_ref) && relation_ref.length
|
||||||
|
? relation_ref.find((e) => e.table === k)
|
||||||
|
: null;
|
||||||
|
if (rel) {
|
||||||
|
has_many.push({
|
||||||
|
table: k,
|
||||||
|
data: v,
|
||||||
|
fk: rel.fk,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
record[k] = v;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// prisma create / update ga boleh ada record.${pk}
|
||||||
|
if (record) delete record.${pk};
|
||||||
|
|
||||||
|
if (form.${pk}) {
|
||||||
|
await db.${table}.update({
|
||||||
|
where: {
|
||||||
|
${pk}: form.${pk},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
...record,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const res = await db.${table}.create({
|
||||||
|
//@ts-ignore
|
||||||
|
data: {
|
||||||
|
...record,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res) {
|
||||||
|
form.id = res.id;
|
||||||
|
fm.is_newly_created = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (has_many.length) {
|
||||||
|
const exec_query_bulk = async (
|
||||||
|
current: { table: string; data: Array<any>; fk: string },
|
||||||
|
list: Array<{ table: string; data: Array<any>; fk: string }>,
|
||||||
|
index: number,
|
||||||
|
) => {
|
||||||
|
if (list.length) {
|
||||||
|
const data = current.data.map((e) => {
|
||||||
|
const record = {
|
||||||
|
...e,
|
||||||
|
${table}: {
|
||||||
|
connect: {
|
||||||
|
${pk}: form.${pk},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
call_prasi_events("form", "before_save", [fm, record]);
|
||||||
|
|
||||||
|
return record;
|
||||||
|
});
|
||||||
|
await db._batch.upsert({
|
||||||
|
table: current.table,
|
||||||
|
where: {
|
||||||
|
[current.fk]: form.${pk},
|
||||||
|
},
|
||||||
|
data: data,
|
||||||
|
mode: "relation",
|
||||||
|
} as any);
|
||||||
|
|
||||||
|
if (list.length > 1) {
|
||||||
|
try {
|
||||||
|
index++;
|
||||||
|
if (index <= list.length - 1) {
|
||||||
|
await exec_query_bulk(list[index], list, index);
|
||||||
|
}
|
||||||
|
} catch (ex) {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
await exec_query_bulk(has_many[0], has_many, 0);
|
||||||
|
}
|
||||||
|
result = true;
|
||||||
|
|
||||||
|
call_prasi_events("form", "after_save", [fm, data]);
|
||||||
|
|
||||||
|
${
|
||||||
|
is_md &&
|
||||||
|
`if (typeof md !== "undefined") {
|
||||||
|
fm.status = "ready";
|
||||||
|
fm.data = form;
|
||||||
|
md.selected = form;
|
||||||
|
md.render();
|
||||||
|
fm.render();
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
result = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IForm = { form: any; error: Record<string, string>; fm: FMLocal }
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,174 @@
|
||||||
|
import { createId } from "@paralleldrive/cuid2";
|
||||||
|
import { GenFormArgs } from "./types";
|
||||||
|
|
||||||
|
export const genFormSubmit = ({}: GenFormArgs) => {
|
||||||
|
return {
|
||||||
|
id: createId(),
|
||||||
|
dim: { h: "fit", w: "full", hUnit: "px", wUnit: "px" },
|
||||||
|
name: "submit",
|
||||||
|
type: "item",
|
||||||
|
adv: {
|
||||||
|
css: "",
|
||||||
|
js: '<>\n {\n /** if */\n fm.status === "ready" ? (\n /** then */\n <div {...props} className={cx(props.className, "")}>\n {children}\n </div>\n ) : (\n /** else */\n <div {...props} className={cx(props.className, "")}>\n <FieldLoading />\n </div>\n )\n }\n</>',
|
||||||
|
jsBuilt:
|
||||||
|
'render(/* @__PURE__ */ React.createElement(\n React.Fragment,\n null,\n /** if */\n fm.status === "ready" ? (\n /** then */\n /* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children)\n ) : (\n /** else */\n /* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, /* @__PURE__ */ React.createElement(FieldLoading, null))\n )\n));\n',
|
||||||
|
},
|
||||||
|
childs: [
|
||||||
|
{
|
||||||
|
id: createId(),
|
||||||
|
dim: { h: "fit", w: "fit", hUnit: "px", wUnit: "px" },
|
||||||
|
name: "bottom",
|
||||||
|
type: "item",
|
||||||
|
childs: [
|
||||||
|
{
|
||||||
|
id: createId(),
|
||||||
|
adv: {
|
||||||
|
js: '<Button\n {...props}\n onClick={(e) => {\n console.log(isEditor);\n if (!isEditor) on_click(e);\n }}\n variant={variant !== "primary" ? variant : undefined}\n size={size !== "default" ? size : undefined}\n>\n {label}\n</Button>',
|
||||||
|
css: "& {\n display: flex;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n\n &:hover {\n cursor: pointer;\n\n\n\n\n\n // &.mobile {}\n // &.desktop {}\n // &:hover {}\n }\n}",
|
||||||
|
jsBuilt:
|
||||||
|
'render(/* @__PURE__ */ React.createElement(\n Button,\n {\n ...props,\n onClick: (e) => {\n console.log(isEditor);\n if (!isEditor)\n on_click(e);\n },\n variant: variant !== "primary" ? variant : void 0,\n size: size !== "default" ? size : void 0\n },\n label\n));\n',
|
||||||
|
},
|
||||||
|
dim: { h: "full", w: "full" },
|
||||||
|
name: "button",
|
||||||
|
type: "item",
|
||||||
|
childs: [],
|
||||||
|
mobile: { linktag: {} },
|
||||||
|
script: {
|
||||||
|
props: {
|
||||||
|
size: { value: ' "default";\n' },
|
||||||
|
variant: { value: ' "primary";\n' },
|
||||||
|
on_click: {
|
||||||
|
value:
|
||||||
|
" (e) => {\n e.preventDefault();\n e.stopPropagation();\n fm.submit();\n};\n",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
component: {
|
||||||
|
id: "a15d152d-0118-408f-89f1-f6b2dfbd2e05",
|
||||||
|
props: {
|
||||||
|
size: {
|
||||||
|
idx: 5,
|
||||||
|
meta: {
|
||||||
|
type: "option",
|
||||||
|
options: '["default", "sm", "lg", "icon","nosize"]',
|
||||||
|
optionsBuilt:
|
||||||
|
' ["default", "sm", "lg", "icon", "nosize"];\n',
|
||||||
|
},
|
||||||
|
name: "prop_5",
|
||||||
|
type: "string",
|
||||||
|
value: '"default"',
|
||||||
|
valueBuilt: ' "default";\n',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
idx: 1,
|
||||||
|
meta: { type: "content-element" },
|
||||||
|
name: "prop_1",
|
||||||
|
type: "string",
|
||||||
|
value: '"hello"',
|
||||||
|
content: {
|
||||||
|
id: createId(),
|
||||||
|
adv: {
|
||||||
|
js: '<div {...props} className={cx(props.className, "")}>\n {children}\n</div>',
|
||||||
|
css: "",
|
||||||
|
jsBuilt:
|
||||||
|
'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, children));\n',
|
||||||
|
},
|
||||||
|
dim: { h: "full", w: "full" },
|
||||||
|
name: "label",
|
||||||
|
type: "item",
|
||||||
|
childs: [
|
||||||
|
{
|
||||||
|
id: createId(),
|
||||||
|
name: "Wrapped",
|
||||||
|
type: "item",
|
||||||
|
childs: [
|
||||||
|
{
|
||||||
|
id: createId(),
|
||||||
|
adv: {
|
||||||
|
js: '<div {...props} className={cx(props.className, "")}>\n <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="2"><path d="M16 21v-2c0-1.886 0-2.828-.586-3.414C14.828 15 13.886 15 12 15h-1c-1.886 0-2.828 0-3.414.586C7 16.172 7 17.114 7 19v2" /><path strokeLinecap="round" d="M7 8h5" /><path d="M3 9c0-2.828 0-4.243.879-5.121C4.757 3 6.172 3 9 3h7.172c.408 0 .613 0 .796.076c.184.076.329.22.618.51l2.828 2.828c.29.29.434.434.51.618c.076.183.076.388.076.796V15c0 2.828 0 4.243-.879 5.121C19.243 21 17.828 21 15 21H9c-2.828 0-4.243 0-5.121-.879C3 19.243 3 17.828 3 15z" /></g></svg>\n</div>',
|
||||||
|
css: "",
|
||||||
|
jsBuilt:
|
||||||
|
'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("g", { fill: "none", stroke: "currentColor", "strokeWidth": "2" }, /* @__PURE__ */ React.createElement("path", { d: "M16 21v-2c0-1.886 0-2.828-.586-3.414C14.828 15 13.886 15 12 15h-1c-1.886 0-2.828 0-3.414.586C7 16.172 7 17.114 7 19v2" }), /* @__PURE__ */ React.createElement("path", { "strokeLinecap": "round", d: "M7 8h5" }), /* @__PURE__ */ React.createElement("path", { d: "M3 9c0-2.828 0-4.243.879-5.121C4.757 3 6.172 3 9 3h7.172c.408 0 .613 0 .796.076c.184.076.329.22.618.51l2.828 2.828c.29.29.434.434.51.618c.076.183.076.388.076.796V15c0 2.828 0 4.243-.879 5.121C19.243 21 17.828 21 15 21H9c-2.828 0-4.243 0-5.121-.879C3 19.243 3 17.828 3 15z" })))));\n',
|
||||||
|
},
|
||||||
|
dim: { h: "full", w: "full" },
|
||||||
|
html: "aadd",
|
||||||
|
name: "new_text",
|
||||||
|
text: "",
|
||||||
|
type: "text",
|
||||||
|
layout: { dir: "col", gap: 0, align: "center" },
|
||||||
|
script: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: createId(),
|
||||||
|
adv: {
|
||||||
|
js: '<div {...props} className={cx(props.className, "")}>\n Save\n</div>',
|
||||||
|
css: "",
|
||||||
|
jsBuilt:
|
||||||
|
'render(/* @__PURE__ */ React.createElement("div", { ...props, className: cx(props.className, "") }, "Save"));\n',
|
||||||
|
},
|
||||||
|
dim: { h: "full", w: "full" },
|
||||||
|
name: "new_item",
|
||||||
|
type: "item",
|
||||||
|
childs: [],
|
||||||
|
script: {},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
layout: {
|
||||||
|
dir: "row",
|
||||||
|
gap: 10,
|
||||||
|
wrap: "flex-nowrap",
|
||||||
|
align: "top-left",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
hidden: false,
|
||||||
|
layout: {
|
||||||
|
dir: "col",
|
||||||
|
gap: 0,
|
||||||
|
wrap: "flex-nowrap",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
script: {},
|
||||||
|
},
|
||||||
|
valueBuilt: '"hello"',
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
idx: 3,
|
||||||
|
meta: {
|
||||||
|
type: "option",
|
||||||
|
options:
|
||||||
|
'["primary", "secondary", "outline", "ghost", "link", "destructive"]',
|
||||||
|
option_mode: "button",
|
||||||
|
optionsBuilt:
|
||||||
|
' ["primary", "secondary", "outline", "ghost", "link", "destructive"];\n',
|
||||||
|
},
|
||||||
|
name: "prop_3",
|
||||||
|
type: "string",
|
||||||
|
value: '"primary"',
|
||||||
|
valueBuilt: ' "primary";\n',
|
||||||
|
},
|
||||||
|
on_click: {
|
||||||
|
idx: 1,
|
||||||
|
meta: { type: "text" },
|
||||||
|
name: "prop_1",
|
||||||
|
type: "string",
|
||||||
|
value:
|
||||||
|
"(e) => {\n e.preventDefault();\n e.stopPropagation();\n fm.submit();\n}",
|
||||||
|
valueBuilt:
|
||||||
|
" (e) => {\n e.preventDefault();\n e.stopPropagation();\n fm.submit();\n};\n",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
layout: {
|
||||||
|
dir: "col",
|
||||||
|
gap: 0,
|
||||||
|
wrap: "flex-nowrap",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
padding: { b: 10, l: 10, r: 10, t: 10 },
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
export type GenFormArgs = {
|
||||||
|
result: any;
|
||||||
|
pk: string;
|
||||||
|
pks: Record<string, string>;
|
||||||
|
table: string;
|
||||||
|
is_md: boolean;
|
||||||
|
select: any;
|
||||||
|
rel_many: {
|
||||||
|
table: string;
|
||||||
|
fk: string;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
export const walkGenForm = (
|
||||||
|
new_childs: IItem[],
|
||||||
|
existing_childs: PrasiItem[]
|
||||||
|
) => {
|
||||||
|
const fields = {} as Record<string, PrasiItem>;
|
||||||
|
|
||||||
|
for (const item of new_childs[0].childs) {
|
||||||
|
const name = item.component?.props?.name;
|
||||||
|
console.log(name);
|
||||||
|
}
|
||||||
|
// for (const item of existing_childs) {
|
||||||
|
// walk(item);
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
const walk = (item: IItem) => {
|
||||||
|
if (item.component?.id) {
|
||||||
|
console.log(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const child of item.childs) {
|
||||||
|
walk(child);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -43,7 +43,7 @@ export const generateMDForm = async (
|
||||||
name: "item",
|
name: "item",
|
||||||
childs: [],
|
childs: [],
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const tablelist: any = {
|
const tablelist: any = {
|
||||||
type: "item",
|
type: "item",
|
||||||
|
|
|
||||||
|
|
@ -12,10 +12,6 @@ export const Popover = lazify(
|
||||||
async () => (await import("@/comps/custom/Popover")).Popover
|
async () => (await import("@/comps/custom/Popover")).Popover
|
||||||
);
|
);
|
||||||
|
|
||||||
export const Modal = lazify(
|
|
||||||
async () => (await import("lib/comps/custom/Modal")).Modal
|
|
||||||
);
|
|
||||||
|
|
||||||
export const Typeahead = lazify(
|
export const Typeahead = lazify(
|
||||||
async () => (await import("@/comps/ui/typeahead")).Typeahead
|
async () => (await import("@/comps/ui/typeahead")).Typeahead
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue