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

fix

This commit is contained in:
Rizky 2024-06-29 21:52:21 -07:00
parent 61173c119a
commit 02a0b485f9
9 changed files with 94 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
comps/form/Form.tsx
View File

@ -14,7 +14,7 @@ const editorFormWidth = {} as Record<string, { w: number; f: any }>;
export { FMLocal } from "./typings";
export const Form: FC<FMProps> = (props) => {
const { PassProp, body, feature, sfd_field, style } = props;
const { PassProp, body, feature, sfd_field } = props;
const fm = useLocal<FMInternal>({
data: editorFormData[props.item.id]
? editorFormData[props.item.id].data
@ -168,7 +168,6 @@ export const Form: FC<FMProps> = (props) => {
<div
className={cx(
"form-inner c-flex c-flex-1 c-flex-wrap c-items-start c-content-start",
style === "flex" ? "" : "c-absolute c-inset-0",
css`
padding-right: 10px;
`

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

@ -15,7 +15,6 @@ export const BaseField = (prop: {
}) => {
const { field, fm, arg } = prop;
const w = field.width;
const mode = fm.props.label_mode;
const prefix =
typeof field.prefix === "function"
? field.prefix()
@ -30,8 +29,8 @@ export const BaseField = (prop: {
: null;
const name = field.name;
const errors = fm.error.get(name);
let type_field = typeof arg.type === "function" ? arg.type() : arg.type; // tipe field
const showlabel = arg.show_label || "y";
return (
<label
className={cx(
@ -48,8 +47,9 @@ export const BaseField = (prop: {
w === "½" && "c-w-1/2",
w === "⅓" && "c-w-1/3",
w === "¼" && "c-w-1/4",
mode === "horizontal" && "c-flex-row c-items-center",
mode === "vertical" && "c-flex-col c-space-y-1",
field.type === "link"
? "c-flex-row c-items-stretch c-min-h-[78px]"
: "c-flex-col c-space-y-1",
field.focused && "focused",
field.disabled && "disabled",
typeof fm.data[name] !== "undefined" &&
@ -58,12 +58,17 @@ export const BaseField = (prop: {
"filled"
)}
>
{mode !== "hidden" && <Label field={field} fm={fm} />}
{arg.show_label !== "n" && <Label field={field} fm={fm} />}
<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-overflow-hidden c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm"
? cx(
"field-outer c-overflow-hidden c-flex-1 c-flex c-flex-row c-text-sm c-bg-white",
field.type === "link"
? " c-items-center"
: "c-border c-rounded "
)
: "",
fm.status === "loading"
? css`
@ -100,6 +105,8 @@ export const BaseField = (prop: {
<div
className={cx(
"field-inner c-flex-1 c-flex c-items-center",
field.type === "link" && "c-justify-end",
field.focused && "focused",
field.disabled && "c-pointer-events-none"
)}
>

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

@ -9,7 +9,6 @@ import { validate } from "../utils/validate";
export const Field: FC<FieldProp> = (arg) => {
const showlabel = arg.show_label || "y";
let type: any = typeof arg.type === "function" ? arg.type() : arg.type; // tipe field
let sub_type: any = arg.sub_type; // tipe field
const { fm } = arg;
@ -17,7 +16,6 @@ export const Field: FC<FieldProp> = (arg) => {
const name = field.name;
const local = useLocal({ prev_val: fm.data[name] });
const mode = fm.props.label_mode;
const w = field.width;
useEffect(() => {
@ -42,7 +40,7 @@ export const Field: FC<FieldProp> = (arg) => {
className={cx(
"field",
"c-flex",
type === "single-option" && sub_type === "checkbox"
field.type === "single-option" && sub_type === "checkbox"
? css`
padding: 5px 0px 0px 7.5px;
`
@ -56,16 +54,15 @@ export const Field: FC<FieldProp> = (arg) => {
w === "½" && "c-w-1/2",
w === "⅓" && "c-w-1/3",
w === "¼" && "c-w-1/4",
mode === "horizontal" && "c-flex-row c-items-center",
mode === "vertical" && "c-flex-col c-space-y-1"
field.type === "link"
? "c-flex-row c-items-stretch c-min-h-[78px]"
: "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} />
)}
<div className="field-inner c-flex c-flex-1 c-flex-col">
{showlabel !== "n" && <Label field={field} fm={fm} />}
<div className="field-input c-flex c-flex-1 c-flex-col">
<FieldInput
field={field}
fm={fm}

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

@ -104,7 +104,10 @@ export const FieldInput: FC<{
<div
className={cx(
!["toogle", "button", "radio", "checkbox"].includes(arg.sub_type)
? "field-outer c-overflow-hidden c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm c-bg-white"
? cx(
"field-outer c-overflow-hidden c-flex-1 c-flex c-flex-row c-text-sm c-bg-white",
field.type === "link" ? " c-items-center" : "c-border c-rounded "
)
: "",
fm.status === "loading"
? css`
@ -140,6 +143,7 @@ export const FieldInput: FC<{
<div
className={cx(
"field-inner c-flex-1 c-flex c-items-center",
field.type === "link" && "c-justify-end",
field.focused && "focused",
field.disabled && "c-pointer-events-none"
)}
@ -152,6 +156,7 @@ export const FieldInput: FC<{
<>{custom}</>
) : (
<>
{type_field === "link" && <>ini link</>}
{["date", "input"].includes(type_field) ? (
<FieldTypeInput
field={field}
@ -161,7 +166,7 @@ export const FieldInput: FC<{
{
type: type_field as any,
sub_type: arg.sub_type,
model_upload: arg.model_upload
model_upload: arg.model_upload,
} as PropTypeInput
}
/>

6
comps/form/field/Label.tsx
View File

@ -11,11 +11,7 @@ export const Label: FC<{ field: FieldLocal; fm: FMLocal }> = ({
<div
className={cx(
"label c-text-sm c-flex c-items-center",
fm.props.label_mode === "horizontal" &&
css`
width: ${fm.props.label_width}px;
`,
fm.props.label_mode === "vertical" && "c-mt-3"
field.type === "link" ? "" : "c-mt-3"
)}
>
<span className={cx(errors.length > 0 && `c-text-red-600`)}>

22
comps/form/gen/gen-form.ts
View File

@ -37,6 +37,9 @@ export const generateForm = async (
return;
}
if (pk) {
const is_md =
item.edit?.parent?.item?.component?.id ===
"cb52075a-14ab-455a-9847-6f1d929a2a73";
if (data["on_load"]) {
result.on_load = {
mode: "raw",
@ -45,14 +48,16 @@ export const generateForm = async (
table,
select,
pks,
opt: {
opt: is_md
? {
after_load: `
if (typeof md === "object") {
opt.fm.status = "ready";
md.render();
}
`,
},
}
: {},
}),
};
}
@ -63,9 +68,14 @@ if (typeof md === "object") {
async ({ form, error, fm }: IForm) => {
let result = false;
try {
${
is_md &&
`\
if (typeof md !== "undefined") {
fm.status = "saving";
md.render();
}`
}
const data = { ...form };
@ -84,12 +94,16 @@ async ({ form, error, fm }: IForm) => {
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;
}`
}
// pisahkan antara has_many dengan field biasa
@ -183,6 +197,9 @@ async ({ form, error, fm }: IForm) => {
result = false;
}
${
is_md &&
`\
if (typeof md !== "undefined") {
fm.status = "ready";
// kembali ke tabel
@ -193,6 +210,7 @@ async ({ form, error, fm }: IForm) => {
md.params.apply();
md.render();
}, 500);
}`
}
return result;

12
comps/form/typings.ts
View File

@ -13,14 +13,12 @@ export type FMProps = {
layout: "auto" | "1-col" | "2-col";
meta: any;
item: any;
label_mode: "vertical" | "horizontal" | "hidden";
label_width: number;
gen_fields: any;
gen_table: string;
on_load_deps?: any[];
feature?: any[];
sfd_field?: any;
style: "default" | "flex";
};
export type GenField =
@ -37,8 +35,8 @@ export type GenField =
type FieldType =
| "-"
| "relation"
| "switch"
| "date"
| "link"
| "input"
| "single-option"
| "multi-option";
@ -71,7 +69,7 @@ export type FieldProp = {
opt_get_label: (
row: any,
mode: "list" | "label",
opt?: { next?: any; prev?: any, }
opt?: { next?: any; prev?: any }
) => string;
opt_get_value: (arg: {
options: { label: string; value: string; item?: string }[];
@ -95,11 +93,11 @@ export type FieldProp = {
pk: string;
sub_type: string;
placeholder: string;
show_label: boolean;
show_label: boolean | "y" | "n";
msg_error: string;
gen_table?: string;
gen_fields?: string;
model_upload?: "upload" | "import"
model_upload?: "upload" | "import";
};
export type FMInternal = {

18
comps/list/TableList.tsx
View File

@ -20,14 +20,14 @@ import DataGrid, {
SELECT_COLUMN_KEY,
SortColumn,
} from "react-data-grid";
import "react-data-grid/lib/styles.css";
import { createPortal } from "react-dom";
import { Toaster, toast } from "sonner";
import { call_prasi_events } from "../../..";
import { filterWhere } from "../filter/parser/filter-where";
import { getFilter } from "../filter/utils/get-filter";
import { Skeleton } from "../ui/skeleton";
import "react-data-grid/lib/styles.css";
import { sortTree } from "./utils/sort-tree";
import { call_prasi_events } from "../../..";
type OnRowClick = (arg: {
row: any;
@ -521,10 +521,10 @@ export const TableList: FC<TableListProp> = ({
let res = on_load({ ...load_args, mode: "query" }) as any;
if (typeof res === "object" && res instanceof Promise) {
res.then((e) => {
local.data = e
})
local.data = e;
});
} else {
local.data = e
local.data = res;
}
}
}
@ -715,7 +715,8 @@ export const TableList: FC<TableListProp> = ({
className="w-full h-full overflow-y-auto"
onScroll={local.paging.scroll}
>
{Array.isArray(data) ? data.map((e, idx) => {
{Array.isArray(data) ? (
data.map((e, idx) => {
return (
<div
className="flex-grow"
@ -735,7 +736,10 @@ export const TableList: FC<TableListProp> = ({
</PassProp>
</div>
);
}) : <>No Data</>}
})
) : (
<>No Data</>
)}
</div>
</>
)}