@evenicanpm/portal-table-ui 1.5.0 → 1.7.0

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

@@ -0,0 +1,94 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
+import { SearchInput } from "@evenicanpm/ui";
+import { MenuItem, Select } from "@mui/material";
+import React from "react";
+
+interface SearchProps {
+	searchTerm: string;
+	setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+	setColumn: React.Dispatch<React.SetStateAction<string>>;
+	selectedColumn: string;
+	searchCols: Column[];
+}
+
+const ColumnSelect = ({
+	selected,
+	handleChange,
+	searchCols,
+}: {
+	selected: string;
+	handleChange: React.Dispatch<React.SetStateAction<string>>;
+	searchCols: Column[];
+}) => {
+	return (
+		<Select
+			id="demo-simple-select"
+			value={selected}
+			sx={{
+				maxWidth: "150px",
+				"& .MuiOutlinedInput-notchedOutline": { border: "none" },
+				"& .MuiSelect-select": {
+					paddingTop: 0,
+					paddingBottom: 0,
+					display: "flex",
+					alignItems: "center",
+				},
+				"&:hover": { bgcolor: "rgba(0, 0, 0, 0.04)" }, // Subtle hover state
+			}}
+			onChange={(e) => handleChange(e.target.value)}
+		>
+			{searchCols?.map((col) => (
+				<MenuItem key={col?.Data} value={col?.Data}>
+					{col?.Label}
+				</MenuItem>
+			))}
+		</Select>
+	);
+};
+
+const SearchField = React.memo(
+	({
+		searchTerm,
+		setSearchTerm,
+		searchCols,
+		selectedColumn,
+		setColumn,
+	}: SearchProps) => {
+		return (
+			<SearchInput
+				sx={{
+					width: "100%",
+					pr: 0,
+					boderRight: "none",
+					"& .MuiOutlinedInput-notchedOutline": {
+						borderRight: "none",
+						borderTopRightRadius: 0,
+						borderBottomRightRadius: 0,
+					},
+					// Target the hover state too, otherwise the thick line reappears on hover
+					"&:hover .MuiOutlinedInput-notchedOutline": {
+						borderRight: "none",
+					},
+					// Target focus state
+					"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+						borderRight: "none",
+					},
+				}}
+				value={searchTerm}
+				onChange={(e) => {
+					setSearchTerm(e.target.value);
+				}}
+				placeholder={`Seach by ${selectedColumn}`}
+				endAdornment={
+					<ColumnSelect
+						selected={selectedColumn}
+						searchCols={searchCols}
+						handleChange={setColumn}
+					/>
+				}
+			/>
+		);
+	},
+);
+
+export { SearchField };

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

