fix
This commit is contained in:
rizky
parent
f44456cbdf
commit
248ceada52
|
|
@ -9,7 +9,7 @@ import {
|
|||
offset,
|
||||
shift,
|
||||
useClick,
|
||||
useDismiss,
|
||||
useDismiss,
|
||||
useFloating,
|
||||
useId,
|
||||
useInteractions,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { TableList } from "lib/comps/list/TableList";
|
|||
import { useLocal } from "lib/utils/use-local";
|
||||
import { FC, useEffect, useRef } from "react";
|
||||
import { FMLocal } from "../../typings";
|
||||
import get from "lodash.get";
|
||||
|
||||
export const TableEdit: FC<{
|
||||
on_init: () => FMLocal;
|
||||
|
|
@ -30,11 +31,268 @@ export const TableEdit: FC<{
|
|||
}
|
||||
}
|
||||
const value = fm.data[name];
|
||||
|
||||
useEffect(() => {
|
||||
local.tbl.render();
|
||||
}, [3000]);
|
||||
local.tbl = {
|
||||
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 (
|
||||
<>
|
||||
<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();
|
||||
}
|
||||
}}
|
||||
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">
|
||||
<Upload className="c-h-4 c-w-4" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue