This commit is contained in:
rizrmd 2024-06-18 01:05:34 -07:00
parent 46aeccc7f9
commit 287786e548
11 changed files with 203 additions and 118 deletions

View File

@ -13,7 +13,8 @@ export const FilterField: FC<{
name?: string; name?: string;
label?: string; label?: string;
type: FilterFieldType; type: FilterFieldType;
}> = ({ filter, name, label, type }) => { modifiers?: any[]
}> = ({ filter, name, label, type,modifiers }) => {
const internal = useLocal({ render_timeout: null as any }); const internal = useLocal({ render_timeout: null as any });
if (!name) return <>No Name</>; if (!name) return <>No Name</>;
if (!filter.form) return <div>Loading...</div>; if (!filter.form) return <div>Loading...</div>;
@ -88,6 +89,11 @@ export const FilterField: FC<{
onBlur(e) { onBlur(e) {
filter.form?.submit(); filter.form?.submit();
}, },
onChange(val) {
if (!val) {
filter.form?.submit();
}
},
}} }}
/> />
</div> </div>

View File

@ -83,7 +83,6 @@ export const TableEdit: FC<{
<TableList <TableList
row_height={(row) => { row_height={(row) => {
const rh = local.rowHeight.get(row); const rh = local.rowHeight.get(row);
console.log(rh);
if (rh) { if (rh) {
for (const div of Object.values(rh)) { for (const div of Object.values(rh)) {
if (div.offsetHeight > 50) return div.offsetHeight + 6; if (div.offsetHeight > 50) return div.offsetHeight + 6;

View File

@ -29,6 +29,7 @@ export type PropTypeInput = {
placeholder?: string; placeholder?: string;
onFocus?: (e: FocusEvent<HTMLDivElement>) => void; onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
onBlur?: (e: FocusEvent<HTMLDivElement>) => void; onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
onChange?: (val: string) => void;
}; };
const parse = parser.exportAsFunctionAny("en-US"); const parse = parser.exportAsFunctionAny("en-US");
@ -153,6 +154,10 @@ export const FieldTypeInput: FC<{
fm.data[field.name] = ev.currentTarget.value; fm.data[field.name] = ev.currentTarget.value;
} }
renderOnChange(); renderOnChange();
if (prop.onChange) {
prop.onChange(fm.data[field.name]);
}
}} }}
placeholder={prop.placeholder || arg.placeholder || ""} placeholder={prop.placeholder || arg.placeholder || ""}
value={value} value={value}

View File

@ -15,7 +15,7 @@ export const generateField = async (
| string | string
| { value: string; checked: string[] } | { value: string; checked: string[] }
)[]; )[];
if (["checkbox", "button"].includes(fieldType)) { if (["checkbox", "button", "typeahead"].includes(fieldType)) {
const fields = parseGenField(raw_fields); const fields = parseGenField(raw_fields);
const res = generateSelect(fields); const res = generateSelect(fields);
const master = fields.find( const master = fields.find(
@ -102,15 +102,15 @@ export const generateField = async (
let parent = {} as any; let parent = {} as any;
const fields = parseGenField(fm.props.gen_fields); const fields = parseGenField(fm.props.gen_fields);
const res = generateSelect(fields); const res = generateSelect(fields);
try { // try {
parent = { // parent = {
[fm.props.gen_table]: { // [fm.props.gen_table]: {
connect: { // connect: {
[res.pk]: fm.data.id || null, // [res.pk]: fm.data.id || null,
}, // },
}, // },
}; // };
} catch (e) {} // } catch (e) {}
fm.data[name] = selected.map((e) => { fm.data[name] = selected.map((e) => {
return { return {
${master.name}: { ${master.name}: {

View File

@ -49,7 +49,7 @@ type TableListProp = {
on_init: (arg?: any) => any; on_init: (arg?: any) => any;
mode: "table" | "list" | "grid" | "auto"; mode: "table" | "list" | "grid" | "auto";
_item: PrasiItem; _item: PrasiItem;
__props: any; __props?: any;
gen_fields: string[]; gen_fields: string[];
row_click: OnRowClick; row_click: OnRowClick;
selected: SelectedRow; selected: SelectedRow;
@ -416,6 +416,7 @@ export const TableList: FC<TableListProp> = ({
}, },
}); });
} }
if (mode === "list") { if (mode === "list") {
if (columns.length > 1) columns = columns.slice(0, 0 + 1); if (columns.length > 1) columns = columns.slice(0, 0 + 1);
} }
@ -457,6 +458,7 @@ export const TableList: FC<TableListProp> = ({
} }
} }
} }
if (typeof value !== "undefined") { if (typeof value !== "undefined") {
local.data = value; local.data = value;
local.status = "ready" as any; local.status = "ready" as any;
@ -484,6 +486,7 @@ export const TableList: FC<TableListProp> = ({
if (id_parent && local.pk && local.sort.columns.length === 0) { if (id_parent && local.pk && local.sort.columns.length === 0) {
data = sortTree(local.data, id_parent, local.pk.name); data = sortTree(local.data, id_parent, local.pk.name);
} }
if (mode === "table") { if (mode === "table") {
return ( return (
<div <div

View File

@ -53,7 +53,7 @@ export const generateTableList = async (
if (data["opt__on_load"]) { if (data["opt__on_load"]) {
result.opt__on_load = { result.opt__on_load = {
mode: "raw", mode: "raw",
value: on_load({ pk, table, select, pks,fields }), value: on_load({ pk, table, select, pks, fields }),
}; };
} }
let first = true; let first = true;
@ -64,7 +64,7 @@ export const generateTableList = async (
if (idx >= 1 && arg.mode === "list") { if (idx >= 1 && arg.mode === "list") {
return; return;
} }
if (e.is_pk && arg.mode === "table") return; if (e.is_pk && (arg.mode === "table" || arg.mode === "auto")) return;
let tree_depth = ""; let tree_depth = "";
let tree_depth_built = ""; let tree_depth_built = "";
if (first) { if (first) {
@ -91,7 +91,11 @@ export const generateTableList = async (
adv: { adv: {
js: `\ js: `\
<div {...props} className={cx(props.className, "")}> <div {...props} className={cx(props.className, "")}>
${arg.mode === "list" ? "{JSON.stringify(row)}" : `<FormatValue value={col.value} name={col.name} gen_fields={gen__fields} ${tree_depth} />`} ${
arg.mode === "list"
? "{JSON.stringify(row)}"
: `<FormatValue value={col.value} name={col.name} gen_fields={gen__fields} ${tree_depth} />`
}
</div>`, </div>`,
jsBuilt: `\ 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} }))); 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} })));

View File

@ -29,6 +29,10 @@ export const generateList = async (
mode: "string", mode: "string",
value: "", value: "",
}, },
mode: {
mode: "string",
value: "auto",
},
opt__row_click: { opt__row_click: {
mode: "raw", mode: "raw",
value: `\ value: `\
@ -101,7 +105,7 @@ idx: any;
async (props: any) => {}, async (props: any) => {},
props, props,
tablelist, tablelist,
{ mode: "table" }, { mode: "auto" },
false false
); );
tab_master?.edit.setProp("breadcrumb", { tab_master?.edit.setProp("breadcrumb", {
@ -119,7 +123,7 @@ idx: any;
} }
`, `,
}); });
tab_master?.edit.setChilds([ tab_master?.edit.setChilds([
{ {
type: "item", type: "item",

View File

@ -1,5 +1,5 @@
export const modeTableList = (mode: string) => { export const modeTableList = (mode: string) => {
let sub_name = "fields"; let sub_name = "tbl-col";
switch (mode) { switch (mode) {
case "table": case "table":
sub_name = "tbl-col"; sub_name = "tbl-col";

View File

@ -4,9 +4,9 @@ import { on_load } from "./on_load";
import { codeBuild } from "../master_detail/utils"; 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 (
@ -16,7 +16,7 @@ export const gen_table_list = async (
const select = {} as any; const select = {} as any;
let pk = ""; let pk = "";
let pks: Record<string, string> = {}; let pks: Record<string, string> = {};
const fields = parseGenField(raw_fields); const fields = parseGenField(raw_fields);
const result = {} as any; const result = {} as any;
for (const f of fields) { for (const f of fields) {
@ -56,6 +56,7 @@ export const gen_table_list = async (
let sub_name = "fields"; let sub_name = "fields";
switch (arg.mode) { switch (arg.mode) {
case "table": case "table":
case "auto":
sub_name = "tbl-col"; sub_name = "tbl-col";
break; break;
case "list": case "list":
@ -77,7 +78,8 @@ export const gen_table_list = async (
if (idx >= 1 && arg.mode === "list") { if (idx >= 1 && arg.mode === "list") {
return; return;
} }
if (e.is_pk && arg.mode === "table") return; if (e.is_pk && (arg.mode === "table" || arg.mode === "auto"))
return;
let tree_depth = ""; let tree_depth = "";
let tree_depth_built = ""; let tree_depth_built = "";
if (first) { if (first) {

View File

@ -5,7 +5,6 @@ import { gen_table_list } from "../gen_table_list/gen_table_list";
export const genList = async (arg: GenMasterDetailArg, data: any) => { export const genList = async (arg: GenMasterDetailArg, data: any) => {
for (const c of get(data, "child.content.childs") || []) { for (const c of get(data, "child.content.childs") || []) {
if (c.component?.id === "c68415ca-dac5-44fe-aeb6-936caf8cc491") { if (c.component?.id === "c68415ca-dac5-44fe-aeb6-936caf8cc491") {
const res = await codeBuild({ const res = await codeBuild({
row_click: `\ row_click: `\
({ row, rows, idx, event }: OnRowClick) => { ({ row, rows, idx, event }: OnRowClick) => {
@ -113,9 +112,10 @@ type ActionItem =
}, },
}) })
); );
const data = childs[0].component.props; const data = childs[0].component.props;
const modify = async (props: any) => {}; const modify = async (props: any) => {};
gen_table_list(modify, data, { mode: "table" }); gen_table_list(modify, data, { mode: "auto" });
} }
} }
}; };

View File

@ -39,7 +39,7 @@ const load_single = async (table: string) => {
} }
return single[table]; return single[table];
}; };
export const gen_prop_fields = async (gen_table: string) => { export const gen_prop_fields = async (gen_table: string, depth?: number) => {
if (typeof db === "undefined") return ["- No Database -"]; if (typeof db === "undefined") return ["- No Database -"];
const path = window.location.pathname; const path = window.location.pathname;
@ -51,98 +51,103 @@ export const gen_prop_fields = async (gen_table: string) => {
} }
const schema = getSchemaOnStorage(id_site, gen_table); const schema = getSchemaOnStorage(id_site, gen_table);
if (!schema) { if (!schema) {
const result: { // const result: {
label: string; // label: string;
value: string; // value: string;
options?: any[]; // options?: any[];
checked?: boolean; // checked?: boolean;
}[] = []; // }[] = [];
const { cols, rels } = await load_single(gen_table); const result = await load_layer_schema(
if (cols) { typeof depth === "undefined" ? 3 : depth,
for (const [k, v] of Object.entries(cols) as any) { {},
result.push({ gen_table
value: JSON.stringify({ );
name: k, // const { cols, rels } = await load_single(gen_table);
is_pk: v.is_pk, // if (cols) {
type: v.db_type || v.type, // for (const [k, v] of Object.entries(cols) as any) {
optional: v.optional, // result.push({
}), // value: JSON.stringify({
label: k, // name: k,
checked: v.is_pk, // is_pk: v.is_pk,
}); // type: v.db_type || v.type,
} // optional: v.optional,
} // }),
if (rels) { // label: k,
for (const [k, v] of Object.entries(rels)) { // checked: v.is_pk,
let options = []; // });
const to = v.to; // }
const from = v.from; // }
const parent_name = k; // if (rels) {
const parent_rel = v; // for (const [k, v] of Object.entries(rels)) {
if (to) { // let options = [] as any;
const { cols, rels } = await load_single(to.table); // const to = v.to;
if (cols) { // const from = v.from;
for (const [k, v] of Object.entries(cols)) { // const parent_name = k;
options.push({ // const parent_rel = v;
value: JSON.stringify({ // if (to) {
name: k, // const { cols, rels } = await load_single(to.table);
is_pk: v.is_pk, // // if (cols) {
type: v.db_type || v.type, // // for (const [k, v] of Object.entries(cols)) {
optional: v.optional, // // options.push({
}), // // value: JSON.stringify({
label: k, // // name: k,
checked: v.is_pk, // // is_pk: v.is_pk,
}); // // type: v.db_type || v.type,
} // // optional: v.optional,
} // // }),
if (rels) { // // label: k,
for (const [k, v] of Object.entries(rels)) { // // checked: v.is_pk,
let sub_opt = []; // // });
const to = v.to; // // }
const from = v.from; // // }
const { cols } = await load_single(v.to.table); // // if (rels) {
for (const [k, v] of Object.entries(cols)) { // // for (const [k, v] of Object.entries(rels)) {
sub_opt.push({ // // let sub_opt = [];
value: JSON.stringify({ // // const to = v.to;
name: k, // // const from = v.from;
is_pk: v.is_pk, // // const { cols } = await load_single(v.to.table);
type: v.db_type || v.type, // // for (const [k, v] of Object.entries(cols)) {
optional: v.optional, // // sub_opt.push({
}), // // value: JSON.stringify({
label: k, // // name: k,
checked: v.is_pk, // // is_pk: v.is_pk,
}); // // type: v.db_type || v.type,
} // // optional: v.optional,
options.push({ // // }),
value: JSON.stringify({ // // label: k,
name: k, // // checked: v.is_pk,
is_pk: false, // // });
type: v.type, // // }
optional: true, // // options.push({
relation: { from, to }, // // value: JSON.stringify({
}), // // name: k,
label: k, // // is_pk: false,
options: sub_opt, // // type: v.type,
checked: // // optional: true,
parent_rel.type === "has-many" && // // relation: { from, to },
parent_rel.from.table === v.to.table, // // }),
}); // // label: k,
} // // options: sub_opt,
} // // checked:
} // // parent_rel.type === "has-many" &&
result.push({ // // parent_rel.from.table === v.to.table,
value: JSON.stringify({ // // });
name: k, // // }
is_pk: false, // // }
type: v.type, // }
optional: true, // result.push({
relation: { from, to }, // value: JSON.stringify({
}), // name: k,
label: k, // is_pk: false,
options, // type: v.type,
}); // optional: true,
} // relation: { from, to },
} // }),
// label: k,
// options,
// });
// }
// }
try { try {
saveSchemaOnStorage(result, id_site, gen_table); saveSchemaOnStorage(result, id_site, gen_table);
} catch (e: any) { } catch (e: any) {
@ -153,7 +158,64 @@ export const gen_prop_fields = async (gen_table: string) => {
return schema; return schema;
} }
}; };
const load_layer_schema = async (depth: number, arg: any, table: string) => {
let current_depth = 1;
console.log({ depth, current_depth, arg, table });
const result = await get_layer(depth, current_depth, arg, table);
console.log({ result });
return result;
};
const get_layer = async (
depth: number,
current: number,
arg: any,
table: string
) => {
const { cols, rels } = await load_single(table);
const options = [];
if (cols) {
for (const [k, v] of Object.entries(cols)) {
options.push({
value: JSON.stringify({
name: k,
is_pk: v.is_pk,
type: v.db_type || v.type,
optional: v.optional,
}),
label: k,
checked: v.is_pk,
});
}
}
if (current < depth) {
if (rels) {
for (const [k, v] of Object.entries(rels)) {
const to = v.to;
const from = v.from;
const r_rels = (await get_layer(
depth,
current + 1,
arg,
v.to.table
)) as any;
options.push({
value: JSON.stringify({
name: k,
is_pk: false,
type: v.type,
optional: true,
relation: { from, to },
}),
label: k,
options: r_rels,
checked: false,
});
}
}
}
return options;
};
const saveSchemaOnStorage = (res: any, id_site: string, table: string) => { const saveSchemaOnStorage = (res: any, id_site: string, table: string) => {
let schemaSite = null; let schemaSite = null;
let schema_master_detail: Record<string, any> = {}; let schema_master_detail: Record<string, any> = {};