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

fixing paging

This commit is contained in:
rizky 2024-08-18 19:49:00 -07:00
parent 6ac0670e78
commit f7f51d12c6
1 changed files with 162 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

312
comps/list/TableList.tsx
View File

@ -160,12 +160,19 @@ export const TableList: FC<TableListProp> = ({
skip: 0, skip: 0,
timeout: null as any, timeout: null as any,
total: 0, total: 0,
last_length: 0,
scroll: (currentTarget: HTMLDivElement) => { scroll: (currentTarget: HTMLDivElement) => {
if (local.status === "loading" || !isAtBottom(currentTarget)) return; if (
if (local.data.length >= local.paging.skip + local.paging.take) { local.data.length === 0 ||
local.paging.skip += local.paging.take; local.status !== "ready" ||
local.status = "reload"; !isAtBottom(currentTarget) ||
local.render(); local.reloading
)
return;
if (local.paging.last_length <= local.data.length) {
local.paging.skip = local.data.length;
local.reload();
} }
}, },
}, },
@ -251,24 +258,28 @@ export const TableList: FC<TableListProp> = ({
} }
const result = on_load({ ...load_args, mode: "query" }); const result = on_load({ ...load_args, mode: "query" });
const callback = (data: any[]) => { const callback = (data: any[]) => {
if (local.paging.skip === 0 || paging !== undefined || paging) { if (!local.paging || (local.paging && !local.paging.take)) {
local.data = data; local.data = data;
} else { } else {
local.data = [...local.data, ...data]; local.data = [...local.data, ...data];
} }
local.paging.last_length = local.data.length;
local.status = "ready"; local.status = "ready";
local.reloading = null; local.reloading = null;
local.render(); local.render();
done(); done();
setTimeout(() => {
if ( if (
local.grid_ref && local.grid_ref &&
!id_parent && !id_parent &&
(paging !== undefined || paging) (paging !== undefined || paging)
) ) {
local.paging.scroll(local.grid_ref); local.paging.scroll(local.grid_ref);
}
}, 100);
}; };
if (result instanceof Promise) { if (result instanceof Promise) {
@ -761,7 +772,6 @@ export const TableList: FC<TableListProp> = ({
} }
} }
console.log('auo')
if (document.getElementsByClassName("prasi-toaster").length === 0) { if (document.getElementsByClassName("prasi-toaster").length === 0) {
const elemDiv = document.createElement("div"); const elemDiv = document.createElement("div");
elemDiv.className = "prasi-toaster"; elemDiv.className = "prasi-toaster";
@ -777,150 +787,152 @@ export const TableList: FC<TableListProp> = ({
} }
return ( return (
<div <>
className={cx( {local.paging.skip} {local.paging.last_length} {local.data.length}{" "}
"table-list c-w-full c-h-full c-flex-1 c-relative c-overflow-hidden", {local.status}
dataGridStyle(local)
)}
>
{local.status !== "ready" && (
<div className="c-flex c-flex-col c-space-y-2 c-m-4 c-absolute c-left-0 c-top-0">
<Skeleton className={cx("c-w-[200px] c-h-[11px]")} />
<Skeleton className={cx("c-w-[170px] c-h-[11px]")} />
<Skeleton className={cx("c-w-[180px] c-h-[11px]")} />
</div>
)}
<div <div
className="table-list-inner c-absolute c-inset-0" className={cx(
ref={(e) => { "table-list c-w-full c-h-full c-flex-1 c-relative c-overflow-hidden",
local.el = e; dataGridStyle(local)
if (e) local.height = e.offsetHeight; )}
}}
> >
{toaster_el && {local.status !== "ready" && (
createPortal( <div className="c-flex c-flex-col c-space-y-2 c-m-4 c-absolute c-left-0 c-top-0">
<Toaster position={toast.position} cn={cn} />, <Skeleton className={cx("c-w-[200px] c-h-[11px]")} />
toaster_el <Skeleton className={cx("c-w-[170px] c-h-[11px]")} />
)} <Skeleton className={cx("c-w-[180px] c-h-[11px]")} />
{local.status === "init" ? ( </div>
<DataGrid )}
style={{ opacity: 0 }} <div
className="rdg-light" className="table-list-inner c-absolute c-inset-0"
columns={[ ref={(e) => {
{ local.el = e;
key: "_", if (e) local.height = e.offsetHeight;
name: "", }}
renderCell({ rowIdx }) { >
clearTimeout(local.paging.timeout); {toaster_el &&
local.paging.timeout = setTimeout(() => { createPortal(
local.status = "reload"; <Toaster position={toast.position} cn={cn} />,
local.paging.take = local.paging.take * 3; toaster_el
local.render(); )}
}, 100); {local.status === "init" ? (
return <></>;
},
},
]}
rows={genRows(200)}
/>
) : (
<>
<DataGrid <DataGrid
rowHeight={rowHeight || 35} style={{ opacity: 0 }}
sortColumns={local.sort.columns}
onSortColumnsChange={local.sort.on_change}
columns={columns}
rows={data}
className="rdg-light" className="rdg-light"
ref={(e) => { columns={[
local.grid_ref = e?.element as any; {
}} key: "_",
onScroll={(e) => { name: "",
console.log("scroll"); renderCell({ rowIdx }) {
local.paging.scroll(e.currentTarget); clearTimeout(local.paging.timeout);
}} local.paging.timeout = setTimeout(() => {
selectedRows={EMPTY_SET} local.status = "reload";
onSelectedCellChange={() => {}} local.render();
onSelectedRowsChange={() => {}} }, 100);
headerRowHeight={show_header === false ? 0 : undefined} return <></>;
renderers={ },
local.status !== "ready" },
? undefined ]}
: { rows={genRows(200)}
renderRow(key, props) { />
if ( ) : (
cache_row === true && <>
local.cached_row.has(props.row) <DataGrid
) { rowHeight={rowHeight || 35}
return local.cached_row.get(props.row); sortColumns={local.sort.columns}
} onSortColumnsChange={local.sort.on_change}
const isSelect = selected({ columns={columns}
idx: props.rowIdx, rows={data}
row: props.row, className="rdg-light"
rows: local.data, ref={(e) => {
}); local.grid_ref = e?.element as any;
const child_row = ( }}
<Row onScroll={(e) => {
key={key} local.paging.scroll(e.currentTarget);
{...props} }}
onClick={(ev) => { selectedRows={EMPTY_SET}
if ( onSelectedCellChange={() => {}}
!isEditor && onSelectedRowsChange={() => {}}
typeof row_click === "function" headerRowHeight={show_header === false ? 0 : undefined}
) { renderers={
row_click({ local.status !== "ready"
event: ev, ? undefined
idx: props.rowIdx, : {
row: props.row, renderRow(key, props) {
rows: local.data, if (
}); cache_row === true &&
} local.cached_row.has(props.row)
}} ) {
isRowSelected={true} return local.cached_row.get(props.row);
className={cx( }
props.className, const isSelect = selected({
(isSelect || idx: props.rowIdx,
(md?.selected?.[local.pk?.name || ""] === row: props.row,
props.row[local.pk?.name || ""] && rows: local.data,
props.row[local.pk?.name || ""])) && });
"row-selected" const child_row = (
)} <Row
/> key={key}
); {...props}
if (cache_row) { onClick={(ev) => {
local.cached_row.set(props.row, child_row); if (
} !isEditor &&
return child_row; typeof row_click === "function"
}, ) {
noRowsFallback: ( row_click({
<div className="c-flex-1 c-w-full absolute inset-0 c-flex c-flex-col c-items-center c-justify-center"> event: ev,
<div className="c-max-w-[15%] c-flex c-flex-col c-items-center"> idx: props.rowIdx,
<Sticker size={35} strokeWidth={1} /> row: props.row,
<div className="c-pt-1 c-text-center"> rows: local.data,
No&nbsp;Data });
<br /> }
{local.filtering && ( }}
<div isRowSelected={true}
className={css` className={cx(
color: gray; props.className,
font-style: italic; (isSelect ||
font-size: 90%; (md?.selected?.[local.pk?.name || ""] ===
`} props.row[local.pk?.name || ""] &&
> props.row[local.pk?.name || ""])) &&
{local.filtering} "row-selected"
</div>
)} )}
/>
);
if (cache_row) {
local.cached_row.set(props.row, child_row);
}
return child_row;
},
noRowsFallback: (
<div className="c-flex-1 c-w-full absolute inset-0 c-flex c-flex-col c-items-center c-justify-center">
<div className="c-max-w-[15%] c-flex c-flex-col c-items-center">
<Sticker size={35} strokeWidth={1} />
<div className="c-pt-1 c-text-center">
No&nbsp;Data
<br />
{local.filtering && (
<div
className={css`
color: gray;
font-style: italic;
font-size: 90%;
`}
>
{local.filtering}
</div>
)}
</div>
</div> </div>
</div> </div>
</div> ),
), }
} }
} />
/> </>
</> )}
)} </div>
</div> </div>
</div> </>
); );
} else if (mode === "list") { } else if (mode === "list") {
return ( return (