setV(x)}
// commit on blur or Enter
className="font-mono"
/>
);
}
return (
setV(e.target.value)}
onBlur={commit}
onKeyDown={onKey}
className="w-full h-8 px-2 text-[13px] focus:outline-none"
style={{ background: "var(--surface)", color: "var(--ink)", border: "1.5px solid var(--primary)", borderRadius: 6 }}
/>
);
};
function coerce(v, type) {
if (type === "int") return parseInt(v, 10);
if (type === "decimal" || type === "number") return Number(v);
if (type === "bool") return !!v;
return v;
}
// ============================================================
// Header cell with sort affordance
// ============================================================
const HeaderCell = ({ col, sortIdx, sortDir, multiSort, onSort, isFirst, hasSelection }) => {
const align =
(col.DataType === "int" || col.DataType === "decimal" || col.DataType === "number") ? "text-right" : "text-left";
return (
|
{col.Sortable ? (
) : (
{col.Label}
)}
|
);
};
// ============================================================
// Aggregate computation
// ============================================================
const aggregate = (rows, col) => {
if (!col?.Aggregate) return null;
const values = rows.map((r) => r[col.PropertyName]).filter((v) => v != null && v !== "");
switch (col.Aggregate) {
case "Count": return values.length;
case "Sum": return values.reduce((s, v) => s + Number(v || 0), 0);
case "Avg": return values.length ? (values.reduce((s, v) => s + Number(v || 0), 0) / values.length) : 0;
case "Min": return values.length ? Math.min(...values.map(Number)) : null;
case "Max": return values.length ? Math.max(...values.map(Number)) : null;
default: return null;
}
};
// ============================================================
// Column chooser
// ============================================================
const ColumnChooser = ({ open, onClose, columns, onChange, anchorRef }) => {
return (
Visible columns
{columns.map((c) => (
))}
);
};
// ============================================================
// Group-by popover
// ============================================================
const GroupByMenu = ({ open, onClose, groupableCols, groupBy, setGroupBy, anchorRef }) => (
Group by
{groupableCols.length === 0 ? (
No groupable columns
) : groupableCols.map((c) => (
))}
);
// ============================================================
// Row action menu (loaded from related actions)
// ============================================================
const RowMenu = ({ rowActions, onAction, row }) => {
const [open, setOpen] = useG_S(false);
const ref = useG_R(null);
useG_E(() => {
if (!open) return;
const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", onDown);
return () => document.removeEventListener("mousedown", onDown);
}, [open]);
if (!rowActions || rowActions.length === 0) return null;
return (
{open && (
{rowActions.map((a) => {
const mp = a.MergedParams || {};
return (
);
})}
)}
);
};
// ============================================================
// Pagination
// ============================================================
const Pagination = ({ page, pageCount, setPage, pageSize, total }) => {
if (pageCount <= 1) {
return (
Showing {total} of {total}
);
}
const from = (page - 1) * pageSize + 1;
const to = Math.min(page * pageSize, total);
let start = Math.max(1, page - 2);
let end = Math.min(pageCount, start + 4);
if (end - start < 4) start = Math.max(1, end - 4);
const range = [];
for (let i = start; i <= end; i++) range.push(i);
return (
Showing {from}–{to} of {total}
setPage(Math.max(1, page - 1))} disabled={page === 1}>
{start > 1 && …}
{range.map((p) => (
))}
{end < pageCount && …}
setPage(Math.min(pageCount, page + 1))} disabled={page === pageCount}>
);
};
// ============================================================
// MAIN GRID
// ============================================================
const Grid = ({ actionPayload, role, onToast, onOpenDetail, onAdminPatch, mergedParamsOverride }) => {
const action = actionPayload;
// Local MergedParams — the user can mutate sort/filter/columns; admin can save via mockApi
const baseParams = mergedParamsOverride || action.MergedParams;
const [mergedParams, setMergedParams] = useG_S(baseParams);
useG_E(() => { setMergedParams(baseParams); }, [baseParams, action.ActionId]);
// Data state
const [data, setData] = useG_S([]);
const [dataLoading, setDataLoading] = useG_S(true);
// Related actions
const [toolbarActions, setToolbarActions] = useG_S([]);
const [rowActions, setRowActions] = useG_S([]);
const [bulkActions, setBulkActions] = useG_S([]);
// UI state
const [search, setSearch] = useG_S("");
const [page, setPage] = useG_S(1);
const [filterOpen, setFilterOpen] = useG_S(false);
const [chooserOpen, setChooserOpen] = useG_S(false);
const [groupMenuOpen, setGroupMenuOpen] = useG_S(false);
const [groupBy, setGroupBy] = useG_S(null);
const [collapsed, setCollapsed] = useG_S(() => new Set());
const [selection, setSelection] = useG_S(() => new Set());
const [editingCell, setEditingCell] = useG_S(null); // { rowId, propertyName }
const chooserBtnRef = useG_R(null);
const groupBtnRef = useG_R(null);
// ---- Load data + related actions when actionId changes ----
useG_E(() => {
let cancelled = false;
setDataLoading(true);
setSelection(new Set());
setEditingCell(null);
setPage(1);
Promise.all([
mockApi.listData(action.ActionId, { page: 1, pageSize: 200 }),
mockApi.getRelatedActions(action.ActionId, "GridToolBar", role),
mockApi.getRelatedActions(action.ActionId, "RowActions", role),
mockApi.getRelatedActions(action.ActionId, "BulkActions", role),
]).then(([dataResp, tb, ra, ba]) => {
if (cancelled) return;
setData(dataResp.Items || []);
setToolbarActions(tb);
setRowActions(ra);
setBulkActions(ba);
setDataLoading(false);
}).catch((e) => {
if (cancelled) return;
onToast({ kind: "err", text: e.message });
setDataLoading(false);
});
return () => { cancelled = true; };
}, [action.ActionId, role]);
// ---- Columns (resolved against actual data shape) ----
const allCols = useG_M(
() => resolveColumns(mergedParams, data[0]),
[mergedParams, data]
);
const visibleCols = useG_M(() => allCols.filter((c) => c.Visible !== false), [allCols]);
const groupableCols = useG_M(() => visibleCols.filter((c) => c.Groupable), [visibleCols]);
const groupCol = groupBy ? allCols.find((c) => c.PropertyName === groupBy) : null;
const renderCols = useG_M(
() => (groupBy ? visibleCols.filter((c) => c.PropertyName !== groupBy) : visibleCols),
[visibleCols, groupBy]
);
// ---- Apply filter / search / sort ----
const filtered = useG_M(() => {
let rows = data;
rows = applyFilter(rows, mergedParams.Filter || []);
if (search.trim()) {
const q = search.toLowerCase();
rows = rows.filter((r) => Object.values(r).some((v) => v != null && String(v).toLowerCase().includes(q)));
}
rows = applySort(rows, mergedParams.Sort || [], allCols);
return rows;
}, [data, search, mergedParams, allCols]);
// ---- Pagination ----
const paginationEnabled = mergedParams.Pagination?.Enabled !== false;
const pageSize = paginationEnabled ? (mergedParams.Pagination?.PageSize || 10) : filtered.length || 1;
const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
useG_E(() => { if (page > pageCount) setPage(1); }, [pageCount]);
const pageRows = filtered.slice((page - 1) * pageSize, page * pageSize);
// ---- Grouping ----
const groups = useG_M(() => {
if (!groupBy || !groupCol) return null;
const map = new Map();
filtered.forEach((r) => {
const k = r[groupBy];
if (!map.has(k)) map.set(k, []);
map.get(k).push(r);
});
return [...map.entries()]
.sort((a, b) => cmp(a[0], b[0], "asc", groupCol.DataType))
.map(([key, rows]) => ({ key, rows }));
}, [filtered, groupBy, groupCol]);
// ---- Helpers ----
const toggleGroup = (key) => {
setCollapsed((s) => { const n = new Set(s); const k = String(key); if (n.has(k)) n.delete(k); else n.add(k); return n; });
};
const updateMergedParams = (patch) => {
const next = { ...mergedParams, ...patch };
setMergedParams(next);
if (action.ActionId) mockApi.putActionConfig(action.ActionId, next).catch(() => {});
onAdminPatch?.(next);
};
const onSort = (prop, additive) => {
const col = allCols.find((c) => c.PropertyName === prop);
if (!col?.Sortable) return;
const current = mergedParams.Sort || [];
const existing = current.find((s) => s.PropertyName === prop);
let nextSort;
if (existing) {
// flip direction; if already flipped, remove
const dirIsAsc = existing.SortDirection === "1" || existing.SortDirection === "asc";
if (dirIsAsc) {
nextSort = current.map((s) => s.PropertyName === prop ? { ...s, SortDirection: "0" } : s);
} else {
nextSort = current.filter((s) => s.PropertyName !== prop);
}
} else {
const newSort = { PropertyName: prop, ColOrder: String((current.length + 1) * 10), SortDirection: "1", Grouping: "0" };
nextSort = additive ? [...current, newSort] : [newSort];
}
updateMergedParams({ Sort: nextSort });
};
const sortIndexOf = (prop) => {
const arr = mergedParams.Sort || [];
const sorted = [...arr].sort((a, b) => Number(a.ColOrder) - Number(b.ColOrder));
return sorted.findIndex((s) => s.PropertyName === prop);
};
const sortDirOf = (prop) => {
const s = (mergedParams.Sort || []).find((x) => x.PropertyName === prop);
if (!s) return null;
return (s.SortDirection === "1" || s.SortDirection === "asc") ? "asc" : "desc";
};
const onChangeFilter = (next) => updateMergedParams({ Filter: next });
// ---- Selection ----
const allOnPage = (groups ? filtered : pageRows).map((r) => r.Id);
const allSelectedOnPage = allOnPage.length > 0 && allOnPage.every((id) => selection.has(id));
const someSelectedOnPage = allOnPage.some((id) => selection.has(id));
const toggleAllOnPage = () => {
setSelection((s) => {
const n = new Set(s);
if (allSelectedOnPage) allOnPage.forEach((id) => n.delete(id));
else allOnPage.forEach((id) => n.add(id));
return n;
});
};
const toggleOne = (id) => {
setSelection((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
};
const clearSelection = () => setSelection(new Set());
const hasSelection = selection.size > 0;
const showRowMenu = rowActions.length > 0;
// ---- Handlers (toolbar / row / bulk handler dispatcher) ----
const dispatchHandler = useG_CB(async (handler, ctx) => {
switch (handler) {
case "refresh": {
setDataLoading(true);
const dataResp = await mockApi.listData(action.ActionId, { page: 1, pageSize: 200 });
setData(dataResp.Items || []);
setDataLoading(false);
onToast({ kind: "ok", text: "Refreshed" });
break;
}
case "openColumnChooser": setChooserOpen(true); break;
case "openGroupBy": setGroupMenuOpen(true); break;
case "exportCsv": {
const headers = visibleCols.map((c) => c.Label);
const csvEsc = (s) => { const v = s == null ? "" : String(s); return /[",\n]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v; };
const lines = [headers.map(csvEsc).join(",")];
filtered.forEach((row) => { lines.push(visibleCols.map((c) => csvEsc(c.IsHtml ? String(row[c.PropertyName] || "").replace(/<[^>]+>/g, "") : fmtCell(row[c.PropertyName], c))).join(",")); });
const blob = new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a"); a.href = url; a.download = `${action.ActionName.toLowerCase().replace(/\s+/g, "_")}.csv`;
document.body.appendChild(a); a.click(); document.body.removeChild(a);
URL.revokeObjectURL(url);
onToast({ kind: "ok", text: `Exported ${filtered.length} rows` });
break;
}
case "addRow":
onToast({ kind: "info", text: "Add-new form would open here." });
break;
// Row handlers
case "viewRow":
if (action.MergedParams.DetailActionId) onOpenDetail({ detailActionId: action.MergedParams.DetailActionId, row: ctx.row });
else onToast({ kind: "info", text: `View ${JSON.stringify(ctx.row).slice(0, 60)}…` });
break;
case "editRow":
onToast({ kind: "info", text: "Edit form would open here. (Try double-clicking a non-readonly cell to inline-edit.)" });
break;
case "approveRow":
await mockApi.patchRow(action.ActionId, ctx.row.Id, { Recommendation_Value: "Approved" });
await dispatchHandler("refresh");
onToast({ kind: "ok", text: `Approved #${ctx.row.IdeaNumber || ctx.row.Id}` });
break;
case "rejectRow":
await mockApi.patchRow(action.ActionId, ctx.row.Id, { Recommendation_Value: "Rejected" });
await dispatchHandler("refresh");
onToast({ kind: "warn", text: `Rejected #${ctx.row.IdeaNumber || ctx.row.Id}` });
break;
case "deleteRow":
await mockApi.runBulk(action.ActionId, "bulkDelete", [ctx.row.Id]);
await dispatchHandler("refresh");
onToast({ kind: "warn", text: "Row deleted" });
break;
case "assignToMe":
onToast({ kind: "info", text: "Assignment would happen server-side." });
break;
// Bulk handlers
case "bulkApprove":
case "bulkReject":
case "bulkHold":
case "bulkDelete":
if (selection.size === 0) return;
await mockApi.runBulk(action.ActionId, handler, [...selection]);
clearSelection();
await dispatchHandler("refresh");
onToast({ kind: handler === "bulkDelete" ? "warn" : "ok", text: `${handler.replace("bulk","")} applied to ${selection.size} item${selection.size === 1 ? "" : "s"}` });
break;
default:
onToast({ kind: "info", text: `Handler "${handler}" not implemented.` });
}
}, [action, visibleCols, filtered, selection, onOpenDetail]);
const onRowDblClick = (row) => {
if (editingCell) return;
if (action.MergedParams.DetailActionId) {
onOpenDetail({ detailActionId: action.MergedParams.DetailActionId, row });
}
};
const onCellDblClick = (row, col) => {
if (col.ReadOnly !== false) return; // not editable
setEditingCell({ rowId: row.Id, propertyName: col.PropertyName });
};
const commitEdit = async (row, col, newValue) => {
setEditingCell(null);
try {
await mockApi.patchRow(action.ActionId, row.Id, { [col.PropertyName]: newValue });
// mutate local data optimistically
setData((d) => d.map((r) => (r.Id === row.Id ? { ...r, [col.PropertyName]: newValue } : r)));
onToast({ kind: "ok", text: `Updated ${col.Label}` });
} catch (e) {
onToast({ kind: "err", text: e.message });
}
};
return (
{/* Column chooser anchored to its button */}
setChooserOpen(false)}
columns={allCols}
onChange={(next) => updateMergedParams({ Columns: mergedParams.Columns.map((c) => c.PropertyName === next.PropertyName ? next : c) })}
anchorRef={chooserBtnRef}
/>
{/* Group-by */}
setGroupMenuOpen(false)}
groupableCols={groupableCols}
groupBy={groupBy}
setGroupBy={setGroupBy}
anchorRef={groupBtnRef}
/>
setFilterOpen(false)}
columns={allCols}
filter={mergedParams.Filter || []}
optionSets={OPTION_SETS}
onApply={onChangeFilter}
/>
{dataLoading ? (
) : visibleCols.length === 0 ? (
) : (
{bulkActions.length > 0 && (
|
{ if (el) el.indeterminate = !allSelectedOnPage && someSelectedOnPage; }}
onChange={toggleAllOnPage}
className="w-4 h-4 rounded border"
style={{ accentColor: "var(--primary)", borderColor: "var(--border-2)" }}
/>
|
)}
{renderCols.map((c, i) => (
1}
onSort={onSort}
isFirst={i === 0}
hasSelection={bulkActions.length > 0}
/>
))}
{showRowMenu && | }
{groups ? renderGroupedBody({
groups, groupCol, renderCols, showRowMenu, bulkActions, collapsed, toggleGroup,
selection, toggleOne, onRowDblClick, onCellDblClick, editingCell, commitEdit, setEditingCell,
rowActions, dispatchHandler,
}) : pageRows.length === 0 ? (
| 0 ? 1 : 0)}>
|
) : pageRows.map((row, idx) => (
toggleOne(row.Id)}
onRowDblClick={() => onRowDblClick(row)}
onCellDblClick={onCellDblClick}
editingCell={editingCell}
commitEdit={commitEdit}
setEditingCell={setEditingCell}
rowActions={rowActions}
dispatchHandler={dispatchHandler}
showRowMenu={showRowMenu}
/>
))}
)}
{groups.length} group{groups.length === 1 ? "" : "s"} · {filtered.length} record{filtered.length === 1 ? "" : "s"}
)}
);
};
// ============================================================
// TOOLBAR (separated for clarity)
// ============================================================
const Toolbar = ({
action, mergedParams, onUpdate, toolbarActions, bulkActions,
search, setSearch, groupableCols, groupBy, setGroupBy,
groupBtnRef, groupMenuOpen, setGroupMenuOpen,
chooserBtnRef, chooserOpen, setChooserOpen,
filterOpen, setFilterOpen,
selection, clearSelection,
total, dispatchHandler, onToast,
}) => {
const hasSel = selection.size > 0;
const groupedColLabel = groupBy ? (mergedParams.Columns?.find((c) => c.PropertyName === groupBy)?.Label || groupBy) : null;
// If we have selection, show the bulk action bar instead of the regular toolbar
if (hasSel && bulkActions.length > 0) {
return (
{selection.size}
selected
{bulkActions.map((a) => {
const mp = a.MergedParams;
return (
{
if (mp.ConfirmMessage && !window.confirm(mp.ConfirmMessage)) return;
await dispatchHandler(mp.Handler);
}}
>
{mp.Label}
);
})}
);
}
return (
setSearch(e.target.value)}
placeholder="Search..."
className="w-full h-8 pl-8 pr-3 text-[13px] focus:outline-none focus:border-[var(--primary)] focus:bg-[var(--surface)]"
style={{ background: "var(--surface-2)", color: "var(--ink)", border: "1px solid var(--border)", borderRadius: 7 }}
/>
{total} {total === 1 ? "record" : "records"}
{groupedColLabel && (
Grouped by {groupedColLabel}
)}
setFilterOpen(true)}
onClear={() => onUpdate({ Filter: [] })}
/>
{toolbarActions.map((a) => {
const mp = a.MergedParams;
const ref = mp.Handler === "openGroupBy" ? groupBtnRef : mp.Handler === "openColumnChooser" ? chooserBtnRef : null;
const btn = (
dispatchHandler(mp.Handler)}
>
{mp.Label}
);
// wrap in a span when we need a ref handle for popover anchoring
return ref ? (
{btn}
) : (
{btn}
);
})}
);
};
// ============================================================
// ROW (extracted so grouped + flat share the same logic)
// ============================================================
const RowTr = ({ row, idx, renderCols, bulkActions, selected, toggleOne, onRowDblClick, onCellDblClick, editingCell, commitEdit, setEditingCell, rowActions, dispatchHandler, showRowMenu, indent }) => {
return (
{ if (!selected) e.currentTarget.style.background = "var(--row-hover)"; }}
onMouseLeave={(e) => { if (!selected) e.currentTarget.style.background = idx % 2 === 1 ? "var(--row-zebra)" : "transparent"; }}
>
{bulkActions.length > 0 && (
|
e.stopPropagation()}
className="w-4 h-4 rounded border"
style={{ accentColor: "var(--primary)", borderColor: "var(--border-2)" }}
/>
|
)}
{renderCols.map((c, i) => {
const align = (c.DataType === "int" || c.DataType === "decimal" || c.DataType === "number") ? "text-right" : "text-left";
const value = row[c.PropertyName];
const isEditing = editingCell && editingCell.rowId === row.Id && editingCell.propertyName === c.PropertyName;
const editable = c.ReadOnly === false;
return (
{ e.stopPropagation(); onCellDblClick(row, c); }}
className={`${align} px-3 py-2 text-[13px] align-middle ${i === 0 && !bulkActions.length ? "pl-4 font-medium" : ""}`}
style={{ width: c.Width === "auto" ? undefined : c.Width, borderBottom: "1px solid var(--border)", paddingLeft: indent && i === 0 ? "2.5rem" : undefined, color: "var(--ink)", position: "relative" }}
title={editable ? "Double-click to edit" : undefined}
>
{isEditing ? (
commitEdit(row, c, v)} onCancel={() => setEditingCell(null)} />
) : (
|
)}
{editable && !isEditing && (
)}
|
);
})}
{showRowMenu && (
dispatchHandler(act.MergedParams.Handler, { row: r })} row={row} />
|
)}
);
};
function renderGroupedBody({ groups, groupCol, renderCols, showRowMenu, bulkActions, collapsed, toggleGroup, selection, toggleOne, onRowDblClick, onCellDblClick, editingCell, commitEdit, setEditingCell, rowActions, dispatchHandler }) {
if (groups.length === 0) {
return (
| 0 ? 1 : 0)}>
|
);
}
return groups.map((g, gIdx) => {
const k = String(g.key);
const isOpen = !collapsed.has(k);
const aggLabel = groupCol?.Aggregate || "Count";
const aggValue = aggLabel === "Count" ? g.rows.length : aggregate(g.rows, groupCol);
return (
toggleGroup(g.key)}
className="row-anim cursor-pointer transition-colors"
style={{ background: "var(--surface-2)", borderTop: "1px solid var(--border)", animationDelay: `${Math.min(gIdx, 8) * 14}ms` }}
>
| 0 ? 1 : 0)} className="px-3 py-2 pl-4">
{groupCol?.Label || "Group"}
·
{groupCol?.DataType === "enum"
?
: (g.key == null || g.key === "" ? (none) : fmtCell(g.key, groupCol))}
{aggLabel}: {aggValue}
|
{isOpen && g.rows.map((row, idx) => (
toggleOne(row.Id)}
onRowDblClick={() => onRowDblClick(row)}
onCellDblClick={onCellDblClick}
editingCell={editingCell}
commitEdit={commitEdit}
setEditingCell={setEditingCell}
rowActions={rowActions}
dispatchHandler={dispatchHandler}
showRowMenu={showRowMenu}
indent
/>
))}
);
});
}
Object.assign(window, { Grid, Cell, CELL_TEMPLATES });