From 0e1fa9f6f4b4c13cd9fc109d22f4aa437e64f693 Mon Sep 17 00:00:00 2001 From: rizrmd Date: Sun, 2 Jun 2024 22:27:01 -0700 Subject: [PATCH] fix --- comps/filter/FilterField.tsx | 9 +-- comps/filter/utils/filter-where.ts | 14 +++- comps/filter/utils/types.tsx | 10 ++- comps/form/base/types.ts | 1 + comps/form/field/type/TypeCheckbox.tsx | 8 ++- comps/form/field/type/TypeDropdown.tsx | 57 ++++++++-------- comps/form/gen/fields.ts | 91 +++++++++++--------------- comps/form/gen/gen-form.ts | 10 ++- comps/form/gen/on_load_rel.ts | 1 - gen/utils.ts | 5 +- 10 files changed, 109 insertions(+), 97 deletions(-) diff --git a/comps/filter/FilterField.tsx b/comps/filter/FilterField.tsx index d39e144..5e36308 100755 --- a/comps/filter/FilterField.tsx +++ b/comps/filter/FilterField.tsx @@ -4,7 +4,7 @@ import { FilterFieldType, FilterLocal, filter_window } from "./utils/types"; import { FieldTypeText } from "../form/field/type/TypeText"; import { FieldModifier } from "./FieldModifier"; import { useLocal } from "lib/utils/use-local"; -import { FieldToggle } from "../form/field/type/TypeToggle"; +import { FieldCheckbox } from "../form/field/type/TypeCheckbox"; export const FilterField: FC<{ filter: FilterLocal; @@ -42,6 +42,7 @@ export const FilterField: FC<{ type={type} /> ), + opt_get_value: () => { } })} > {(field) => ( @@ -79,7 +80,7 @@ export const FilterField: FC<{ suffix: "", }} /> - {filter.modifiers[name] === 'Between' && ( + {filter.modifiers[name] === 'between' && ( )} {type === "boolean" && ( - + )} )} - + ); }; diff --git a/comps/filter/utils/filter-where.ts b/comps/filter/utils/filter-where.ts index 3feb726..b07d72b 100755 --- a/comps/filter/utils/filter-where.ts +++ b/comps/filter/utils/filter-where.ts @@ -5,7 +5,6 @@ export const filterWhere = (filter_name: string) => { const pf = filter_window.prasi_filter?.[getPathname()]?.[filter_name]; const where: any = {}; const AND: any[] = []; - if (pf) { for (const [k, filter] of Object.entries(pf)) { for (const [name, value] of Object.entries(filter.data)) { @@ -82,6 +81,19 @@ export const filterWhere = (filter_name: string) => { } } break; + case "options": + { + if (modifier === "equal") { + AND.push({ [name]: { value } }); + } else if (modifier === "not_equal") { + AND.push({ [name]: { NOT: value } }); + } else if (modifier === "includes") { + AND.push({ [name]: { hasEvery: value } }); + } else if (modifier === "excludes") { + AND.push({ [name]: { notIn: value } }); + } + } + break; } } } diff --git a/comps/filter/utils/types.tsx b/comps/filter/utils/types.tsx index a5d7cd3..9ad873d 100755 --- a/comps/filter/utils/types.tsx +++ b/comps/filter/utils/types.tsx @@ -1,7 +1,7 @@ import { BaseFormLocal } from "../../form/base/types"; import { GenField } from "../../form/typings"; -export type FilterFieldType = "text" | "number" | "boolean" | "date"; +export type FilterFieldType = "text" | "number" | "boolean" | "date" | "options"; export const default_filter_local = { data: {} as any, columns: [] as string[], @@ -29,8 +29,14 @@ export const modifiers = { date: { between: "Between", greater_than: "Greater Than", - less_than: "Less Than" + less_than: "Less Than", }, + options: { + equal: "Equal", + not_equal: "Not Equal", + includes: "Includes", + excludes: "Excludes" + } }; export type FilterModifier = typeof modifiers; diff --git a/comps/form/base/types.ts b/comps/form/base/types.ts index a497059..d4f1dc1 100755 --- a/comps/form/base/types.ts +++ b/comps/form/base/types.ts @@ -12,6 +12,7 @@ type CreateFieldArg = { prefix?: ReactNode | (() => ReactNode); onChange?: (value: any) => void; render?: () => void; + opt_get_value?: (value: any) => any }; export type BaseFormLocal = Omit & { diff --git a/comps/form/field/type/TypeCheckbox.tsx b/comps/form/field/type/TypeCheckbox.tsx index 0530c2d..bb01f76 100755 --- a/comps/form/field/type/TypeCheckbox.tsx +++ b/comps/form/field/type/TypeCheckbox.tsx @@ -21,6 +21,8 @@ export const FieldCheckbox: FC<{ else callback(res); }, []); + console.log('arg', arg); + let value = arg.opt_get_value({ fm, name: field.name, @@ -36,15 +38,15 @@ export const FieldCheckbox: FC<{ let isChecked = false; try { isChecked = value.some((e: any) => e === item[arg.pk]); - } catch (ex) {} + } catch (ex) { } return (
{ let selected = Array.isArray(value) ? value.map((row) => { - return local.list.find((e) => e.value === row); - }) + return local.list.find((e) => e.value === row); + }) : []; if (isChecked) { selected = selected.filter( diff --git a/comps/form/field/type/TypeDropdown.tsx b/comps/form/field/type/TypeDropdown.tsx index d07b4c7..29783b6 100755 --- a/comps/form/field/type/TypeDropdown.tsx +++ b/comps/form/field/type/TypeDropdown.tsx @@ -19,15 +19,14 @@ export const TypeDropdown: FC<{ options: local.options, type: field.type, }); - console.log({ value }); useEffect(() => { if (typeof arg.on_load === "function") { - const options = arg.on_load({ mode: "query" }); - console.log("Masuk"); - // console.log(options) + console.log("masuk") + const options = arg.on_load(); + console.log({options}) if (options instanceof Promise) { options.then((res) => { - console.log({ res }); + console.log({res}) local.options = res; local.loaded = true; local.render(); @@ -70,28 +69,30 @@ export const TypeDropdown: FC<{ ); return ( - { - return item?.value || search; - }} - onChange={(values) => { - arg.opt_set_value({ - fm, - name: field.name, - type: field.type, - options: local.options, - selected: values, - }); - }} - allowNew={false} - autoPopupWidth={true} - focusOpen={true} - mode={"multi"} - placeholder={arg.placeholder} - options={() => { - return local.options; - }} - /> + <> + { + return item?.value || search; + }} + onChange={(values) => { + arg.opt_set_value({ + fm, + name: field.name, + type: field.type, + options: local.options, + selected: values, + }); + }} + allowNew={false} + autoPopupWidth={true} + focusOpen={true} + mode={"multi"} + placeholder={arg.placeholder} + options={() => { + return local.options; + }} + /> + ); }; diff --git a/comps/form/gen/fields.ts b/comps/form/gen/fields.ts index 5eca809..f418a19 100755 --- a/comps/form/gen/fields.ts +++ b/comps/form/gen/fields.ts @@ -4,6 +4,7 @@ import { createItem, parseGenField } from "lib/gen/utils"; import capitalize from "lodash.capitalize"; import { ArrowBigDown } from "lucide-react"; import { on_load_rel } from "./on_load_rel"; +import { createId } from "@paralleldrive/cuid2"; export type GFCol = { name: string; type: string; @@ -68,9 +69,7 @@ export const newField = ( }, }); } else if (["has-many", "has-one"].includes(arg.type) && arg.relation) { - if (["has-one"].includes(arg.type)) { - console.log(opt.value); - const fields = parseGenField(opt.value); + const fields = parseGenField(opt.value); const res = generateSelect(fields); const load = on_load_rel({ pk: res.pk, @@ -78,6 +77,7 @@ export const newField = ( select: res.select, pks: {}, }); + if (["has-one"].includes(arg.type)) { return createItem({ component: { id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67", @@ -87,63 +87,48 @@ export const newField = ( type: "single-option", sub_type: "dropdown", rel__gen_table: arg.name, - // rel__gen_fields: [`[${opt.value.join(",")}]`], - opt__on_load: [ - `\ - ${load} - `, - ], + opt__on_load: [load], child: { childs: [], }, }, }, }); - // return { - // name: "item", - // type: "item", - // component: { - // id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67", - // props: { - // name: { - // mode: "string", - // value: arg.name - // }, - // label: { - // mode: "string", - // value: formatName(arg.name) - // }, - // type: { - // mode: "string", - // value: "single-option" - // }, - // sub_type: { - // mode: "string", - // value: "dropdown" - // }, - // rel__gen_table: { - // mode: "string", - // value: arg.name - // }, - // rel__gen_fields: { - // mode: "raw", - // value: `${JSON.stringify(opt.val)}` - // } - // }, - // }, - // }; } else { - - const fields = parseGenField(opt.value); - const res = generateSelect(fields); - const load = on_load_rel({ - pk: res.pk, - table: arg.name, - select: res.select, - pks: {}, - }); - console.log(load) - + return { + id: createId(), + name: "item", + type: "item", + childs: [], + edit: null as any, + component: { + id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67", + props: { + name: { + type: "string", + value: arg.name, + }, + label: { + type: "string", + value: formatName(arg.name), + }, + sub_type: { + type: "string", + value: "single-option", + }, + rel__gen_table: { + type: "string", + value: arg.name, + }, + opt__on_load: { + type: "raw", + value: `\ + ${load} + `, + }, + }, + }, + }; return createItem({ component: { id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67", diff --git a/comps/form/gen/gen-form.ts b/comps/form/gen/gen-form.ts index ffc0374..72f33fc 100755 --- a/comps/form/gen/gen-form.ts +++ b/comps/form/gen/gen-form.ts @@ -4,6 +4,7 @@ import { newField } from "./fields"; import { generateSelect } from "../../md/gen/md-select"; import { on_load } from "../../md/gen/tbl-list/on_load"; import { on_submit } from "../../md/gen/tbl-list/on_submit"; +import { createId } from "@paralleldrive/cuid2"; export const generateForm = async ( modify: (data: any) => void, @@ -59,12 +60,17 @@ export const generateForm = async ( const field = newField(item, { parent_table: table, value }); childs.push(field); } + console.log(childs) if (commit) { item.edit.setProp("body", { mode: "jsx", - value: createItem({ + value: { + id: createId(), + name: "item", + type: "item", childs: childs, - }), + edit: null as any, + }, }); await item.edit.commit(); } else { diff --git a/comps/form/gen/on_load_rel.ts b/comps/form/gen/on_load_rel.ts index 731afcd..8e7b4ec 100755 --- a/comps/form/gen/on_load_rel.ts +++ b/comps/form/gen/on_load_rel.ts @@ -27,7 +27,6 @@ export const on_load_rel = ({ sample[k] = "sample"; } } - console.log({cols}) return `\ (arg: { diff --git a/gen/utils.ts b/gen/utils.ts index c431e83..dfacde1 100755 --- a/gen/utils.ts +++ b/gen/utils.ts @@ -80,7 +80,7 @@ type SimplifiedItem = { export const createItem = (arg: SimplifiedItem): any => { let component = undefined; - + if (arg.component && arg.component.id) { component = { id: arg.component.id, props: {} as any }; @@ -91,9 +91,8 @@ export const createItem = (arg: SimplifiedItem): any => { if (Array.isArray(v) && v.length === 1) { component.props[k] = { meta: { type: "text" }, - type: "string", + type: "string", value: v[0], - valueBuilt: v[0], }; } else if (Array.isArray(v) && v.length === 2) { component.props[k] = {