@evenicanpm/portal-table-ui 1.5.0 → 1.6.0

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

@@ -0,0 +1,62 @@
+import { Skeleton } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import type React from "react";
+import { Column } from "@evenicanpm/portal-types-schemas";
+
+// STYLED COMPONENTS
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+	fontWeight: 600,
+	padding: "16px 20px",
+	color: theme.palette.grey[900],
+}));
+
+interface TableHeaderProps {
+	hasActions: boolean;
+	columns: (Column & { ColumnOrder: number })[] | undefined;
+	loading: boolean;
+}
+
+/**
+ *
+ * Table handles display and caches it's own data.
+ *
+ */
+export default function TableHeader({
+	hasActions,
+	columns,
+	loading,
+}: Readonly<TableHeaderProps>) {
+	if (loading) {
+		return (
+			<TableHead>
+				<TableRow>
+					{Array.from({ length: 4 })?.map((_col, i) => (
+						<StyledTableCell key={String(`skeleton-${i + 1}`)}>
+							<Skeleton
+								variant="rounded"
+								width={100}
+								height={25}
+								sx={{ bgcolor: "rgba(255,255,255,0.1)" }}
+							/>
+						</StyledTableCell>
+					))}
+				</TableRow>
+			</TableHead>
+		);
+	}
+	return (
+		<TableHead>
+			<TableRow>
+				{columns?.map((column, i) => (
+					<StyledTableCell key={column.Label + String(i)}>
+						{column.Label}
+					</StyledTableCell>
+				))}
+				{hasActions && <StyledTableCell>Actions</StyledTableCell>}
+			</TableRow>
+		</TableHead>
+	);
+}

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,39 @@
+import { actionIconMap, actionMutationMap } from "../actions";
+import { FlexBox } from "@evenicanpm/ui";
+import { IconButton, CircularProgress } from "@mui/material";
+import { Action } from "@evenicanpm/portal-types-schemas";
+import { useMutation } from "@tanstack/react-query";
+
+interface ActionButtonProps {
+	docId: string;
+	action: Action;
+	resourceName: string;
+}
+
+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);
+
+	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>
+	);
+}

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

@@ -0,0 +1,96 @@
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import type React from "react";
+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";
+
+/**
+ * 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: Action[];
+	/** Does this view config have actions? */
+	/** The id field for the document (used for knowing what to set selected id to) */
+	idField: 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,
+	idField,
+}: Readonly<DocumentTableProps>) {
+	const id = row?.[idField] as string;
+	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);
+				}
+			}}
+		>
+			{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>
+				);
+			})}
+			{actions?.map((action) => (
+				<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>
+				</TableCell>
+			))}
+		</TableRow>
+	);
+}

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

@@ -0,0 +1,36 @@
+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)({
+	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,250 @@
+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 { 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";
+
+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 [searchColumn, setSearchColumn] = useState("Title");
+
+	const {
+		dataMaskMap,
+		cellRenderMap: columnRenderMap,
+		filterRenderMap,
+		detailsRenderMap,
+		idField,
+		label,
+		noResultsComponent,
+		statusColorMap,
+		statusTextMap,
+	} = 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);
+	};
+
+	const handleChangePage = (
+		_event: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number,
+	) => {
+		setPage(newPage);
+	};
+
+	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: config, isPending: configPending } = useQuery(
+		viewConfigQuery(resource.name),
+	);
+	const { data: rows, isPending: rowsPending } = useQuery(
+		resource.rowsQueryFn({ page, pageSize, filters, searchColumn, searchTerm }),
+	);
+
+	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);
+
+	// --- 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),
+	}));
+
+	// --- Render --- //
+	if (selectedDocument) {
+		const selectedDocDetails =
+			rows?.data.find((doc) => doc?.[idField] === selectedDocument) || {};
+		// Build the logic necessary for rendering
+		return (
+			<Details
+				documentTypeLabel={label}
+				id={selectedDocument}
+				documentData={selectedDocDetails}
+				handleBack={handleBack}
+				columns={columns || []}
+				dataMaskMap={resolvedDataMaskMap}
+				statusColorMap={statusColorMap}
+				statusTextMap={statusTextMap}
+				detailsRenderMap={detailsRenderMap}
+			/>
+		);
+	}
+
+	// Table body data calculations
+	const colSpan = visibleCols?.length ? visibleCols.length + 1 : 4;
+	const noResults = !rowsPending && !configPending && rows?.data?.length === 0;
+
+	return (
+		<>
+			<h1>{label}</h1>
+			<FlexBox
+				justifyContent={"flex-end"}
+				width="100%"
+				height={65}
+				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)}
+						{...filter.req}
+					/>
+				))}
+			</FlexBox>
+			<TableContainer>
+				<Table aria-label="simple table" sx={{ tableLayout: { md: "fixed" } }}>
+					<TableHeader
+						columns={visibleCols}
+						loading={configPending}
+						hasActions={hasActions}
+					/>
+					<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, i) => (
+								<DataTableRow
+									key={`data-table-row-${i + 1}`}
+									columnLogic={columnLogic}
+									row={row}
+									handleClick={setSelectedDocument}
+									idField={idField}
+									actions={actions}
+								/>
+							))
+						)}
+					</TableBody>
+				</Table>
+			</TableContainer>
+			<ResponsiveTablePagination
+				count={rows?.items || 0}
+				page={page}
+				component="div"
+				rowsPerPage={pageSize}
+				rowsPerPageOptions={[5, 10]}
+				onPageChange={handleChangePage}
+				onRowsPerPageChange={handleChangePageSize}
+			/>
+		</>
+	);
+}

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

