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-14 08:54:56 -07:00
parent 0fe4955ecb
commit b9f9c07e01
35 changed files with 776 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
comps/filter/FilterContent.tsx
View File

@ -28,7 +28,37 @@ export const FilterContent: FC<{
&.filter-inline {
display: flex;
align-items: center;
/* Styles specific to topbar */
.field {
padding-top: 0px;
align-items: center;
}
.field > .label {
display: none;
}
.field-inner {
min-height: 25px;
}
.form-inner {
align-items: center;
}
.field-input {
margin-top: 0 !important;
}
.field-outer {
margin-top: 3px;
margin-bottom: 3px;
}
.search-all {
input {
width: 150px;
}
}
.search-focus {
width: 250px !important;
}
}
&.filter-popup {
@ -39,6 +69,10 @@ export const FilterContent: FC<{
z-index: 1000;
/* Styles specific to popup */
}
.form-inner {
position: relative;
}
`
)}
>
@ -60,8 +94,7 @@ export const FilterContent: FC<{
);
}}
</BaseForm>
</div>
);
};

68
comps/filter/FilterField.tsx
View File

@ -30,13 +30,16 @@ export const FilterField: FC<{
}, 500);
}, [filter.form?.data[name]]);
let show_modifier = filter.mode !== "inline";
return (
<BaseField
{...filter.form.fieldProps({
name: name || "",
label: label || name || "",
render: internal.render,
prefix: () => (
prefix: show_modifier
? () => (
<FieldModifier
onChange={(modifier) => {
filter.modifiers[name] = modifier;
@ -46,7 +49,8 @@ export const FilterField: FC<{
modifier={filter.modifiers[name]}
type={type}
/>
),
)
: undefined,
onLoad() {
return [{ label: "halo", value: "asda" }];
},
@ -55,7 +59,45 @@ export const FilterField: FC<{
: "typeahead",
})}
>
{(field) => (
{(field) => {
if (type === "search-all") {
return (
<div className={cx("search-all c-flex items-center")}>
<div className="c-pl-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
</div>
<FieldTypeInput
{...field}
prop={{
type: "input",
sub_type: "search",
placeholder: "Search...",
onFocus(e) {
e.currentTarget.classList.add("search-focus");
},
onBlur(e) {
e.currentTarget.classList.remove("search-focus");
},
}}
/>
</div>
);
}
return (
<>
{type === "text" && (
<FieldTypeInput
@ -63,8 +105,6 @@ export const FilterField: FC<{
prop={{
type: "input",
sub_type: "text",
prefix: "",
suffix: "",
}}
/>
)}
@ -82,8 +122,6 @@ export const FilterField: FC<{
prop={{
type: "input",
sub_type: "number",
prefix: "",
suffix: "",
}}
/>
{filter.modifiers[name] === "between" && (
@ -93,8 +131,6 @@ export const FilterField: FC<{
prop={{
type: "input",
sub_type: "number",
prefix: "",
suffix: "",
}}
/>
)}
@ -114,8 +150,6 @@ export const FilterField: FC<{
prop={{
type: "input",
sub_type: "date",
prefix: "",
suffix: "",
}}
/>
{filter.modifiers[name] === "between" && (
@ -125,15 +159,17 @@ export const FilterField: FC<{
prop={{
type: "input",
sub_type: "date",
prefix: "",
suffix: "",
}}
/>
)}
</>
)}
{type === "boolean" && (
<FieldCheckbox arg={field.arg} field={field.field} fm={field.fm} />
<FieldCheckbox
arg={field.arg}
field={field.field}
fm={field.fm}
/>
)}
{type === "options" && (
<>
@ -146,7 +182,9 @@ export const FilterField: FC<{
</>
)}
</>
)}
);
}}
</BaseField>
);
};

29
comps/filter/MasterFilter.tsx
View File

@ -5,6 +5,7 @@ import { GenField } from "../form/typings";
import { default_filter_local, filter_window } from "./utils/types";
import { FilterContent } from "./FilterContent";
import { getPathname } from "lib/utils/pathname";
import { getFilter } from "./utils/get-filter";
type FilterMode = "regular" | "inline" | "popup";
@ -34,18 +35,25 @@ export const MasterFilter: FC<FilterProps> = ({
}): ReactNode => {
const filter = useLocal({ ...default_filter_local });
filter.name = name;
filter.mode = mode;
if (!isEditor) {
if (!filter_window.prasi_filter) {
filter_window.prasi_filter = {};
}
const pf = filter_window.prasi_filter;
if (pf) {
const pathname = getPathname();
if (!pf[pathname]) pf[pathname] = {};
if (!pf[pathname][name]) pf[pathname][name] = {};
pf[pathname][name][_item.id] = filter;
const wf = getFilter(name);
if (wf) {
wf.filter.ref[_item.id] = filter;
wf.list.render();
}
// if (!filter_window.prasi_filter) {
// filter_window.prasi_filter = {};
// }
// const pf = filter_window.prasi_filter;
// if (pf) {
// const pathname = getPathname();
// if (!pf[pathname]) pf[pathname] = {};
// if (!pf[pathname][name]) pf[pathname][name] = {};
// pf[pathname][name][_item.id] = filter;
// }
}
if (mode === "popup") {
@ -92,6 +100,7 @@ export const MasterFilter: FC<FilterProps> = ({
}
return (
<>
<FilterContent
PassProp={PassProp}
_item={_item}
@ -99,5 +108,7 @@ export const MasterFilter: FC<FilterProps> = ({
mode={mode}
filter={filter}
/>
</>
);
};

0
comps/filter/gen/parse-filter.ts Executable file
View File

1
comps/filter/utils/filter-modifier.ts
View File

@ -5,7 +5,6 @@ export const filterModifier = (type: keyof typeof modifiers) => {
return {
label: v,
value: k,
checked: true,
};
});
};

31
comps/filter/utils/get-filter.ts Executable file
View File

@ -0,0 +1,31 @@
import { getPathname } from "../../../..";
import { filter_window } from "./types";
export const getFilter = (name: string) => {
if (!filter_window.prasi_filter) {
filter_window.prasi_filter = {};
}
const pf = filter_window.prasi_filter;
if (pf) {
const pathname = getPathname();
if (!pf[pathname]) pf[pathname] = {};
if (!pf[pathname][name])
pf[pathname][name] = {
filter: {
ref: {},
render: () => {},
},
list: {
ref: {},
render: () => {},
reload() {
for (const [k, v] of Object.entries(this.ref)) {
v.reload();
}
},
},
};
return pf[pathname][name];
}
};

25
comps/filter/utils/types.tsx
View File

@ -2,6 +2,7 @@ import { BaseFormLocal } from "../../form/base/types";
import { GenField } from "../../form/typings";
export type FilterFieldType =
| "search-all"
| "text"
| "number"
| "boolean"
@ -17,9 +18,17 @@ export const default_filter_local = {
modifiers: {} as Record<string, string>,
types: {} as Record<string, FilterFieldType>,
name: "",
mode: "",
};
export const modifiers = {
"search-all": {
contains: "Contains",
starts_with: "Starts With",
ends_with: "Ends With",
equal: "Equal",
not_equal: "Not Equal",
},
text: {
contains: "Contains",
starts_with: "Starts With",
@ -55,8 +64,22 @@ export type FilterModifier = typeof modifiers;
export type FilterLocal = typeof default_filter_local & { render: () => void };
export const filter_window = window as unknown as {
prasi_filter: Record<string, Record<string, Record<string, FilterLocal>>>;
prasi_filter: Record<
string,
Record<
string,
{
filter: {ref: Record<string, FilterLocal>, render: () => void;};
list: {
ref: Record<string, { reload: () => void }>;
reload: () => void;
render: () => void;
};
}
>
>;
prasiContext: {
render: () => void;
};
};

4
comps/form/Form.tsx
View File

@ -7,7 +7,7 @@ import { editorFormData } from "./utils/ed-data";
import { formInit } from "./utils/init";
import { formReload } from "./utils/reload";
import { getPathname } from "lib/utils/pathname";
import { sofDeleteField } from "lib/utils/soft-del-rel";
import { sofDeleteField as softDeleteField } from "lib/utils/soft-del-rel";
const editorFormWidth = {} as Record<string, { w: number; f: any }>;
@ -60,7 +60,7 @@ export const Form: FC<FMProps> = (props) => {
// deteksi jika ada softdelete
if(Array.isArray(props.feature)){
if(props.feature?.find((e) => e === "soft_delete")){
const result = sofDeleteField(props.gen_table, sfd_field)
const result = softDeleteField(props.gen_table, sfd_field)
if (result instanceof Promise) {
result.then((e) => {
// simpan fields yang berisi name dan type fields soft delete

4
comps/form/base/BaseField.tsx
View File

@ -52,11 +52,11 @@ export const BaseField = (prop: {
)}
>
{mode !== "hidden" && <Label field={field} fm={fm} />}
<div className="field-inner c-flex c-flex-1 c-flex-col">
<div className="field-input c-flex c-flex-1 c-flex-col">
<div
className={cx(
!["toogle", "button", "radio", "checkbox"].includes(arg.sub_type)
? "field-outer c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm"
? "field-outer c-overflow-hidden c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm"
: "",
fm.status === "loading"
? css`

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

@ -97,6 +97,12 @@ export const BaseForm = <T extends Record<string, any>>(
useEffect(() => {
form.data = data;
form.render();
if (form.internal.width === 0) {
setTimeout(() => {
form.render();
}, 1000);
}
}, [data]);
if (form.status === "init") {
@ -125,6 +131,7 @@ export const BaseForm = <T extends Record<string, any>>(
);
}
}
return (
<form
onSubmit={(e) => {
@ -151,10 +158,11 @@ export const BaseForm = <T extends Record<string, any>>(
}
}}
>
{form.internal.width && (
{form.internal.width > 0 && (
<>{typeof children === "function" ? children(form) : children}</>
)}
</div>
</form>
);
};

1
comps/form/field/Field.tsx
View File

@ -52,6 +52,7 @@ export const Field: FC<FieldProp> = (arg) => {
mode === "vertical" && "c-flex-col c-space-y-1"
)}
{...props}
ref={typeof arg.field_ref === 'function' ? arg.field_ref : undefined}
>
{mode !== "hidden" && showlabel === "y" && (
<Label field={field} fm={fm} />

5
comps/form/field/FieldInput.tsx
View File

@ -104,7 +104,7 @@ export const FieldInput: FC<{
<div
className={cx(
!["toogle", "button", "radio", "checkbox"].includes(arg.sub_type)
? "field-outer c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm c-bg-white"
? "field-outer c-overflow-hidden c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm c-bg-white"
: "",
fm.status === "loading"
? css`
@ -160,8 +160,6 @@ export const FieldInput: FC<{
{
type: type_field as any,
sub_type: arg.sub_type,
prefix,
suffix,
} as PropTypeInput
}
/>
@ -195,3 +193,4 @@ export const FieldInput: FC<{
</div>
);
};

40
comps/form/field/table-edit/TableEdit.tsx
View File

@ -1,7 +1,6 @@
import { TableList } from "lib/comps/list/TableList";
import { useLocal } from "lib/utils/use-local";
import { FC, ReactElement, useEffect, useRef } from "react";
import { BaseForm } from "../../base/BaseForm";
import { FC, useRef } from "react";
import { FMLocal } from "../../typings";
export const TableEdit: FC<{
@ -18,6 +17,7 @@ export const TableEdit: FC<{
const local = useLocal(
{
tbl: null as any,
rowHeight: new WeakMap<any, Record<string, HTMLDivElement>>(),
},
() => {}
);
@ -41,6 +41,7 @@ export const TableEdit: FC<{
css`
.rdg {
overflow-y: hidden !important;
height: var(--rdg-scroll-height) !important;
}
.rdg-cell > div {
flex-direction: row;
@ -54,13 +55,13 @@ export const TableEdit: FC<{
.field-error {
display: none;
}
.rdg-cell {
min-height: 50px !important;
}
.rdg-header-row {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.table-list-inner {
position: relative !important;
}
`,
value.length === 0 &&
(show_header === "n"
@ -68,13 +69,8 @@ export const TableEdit: FC<{
display: none;
`
: css`
height: 50px;
min-height: 35px;
`),
value.length > 0 &&
css`
height: ${50 *
(show_header === "n" ? value.length : value.length + 1)}px;
`,
show_header === "n" &&
css`
.rdg-header-row {
@ -85,7 +81,16 @@ export const TableEdit: FC<{
ref={ref}
>
<TableList
row_height={50}
row_height={(row) => {
const rh = local.rowHeight.get(row);
console.log(rh);
if (rh) {
for (const div of Object.values(rh)) {
if (div.offsetHeight > 50) return div.offsetHeight + 6;
}
}
return 50;
}}
feature={[]}
child={child}
PassProp={PassProp}
@ -125,6 +130,17 @@ export const TableEdit: FC<{
}}
rows={tbl.data}
fm={fm_row}
field_ref={(ref: any) => {
if (ref) {
if (!local.rowHeight.has(props.row)) {
local.rowHeight.set(props.row, {});
}
const rh = local.rowHeight.get(props.row);
if (rh) {
rh[props.column.key] = ref;
}
}
}}
ext_fm={{
change: () => {},
remove: () => {

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

@ -8,6 +8,7 @@ export const FieldCheckbox: FC<{
fm: FMLocal;
arg: FieldProp;
}> = ({ field, fm, arg }) => {
// console.log({field, fm, arg})
const local = useLocal({
list: [] as any[],
});

3
comps/form/field/type/TypeCustom.tsx
View File

@ -1,7 +1,6 @@
import { useLocal } from "@/utils/use-local";
import { FC, isValidElement } from "react";
import { FMLocal, FieldLocal } from "../../typings";
import { useLocal } from "@/utils/use-local";
import { FieldTypeInput } from "./TypeInput";
export const TypeCustom: FC<{ field: FieldLocal; fm: FMLocal }> = ({
field,

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

@ -117,7 +117,7 @@ export const TypeDropdown: FC<{
selected: values,
});
}}
allowNew={false}
allowNew={true}
autoPopupWidth={true}
focusOpen={true}
mode={"multi"}

96
comps/form/field/type/TypeInput.tsx
View File

@ -1,14 +1,13 @@
import { AutoHeightTextarea } from "@/comps/custom/AutoHeightTextarea";
import { useLocal } from "@/utils/use-local";
import parser from "any-date-parser";
import { FC } from "react";
import Datepicker from "lib/comps/custom/Datepicker";
import { EyeIcon, EyeOff } from "lucide-react";
import { FC, FocusEvent, MouseEvent } from "react";
import { FMLocal, FieldLocal, FieldProp } from "../../typings";
import { FieldMoney } from "./TypeMoney";
import { FieldRichText } from "./TypeRichText";
import { FieldUpload } from "./TypeUpload";
import day from "dayjs";
import { EyeIcon, EyeOff } from "lucide-react";
import Datepicker from "lib/comps/custom/Datepicker";
export type PropTypeInput = {
type: "input";
@ -25,9 +24,11 @@ export type PropTypeInput = {
| "rich-text"
| "upload"
| "file"
| "search"
| "password";
suffix: string;
prefix: string;
placeholder?: string;
onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
};
const parse = parser.exportAsFunctionAny("en-US");
@ -91,9 +92,9 @@ export const FieldTypeInput: FC<{
input.change_timeout = setTimeout(fm.render, 300);
};
switch (type_field) {
case "textarea":
return (
<>
{type_field === "textarea" ? (
<AutoHeightTextarea
onChange={(ev) => {
fm.data[field.name] = ev.currentTarget.value;
@ -113,60 +114,15 @@ export const FieldTypeInput: FC<{
field.render();
}}
/>
) : type_field === "upload" ? (
<>
<FieldUpload field={field} fm={fm} prop={prop} />
{/* <input
type="file"
id="avatar"
name="avatar"
accept="image/png, image/jpeg"
onChange={async (event: any) => {
let file = null;
try {
file = event.target.files[0];
} catch (ex) {}
const formData = new FormData();
formData.append("file", file);
const response = await fetch(
"https://prasi.avolut.com/_proxy/https%3A%2F%2Feam.avolut.com%2F_upload",
{
method: "POST",
body: formData,
}
);
if (response.ok) {
const contentType: any = response.headers.get("content-type");
let result;
if (contentType.includes("application/json")) {
result = await response.json();
} else if (contentType.includes("text/plain")) {
result = await response.text();
} else {
result = await response.blob();
}
if (Array.isArray(result)) {
fm.data[field.name] = get(result, "[0]");
fm.render();
} else {
alert("Error upload");
}
} else {
}
}}
/> */}
</>
) : type_field === "money" ? (
<>
<FieldMoney field={field} fm={fm} prop={prop} arg={arg} />
</>
) : type_field === "rich-text" ? (
<>
<FieldRichText field={field} fm={fm} prop={prop} />
</>
) : type_field === "date" ? (
<>
case "upload":
return <FieldUpload field={field} fm={fm} prop={prop} />;
case "money":
return <FieldMoney field={field} fm={fm} prop={prop} arg={arg} />;
case "rich-text":
return <FieldRichText field={field} fm={fm} prop={prop} />;
case "date":
return (
<Datepicker
value={{ startDate: value, endDate: value }}
displayFormat="DD MMM YYYY"
@ -179,8 +135,9 @@ export const FieldTypeInput: FC<{
renderOnChange();
}}
/>
</>
) : (
);
}
return (
<div className="c-flex c-relative c-flex-1">
<input
type={type_field}
@ -197,22 +154,24 @@ export const FieldTypeInput: FC<{
}
renderOnChange();
}}
placeholder={arg.placeholder || ""}
placeholder={prop.placeholder || arg.placeholder || ""}
value={value}
disabled={field.disabled}
className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
className="c-flex-1 c-transition-all c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
spellCheck={false}
onFocus={() => {
onFocus={(e) => {
field.focused = true;
display = "";
field.render();
prop.onFocus?.(e);
}}
onKeyDown={(e) => {
if (e.key === "Enter" && fm.status === "ready") fm.submit();
}}
onBlur={() => {
onBlur={(e) => {
field.focused = false;
field.render();
prop.onBlur?.(e);
}}
/>
{arg.sub_type === "password" && (
@ -233,8 +192,6 @@ export const FieldTypeInput: FC<{
</div>
)}
</div>
)}
</>
);
};
const isTimeString = (time: any) => {
@ -242,3 +199,4 @@ const isTimeString = (time: any) => {
const timePattern = /^([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d)?$/;
return timePattern.test(time);
};

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

@ -8,6 +8,7 @@ import { get_value } from "./get-value";
import { on_load_rel } from "./on_load_rel";
import { set_value } from "./set-value";
import { createId } from "@paralleldrive/cuid2";
import get from "lodash.get";
export type GFCol = {
name: string;
type: string;
@ -166,17 +167,21 @@ export const newField = async (
rel: fields,
});
if (!result.on_load) {
result.on_load = `() => { return []; }`;
}
let child: any = { childs: [] };
let rel__gen_fields: any = undefined;
let sub_type = "checkbox";
if (arg.relation?.fields?.length > 1) {
sub_type = "table-edit";
rel__gen_fields = JSON.stringify(
arg.relation?.fields.map((e) => {
const relation = arg.relation?.fields.filter((e) => get(e, "name") !== opt.parent_table) || [];
let rel__gen_fields: any = JSON.stringify(
relation.map((e) => {
const v = (e as any).value;
return v;
})
);
let sub_type = "typeahead";
if (arg.relation?.fields?.length > 2) {
sub_type = "table-edit";
child = createItem({
childs: await generateRelation(
{

256
comps/form/gen/gen-field.ts Executable file
View File

@ -0,0 +1,256 @@
import { generateSelect } from "lib/comps/md/gen/md-select";
import { parseGenField } from "lib/gen/utils";
import { on_load_rel } from "./on_load_rel";
import { gen_rel_many, getColumn } from "./gen-rel-many";
import get from "lodash.get";
export const generateField = async (
data: any,
item: PrasiItem,
commit: boolean
) => {
let fieldType = getString(data.sub_type.value) as string;
let table = getString(data.rel__gen_table.value) as string;
const raw_fields = JSON.parse(data.rel__gen_fields.value) as (
| string
| { value: string; checked: string[] }
)[];
if (["checkbox", "button"].includes(fieldType)) {
const fields = parseGenField(raw_fields);
const res = generateSelect(fields);
const master = fields.find(
(e: any) => e.type === "has-one" && e.name !== table
) as any;
const pk = fields.find((e: any) => get(e, "is_pk")) as any;
const pk_master = master.relation.fields.find((e: any) => get(e, "is_pk"));
console.log(getColumn(res));
const load = on_load_rel({
pk: generateSelect(parseGenField(master.value.checked)).pk,
table: master?.name,
select: generateSelect(parseGenField(master.value.checked)).select,
pks: {},
type: fieldType,
} as any);
const result = {
opt__on_load: load,
opt__get_value: `\
(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];
switch (type) {
case "single-option":
try {
const data = fm.data[name];
if (typeof data === "object") {
if (typeof data?.connect?.id === "string") {
result = data.connect.id;
}else if (typeof data?.id === "string") {
result = data.id;
}
}
} catch (ex) { }
break;
case "multi-option":
const selected = [];
const data = fm.data[name];
if (Array.isArray(data) && data.length) {
data.map((e) => {
try {
if (typeof e === "object") {
if (typeof e["${master.name}"].connect?.${pk_master.name} === "string") {
selected.push(e["${master.name}"].connect.${pk_master.name});
} else if (typeof e["${master.name}"]?.${pk_master.name} === "string") {
selected.push(e["${master.name}"].${pk_master.name});
}
}
} catch (ex) { }
})
}
return selected;
break;
}
return result;
}
`,
opt__set_value: `\
(arg: {
selected: any[];
options: { label: string; value: string; item?: string }[];
fm: FMLocal;
name: string;
type: string;
}) => {
const { selected, options, fm, name, type } = arg;
switch (type) {
case "single-option":
fm.data[name] = {
connect: {
id: selected[0],
},
};
break;
case "multi-option":
let parent = {} as any;
const fields = parseGenField(fm.props.gen_fields);
const res = generateSelect(fields);
try {
parent = {
[fm.props.gen_table]: {
connect: {
[res.pk]: fm.data.id || null,
},
},
};
} catch (e) {}
fm.data[name] = selected.map((e) => {
return {
${master.name}: {
connect: {
id: e,
},
},
...parent,
};
});
break;
default:
fm.data[name] = selected.map((e) => e);
}
fm.render();
}
`,
opt__label: `\
(row: { value: string; label: string; data?: any }) => {
const cols = ${JSON.stringify(
getColumn(generateSelect(parseGenField(master.value.checked)))
)};
if (isEditor) {
return row.label;
}
const result = [];
if (!!row.data && !row.label && !Array.isArray(row.data)) {
if(cols.length > 0){
cols.map((e) => {
if (row.data[e]) {
result.push(row.data[e]);
}
});
return result.join(" - ");
} else {
const fields = parseGenField(rel__gen_fields);
return fields
.filter((e) => !e.is_pk)
.map((e) => row.data[e.name])
.filter((e) => e)
.join(" - ");
}
}
return row.label;
}
`,
} as any;
Object.keys(result).map((e) => {
item.edit.setProp(e, {
mode: "raw",
value: result[e],
});
});
await item.edit.commit();
// console.log("halo", {fieldType, table, fields, res, load});
// console.log({
// table_parent: table,
// arg: fields.find(
// (e: any) => e.type === "has-one" && e.name !== table
// ),
// rel: fields.filter(
// (e: any) => e.type !== "has-many"
// ),
// })
// const result = gen_rel_many({
// table_parent: table,
// arg: fields.find(
// (e: any) => e.type === "has-one" && e.name !== table
// ),
// rel: fields.filter(
// (e: any) => e.type !== "has-many"
// ),
// });
} else if (["table-edit"].includes(fieldType)) {
const result = {
opt__on_load: "() => { return []; }",
opt__get_value: `\
(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];
switch (type) {
case "single-option":
try {
const data = fm.data[name];
if (typeof data === "object") {
if (typeof data?.connect?.id === "string") {
result = data.connect.id;
}else if (typeof data?.id === "string") {
result = data.id;
}
}
} catch (ex) { }
break;
}
return result;
}
`,
opt__set_value: `\
(arg: {
selected: any[];
options: { label: string; value: string; item?: string }[];
fm: FMLocal;
name: string;
type: string;
}) => {
fm.render();
}
`,
opt__label: `\
(row: { value: string; label: string; item?: any }) => {
return row.label;
}
`,
} as any;
Object.keys(result).map((e) => {
item.edit.setProp(e, {
mode: "raw",
value: result[e],
});
});
await item.edit.commit();
}
};
export const getString = (data: string) => {
let result = null;
try {
result = eval(data);
} catch (e) {
result = data;
}
return result;
};

18
comps/form/gen/gen-rel-many.ts
View File

@ -116,12 +116,7 @@ export const gen_rel_many = (prop: {
fm.render();
}
`;
const cols = [];
for (const [k, v] of Object.entries(select.select) as any) {
if (k !== select.pk && typeof v !== "object") {
cols.push(k);
}
}
const cols = getColumn(select) || [];
const get_label = `\
(row: { value: string; label: string; data?: any }) => {
const cols = ${JSON.stringify(cols)};
@ -161,7 +156,6 @@ export const gen_rel_many = (prop: {
}
`;
result.get_value = `\
(arg: {
options: { label: string; value: string; item?: string }[];
@ -207,3 +201,13 @@ export const gen_rel_many = (prop: {
}
return result;
};
export const getColumn = (data: any) => {
const cols = [];
for (const [k, v] of Object.entries(data.select) as any) {
if (k !== data.pk && typeof v !== "object") {
cols.push(k);
}
}
return cols;
};

1
comps/form/gen/gen-rel.ts
View File

@ -38,7 +38,6 @@ export const generateRelation = async (
return result;
}
} else {
console.log(item.edit.props);
}
};

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

@ -1,13 +1,17 @@
import { isEmptyString } from "lib/utils/is-empty-string";
export const on_load_rel = ({
pk,
table,
select,
pks,
type
}: {
pk: string;
table: string;
select: any;
pks: Record<string, string>;
type?: string;
}) => {
const sample = {
label: "sample",
@ -34,15 +38,15 @@ export const on_load_rel = ({
if (arg.mode === 'count') {
return await db.${table}.count();
}
${!isEmptyString(type) && ["checkbox", "typeahead", "button"].includes(type as any) ? `` : `const fields = parseGenField(rel__gen_fields);
const res = generateSelect(fields);`}
const fields = parseGenField(rel__gen_fields);
const res = generateSelect(fields);
const items = await db.${table}.findMany({
select: {
${!isEmptyString(type) && ["checkbox", "typeahead", "button"].includes(type as any) ? `` : `select: {
...${JSON.stringify(select)},
...(res?.select || {})
},
},`}
orderBy: arg.orderBy || {
${pk}: "desc"
},

12
comps/form/typings.ts
View File

@ -1,5 +1,5 @@
import { GFCol } from "@/gen/utils";
import { ReactNode } from "react";
import { MutableRefObject, ReactNode } from "react";
import { editorFormData } from "./utils/ed-data";
export type FMProps = {
@ -49,6 +49,7 @@ export type FieldProp = {
fm: FMLocal;
type: FieldType | (() => FieldType);
required: ("y" | "n") | (() => "y" | "n");
field_ref?: (ref: any) => void;
required_msg: (name: string) => string;
on_change: (arg: { value: any }) => void | Promise<void>;
PassProp: any;
@ -72,7 +73,7 @@ export type FieldProp = {
name: string;
type: string;
}) => any;
tbl_show_header?: "y" | "n"
tbl_show_header?: "y" | "n";
opt_set_value: (arg: {
selected: string[];
options: { label: string; value: string; item?: string }[];
@ -157,7 +158,11 @@ export type FieldInternal<T extends FieldProp["type"]> = {
options: {
on_load?: () => Promise<{ value: string; label: string }[]>;
};
on_change?: (arg: { value: any, name: string, fm: FMLocal }) => void | Promise<void>;
on_change?: (arg: {
value: any;
name: string;
fm: FMLocal;
}) => void | Promise<void>;
prop?: any;
};
export type FieldLocal = FieldInternal<any> & {
@ -249,3 +254,4 @@ export const FieldTypeCustom = `type CustomField =
{ field: "text", type: "text" | "password" | "number" | "date" | "datetime" }
| { field: "relation", type: "has-many" | "has-one" }
`;

5
comps/form/utils/use-field.tsx
View File

@ -1,5 +1,5 @@
import { useLocal } from "@/utils/use-local";
import { useEffect } from "react";
import { useEffect, useRef } from "react";
import { FieldInternal, FieldProp } from "../typings";
export const useField = (
@ -14,7 +14,10 @@ export const useField = (
return <arg.PassProp>{arg.child}</arg.PassProp>;
},
input: {},
ref: null as any,
} as any);
const ref = useRef(null as any)
field.ref = ref;
const name = typeof arg.name === "string" ? arg.name : arg.name();
const label = typeof arg.label === "string" ? arg.label : arg.label();

50
comps/list/TableList.tsx
View File

@ -10,6 +10,7 @@ import {
MouseEvent,
ReactElement,
ReactNode,
useCallback,
useEffect,
} from "react";
import DataGrid, {
@ -25,6 +26,8 @@ import { filterWhere } from "../filter/utils/filter-where";
import { Skeleton } from "../ui/skeleton";
import "./TableList.css";
import { sortTree } from "./utils/sort-tree";
import { getFilter } from "../filter/utils/get-filter";
import { callback } from "chart.js/dist/helpers/helpers.core";
type OnRowClick = (arg: {
row: any;
@ -55,7 +58,7 @@ type TableListProp = {
feature?: Array<any>;
filter_name: string;
render_row?: (child: any, data: any) => ReactNode;
row_height?: number;
row_height?: number | ((row: any) => number);
render_col?: (arg: {
props: RenderCellProps<any, unknown>;
tbl: any;
@ -76,6 +79,7 @@ const selectCellClassname = css`
margin: 0;
}
`;
export const TableList: FC<TableListProp> = ({
name,
on_load,
@ -90,7 +94,6 @@ export const TableList: FC<TableListProp> = ({
id_parent,
feature,
filter_name,
render_row,
row_height: rowHeight,
render_col,
show_header,
@ -200,16 +203,8 @@ export const TableList: FC<TableListProp> = ({
},
});
// code ini digunakan untuk mengambil nama dari pk yang akan digunakan sebagai key untuk id
const pk = local.pk?.name || "id";
useEffect(() => {
if (isEditor || value) {
on_init(local);
return;
}
(async () => {
on_init(local);
if (local.status === "reload" && typeof on_load === "function") {
const reload = useCallback(() => {
if (typeof on_load === "function") {
local.status = "loading";
local.render();
@ -239,6 +234,33 @@ export const TableList: FC<TableListProp> = ({
if (result instanceof Promise) result.then(callback);
else callback(result);
}
}, [
on_load,
local.sort.orderBy,
where,
local.paging.take,
local.paging.skip,
]);
if (filter_name) {
const f = getFilter(filter_name);
if (f) {
f.list.ref[_item.id] = { reload };
}
}
// code ini digunakan untuk mengambil nama dari pk yang akan digunakan sebagai key untuk id
const pk = local.pk?.name || "id";
useEffect(() => {
if (isEditor || value) {
on_init(local);
return;
}
(async () => {
on_init(local);
if (local.status === "reload" && typeof on_load === "function") {
reload();
}
})();
}, [local.status, on_load, local.sort.orderBy]);
@ -258,7 +280,7 @@ export const TableList: FC<TableListProp> = ({
sub_name = "tbl-col";
break;
case "list":
sub_name = "md-list";
sub_name = "list-row";
break;
}
@ -646,7 +668,7 @@ export const TableList: FC<TableListProp> = ({
{data.map((e, idx) => {
return (
<div
className="flex-grow hover:c-bg-[#e2f1ff]"
className="flex-grow"
onClick={(ev) => {
if (!isEditor && typeof row_click === "function") {
row_click({

14
comps/md/MasterDetail.tsx
View File

@ -12,6 +12,12 @@ import {
import { MDLocalInternal, MDProps } from "./utils/typings";
import { mdRenderLoop } from "./utils/md-render-loop";
import { parseGenField } from "lib/gen/utils";
import { toast } from "sonner";
import { Loader2 } from "lucide-react";
import get from "lodash.get";
const w = window as unknown as {
generating_prasi_md: Record<string, true>;
};
export const MasterDetail: FC<MDProps> = (arg) => {
const {
@ -95,6 +101,14 @@ export const MasterDetail: FC<MDProps> = (arg) => {
}
}
}
if (get(w, "generating_prasi_md.master_detail"))
return (
<div className="c-relative c-p-4 c-w-full c-bg-white c-rounded-lg c-overflow-hidden c-h-full c-shadow c-flex c-justify-center c-items-center">
<Loader2 className="c-h-4 c-w-4 c-animate-spin" />
Loading Master Detail...
</div>
);
return (
<div
className={cx(

39
comps/md/gen/md-gen.ts
View File

@ -7,33 +7,20 @@ const w = window as unknown as {
generating_prasi_md: Record<string, true>;
};
export const generateMasterDetail: GenFn<{ item: PrasiItem, table: string, fields: any }> = async (
modify,
data,
arg
) => {
export const generateMasterDetail: GenFn<{
item: PrasiItem;
table: string;
fields: any;
}> = async (modify, data, arg) => {
const { item } = arg;
// loading generate MD
w.generating_prasi_md = {
master_detail: true,
};
// w.generating_prasi_md = {
// master_detail: true,
// };
// const result: any = {};
// modify(result);
await generateList(arg, data, false);
await generateMDForm(arg, data, false)
// const childs = item.edit.childs[0].edit.childs;
// const master = childs.find(
// (e) => e.component?.id === "c68415ca-dac5-44fe-aeb6-936caf8cc491"
// );
// if (master) {
// master.edit.setProp("on_init", {
// mode: "raw",
// value: `async (text: string) => {
// }`,
// });
//
// }
await generateMDForm(arg, data, false);
await item.edit.commit();
// delete w.generating_prasi_md["master_detail"];
// modify({});
};

2
comps/md/gen/mode-table-list.ts
View File

@ -5,7 +5,7 @@ export const modeTableList = (mode: string) => {
sub_name = "tbl-col";
break;
case "list":
sub_name = "md-list";
sub_name = "list-row";
break;
}
return sub_name;

2
comps/md/gen/tbl-list/on_load.ts
View File

@ -74,7 +74,7 @@ export const on_load = ({
orderBy?: Record<string, "asc" | "desc">;
paging: { take: number; skip: number };
mode: 'count' | 'query';
where?: any
where?: Record<string, any>;
}
`;
};

1
comps/md/parts/MDMaster.tsx
View File

@ -16,7 +16,6 @@ export const MDRenderMaster: FC<{
let md = on_init();
md.header.breadcrumb = breadcrumb();
md.header.render();
if (md) {
let width = 0;
let min_width = 0;

2
exports.tsx
View File

@ -75,7 +75,7 @@ export { password } from "@/utils/password";
export { generateTableList } from "@/comps/md/gen/gen-table-list";
export { generateForm } from "@/comps/form/gen/gen-form";
export { generateSelect } from "@/comps/md/gen/md-select";
export {generateField} from "@/comps/form/gen/gen-field";
/** Session */
export {
registerSession,

2
gen/gen_table_list/gen_table_list.tsx
View File

@ -59,7 +59,7 @@ export const gen_table_list = async (
sub_name = "tbl-col";
break;
case "list":
sub_name = "md-list";
sub_name = "list-row";
break;
}

2
gen/gen_table_list/on_load.ts
View File

@ -51,7 +51,7 @@ type TableOnLoad = {
orderBy?: Record<string, "asc" | "desc">;
paging: { take: number; skip: number };
mode: 'count' | 'query';
where?: any
where?: Record<string, any>;
}
`;
};

2
preset/menu/Layout.tsx
View File

@ -75,7 +75,7 @@ export const Layout: FC<LYTChild> = (props) => {
}
}
if (!w.user) return props.blank_layout;
if (!w.user && !isEditor) return props.blank_layout;
return <>{props.default_layout}</>;
};

23
preset/menu/Menu.tsx
View File

@ -16,12 +16,11 @@ export const Menu: FC<MenuProp> = (props) => {
cache: false,
active: null as any,
mode: "full" as "full" | "mini",
});
useEffect(() => {
local.mode = props.mode;
local.render();
}, [props.mode])
}, [props.mode]);
if (!local.open.length && !local.cache) {
const result = findChildMenu(menu, (e: any) => e[2] === pathname);
if (Array.isArray(result)) {
@ -31,9 +30,6 @@ export const Menu: FC<MenuProp> = (props) => {
local.render();
}
}
const styles = props.style;
const PassProp = props.PassProp;
return (
<div
className={cx(
@ -41,16 +37,13 @@ export const Menu: FC<MenuProp> = (props) => {
"c-h-full c-w-full c-flex c-flex-col c-flex-grow c-px-3 c-py-4 c-overflow-y-auto c-rounded "
)}
>
<div className="c-px-2 c-py-2" onClick={async () => {
const item = props.item;
// item.edit.setProp("mode", props.mode === "mini" ? "full": "mini");
// await item.edit.commit();
local.mode = local.mode === "mini" ? "full": "mini";
local.render();
}}>
{/* {icon.hamburger} */}
</div>
<SideBar data={menu} local={local} pm={props} depth={0} mode={local.mode}/>
<SideBar
data={menu}
local={local}
pm={props}
depth={0}
mode={local.mode}
/>
</div>
);
};