@evenicanpm/portal-table-ui 1.6.0 → 1.8.0

package/src/features/table/components/dashboard/table/table-row/action-button.tsx

@@ -1,12 +1,10 @@
-import { actionIconMap, actionMutationMap } from "../actions";
-import { FlexBox } from "@evenicanpm/ui";
-import { IconButton, CircularProgress } from "@mui/material";
-import { Action } from "@evenicanpm/portal-types-schemas";
+import { Button, CircularProgress, IconButton } from "@mui/material";
 import { useMutation } from "@tanstack/react-query";
+import type { UIAction } from "src/features/table/types/schemas";
 
 interface ActionButtonProps {
 	docId: string;
-	action: Action;
+	action: UIAction;
 	resourceName: string;
 }
 
@@ -14,26 +12,36 @@ export function ActionButton({
 	action,
 	resourceName,
 	docId,
-}: Readonly<ActionButtonProps>) {
-	// Maybe move to a resolver??
-	// currently we only use the action type to resolve
-	const Icon = actionIconMap?.[action.Type];
-	const mutation = actionMutationMap?.[action.Type](resourceName, docId);
-	const { mutate, isPending } = useMutation(mutation);
+}: ActionButtonProps) {
+	const { mutate, isPending } = useMutation(
+		action.mutation({
+			resourceName,
+			docId,
+		}),
+	);
+
+	const handleClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		mutate({ docId });
+	};
+
+	if (action.icon) {
+		const Icon = action.icon;
+		return (
+			<IconButton size="small" onClick={handleClick} disabled={isPending}>
+				{isPending ? <CircularProgress size={26} /> : Icon ? <Icon /> : null}
+			</IconButton>
+		);
+	}
 
 	return (
-		<FlexBox justifyContent="flex-start" gap={1}>
-			<span key={action.Name}>
-				<IconButton
-					size="small"
-					onClick={(e) => {
-						e.stopPropagation();
-						mutate({ docId });
-					}}
-				>
-					{isPending ? <CircularProgress size={26} /> : <Icon />}
-				</IconButton>
-			</span>
-		</FlexBox>
+		<Button
+			size="small"
+			variant="outlined"
+			onClick={handleClick}
+			disabled={isPending}
+		>
+			{isPending ? <CircularProgress size={18} /> : action.label}
+		</Button>
 	);
 }

package/src/features/table/components/dashboard/table/table-row/table-row.tsx

@@ -1,10 +1,11 @@
+import { FlexBox } from "@evenicanpm/ui";
+import Checkbox from "@mui/material/Checkbox";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
+import { styled } from "@mui/system";
 import type React from "react";
+import type { UIAction } from "src/features/table/types/schemas";
 import type * as Types from "../../../../types";
-import { styled } from "@mui/system";
-import { Action } from "@evenicanpm/portal-types-schemas";
-import { FlexBox } from "@evenicanpm/ui";
 import { ActionButton } from "./action-button";
 
 /**
@@ -38,10 +39,13 @@ export type DocumentTableProps = {
 	/** */
 	handleClick: React.Dispatch<React.SetStateAction<string | number | null>>;
 	/** Actions renderer */
-	actions: Action[];
+	actions: UIAction[];
 	/** Does this view config have actions? */
 	/** The id field for the document (used for knowing what to set selected id to) */
