@evenicanpm/portal-table-ui 1.5.0 → 1.7.0

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

@@ -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 { QueryKey } from "@tanstack/react-query";
+import { type SyntheticEvent, useState } from "react";
+import type * as Types from "../../types";
+import { Table } from "./table";
+
+/**
+ * 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/{dist/features/table/index.d.ts → src/features/table/index.ts}

@@ -3,6 +3,12 @@
 
  * @packageDocumentation
  */
+
 export type { DocumentTableProps } from "./components/dashboard/table/table";
-export { TableDashboard, type TableProps, } from "./components/dashboard/table-dashboard";
+export {
+	TableDashboard,
+	type TableProps,
+} from "./components/dashboard/table-dashboard";
+
+// SCHEMAS
 export * as Table from "./types";

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

@@ -0,0 +1,111 @@
+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
+ * Allows multiple implementations
+ * based on multiple column properties.
+ * Priotizes column name, but also can
+ * use data type
+ * @internal
+ */
+export const resolveFilterUI = multi(
+	(req: FilterRequest, handlers: Types.Handlers.FilterRenderMap) => {
+		if (handlers?.[req.filterName]) return "BY_NAME";
+		if (handlers?.[req.filterType]) return "BY_TYPE";
+		return "NONE";
+	},
+	method(
+		"BY_NAME",
+		(req: FilterRequest, handlers: Types.Handlers.FilterRenderMap) =>
+			handlers[req.filterName],
+	),
+	method(
+		"BY_TYPE",
+		(req: FilterRequest, handlers: Types.Handlers.FilterRenderMap) =>
+			handlers[req.filterType],
+	),
+	method("NONE", () => () => null),
+);
+
+/**
+ * Dispatch identifies which properties are
+ * in handler, then provides corresponding method
+ * @internal
+ */
+export const resolveDataMask = multi(
+	(col: Column, handlers: Types.Handlers.DataMaskMap) => {
+		if (!col?.DataMask) return "SKIP";
+		if (handlers?.[col?.DataType]) return "BY_TYPE";
+		if (handlers?.[col?.Data]) return "BY_NAME";
+		return "SKIP";
+	},
+	method(
+		"BY_TYPE",
+		(col: Column, handlers: Types.Handlers.DataMaskMap) =>
+			handlers?.[col?.DataType],
+	),
+	method(
+		"BY_NAME",
+		(col: Column, handlers: Types.Handlers.DataMaskMap) =>
+			handlers?.[col?.Data],
+	),
+	method("SKIP", () => (value: string | number) => value),
+);
+
+/**
+ * Simpler, doesn't need multimethod cause only dispatches on column name
+ * @internal
+ */
+export const resolveCellUI = (
+	col: Column,
+	handlers: Types.Handlers.CellRenderMap,
+) => {
+	if (Object.hasOwn(handlers, col.Data)) return handlers?.[col?.Data];
+
+	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/logic/transformers.ts

@@ -0,0 +1,56 @@
+import type { Column } from "@evenicanpm/portal-types-schemas";
+
+/**
+ * These are pure static functions that include business rules
+ * and data manipulation to get the data into the correct
+ * form for rendering.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Gets filters and returns an array of the
+ * active filters and corresponding options
+ * in FilterRequest
+ */
+export const getActiveFilters = (columns: Column[] | undefined) => {
+	return columns
+		?.filter((c) => c?.IsFilterable)
+		?.flatMap((c) =>
+			c?.Filters?.map((f) => ({
+				filterName: c.Data,
+				filterOptions: f.FilterOptions,
+				filterType: f.FilterType ?? c.DataType,
+			})),
+		);
+};
+
+/**
+ * Filters and sorts visible cols
+ */
+export const getVisibleColumns = (columns: Column[] | undefined) =>
+	columns
+		?.filter(
+			(column): column is Column & { ColumnOrder: number } =>
+				typeof column.ColumnOrder === "number",
+		)
+		.sort((a, b) => a.ColumnOrder - b.ColumnOrder);
+
+/**
+ *
+ */
+export const getVisibleDetails = (columns: Column[] | undefined) =>
+	columns
+		?.filter((col) => col.DisplayOrder)
+		?.sort((a, b) => {
+			if (a?.DisplayOrder && b?.DisplayOrder) {
+				return a?.DisplayOrder - b?.DisplayOrder;
+			}
+			return -1;
+		});
+
+/**
+ * Filters and sorts visible cols
+ */
+export const getSearchableColumns = (columns: Column[] | undefined) =>
+	columns?.filter((column) => column?.IsSearchable);

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

@@ -0,0 +1,8 @@
+/**
+ * FILTER REQUEST to RESOLVER
+ */
+export interface FilterRequest {
+	filterName: string;
+	filterOptions: string[];
+	filterType: string;
+}

package/{dist/features/table/types/handlers.d.ts → src/features/table/types/handlers.ts}

@@ -1,10 +1,15 @@
 import type { FilterOption } from "@evenicanpm/portal-types-schemas";
+
 /**
  *
  * @group View Handlers
  */
 export type DataMaskMap = Record<string, MaskingFunction>;
-export type MaskingFunction = (value: string | number, dataMask: string) => string;
+export type MaskingFunction = (
+	value: string | number,
+	dataMask: string,
+) => string;
+
 /**
  * Uses column names as keys and maps out
  * value with specific JSX for specific column names.
@@ -15,15 +20,19 @@ export type MaskingFunction = (value: string | number, dataMask: string) => stri
  * @group View Handlers
  */
 export interface CellRenderMap {
-    [ColumnName: string]: (value: string | number | string[]) => React.ReactElement;
+	[ColumnName: string]: (
+		value: string | number | string[],
+	) => React.ReactElement;
 }
+
 export interface FilterProps {
-    filterName: string;
-    filterOptions: FilterOption[];
-    value: Record<string, string>;
-    setValue: React.Dispatch<React.SetStateAction<Record<string, string>>>;
-    resetPagination: () => void;
+	filterName: string;
+	filterOptions: FilterOption[];
+	value: Record<string, string>;
+	setValue: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+	resetPagination: () => void;
 }
+
 /**
  *
  * Provides render methods for particular filter
@@ -36,18 +45,27 @@ export interface FilterProps {
  * @group View Handlers
  */
 export interface FilterRenderMap {
-    [ColumnName: string]: (props: FilterProps) => React.ReactElement;
+	[ColumnName: string]: (props: FilterProps) => React.ReactElement;
 }
+
 /**
  *
  * @group View Handlers
  */
 export interface EmptyStateProps {
-    label: string;
+	label: string;
 }
+
 export type NoResultsComponent = (props: EmptyStateProps) => React.ReactElement;
+
 export interface DetailsRenderMap {
-    [columnName: string]: (props: {
-        [columnName: string]: string | number | object | string[] | number[] | object[];
-    }) => React.ReactNode;
+	[columnName: string]: (props: {
+		[columnName: string]:
+			| string
+			| number
+			| object
+			| string[]
+			| number[]
+			| object[];
+	}) => React.ReactNode;
 }

package/{dist/features/table/types/index.d.ts → src/features/table/types/index.ts}

@@ -64,6 +64,7 @@
  *
  * @packageDocumentation
  */
+
 export * as Handlers from "./handlers";
 export * as Queries from "./queries";
 export * as Schemas from "./schemas";

package/{dist/features/table/types/queries.d.ts → src/features/table/types/queries.ts}

@@ -1,24 +1,31 @@
 import type { ViewConfig } from "@evenicanpm/portal-types-schemas";
+
 /**
  *
  * These are data types returned from API Backend
  *
  */
+
 /**
  *
  * A single row in the data table response object.
  *
  */
-export type Row = Record<string, string | number | string[] | Record<string, string>[] | unknown>;
+export type Row = Record<
+	string,
+	string | number | string[] | Record<string, string>[] | unknown
+>;
+
 /**
  *
  * The response type defined in TDD for row data.
  *
  */
 export interface TableRows {
-    items: number;
-    data: Row[];
+	items: number;
+	data: Row[];
 }
+
 /**
  *
  * Response type of data from table config

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

@@ -0,0 +1,89 @@
+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,
+	DetailsRenderMap,
+	FilterRenderMap,
+	NoResultsComponent,
+} from "./handlers";
+import type { TableRows } from "./queries";
+
+/**
+ * These are primary domain models and the source of truth for table system.
+ */
+
+/**
+ * Status maps
+ */
+export type StatusTextMap = Record<number | string, string>;
+
+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
+ */
+export interface Resource {
+	name: string;
+	label: string;
+	idField: string;
+
+	// Data Handlers
+	rowsQueryFn: (displaySettings: TableViewParams) => {
+		queryKey: readonly unknown[];
+		queryFn: () => Promise<TableRows>;
+	};
+
+	// UI Renderers & Mappings
+	cellRenderMap?: CellRenderMap;
+	dataMaskMap?: DataMaskMap;
+	filterRenderMap?: FilterRenderMap;
+	noResultsComponent?: NoResultsComponent;
+
+	// 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/{dist/index.d.ts → src/index.ts}

@@ -58,6 +58,7 @@
  * ```
  * @module e4 Portal
  */
+
 export type { Session } from "./auth/auth-context";
-export { Portal, type PortalProps } from "./portal";
 export { Table } from "./features/table";
+export { Portal, type PortalProps } from "./portal";

package/src/portal.tsx

@@ -0,0 +1,68 @@
+import { FlexBox } from "@evenicanpm/ui";
+import type { PropsWithChildren } from "react";
+import {
+	type AuthProviderProps,
+	PortalAuthProvider,
+} from "./auth/auth-context";
+import { TableDashboard } from "./features/table/components/dashboard/table-dashboard";
+
+/**
+ * Main Entry point properties into portal package
+ *
+ *
+ */
+interface PortalProps extends AuthProviderProps {
+	// Add Portal Specific Properties Here
+	// ie. roles
+}
+
+/**
+ * The main **e4Portal** entry point.
+ * * This is a React Functional Component that provides the core context
+ * and layout for the application. It is required to wrap all components
+ * that use the library's hooks or sub-components.
+ *
+ *
+ * @param props - The properties passed to the Portal component.
+ * @returns A React Element rendering the main application structure.
+ */
+const Portal = ({
+	session,
+	logout,
+	children,
+}: PropsWithChildren<PortalProps>) => {
+	// Not Logged In
+	if (!session?.email) {
+		return (
+			<FlexBox mt={5} width="100%" justifyContent="center">
+				Please login to view the portal.
+			</FlexBox>
+		);
+	}
+
+	// Logged In yes
+	return (
+		<PortalAuthProvider session={session} logout={logout}>
+			{children}
+		</PortalAuthProvider>
+	);
+};
+
+/**
+ *
+ * # Feature: Table
+ * This is the table feature component.
+ * @params props
+ *
+ */
+Portal.Table = TableDashboard;
+
+/**
+ *
+ * # Feature: Settings
+ * This is the table feature component.
+ * @params props
+ *
+ */
+
+export { Portal, type PortalProps };

package/dist/auth/auth-context.d.ts

@@ -1,36 +0,0 @@
-import { type PropsWithChildren } from "react";
-/**
- * Powers the auth provider that portal is wrapped in
- * Aggregates user and session related data that is needed
- * within the portal
- */
-interface AuthProviderProps {
-    /** The user details returned from auth framework eg. next-auth **/
-    session: Session;
-    /** how to handle logout **/
-    logout: () => void;
-}
-/**
- * The context value
- */
-interface AuthContext {
-    session: Session | null;
-    /** how to handle logout **/
-    logout: (() => void) | null;
-    isAuthenticated: boolean | null;
-}
-interface Session {
-    email: string | null | undefined;
-    name: string | null | undefined;
-    token: string | null | undefined;
-}
-declare const AuthContext: import("react").Context<AuthContext>;
-/**
- * Used to access auth details and callback handlers within the portal auth context
- */
-declare const useAuth: () => AuthContext;
-/**
- *
- */
-declare const PortalAuthProvider: ({ session, logout, children, }: PropsWithChildren<AuthProviderProps>) => import("react").JSX.Element;
-export { PortalAuthProvider, useAuth, type AuthProviderProps, AuthContext, type Session, };

package/dist/features/settings/index.d.ts

@@ -1,2 +0,0 @@
-declare const PortalSettings: () => import("react").JSX.Element;
-export { PortalSettings };

package/dist/features/table/components/dashboard/table/actions.d.ts

@@ -1,14 +0,0 @@
-import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import { UseMutationOptions } from "@tanstack/react-query";
-/**
- *
- * Map of action types -> MUI Icons
- *
- */
-export declare const actionIconMap: Record<string, typeof FileDownloadOutlinedIcon>;
-type MutationFactory = (resourceName: string, docId: string) => UseMutationOptions<any, any, any, any>;
-/**
- *
- */
-export declare const actionMutationMap: Record<string, MutationFactory>;
-export {};

package/dist/features/table/components/dashboard/table/data-mask-map.d.ts

@@ -1,2 +0,0 @@
-import * as Table from "../../../types/";
-export declare const dataMaskMap: Table.Handlers.DataMaskMap;

package/dist/features/table/components/dashboard/table/details/details.d.ts

@@ -1,27 +0,0 @@
-import type { Column } from "@evenicanpm/portal-types-schemas";
-import type * as Types from "../../../../types";
-import type { StatusColorMap, StatusTextMap } from "../../../../types/schemas";
-interface DetailsProps {
-    /** What do we do when use clicks back button? */
-    handleBack: () => void;
-    /** What is the id field name */
-    id: string | number;
-    /** The actual pojo of data from the API */
-    documentData: Types.Queries.Row;
-    documentTypeLabel: string;
-    /** Special instructions for how to render certain properties */
-    detailsRenderMap?: Types.Handlers.DetailsRenderMap;
-    /** Data mask map */
-    dataMaskMap: Types.Handlers.DataMaskMap;
-    /** Table columns **/
-    columns: Column[];
-    /** */
-    statusColorMap: StatusColorMap;
-    /** */
-    statusTextMap: StatusTextMap;
-}
-/**
- * The Details Page
- */
-declare const Details: ({ id, documentTypeLabel, documentData, handleBack, columns, dataMaskMap, statusColorMap, statusTextMap, }: DetailsProps) => import("react").JSX.Element;
-export { Details };