From 52105ef69ce0471819039b9d28b774f07aaed768 Mon Sep 17 00:00:00 2001 From: rizky Date: Mon, 19 Aug 2024 04:44:36 -0700 Subject: [PATCH] fix table list --- comps/list/TLList.tsx | 113 +++++++++++++++++ comps/list/TLSlider.tsx | 107 ++++++++++++++++ comps/list/TableList.tsx | 138 ++++++--------------- comps/list/{lib => utils}/export_excel.tsx | 0 comps/list/utils/type.tsx | 6 + comps/md/gen/gen-table-list.ts | 22 ++-- comps/md/gen/tbl-list/on_load.ts | 2 +- preset/menu/Layout.tsx | 1 + 8 files changed, 275 insertions(+), 114 deletions(-) create mode 100755 comps/list/TLList.tsx create mode 100755 comps/list/TLSlider.tsx rename comps/list/{lib => utils}/export_excel.tsx (100%) create mode 100755 comps/list/utils/type.tsx diff --git a/comps/list/TLList.tsx b/comps/list/TLList.tsx new file mode 100755 index 0000000..f16d99e --- /dev/null +++ b/comps/list/TLList.tsx @@ -0,0 +1,113 @@ +import { FC } from "react"; +import { Skeleton } from "../ui/skeleton"; +import { OnRowClick } from "./utils/type"; +import { Sticker } from "lucide-react"; + +export const TLList: FC<{ + local: Record & { + el: null | HTMLDivElement; + render: () => void; + }; + data: any[]; + PassProp: any; + row_click: OnRowClick; + mode_child: any; + dataGridStyle: (local: { el: null | HTMLDivElement }) => string; +}> = ({ local, data, dataGridStyle, mode_child, PassProp, row_click }) => { + return ( +
{ + if (!local.el && el) { + local.el = el; + } + }} + > + {local.status !== "ready" ? ( +
+ + + +
+ ) : ( +
+ <> + {Array.isArray(data) && data.length > 0 ? ( +
{ + local.grid_ref = e; + }} + onScroll={(e) => local.paging.scroll(e.currentTarget)} + > + {data.map((e, idx) => { + return ( +
{ + if (!isEditor && typeof row_click === "function") { + row_click({ + event: ev, + idx: idx, + row: e, + rows: local.data, + }); + } + }} + > + + {mode_child} + +
+ ); + })} +
+ ) : ( +
+ +
+ No Data +
+ {local.filtering && ( +
+ {local.filtering} +
+ )} +
+
+ )} + +
+ )} +
+ ); +}; diff --git a/comps/list/TLSlider.tsx b/comps/list/TLSlider.tsx new file mode 100755 index 0000000..2eeed3f --- /dev/null +++ b/comps/list/TLSlider.tsx @@ -0,0 +1,107 @@ +import { FC } from "react"; +import { Skeleton } from "../ui/skeleton"; +import { OnRowClick } from "./utils/type"; +import { Sticker } from "lucide-react"; + +export const TLSlider: FC<{ + local: Record & { + el: null | HTMLDivElement; + render: () => void; + }; + data: any[]; + PassProp: any; + row_click: OnRowClick; + mode_child: any; + item_w: string; + dataGridStyle: (local: { el: null | HTMLDivElement }) => string; +}> = ({ + local, + data, + dataGridStyle, + item_w, + mode_child, + PassProp, + row_click, +}) => { + return ( + <> + {local.status !== "ready" ? ( +
+ + + +
+ ) : ( + <> + {Array.isArray(data) && data.length > 0 ? ( +
{ + local.grid_ref = e; + }} + onScroll={(e) => local.paging.scroll(e.currentTarget)} + > + {data.map((e, idx) => { + return ( +
{ + if (!isEditor && typeof row_click === "function") { + row_click({ + event: ev, + idx: idx, + row: e, + rows: local.data, + }); + } + }} + > + + {mode_child} + +
+ ); + })} +
+ ) : ( +
+ +
+ No Data +
+ {local.filtering && ( +
+ {local.filtering} +
+ )} +
+
+ )} + + )} + + ); +}; diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx index 3774335..c20ba81 100755 --- a/comps/list/TableList.tsx +++ b/comps/list/TableList.tsx @@ -36,19 +36,17 @@ import { MDLocal } from "../md/utils/typings"; import { Skeleton } from "../ui/skeleton"; import { toast } from "../ui/toast"; import { sortTree } from "./utils/sort-tree"; +import { TLList } from "./TLList"; +import { OnRowClick } from "./utils/type"; +import { TLSlider } from "./TLSlider"; -type OnRowClick = (arg: { - row: any; - rows: any[]; - idx: any; - event: React.MouseEvent; -}) => void; let EMPTY_SET = new Set() as ReadonlySet; type SelectedRow = (arg: { row: any; rows: any[]; idx: any }) => boolean; type TableListProp = { child: any; PassProp: any; + list: { type: string; item_w: string }; name: string; value?: any[]; on_load?: (arg: { @@ -75,7 +73,6 @@ type TableListProp = { tbl: any; child: any; }) => ReactNode; - softdel_field?: string; gen_table?: string; softdel_type?: string; paging?: boolean; @@ -110,6 +107,7 @@ export const TableList: FC = ({ row_height: rowHeight, render_col, show_header, + list, value, paging, cache_row, @@ -163,6 +161,7 @@ export const TableList: FC = ({ last_length: 0, scroll: (currentTarget: HTMLDivElement) => { if ( + isEditor || local.data.length < local.paging.take || local.data.length === 0 || local.status !== "ready" || @@ -259,7 +258,11 @@ export const TableList: FC = ({ } const result = on_load({ ...load_args, mode: "query" }); const callback = (data: any[]) => { - if (!local.paging || (local.paging && !local.paging.take)) { + if ( + id_parent || + !local.paging || + (local.paging && !local.paging.take) + ) { local.data = data; } else { local.data = [...local.data, ...data]; @@ -414,6 +417,9 @@ export const TableList: FC = ({ useEffect(() => { if (isEditor || value) { on_init(local); + if (isEditor && local.data.length === 0 && local.status === "ready") { + reload(); + } return; } (async () => { @@ -935,107 +941,35 @@ export const TableList: FC = ({ ); } else if (mode === "list") { return ( -
{ - if (!local.el && el) { - local.el = el; - } - }} - > + <> {toaster_el && createPortal( , toaster_el )} - - {local.status !== "ready" ? ( -
- - - -
- ) : ( -
- <> - {Array.isArray(data) && data.length > 0 ? ( -
{ - local.grid_ref = e; - }} - onScroll={(e) => local.paging.scroll(e.currentTarget)} - > - {data.map((e, idx) => { - return ( -
{ - if (!isEditor && typeof row_click === "function") { - row_click({ - event: ev, - idx: idx, - row: e, - rows: local.data, - }); - } - }} - > - - {mode_child} - -
- ); - })} -
- ) : ( -
- -
- No Data -
- {local.filtering && ( -
- {local.filtering} -
- )} -
-
- )} - -
+ {list.type !== "slider" && list.type !== "grid" && ( + )} -
+ {list.type === "slider" && ( + + )} + ); - } else { } }; const CheckboxList: FC<{ diff --git a/comps/list/lib/export_excel.tsx b/comps/list/utils/export_excel.tsx similarity index 100% rename from comps/list/lib/export_excel.tsx rename to comps/list/utils/export_excel.tsx diff --git a/comps/list/utils/type.tsx b/comps/list/utils/type.tsx new file mode 100755 index 0000000..94b35ea --- /dev/null +++ b/comps/list/utils/type.tsx @@ -0,0 +1,6 @@ +export type OnRowClick = (arg: { + row: any; + rows: any[]; + idx: any; + event: React.MouseEvent; +}) => void; diff --git a/comps/md/gen/gen-table-list.ts b/comps/md/gen/gen-table-list.ts index 788ac12..9afbd7d 100755 --- a/comps/md/gen/gen-table-list.ts +++ b/comps/md/gen/gen-table-list.ts @@ -16,7 +16,7 @@ export const generateTableList = async ( let table = "" as string; try { table = eval(data.gen__table.value); - } catch (e) { + } catch (e) { table = data.gen__table?.value; } const raw_fields = JSON.parse(data.gen__fields.value) as ( @@ -129,11 +129,11 @@ const genList = async (opt: GenOpt) => { }, adv: { js: `\ -
+
`, jsBuilt: `\ -render(React.createElement("div", Object.assign({}, props, { className: cx(props.className, \`s-\${_item?.edit?.parent?.item?.id}\` , "") }),React.createElement(FormatValue, { value: _get(row, name), name: name, gen_fields: gen__fields }))); +render(React.createElement("div", Object.assign({}, props, { className: cx(props.className, _item?.edit?.parent?.item?.id && \`s-\${_item?.edit?.parent?.item?.id}\` , "") }),React.createElement(FormatValue, { value: _get(row, name), name: name, gen_fields: gen__fields }))); `, }, }), @@ -189,25 +189,25 @@ const genTable = async (opt: GenOpt) => { title: formatName(e.name), child: createItem({ name: "cell", - "layout": { - "dir": "col", - "align": "left", - "gap": 0, - "wrap": "flex-nowrap" + layout: { + dir: "col", + align: "left", + gap: 0, + wrap: "flex-nowrap", }, padding: { - l: 8, + l: 8, b: 0, t: 0, r: 8, }, adv: { js: `\ -
+
`, jsBuilt: `\ -render(React.createElement("div", Object.assign({}, props, { className: cx(props.className, \`s-\${_item?.edit?.parent?.item?.id}\` , "") }),React.createElement(FormatValue, { value: col.value, name: col.name, gen_fields: gen__fields }))); +render(React.createElement("div", Object.assign({}, props, { className: cx(props.className, _item?.edit?.parent?.item?.id && \`s-\${_item?.edit?.parent?.item?.id}\` , "") }),React.createElement(FormatValue, { value: col.value, name: col.name, gen_fields: gen__fields }))); `, }, }), diff --git a/comps/md/gen/tbl-list/on_load.ts b/comps/md/gen/tbl-list/on_load.ts index cf3f780..9544b02 100755 --- a/comps/md/gen/tbl-list/on_load.ts +++ b/comps/md/gen/tbl-list/on_load.ts @@ -40,7 +40,7 @@ async (arg: TableOnLoad) => { if (isEditor) return [${JSON.stringify(sample)}]; - let where = arg.where; + let where = arg.where as Prisma.${table}WhereInput; if (arg.mode === "count") { return await db.${table}.count({ where: { diff --git a/preset/menu/Layout.tsx b/preset/menu/Layout.tsx index a6d3d9a..bab8bf1 100755 --- a/preset/menu/Layout.tsx +++ b/preset/menu/Layout.tsx @@ -81,6 +81,7 @@ export const Layout: FC = (props) => { const newurl = new URL(`${url.protocol}//${url.host}${_href}`); const pathname = newurl.pathname; + _href = baseurl(_href); if (params) { const prefix: LinkParam["prefix"] = params.breads?.map((e) => {