@@ -0,0 +1,71 @@
+import TabContext from "@mui/lab/TabContext";
+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 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
+ *
+ *
+ */
+export interface TableProps {
+	viewConfigQuery: (resourceName: string) => {
+		queryKey: QueryKey;
+		queryFn: () => Promise<Types.Queries.TableConfig>;
+	};
+	resources: Types.Schemas.Resource[];
+}
+
+/**
+ *
+ * The TableDashboard is the main view component for the table feature.
+ * Holds state for the tabs and global pagination for all tables.
+ *
+ * @params props
+ */
+export const TableDashboard = ({ resources, viewConfigQuery }: TableProps) => {
+	const [value, setValue] = useState(resources[0]?.name);
+	const [pageSize, setPageSize] = useState(5); // better if this is global to not reset when switching tables
+
+	const handleChange = (_event: SyntheticEvent, newValue: string) => {
+		setValue(newValue);
+	};
+
+	return (
+		<Box sx={{ width: "100%", minHeight: "70vh" }}>
+			<TabContext value={value}>
+				<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+					<TabList onChange={handleChange}>
+						{resources?.map((resource, i) => (
+							<Tab
+								key={resource?.name + String(i)}
+								label={resource?.label}
+								value={resource?.name}
+							/>
+						))}
+					</TabList>
+				</Box>
+				{resources?.map((resource, i) => (
+					<Box key={resource.name + String(i)}>
+						<TabPanel
+							value={resource?.name}
+							sx={{ padding: "25px 0", margin: 0 }}
+						>
+							<Table
+								viewConfigQuery={viewConfigQuery}
+								resource={resource}
+								pageSize={pageSize}
+								setPageSize={setPageSize}
+							/>
+						</TabPanel>
+					</Box>
+				))}
+			</TabContext>
+		</Box>
+	);
+};

package/src/features/table/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @author Sam Forderer
+
+ * @packageDocumentation
+ */
+
+export type { DocumentTableProps } from "./components/dashboard/table/table";
+export {
+	TableDashboard,
+	type TableProps,
+} from "./components/dashboard/table-dashboard";
+
+// SCHEMAS
+export * as Table from "./types";

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

@@ -0,0 +1,23 @@
+/**
+ *
+ * Purpose of resolvers is to resolve the handlers
+ * (filters, datamasks, and cell renders) these
+ * resolvers allow multiple ways of calling handlers
+ *
+ * eg:
+ * datamasks -> 1. column name
+ *              2. datatype
+ *
+ * {
+ *   Status: () => value
+ *   DateTime: () => value
+ * }
+ *
+ * Keeps system flexible
+ *
+ * Row Value -> Resolver -> UI
+ *
+ * @packageDocumentation
+ */
+export * as resolvers from "./resolvers";
+export * as transformers from "./transformers";