@@ -0,0 +1,47 @@
+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: UIAction;
+	resourceName: string;
+}
+
+export function ActionButton({
+	action,
+	resourceName,
+	docId,
+}: 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 (
+		<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

@@ -0,0 +1,144 @@
+import { Action } from "@evenicanpm/portal-types-schemas";
+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 { ActionButton } from "./action-button";
+
+/**
+ * This is what we transorm the column data into for convenient rendering.
+ */
+type ColumnLogic =
+	| {
+			id: string;
+			mask: string | undefined;
+			maskFn: any;
+			cellFn:
+				| ((
+						value: string | number | string[],
+				  ) => React.ReactElement<
+						any,
+						string | React.JSXElementConstructor<any>
+				  >)
+				| ((value: string | number) => string | number);
+	  }[]
+	| undefined;
+
+const StyledTableCell = styled(TableCell)({
+	height: "75px",
+});
+
+export type DocumentTableProps = {
+	/** The row to render */
+	row: Types.Queries.Row;
+	/** The render logic for each column ie data mask functions, cell maps*/
+	columnLogic: ColumnLogic;
+	/** */
+	handleClick: React.Dispatch<React.SetStateAction<string | number | null>>;
+	/** Actions renderer */
+	actions: UIAction[];
+	/** Does this view config have actions? */
+	/** The id field for the document (used for knowing what to set selected id to) */
+	id: string | number;
+	isSelected: boolean;
+	onToggleSelected: (id: string | number) => void;
+	resourceName: string;
+};
+
+/**
+ * A single row (document) in the table. Takes the pre-constructed column logic
+ * and executes all of the cell renders and data map functions. Also handles
+ * rendering the action icons.
+ */
+export default function DataTableRow({
+	row,
+	columnLogic,
+	handleClick: handleSelectDocument,
+	actions,
+	id,
+	isSelected,
+	onToggleSelected,
+	resourceName,
+}: DocumentTableProps) {
+	const visibleActions = actions.filter(
+		(a) => !a.isEnabled || a.isEnabled(row),
+	);
+
+	return (
+		<TableRow
+			hover
+			sx={{ cursor: "pointer" }}
+			onClick={() => {
+				// type narrowing to make sure we don't use a complex object
+				// as the id in state
+				if (typeof id === "string" || typeof id === "number") {
+					handleSelectDocument(id);
+				}
+			}}
+		>
+			<TableCell onClick={(e) => e.stopPropagation()}>
+				<Checkbox
+					checked={isSelected}
+					onChange={() => {
+						onToggleSelected(id);
+					}}
+				/>
+			</TableCell>
+
+			{columnLogic?.map((col, i) => {
+				// --- Cell Render --- //
+				const rawValue = row[col.id];
+				const maskedValue = col.maskFn(rawValue, col?.mask);
+				const cellValue = col.cellFn(maskedValue);
+				return (
+					<StyledTableCell key={rawValue + String(i)}>
+						{cellValue}
+					</StyledTableCell>
+				);
+			})}
+			{visibleActions.length > 0 && (
+				<TableCell
+					onClick={(e) => e.stopPropagation()}
+					sx={{ whiteSpace: "nowrap" }}
+				>
+					<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

@@ -0,0 +1,35 @@
+import { Skeleton } from "@mui/material";
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import { styled } from "@mui/system";
+
+const StyledTableCell = styled(TableCell)({
+	height: "75px",
+});
+
+export type TableRowSkeletonProps = {
+	pageSize: number;
+	colSpan: number;
+};
+
+export default function TableRowSkeleton({
+	pageSize,
+	colSpan,
+}: Readonly<TableRowSkeletonProps>) {
+	const rowKeys = Array.from({ length: pageSize }, (_, i) => `row-${i}`);
+	const cellKeys = Array.from({ length: colSpan }, (_, i) => `cell-${i}`);
+
+	return (
+		<>
+			{rowKeys.map((rowKey) => (
+				<TableRow key={rowKey}>
+					{cellKeys.map((cellKey) => (
+						<StyledTableCell key={`${rowKey}-${cellKey}`}>
+							<Skeleton />
+						</StyledTableCell>
+					))}
+				</TableRow>
+			))}
+		</>
+	);
+}

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

@@ -0,0 +1,361 @@
+import { FlexBox, ResponsiveTablePagination } from "@evenicanpm/ui";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableRow from "@mui/material/TableRow";
+import { type QueryKey, useQuery } from "@tanstack/react-query";
+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";
+import { NoResultsComponent as NoResultsComponentLocal } from "./no-results";
+import { StatusPill } from "./status-pill";
+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) => {
+		queryKey: QueryKey;
+		queryFn: () => Promise<Types.Queries.TableConfig>;
+	};
+};
+
+/**
+ *
+ * Table handles display and caches it's own data.
+ *
+ */
+export default function DocumentTable({
+	resource,
+	pageSize,
+	setPageSize,
+	viewConfigQuery,
+}: Readonly<DocumentTableProps>) {
+	const [page, setPage] = useState(0);
+	const [selectedDocument, setSelectedDocument] = useState<
+		string | number | null
+	>(null);
+	const [filters, setFilters] = useState<Record<string, string>>({});
+	const [searchTerm, setSearchTerm] = useState("");
+
+	const {
+		dataMaskMap,
+		cellRenderMap: columnRenderMap,
+		filterRenderMap,
+		detailsRenderMap,
+		idField,
+		label,
+		noResultsComponent,
+		statusColorMap,
+		statusTextMap,
+		viewConfig,
+		actions: actionRegistry,
+		bulkActions: bulkRegistry,
+	} = resource;
+
+	/**
+	 *
+	 * This is not simply a default map because it passes special props
+	 * specific to status... Once we have more of these  types of
+	 * functions that return special renders that are not general
+	 * resolvers we can create a new file.
+	 *
+	 * Render would be something like... If no column resolver -> try
+	 * resolving these as opposed to just overwriting column renders
+	 */
+	const resolvedFilterRenderMap = {
+		...filterRenderMapFallback,
+		...filterRenderMap,
+	};
+
+	const cellRenderMapDefaults = {
+		...columnRenderMap,
+		Status: (value: string | number | string[]) => (
+			<StatusPill
+				status={value}
+				statusColorMap={statusColorMap}
+				statusTextMap={statusTextMap}
+			/>
+		),
+	};
+
+	// --- State Handlers --- //
+	const handleChangePageSize = (
+		event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		setPageSize(Number.parseInt(event.target.value, 10));
+		setPage(0);
+		clearSelection();
+	};
+
+	const handleChangePage = (
+		_event: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number,
+	) => {
+		setPage(newPage);
+		clearSelection();
+	};
+
+	const handleBack = () => {
+		setSelectedDocument(null);
+	};
+
+	const resolvedNoResults = (noResultsComponent ?? NoResultsComponentLocal)({
+		label,
+	});
+
+	const resolvedDataMaskMap = dataMaskMap ?? dataMaskMapLocal;
+
+	/**
+	 * Data pipeline:
+	 * FETCH -> TRANFORMER -> RESOLVER
+	 * Keep the JSX dumb.
+	 *
+	 * Tested performance with console.time,
+	 * calculation rendering around 0.02,
+	 * no need to memoize yet.
+	 */
+
+	// --- Fetch --- //
+	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 ?? [];
+
+	// --- 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,
+		FilterComponent: resolvers.resolveFilterUI(req, resolvedFilterRenderMap),
+	}));
+	const columnLogic = visibleCols?.map((col) => ({
+		id: col.Data,
+		mask: col?.DataMask,
+		maskFn: resolvers.resolveDataMask(col, resolvedDataMaskMap),
+		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,
+				},
+	);
+
+	// --- Render --- //
+	if (selectedDocument) {
+		const rowSnapshot =
+			rows?.data.find((doc) => doc?.[idField] === selectedDocument) ?? {};
+
+		const finalDetailsData =
+			hasTemplateSupport && detailsData ? detailsData : rowSnapshot;
+
+		return (
+			<Details
+				documentTypeLabel={label}
+				id={selectedDocument}
+				documentData={finalDetailsData}
+				handleBack={handleBack}
+				columns={columns}
+				dataMaskMap={resolvedDataMaskMap}
+				statusColorMap={statusColorMap}
+				statusTextMap={statusTextMap}
+				detailsRenderMap={detailsRenderMap}
+				template={hasTemplateSupport ? resource.detailsTemplate : undefined}
+				loading={hasTemplateSupport ? detailsPending : 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;
+
+	const baseCols = (visibleCols?.length ?? 0) + 1;
+	const colSpan = hasActions ? baseCols + 1 : baseCols;
+	const noResults = !rowsPending && !configPending && rows?.data?.length === 0;
+
+	return (
+		<>
+			<h1>{label}</h1>
+			<FlexBox
+				justifyContent={"flex-end"}
+				width="100%"
+				height="fit-content"
+				gap={2}
+				pt={2}
+			>
+				<SearchField
+					searchTerm={searchTerm}
+					setSearchTerm={setSearchTerm}
+					setColumn={setSearchColumn}
+					searchCols={searchableCols || []}
+					selectedColumn={searchColumn}
+				/>
+				{filterLogic?.map((filter) => (
+					<filter.FilterComponent
+						key={filter.req?.filterName}
+						value={filters}
+						setValue={setFilters}
+						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" } }}>
+					<TableHeader
+						columns={visibleCols}
+						loading={configPending}
+						hasActions={hasActions}
+						selectAllChecked={isAllOnPageSelected}
+						selectAllIndeterminate={isSomeOnPageSelected}
+						onToggleAll={toggleAllOnPage}
+					/>
+
+					<TableBody>
+						{noResults ? (
+							<TableRow>
+								<TableCell
+									colSpan={colSpan || 1}
+									align="center"
+									sx={{ py: 6, color: "text.secondary" }}
+								>
+									{resolvedNoResults}
+								</TableCell>
+							</TableRow>
+						) : rowsPending ? (
+							<TableRowSkeleton pageSize={pageSize} colSpan={colSpan} />
+						) : (
+							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>
+			</TableContainer>
+			<ResponsiveTablePagination
+				count={rows?.items || 0}
+				page={page}
+				component="div"
+				rowsPerPage={pageSize}
+				rowsPerPageOptions={[5, 10]}
+				onPageChange={handleChangePage}
+				onRowsPerPageChange={handleChangePageSize}
+			/>
+		</>
+	);
+}