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

fix

This commit is contained in:
rizrmd 2024-06-03 00:24:41 -07:00
parent 0e1fa9f6f4
commit d257667ea3
16 changed files with 340 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
comps/filter/FilterField.tsx
View File

@ -5,6 +5,7 @@ import { FieldTypeText } from "../form/field/type/TypeText";
import { FieldModifier } from "./FieldModifier";
import { useLocal } from "lib/utils/use-local";
import { FieldCheckbox } from "../form/field/type/TypeCheckbox";
import { SingleOption } from "../form/field/type/TypeSingleOption";
export const FilterField: FC<{
filter: FilterLocal;
@ -42,7 +43,10 @@ export const FilterField: FC<{
type={type}
/>
),
opt_get_value: () => { }
onLoad() {
return [{ label: 'halo', 'value': 'asda' }]
},
subType: "dropdown"
})}
>
{(field) => (
@ -96,6 +100,9 @@ export const FilterField: FC<{
{type === "boolean" && (
<FieldCheckbox arg={field.arg} field={field.field} fm={field.fm} />
)}
{type === "options" && (
<p>Haloha</p>
)}
</>
)}
</BaseField >

6
comps/form/base/BaseForm.tsx
View File

@ -37,7 +37,11 @@ export const BaseForm = <T extends Record<string, any>>(
}, [on_submit]);
form.createArg = (arg) => {
const prop: FieldProp = { name: arg.name } as any;
const prop: FieldProp = {
name: arg.name,
on_load: arg.onLoad,
sub_type: arg.subType
} as any;
if (arg.onChange) prop.on_change = arg.onChange;
return prop;
};

3
comps/form/base/types.ts
View File