-	idField: string;
+	id: string | number;
+	isSelected: boolean;
+	onToggleSelected: (id: string | number) => void;
+	resourceName: string;
 };
 
 /**
@@ -54,9 +58,15 @@ export default function DataTableRow({
 	columnLogic,
 	handleClick: handleSelectDocument,
 	actions,
-	idField,
-}: Readonly<DocumentTableProps>) {
-	const id = row?.[idField] as string;
+	id,
+	isSelected,
+	onToggleSelected,
+	resourceName,
+}: DocumentTableProps) {
+	const visibleActions = actions.filter(
+		(a) => !a.isEnabled || a.isEnabled(row),
+	);
+
 	return (
 		<TableRow
 			hover
@@ -69,6 +79,15 @@ export default function DataTableRow({
 				}
 			}}
 		>
+			<TableCell onClick={(e) => e.stopPropagation()}>
+				<Checkbox
+					checked={isSelected}
+					onChange={() => {
+						onToggleSelected(id);
+					}}
+				/>
+			</TableCell>
+
 			{columnLogic?.map((col, i) => {
 				// --- Cell Render --- //
 				const rawValue = row[col.id];
@@ -80,17 +99,45 @@ export default function DataTableRow({
 					</StyledTableCell>
 				);
 			})}
-			{actions?.map((action) => (
+			{visibleActions.length > 0 && (
 				<TableCell
-					key={action.Name}
 					onClick={(e) => e.stopPropagation()}
 					sx={{ whiteSpace: "nowrap" }}
 				>
-					<FlexBox justifyContent="flex-start" gap={1}>
-						<ActionButton docId={id} action={action} resourceName={"invoice"} />
+					<FlexBox
+						gap={1}
+						sx={{
+							flexDirection: "row",
+							flexWrap: "nowrap",
+							alignItems: "center",
+						}}
+					>
+						{actions.map((action) => {
+							const enabled = !action.isEnabled || action.isEnabled(row);
+							if (!enabled) {
+								return (
+									<span
+										key={action.label}
+										style={{
+											display: "inline-block",
+											width: action.icon ? "34px" : "42px",
+											height: "34px",
+										}}
+									/>
+								);
+							}
+							return (
+								<ActionButton
+									key={action.label}
+									docId={String(id)}
+									action={action}
+									resourceName={resourceName}
+								/>
+							);
+						})}
 					</FlexBox>
 				</TableCell>
-			))}
+			)}
 		</TableRow>
 	);
 }

package/src/features/table/components/dashboard/table/table-row-skeleton.tsx

@@ -1,7 +1,6 @@
 import { Skeleton } from "@mui/material";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
-import type React from "react";
 import { styled } from "@mui/system";
 
 const StyledTableCell = styled(TableCell)({

package/src/features/table/components/dashboard/table/table.tsx

@@ -9,6 +9,7 @@ import type React from "react";
 import { useState } from "react";
 import { resolvers, transformers } from "../../../logic";
 import type * as Types from "../../../types";
+import { BulkActionButton } from "./bulk-action-button";
 import { dataMaskMap as dataMaskMapLocal } from "./data-mask-map";
 import { Details } from "./details";
 import { filterRenderMapFallback } from "./filter-render-map";
@@ -18,12 +19,15 @@ import TableHeader from "./table-header";
 import { SearchField } from "./table-input";
 import DataTableRow from "./table-row/table-row";
 import TableRowSkeleton from "./table-row-skeleton";
+import { useSelectRows } from "./use-select-rows";
+
+type Id = string | number;
 
 export type DocumentTableProps = {
 	resource: Types.Schemas.Resource;
 	pageSize: number;
 	setPageSize: React.Dispatch<React.SetStateAction<number>>;
-	viewConfigQuery: (resourceName: string) => {
+	viewConfigQuery?: (resourceName: string) => {
 		queryKey: QueryKey;
 		queryFn: () => Promise<Types.Queries.TableConfig>;
 	};
@@ -46,7 +50,6 @@ export default function DocumentTable({
 	>(null);
 	const [filters, setFilters] = useState<Record<string, string>>({});
 	const [searchTerm, setSearchTerm] = useState("");
-	const [searchColumn, setSearchColumn] = useState("Title");
 
 	const {
 		dataMaskMap,
@@ -58,6 +61,9 @@ export default function DocumentTable({
 		noResultsComponent,
 		statusColorMap,
 		statusTextMap,
+		viewConfig,
+		actions: actionRegistry,
+		bulkActions: bulkRegistry,
 	} = resource;
 
 	/**
@@ -72,7 +78,7 @@ export default function DocumentTable({
 	 */
 	const resolvedFilterRenderMap = {
 		...filterRenderMapFallback,
-		...(filterRenderMap ?? {}),
+		...filterRenderMap,
 	};
 
 	const cellRenderMapDefaults = {
@@ -92,6 +98,7 @@ export default function DocumentTable({
 	) => {
 		setPageSize(Number.parseInt(event.target.value, 10));
 		setPage(0);
+		clearSelection();
 	};
 
 	const handleChangePage = (
@@ -99,6 +106,7 @@ export default function DocumentTable({
 		newPage: number,
 	) => {
 		setPage(newPage);
+		clearSelection();
 	};
 
 	const handleBack = () => {
@@ -122,22 +130,34 @@ export default function DocumentTable({
 	 */
 
 	// --- Fetch --- //
-	const { data: config, isPending: configPending } = useQuery(
-		viewConfigQuery(resource.name),
-	);
-	const { data: rows, isPending: rowsPending } = useQuery(
-		resource.rowsQueryFn({ page, pageSize, filters, searchColumn, searchTerm }),
-	);
+	const { data: fetchedConfig, isPending: fetchedConfigPending } = useQuery({
+		...(viewConfigQuery?.(resource.name) ?? {
+			queryKey: [],
+			queryFn: () => Promise.resolve(undefined),
+		}),
+		enabled: !!viewConfigQuery && !viewConfig,
+	});
+
+	const config = viewConfig ?? fetchedConfig;
+
+	const configPending = !viewConfig ? fetchedConfigPending : false;
 
 	const columns = config?.Columns ?? [];
-	const actions = config?.Actions ?? [];
-	const hasActions = actions.length > 0;
 
 	// --- Transformer --- //
 	const searchableCols = transformers.getSearchableColumns(columns);
 	const filterReqs = transformers.getActiveFilters(columns);
 	const visibleCols = transformers.getVisibleColumns(columns);
 
+	// Depends on searchableCols, must be declared after transformer
+	const [searchColumn, setSearchColumn] = useState(
+		() => searchableCols?.[0]?.Data ?? "Title",
+	);
+
+	const { data: rows, isPending: rowsPending } = useQuery(
+		resource.rowsQueryFn({ page, pageSize, filters, searchColumn, searchTerm }),
+	);
+
 	// --- Resolver --- //
 	const filterLogic = filterReqs?.map((req) => ({
 		req,
@@ -150,28 +170,86 @@ export default function DocumentTable({
 		cellFn: resolvers.resolveCellUI(col, cellRenderMapDefaults),
 	}));
 
+	const getRowId = (row: Types.Queries.Row, field: string): Id | null => {
+		const v = row?.[field];
+		if (typeof v === "string" || typeof v === "number") return v;
+		return null;
+	};
+
+	const currentPageIds: Id[] =
+		rows?.data
+			?.map((r) => getRowId(r, idField))
+			.filter((v): v is Id => v !== null) ?? [];
+
+	const {
+		selectedIds,
+		clearSelection,
+		toggleOne,
+		toggleAllOnPage,
+		isAllOnPageSelected,
+		isSomeOnPageSelected,
+	} = useSelectRows({ currentPageIds });
+
+	const hasTemplateSupport =
+		!!resource.detailsQueryFn && !!resource.detailsTemplate;
+
+	const { data: detailsData, isPending: detailsPending } = useQuery(
+		hasTemplateSupport && selectedDocument
+			? resource.detailsQueryFn!(String(selectedDocument))
+			: {
+					queryKey: [],
+					queryFn: async () => undefined,
+					enabled: false,
+				},
+	);
+
+	const resolvedActions = resolvers.resolveActions(
+		config?.Actions,
+		actionRegistry,
+	);
+	const resolvedBulkActions = resolvers.resolveBulkActions(
+		config?.BulkActions,
+		bulkRegistry,
+	);
+
+	const hasActions =
+		configPending ||
+		(resolvedActions.length > 0 &&
+			rows?.data?.some((row) =>
+				resolvedActions.some((a) => !a.isEnabled || a.isEnabled(row)),
+			)) ||
+		false;
+	const hasBulkActions = resolvedBulkActions.length > 0;
+
 	// --- Render --- //
 	if (selectedDocument) {
-		const selectedDocDetails =
-			rows?.data.find((doc) => doc?.[idField] === selectedDocument) || {};
-		// Build the logic necessary for rendering
+		const rowSnapshot =
+			rows?.data.find((doc) => doc?.[idField] === selectedDocument) ?? {};
+
+		const finalDetailsData =
+			hasTemplateSupport && detailsData ? detailsData : rowSnapshot;
+
 		return (
 			<Details
 				documentTypeLabel={label}
 				id={selectedDocument}
-				documentData={selectedDocDetails}
+				documentData={finalDetailsData}
 				handleBack={handleBack}
-				columns={columns || []}
+				columns={columns}
 				dataMaskMap={resolvedDataMaskMap}
 				statusColorMap={statusColorMap}
 				statusTextMap={statusTextMap}
 				detailsRenderMap={detailsRenderMap}
+				template={hasTemplateSupport ? resource.detailsTemplate : undefined}
+				loading={hasTemplateSupport ? detailsPending : false}
+				actions={resolvedActions}
+				resourceName={resource.name}
 			/>
 		);
 	}
 
-	// Table body data calculations
-	const colSpan = visibleCols?.length ? visibleCols.length + 1 : 4;
+	const baseCols = (visibleCols?.length ?? 0) + 1;
+	const colSpan = hasActions ? baseCols + 1 : baseCols;
 	const noResults = !rowsPending && !configPending && rows?.data?.length === 0;
 
 	return (
@@ -180,7 +258,7 @@ export default function DocumentTable({
 			<FlexBox
 				justifyContent={"flex-end"}
 				width="100%"
-				height={65}
+				height="fit-content"
 				gap={2}
 				pt={2}
 			>
@@ -196,10 +274,33 @@ export default function DocumentTable({
 						key={filter.req?.filterName}
 						value={filters}
 						setValue={setFilters}
-						resetPagination={() => setPage(0)}
+						resetPagination={() => {
+							setPage(0);
+							clearSelection();
+						}}
 						{...filter.req}
 					/>
 				))}
+
+				{hasBulkActions &&
+					resolvedBulkActions.map((action) => {
+						const selectedRows =
+							rows?.data?.filter((row) => {
+								const id = getRowId(row, idField);
+								return id !== null && selectedIds.has(id);
+							}) ?? [];
+
+						return (
+							<BulkActionButton
+								key={action.label}
+								action={action}
+								resourceName={resource.name}
+								selectedIds={Array.from(selectedIds)}
+								selectedRows={selectedRows}
+								clearSelection={clearSelection}
+							/>
+						);
+					})}
 			</FlexBox>
 			<TableContainer>
 				<Table aria-label="simple table" sx={{ tableLayout: { md: "fixed" } }}>
@@ -207,7 +308,11 @@ export default function DocumentTable({
 						columns={visibleCols}
 						loading={configPending}
 						hasActions={hasActions}
+						selectAllChecked={isAllOnPageSelected}
+						selectAllIndeterminate={isSomeOnPageSelected}
+						onToggleAll={toggleAllOnPage}
 					/>
+
 					<TableBody>
 						{noResults ? (
 							<TableRow>
@@ -222,16 +327,24 @@ export default function DocumentTable({
 						) : rowsPending ? (
 							<TableRowSkeleton pageSize={pageSize} colSpan={colSpan} />
 						) : (
-							rows?.data?.map((row, i) => (
-								<DataTableRow
-									key={`data-table-row-${i + 1}`}
-									columnLogic={columnLogic}
-									row={row}
-									handleClick={setSelectedDocument}
-									idField={idField}
-									actions={actions}
-								/>
-							))
+							rows?.data?.map((row) => {
+								const id = getRowId(row, idField);
+								if (id === null) return null;
+
+								return (
+									<DataTableRow
+										key={id}
+										columnLogic={columnLogic}
+										row={row}
+										handleClick={setSelectedDocument}
+										id={id}
+										actions={resolvedActions}
+										isSelected={selectedIds.has(id)}
+										onToggleSelected={(docId) => toggleOne(docId)}
+										resourceName={resource.name}
+									/>
+								);
+							})
 						)}
 					</TableBody>
 				</Table>

package/src/features/table/components/dashboard/table/use-select-rows.ts

@@ -0,0 +1,53 @@
+import { useState } from "react";
+
+type Id = string | number;
+
+type Input = {
+	currentPageIds: Id[];
+};
+
+export const useSelectRows = (input: Input) => {
+	const { currentPageIds } = input;
+
+	const [selectedIds, setSelectedIds] = useState<Set<Id>>(new Set());
+
+	const clearSelection = () => setSelectedIds(new Set());
+
+	const toggleOne = (id: Id) => {
+		setSelectedIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+
+	const isAllOnPageSelected =
+		currentPageIds.length > 0 &&
+		currentPageIds.every((id) => selectedIds.has(id));
+
+	const isSomeOnPageSelected =
+		currentPageIds.some((id) => selectedIds.has(id)) && !isAllOnPageSelected;
+
+	const toggleAllOnPage = (checked: boolean) => {
+		setSelectedIds((prev) => {
+			const next = new Set(prev);
+			if (checked) {
+				for (const id of currentPageIds) next.add(id);
+			} else {
+				for (const id of currentPageIds) next.delete(id);
+			}
+			return next;
+		});
+	};
+
+	return {
+		selectedIds,
+		setSelectedIds,
+		clearSelection,
+		toggleOne,
+		toggleAllOnPage,
+		isAllOnPageSelected,
+		isSomeOnPageSelected,
+	};
+};

package/src/features/table/components/dashboard/table-dashboard.tsx

@@ -3,10 +3,10 @@ import TabList from "@mui/lab/TabList";
 import TabPanel from "@mui/lab/TabPanel";
 import Box from "@mui/material/Box";
 import Tab from "@mui/material/Tab";
+import type { QueryKey } from "@tanstack/react-query";
 import { type SyntheticEvent, useState } from "react";
 import type * as Types from "../../types";
 import { Table } from "./table";
-import { QueryKey } from "@tanstack/react-query";
 
 /**
  * The main props for top-level table entry-point
@@ -14,7 +14,7 @@ import { QueryKey } from "@tanstack/react-query";
  *
  */
 export interface TableProps {
-	viewConfigQuery: (resourceName: string) => {
+	viewConfigQuery?: (resourceName: string) => {
 		queryKey: QueryKey;
 		queryFn: () => Promise<Types.Queries.TableConfig>;
 	};

package/src/features/table/logic/resolvers.ts

@@ -1,6 +1,8 @@
 import { method, multi } from "@arrows/multimethod";
 import type { Column } from "@evenicanpm/portal-types-schemas";
 import type * as Types from "../types";
+import type { TableConfig } from "../types/queries";
+import type { UIAction, UIBulkAction } from "../types/schemas";
 import type { FilterRequest } from "./types";
 
 /** MULTIMETHOD FOR FILTERS
@@ -66,3 +68,44 @@ export const resolveCellUI = (
 
 	return (value: string | number) => value;
 };
+
+export function resolveActions(
+	configActions: TableConfig["Actions"] | undefined,
+	registry: Record<string, UIAction> | undefined,
+): UIAction[] {
+	if (!configActions || !registry) return [];
+
+	return configActions
+		.filter((a) => a.IsEnabled)
+		.flatMap((a) => {
+			const action = registry[a.Type];
+			if (!action) {
+				console.warn(`Unknown action type: ${a.Type}`);
+				return [];
+			}
+			return [
+				{
+					...action,
+					label: a.Name,
+				},
+			];
+		});
+}
+
+export function resolveBulkActions(
+	configBulkActions: TableConfig["BulkActions"] | undefined,
+	registry: Record<string, UIBulkAction> | undefined,
+): UIBulkAction[] {
+	if (!configBulkActions || !registry) return [];
+
+	return configBulkActions
+		.filter((a) => a.IsEnabled)
+		.flatMap((a) => {
+			const action = registry[a.Type] as UIBulkAction;
+			if (!action) {
+				console.warn(`Unknown bulk action type: ${a.Type}`);
+				return [];
+			}
+			return [{ ...action, label: a.Name }];
+		});
+}

package/src/features/table/types/schemas.ts

@@ -1,4 +1,8 @@
 import type { TableViewParams } from "@evenicanpm/portal-types-schemas";
+import type { SvgIconComponent } from "@mui/icons-material";
+import type { UseMutationOptions } from "@tanstack/react-query";
+import type { Table } from "..";
+import type { DetailsTemplateKey } from "../components/dashboard/table/details/templates/template-registry";
 import type {
 	CellRenderMap,
 	DataMaskMap,
@@ -21,6 +25,27 @@ export type StatusColor = "success" | "primary" | "warning" | "error";
 
 export type StatusColorMap = Record<number | string, StatusColor>;
 
+type BaseAction = {
+	label?: string;
+	icon?: SvgIconComponent;
+};
+
+export type UIAction = BaseAction & {
+	isEnabled?: (row: Record<string, unknown>) => boolean;
+	mutation: (args: {
+		resourceName: string;
+		docId: string | number;
+	}) => UseMutationOptions<any, any, any, any>;
+};
+
+export type UIBulkAction = BaseAction & {
+	isAllowed?: (rows: Record<string, unknown>[]) => boolean;
+	mutation: (args: {
+		resourceName: string;
+		selectedIds: (string | number)[];
+	}) => UseMutationOptions<any, any, any, any>;
+};
+
 /**
  * Resource Definition
  */
@@ -44,7 +69,21 @@ export interface Resource {
 	// Optional Details view
 	detailsRenderMap?: DetailsRenderMap;
 
+	detailsQueryFn?: (id: string) => {
+		queryKey: readonly unknown[];
+		queryFn: () => Promise<unknown>;
+	};
+
+	detailsTemplate?: DetailsTemplateKey;
+
 	// State Visuals
 	statusTextMap: StatusTextMap;
 	statusColorMap: StatusColorMap;
+
+	// View Config Value
+	viewConfig?: Table.Queries.TableConfig;
+
+	// Actions and Bulk Actions
+	actions?: Record<string, UIAction>;
+	bulkActions?: Record<string, UIBulkAction>;
 }

package/src/index.ts

@@ -60,6 +60,5 @@
  */
 
 export type { Session } from "./auth/auth-context";
-export { Portal, type PortalProps } from "./portal";
-
 export { Table } from "./features/table";
+export { Portal, type PortalProps } from "./portal";