fix
This commit is contained in:
rizky
parent
f44456cbdf
commit
248ceada52
|
|
@ -2,6 +2,7 @@ import { TableList } from "lib/comps/list/TableList";
|
||||||
import { useLocal } from "lib/utils/use-local";
|
import { useLocal } from "lib/utils/use-local";
|
||||||
import { FC, useEffect, useRef } from "react";
|
import { FC, useEffect, useRef } from "react";
|
||||||
import { FMLocal } from "../../typings";
|
import { FMLocal } from "../../typings";
|
||||||
|
import get from "lodash.get";
|
||||||
|
|
||||||
export const TableEdit: FC<{
|
export const TableEdit: FC<{
|
||||||
on_init: () => FMLocal;
|
on_init: () => FMLocal;
|
||||||
|
|
@ -30,11 +31,268 @@ export const TableEdit: FC<{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const value = fm.data[name];
|
const value = fm.data[name];
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
local.tbl.render();
|
local.tbl = {
|
||||||
}, [3000]);
|
data: value,
|
||||||
|
render: () => {},
|
||||||
|
};
|
||||||
|
local.render();
|
||||||
|
}, []);
|
||||||
|
const raw_childs = get(
|
||||||
|
child,
|
||||||
|
"props.meta.item.component.props.child.content.childs"
|
||||||
|
);
|
||||||
|
|
||||||
|
let columns: any[] = [];
|
||||||
|
let childs: any[] = [];
|
||||||
|
const mode_child = raw_childs.find((e: any) =>
|
||||||
|
["tbl-col", "table: columns"].includes(e.name)
|
||||||
|
);
|
||||||
|
const tbl = item.edit.childs[0].edit.childs.find(
|
||||||
|
(e: any) => get(e, "id") === mode_child.id
|
||||||
|
);
|
||||||
|
const meta = tbl;
|
||||||
|
if (meta && meta.childs) {
|
||||||
|
childs = meta.childs;
|
||||||
|
}
|
||||||
|
for (const child of childs) {
|
||||||
|
let key = getProp(child, "name", {});
|
||||||
|
const label = getProp(child, "title", "");
|
||||||
|
const type = getProp(child, "type", "");
|
||||||
|
const width = parseInt(getProp(child, "width", {}));
|
||||||
|
if (type === "checkbox") {
|
||||||
|
const on_click = getProp(child, "opt__on_click", "");
|
||||||
|
columns.push({
|
||||||
|
key,
|
||||||
|
name,
|
||||||
|
width: 35,
|
||||||
|
minWidth: 45,
|
||||||
|
resizable: true,
|
||||||
|
sortable: true,
|
||||||
|
frozen: true,
|
||||||
|
renderCell(arg: any) {
|
||||||
|
// return <></>;
|
||||||
|
const { props, tbl } = arg;
|
||||||
|
const fm_row = { ...fm, render: local.render };
|
||||||
|
return (
|
||||||
|
<PassProp
|
||||||
|
idx={props.rowIdx}
|
||||||
|
row={props.row}
|
||||||
|
fm_parent={parent}
|
||||||
|
col={{
|
||||||
|
name: props.column.key,
|
||||||
|
value: get(props.row, props.column.key),
|
||||||
|
depth: 0,
|
||||||
|
}}
|
||||||
|
fm={fm_row}
|
||||||
|
ext_fm={{
|
||||||
|
idx: props.rowIdx,
|
||||||
|
change: () => {},
|
||||||
|
remove: () => {
|
||||||
|
const data =
|
||||||
|
tbl.data.filter((e: any) => e !== props.row) || [];
|
||||||
|
fm.data[name] = data;
|
||||||
|
fm.render();
|
||||||
|
},
|
||||||
|
add: (e: any) => {
|
||||||
|
tbl.data.push(e ? e : {});
|
||||||
|
fm.render();
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{child}
|
||||||
|
</PassProp>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
columns.push({
|
||||||
|
key,
|
||||||
|
label,
|
||||||
|
width: width > 0 ? width : undefined,
|
||||||
|
resizable: true,
|
||||||
|
sortable: true,
|
||||||
|
renderCell(arg: any) {
|
||||||
|
const { props, tbl } = arg;
|
||||||
|
const fm_row = { ...fm, render: local.render };
|
||||||
|
fm_row.data = props.row;
|
||||||
|
local.tbl = tbl;
|
||||||
|
const key = props.column.key;
|
||||||
|
return (
|
||||||
|
<PassProp
|
||||||
|
idx={props.rowIdx}
|
||||||
|
row={props.row}
|
||||||
|
col={{
|
||||||
|
name: key,
|
||||||
|
value: props.row[props.column.key],
|
||||||
|
depth: props.row.__depth || 0,
|
||||||
|
}}
|
||||||
|
rows={tbl.data}
|
||||||
|
fm={fm_row}
|
||||||
|
fm_parent={parent}
|
||||||
|
ext_fm={{
|
||||||
|
idx: props.rowIdx,
|
||||||
|
change: () => {},
|
||||||
|
remove: () => {
|
||||||
|
const data =
|
||||||
|
tbl.data.filter((e: any) => e !== props.row) || [];
|
||||||
|
fm.data[name] = data;
|
||||||
|
fm.render();
|
||||||
|
},
|
||||||
|
add: (e: any) => {
|
||||||
|
tbl.data.push(e ? e : {});
|
||||||
|
fm.render();
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{child}
|
||||||
|
</PassProp>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={cx(
|
||||||
|
`c-w-full c-h-full c-flex c-flex-col`,
|
||||||
|
css`
|
||||||
|
.rdg {
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
height: var(--rdg-scroll-height) !important;
|
||||||
|
}
|
||||||
|
.rdg-cell > div {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 5px;
|
||||||
|
.field {
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.field-error {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.rdg-header-row {
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
}
|
||||||
|
.table-list-inner {
|
||||||
|
position: relative !important;
|
||||||
|
}
|
||||||
|
.typeahead-arrow {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
className={cx(
|
||||||
|
"c-table-auto",
|
||||||
|
css`
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: auto; /* Kolom akan menyesuaikan konten */
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
<tr className=" ">
|
||||||
|
{columns.map((header) => {
|
||||||
|
return (
|
||||||
|
<th
|
||||||
|
key={header.key}
|
||||||
|
className={cx(
|
||||||
|
css`
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
`,
|
||||||
|
header.width > 0
|
||||||
|
? css`
|
||||||
|
width: ${header.width}px;
|
||||||
|
`
|
||||||
|
: ""
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cx(
|
||||||
|
"rdg-cell c-py-2 c-px-4 c-flex c-flex-row c-items-center c-h-full",
|
||||||
|
|
||||||
|
header.width > 0
|
||||||
|
? css`
|
||||||
|
width: ${header.width}px;
|
||||||
|
`
|
||||||
|
: ""
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{header.label}
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="c-pb-2">
|
||||||
|
{Array.isArray(value) && value.length ? (
|
||||||
|
<>
|
||||||
|
{value.map((row: any, idx: number) => {
|
||||||
|
return (
|
||||||
|
<tr>
|
||||||
|
{columns.map((header) => {
|
||||||
|
return (
|
||||||
|
<td>
|
||||||
|
<div className="c-flex c-flex-row c-py-2 c-w-full">
|
||||||
|
{header.renderCell({
|
||||||
|
props: {
|
||||||
|
row: row,
|
||||||
|
rowIdx: idx,
|
||||||
|
column: header,
|
||||||
|
},
|
||||||
|
tbl: {
|
||||||
|
data: value,
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<PassProp
|
||||||
|
ext_fm={{
|
||||||
|
add: (e: any) => {
|
||||||
|
if (Array.isArray(fm.data[name])) {
|
||||||
|
fm.data[name].push({});
|
||||||
|
} else {
|
||||||
|
fm.data[name] = [{}];
|
||||||
|
}
|
||||||
|
fm.render();
|
||||||
|
setTimeout(() => {
|
||||||
|
const last = Array.from(
|
||||||
|
ref.current?.querySelectorAll(".rdg-row") || []
|
||||||
|
).pop();
|
||||||
|
const input = last?.querySelector("input");
|
||||||
|
if (input) {
|
||||||
|
input.focus();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
fm_parent={parent}
|
||||||
|
>
|
||||||
|
{bottom}
|
||||||
|
</PassProp>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="c-w-full c-h-full c-flex c-flex-col">
|
<div className="c-w-full c-h-full c-flex c-flex-col">
|
||||||
|
|
@ -201,3 +459,11 @@ export const TableEdit: FC<{
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function getProp(child: any, name: string, defaultValue?: any) {
|
||||||
|
const fn = new Function(
|
||||||
|
`return ${get(child, `component.props.${name}.valueBuilt`) || `null`}`
|
||||||
|
);
|
||||||
|
|
||||||
|
return fn() || defaultValue;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -157,7 +157,7 @@ export const FieldUpload: FC<{
|
||||||
input.ref.click();
|
input.ref.click();
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="c-items-center c-flex c-text-base c-px-5 c-outline-none c-rounded c-cursor-pointer "
|
className="c-items-center c-flex c-text-base c-px-3 c-outline-none c-rounded c-cursor-pointer "
|
||||||
>
|
>
|
||||||
<div className="c-flex c-flex-row c-items-center c-px-2">
|
<div className="c-flex c-flex-row c-items-center c-px-2">
|
||||||
<Upload className="c-h-4 c-w-4" />
|
<Upload className="c-h-4 c-w-4" />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue