@evenicanpm/portal-table-ui 1.4.0 → 1.5.0

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

@@ -1,62 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,250 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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>
-	);
-};