@ -12,7 +12,8 @@ type CreateFieldArg = {
prefix?: ReactNode | (() => ReactNode);
onChange?: (value: any) => void;
render?: () => void;
opt_get_value?: (value: any) => any
onLoad?: () => { value: string; label: string }[];
subType?: string
};
export type BaseFormLocal<T> = Omit<typeof default_base_form_local, "data"> & {

2
comps/form/field/type/TypeButton.tsx
View File

@ -43,7 +43,7 @@ export const FieldButton: FC<{
{local.list.map((item) => {
let isChecked = false;
try {
isChecked = value.some((e: any) => e === item[arg.pk]);
isChecked = value.some((e: any) => e === item.value);
} catch (ex) {}
return (

52
comps/form/field/type/TypeCheckbox.tsx
View File

@ -21,14 +21,15 @@ export const FieldCheckbox: FC<{
else callback(res);
}, []);
console.log('arg', arg);
let value = arg.opt_get_value({
fm,
name: field.name,
options: local.list,
type: field.type,
});
let value =
typeof arg.opt_get_value === "function"
? arg.opt_get_value({
fm,
name: field.name,
options: local.list,
type: field.type,
})
: fm.data[field.name];
return (
<>
@ -37,17 +38,18 @@ export const FieldCheckbox: FC<{
{local.list.map((item) => {
let isChecked = false;
try {
isChecked = value.some((e: any) => e === item[arg.pk]);
} catch (ex) { }
isChecked = value.some((e: any) => e === item.value);
} catch (ex) {}
return (
<div
onClick={() => {
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(
(e: any) => e.value !== item.value
@ -56,13 +58,19 @@ export const FieldCheckbox: FC<{
selected.push(item);
}
arg.opt_set_value({
fm,
name: field.name,
selected: selected.map((e) => e.value),
options: local.list,
type: field.type,
});
if (typeof arg.opt_set_value === "function") {
arg.opt_set_value({
fm,
name: field.name,
selected: selected.map((e) => e.value),
options: local.list,
type: field.type,
});
} else {
fm.data[field.name] = selected.map((e) => e.value);
console.log(fm.data);
fm.render();
}
}}
className="c-flex c-flex-row c-space-x-1 cursor-pointer c-items-center rounded-full p-0.5"
>
@ -92,7 +100,11 @@ export const FieldCheckbox: FC<{
/>
</svg>
)}
<div className="">{arg.opt_get_label(item)}</div>
<div className="">
{typeof arg.opt_get_label === "function"
? arg.opt_get_label(item)
: item.label}
</div>
</div>
);
})}

32
comps/form/field/type/TypeDropdown.tsx
View File

@ -1,8 +1,8 @@
import { useLocal } from "@/utils/use-local";
import { FC, useEffect } from "react";
import { Typeahead } from "../../../../..";
import { FMLocal, FieldLocal, FieldProp } from "../../typings";
import { FieldLoading } from "lib/comps/ui/field-loading";
import { Typeahead } from "lib/comps/ui/typeahead";
export const TypeDropdown: FC<{
field: FieldLocal;
@ -13,26 +13,38 @@ export const TypeDropdown: FC<{
loaded: false,
options: [],
});
let value = arg.opt_get_value({
let value = typeof arg.opt_get_value === "function" ? arg.opt_get_value({
fm,
name: field.name,
options: local.options,
type: field.type,
});
}) : fm.data[field.name];;
useEffect(() => {
if (typeof arg.on_load === "function") {
console.log("masuk")
const options = arg.on_load();
console.log({options})
const options = arg.on_load({});
if (options instanceof Promise) {
options.then((res) => {
console.log({res})
local.options = res;
if (Array.isArray(res)) {
const list: any = res.map((e: any) => {
return {
label: arg.opt_get_label({
label: e.label,
value: e.value,
item: e.data,
}),
value: e.value,
};
});
local.options = list;
} else {
local.options = res;
}
local.loaded = true;
local.render();
});
} else {
local.options = options;
local.loaded = true;
local.options = [];
local.render();
}
}
@ -45,6 +57,7 @@ export const TypeDropdown: FC<{
<Typeahead
value={value}
onSelect={({ search, item }) => {
console.log({ search, item })
if (item) {
arg.opt_set_value({
fm,
@ -54,7 +67,6 @@ export const TypeDropdown: FC<{
selected: [item.value],
});
}
return item?.value || search;
}}
allowNew={false}

213
comps/form/field/type/TypeRelation.tsx
View File

@ -2,7 +2,7 @@ import { sortTree } from "@/comps/list/utils/sort-tree";
import { useLocal } from "@/utils/use-local";
import { FC, useEffect } from "react";
import { FMLocal, FieldLocal } from "../../typings";
import { OptionItem, RawDropdown } from "../raw/Dropdown";
// import { OptionItem, RawDropdown } from "../raw/Dropdown";
import { FieldLoading } from "../../../ui/field-loading";
export type PropTypeRelation = {
@ -96,121 +96,122 @@ const HasOne: FC<{
PassProp: any;
child: any;
}> = ({ field, fm, prop, PassProp, child }) => {
const input = useLocal({
list: null as null | any[],
pk: "",
});
const name = field.name;
const value = fm.data[name];
field.input = input;
field.prop = prop;
return <>1223</>
// const input = useLocal({
// list: null as null | any[],
// pk: "",
// });
// const name = field.name;
// const value = fm.data[name];
// field.input = input;
// field.prop = prop;
useEffect(() => {
if (!isEditor && input.list === null) {
field.status = "loading";
field.render();
// useEffect(() => {
// if (!isEditor && input.list === null) {
// field.status = "loading";
// field.render();
const callback = (arg: { items: any[]; pk: string }) => {
input.list = arg.items;
input.pk = arg.pk;
field.status = "ready";
input.render();
};
const res = prop.on_load({ value });
if (res instanceof Promise) res.then(callback);
else callback(res);
}
}, []);
// const callback = (arg: { items: any[]; pk: string }) => {
// input.list = arg.items;
// input.pk = arg.pk;
// field.status = "ready";
// input.render();
// };
// const res = prop.on_load({ value });
// if (res instanceof Promise) res.then(callback);
// else callback(res);
// }
// }, []);
let list: OptionItem[] = [];
if (input.list && input.pk && input.list.length) {
if (fm.field_def[name]?.optional) {
list.push({
value: null,
label: "-",
});
}
// let list: OptionItem[] = [];
// if (input.list && input.pk && input.list.length) {
// if (fm.field_def[name]?.optional) {
// list.push({
// value: null,
// label: "-",
// });
// }
let sorted = input.list;
if (prop.id_parent && input.pk) {
sorted = sortTree(sorted, prop.id_parent, input.pk);
}
// let sorted = input.list;
// if (prop.id_parent && input.pk) {
// sorted = sortTree(sorted, prop.id_parent, input.pk);
// }
for (const item of sorted) {
if (typeof item !== "object") continue;
let label = "";
// for (const item of sorted) {
// if (typeof item !== "object") continue;
// let label = "";
if (typeof prop.label === "function") {
label = prop.label(item, input.pk);
// if (typeof prop.label === "function") {
// label = prop.label(item, input.pk);
if (!label) {
const label_arr: string[] = [];
// if (!label) {
// const label_arr: string[] = [];
for (const [k, v] of Object.entries(item)) {
if (k !== input.pk) label_arr.push(v as any);
}
label = label_arr.join(" ");
}
} else {
const label_arr: string[] = [];
// for (const [k, v] of Object.entries(item)) {
// if (k !== input.pk) label_arr.push(v as any);
// }
// label = label_arr.join(" ");
// }
// } else {
// const label_arr: string[] = [];
for (const [k, v] of Object.entries(item)) {
if (k !== input.pk) label_arr.push(v as any);
}
label = label_arr.join(" ");
}
// for (const [k, v] of Object.entries(item)) {
// if (k !== input.pk) label_arr.push(v as any);
// }
// label = label_arr.join(" ");
// }
list.push({
value: item[input.pk],
label,
el: <PassProp item={item}>{child}</PassProp>,
});
}
}
// list.push({
// value: item[input.pk],
// label,
// el: <PassProp item={item}>{child}</PassProp>,
// });
// }
// }
let selected = null;
if (value && typeof value === "object") {
if (input.pk) selected = value[input.pk];
} else {
selected = value;
}
// let selected = null;
// if (value && typeof value === "object") {
// if (input.pk) selected = value[input.pk];
// } else {
// selected = value;
// }
return (
<>
{field.status === "loading" ? (
<FieldLoading />
) : (
<RawDropdown
options={list}
value={selected}
onChange={(val) => {
if (val === null) {
fm.data[name] = null;
fm.render();
return;
}
if (input.list && input.pk) {
for (const item of input.list) {
if (item[input.pk] === val) {
fm.data[name] = item;
fm.render();
break;
}
}
}
}}
className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full c-h-full"
disabled={field.disabled}
onFocus={() => {
field.focused = true;
field.render();
}}
onBlur={() => {
field.focused = false;
field.render();
}}
/>
)}
</>
);
// return (
// <>
// {field.status === "loading" ? (
// <FieldLoading />
// ) : (
// <RawDropdown
// options={list}
// value={selected}
// onChange={(val) => {
// if (val === null) {
// fm.data[name] = null;
// fm.render();
// return;
// }
// if (input.list && input.pk) {
// for (const item of input.list) {
// if (item[input.pk] === val) {
// fm.data[name] = item;
// fm.render();
// break;
// }
// }
// }
// }}
// className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full c-h-full"
// disabled={field.disabled}
// onFocus={() => {
// field.focused = true;
// field.render();
// }}
// onBlur={() => {
// field.focused = false;
// field.render();
// }}
// />
// )}
// </>
// );
};

39
comps/form/gen/fields.ts
View File

@ -5,6 +5,9 @@ import capitalize from "lodash.capitalize";
import { ArrowBigDown } from "lucide-react";
import { on_load_rel } from "./on_load_rel";
import { createId } from "@paralleldrive/cuid2";
import { gen_label } from "./gen-label";
import { get_value } from "./get-value";
import { set_value } from "./set-value";
export type GFCol = {
name: string;
type: string;
@ -70,13 +73,14 @@ export const newField = (
});
} else if (["has-many", "has-one"].includes(arg.type) && arg.relation) {
const fields = parseGenField(opt.value);
const res = generateSelect(fields);
const load = on_load_rel({
pk: res.pk,
table: arg.name,
select: res.select,
pks: {},
});
const res = generateSelect(fields);
const load = on_load_rel({
pk: res.pk,
table: arg.name,
select: res.select,
pks: {},
});
console.log("halo");
if (["has-one"].includes(arg.type)) {
return createItem({
component: {
@ -88,6 +92,27 @@ export const newField = (
sub_type: "dropdown",
rel__gen_table: arg.name,
opt__on_load: [load],
opt__label: [
gen_label({
pk: res.pk,
table: arg.name,
select: res.select,
}),
],
opt__get_value: [
get_value({
pk: res.pk,
table: arg.name,
select: res.select,
}),
],
opt__set_value: [
set_value({
pk: res.pk,
table: arg.name,
select: res.select,
}),
],
child: {
childs: [],
},

36
comps/form/gen/gen-label.ts Executable file
View File

@ -0,0 +1,36 @@
export const gen_label = ({
pk,
table,
select
}: {
pk: string;
table: string;
select: any;
}) => {
const sample = {} as any;
const cols = [];
for (const [k, v] of Object.entries(select) as any) {
if (k !== pk && typeof v !== "object") {
cols.push(k);
}
}
return `\
(row: { value: string; label: string; item?: any }) => {
const cols = ${JSON.stringify(cols)};
const getLabel = (data: any) => {
const result = [];
cols.map((e) => {
if (data[e]) {
result.push(data[e]);
}
});
return result.join(" - ");
};
if (isEditor) {
return row.label;
}
return getLabel(row.item);
}
`;
};

42
comps/form/gen/get-value.ts Executable file
View File

@ -0,0 +1,42 @@
export const get_value = ({
pk,
table,
select
}: {
pk: string;
table: string;
select: any;
}) => {
const sample = {} as any;
const cols = [];
for (const [k, v] of Object.entries(select) as any) {
if (k !== pk && typeof v !== "object") {
cols.push(k);
}
}
return `\
(arg: {
options: { label: string; value: string; item?: string }[];
fm: FMLocal;
name: string;
type: string;
}) => {
const { options, fm, name, type } = arg;
if(isEditor){
return fm.data[name];
}
let result = null;
result = fm.data[name];
try{
const data = fm.data[${table}];
if(typeof data === "object"){
if(typeof data?.connect?.${pk} === "string"){
result = data.connect.${pk};
}
}
}catch(ex){
}
return result;
}
`;
};

1
comps/form/gen/on_load_rel.ts
View File

@ -64,6 +64,7 @@ export const on_load_rel = ({
return {
value: e.${pk},
label: getLabel(e),
data: e,
}
}))
} else {

38
comps/form/gen/set-value.ts Executable file
View File

@ -0,0 +1,38 @@
export const set_value = ({
pk,
table,
select
}: {
pk: string;
table: string;
select: any;
}) => {
const sample = {} as any;
const cols = [];
for (const [k, v] of Object.entries(select) as any) {
if (k !== pk && typeof v !== "object") {
cols.push(k);
}
}
return `\
(arg: {
selected: any[];
options: { label: string; value: string; item?: string }[];
fm: FMLocal;
name: string;
type: string;
}) => {
const { selected, options, fm, name, type } = arg;
if (type === "single-option") {
fm.data[name] = {
connect: {
${pk}: selected[0],
},
};
} else {
fm.data[name] = selected.map((e) => e);
}
fm.render();
}
`
};

6
comps/form/typings.ts
View File

@ -58,7 +58,11 @@ export type FieldProp = {
width: "auto" | "full" | "¾" | "½" | "⅓" | "¼";
_item: PrasiItem;
custom?: () => CustomField;
on_load: (arg?: any) => any | Promise<any>;
on_load: (
arg?: any
) =>
| { value: string; label: string }[]
| Promise<{ value: string; label: string }[]>;
opt_get_label: (row: any) => string;
opt_get_value: (arg: {
options: { label: string; value: string; item?: string }[];

2
comps/list/TableList.tsx
View File

@ -269,6 +269,7 @@ export const TableList: FC<TableListProp> = ({
(e: any) => e.name === sub_name || e.name === mode
);
if (mode_child) {
console.log({_item})
const tbl = _item.edit.childs[0].edit.childs.find(
(e) => get(e, "id") === mode_child.id
);
@ -639,6 +640,7 @@ const dataGridStyle = (local: { height: number }) => css`
}
div[role="columnheader"] span svg {
margin: 12px 2px;
/* color: #ffffff */
}
div[aria-selected="true"] {
outline: none;

7
comps/ui/typeahead.tsx
View File

@ -334,15 +334,20 @@ export const Typeahead: FC<{
searching={local.search.searching}
onSelect={(value) => {
local.open = false;
local.value.push(value);
resetSearch();
if (local.mode === "single") {
const item = local.options.find((item) => item.value === value);
if (item) {
local.search.input = item.label;
select({
search: local.search.input,
item,
});
}
}
local.render();
}}
width={local.auto_popup_width ? input.current?.offsetWidth : undefined}

1
preset/login/Login.tsx
View File

@ -13,6 +13,7 @@ export type LGProps = {
export const Login: FC<LGProps> = (props) => {
w.prasi_home = props.url_home[0];
console.log("render?");
try {
const home = prasi_user.prasi_home[prasi_user.user.m_role.name];
navigate(home);