@variocube/app-ui 1.14.0

package/src/data-table/DataTable.tsx

@@ -0,0 +1,338 @@
+import {
+	Box,
+	Checkbox,
+	Paper,
+	SortDirection,
+	Table,
+	TableBody,
+	TableCell,
+	TableCellProps,
+	TableContainer,
+	TableHead,
+	TablePagination,
+	TableRow,
+	TableSortLabel,
+	useTheme,
+} from "@mui/material";
+import React, {ChangeEvent, FC, Fragment, Key, ReactElement, ReactNode, useCallback, useEffect, useState} from "react";
+import {UndrawEmpty} from "../content-table/UndrawEmpty";
+import {ErrorAlert} from "../ErrorAlert";
+
+export type LabelFunc<T> = (field: keyof T) => string;
+
+export interface DataTableColumn<T> {
+	field: string;
+	label: string | LabelFunc<T>;
+	width?: string;
+	align?: TableCellProps["align"];
+	sortable?: boolean;
+	component?: FC<DataTableCellProps<T>>;
+	group?: string;
+	default?: boolean;
+}
+
+export interface DataTableCellProps<T> {
+	row: T;
+	field: string;
+}
+
+export interface DataTablePage {
+	/** The total number of elements. */
+	totalElements: number;
+
+	/**
+	 * The zero-based index of the current page.
+	 */
+	pageIndex: number;
+
+	/** The current page size. */
+	pageSize: number;
+}
+
+export interface DataTableProps<T> {
+	/** The columns to display. */
+	columns: ReadonlyArray<DataTableColumn<T>>;
+
+	/** The rows to display. */
+	rows: ReadonlyArray<T>;
+
+	/** The field by which the rows are currently sorted. */
+	sortField?: string;
+
+	/** The direction by which the rows are currently sorted. */
+	sortDirection?: SortDirection;
+
+	/** Callback that is invoked when the user wants to sort by a specific field. */
+	onSort?: (field: string) => any;
+
+	/** Whether the data is currently loading. */
+	loading?: boolean;
+
+	/** Whether an error has occured. */
+	error?: any;
+
+	/** The property that uniquely identifies a row (default: "id"). */
+	rowId?: string;
+
+	/** Information about the current page. Enables pagination if set. */
+	page?: DataTablePage;
+
+	/** Callback that is invoked when the user changes pages. */
+	onPageChange?: (page: DataTablePage) => void;
+
+	/** The available page sizes. */
+	pageSizes?: number[];
+
+	/** An element that is rendered when the table is empty. */
+	empty?: ReactElement;
+
+	/** A header that is rendered above the table. */
+	header?: ReactNode;
+
+	/** A toolbar that is rendered below the table. */
+	toolbar?: ReactNode;
+
+	/** The currently selected rows. */
+	selected?: ReadonlyArray<T>;
+
+	/** Callback that is invoked when a row is selected or unselected. */
+	onSelectedChange?: (selected: T[]) => any;
+}
+
+const defaultPageSizes = [10, 25, 50, 100];
+
+function getId<T>(row: T, rowId: string) {
+	return row[rowId as keyof T] as any as Key;
+}
+
+export function DataTable<T>(props: Readonly<DataTableProps<T>>) {
+	const {
+		columns,
+		rows,
+		onSort,
+		sortDirection,
+		sortField,
+		loading,
+		error,
+		rowId = "id",
+		empty = <UndrawEmpty height="100%" width="auto" />,
+		page,
+		onPageChange,
+		pageSizes = defaultPageSizes,
+		header,
+		toolbar,
+		selected,
+		onSelectedChange,
+	} = props;
+
+	const theme = useTheme();
+	const hasSelection = Boolean(onSelectedChange) && typeof selected !== "undefined";
+	const columnCount = columns.length + (hasSelection ? 1 : 0);
+
+	// reset page index to `0` if it is out of bounds
+	// this can happen when a filter changes and the result set becomes smaller
+	useEffect(() => {
+		if (page && onPageChange) {
+			const {pageIndex, pageSize, totalElements} = page;
+			const totalPages = Math.ceil(totalElements / pageSize);
+			if (pageIndex >= totalPages) {
+				onPageChange({...page, pageIndex: 0});
+			}
+		}
+	}, [page, onPageChange]);
+
+	// Reset selection when the rows change.
+	// In the future, we might add a mode where a selection can span across multiple pages
+	useEffect(() => {
+		if (onSelectedChange) {
+			onSelectedChange([]);
+		}
+	}, [onSelectedChange, rows]);
+
+	// When loading
+	const [displayRows, setDisplayRows] = useState(rows);
+	useEffect(() => {
+		if (!loading || rows.length > 0) {
+			setDisplayRows(rows);
+		}
+	}, [rows, loading]);
+
+	function handlePageChange(event: React.MouseEvent<HTMLButtonElement> | null, pageIndex: number) {
+		if (page && onPageChange) {
+			onPageChange({...page, pageIndex});
+		}
+	}
+
+	function handleRowsPerPageChange(event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) {
+		const pageSize = Number.parseInt(event.target.value);
+		if (page && onPageChange) {
+			onPageChange({...page, pageSize});
+		}
+	}
+
+	function handleSelectAll(e: ChangeEvent<HTMLInputElement>) {
+		if (onSelectedChange) {
+			if (e.currentTarget.checked) {
+				onSelectedChange([...rows]);
+			} else {
+				onSelectedChange([]);
+			}
+		}
+	}
+
+	function handleSelect(row: T, checked: boolean) {
+		if (onSelectedChange && selected) {
+			if (checked) {
+				onSelectedChange([...selected, row]);
+			} else {
+				onSelectedChange([...selected].filter(s => getId(s, rowId) != getId(row, rowId)));
+			}
+		}
+	}
+
+	const pagination = page && (
+		<TablePagination
+			component="div"
+			rowsPerPageOptions={pageSizes}
+			count={page.totalElements}
+			rowsPerPage={page.pageSize}
+			page={page.pageIndex}
+			onPageChange={handlePageChange}
+			onRowsPerPageChange={handleRowsPerPageChange}
+		/>
+	);
+
+	return (
+		<Paper>
+			{header}
+			<TableContainer>
+				<Table>
+					<TableHead>
+						<TableRow>
+							{hasSelection && (
+								<TableCell padding="checkbox">
+									<Checkbox
+										indeterminate={selected?.length > 0 && selected?.length < rows.length}
+										checked={rows.length > 0 && selected?.length == rows.length}
+										onChange={handleSelectAll}
+									/>
+								</TableCell>
+							)}
+							{columns.map(column => (
+								<DataTableHeaderCell
+									key={column.field}
+									column={column}
+									sortField={sortField}
+									sortDirection={sortDirection}
+									onSort={onSort}
+								/>
+							))}
+						</TableRow>
+					</TableHead>
+					<TableBody sx={{minHeight: "100px", opacity: loading ? 0.5 : undefined}}>
+						{error && (
+							<TableRow>
+								<TableCell colSpan={columnCount}>
+									<ErrorAlert error={error} />
+								</TableCell>
+							</TableRow>
+						)}
+						{!error && !loading && rows.length == 0 && (
+							<TableRow>
+								<TableCell colSpan={columnCount}>
+									<Box
+										display="flex"
+										flexDirection="column"
+										justifyContent="center"
+										alignItems="center"
+										p={3}
+									>
+										<Box
+											sx={{
+												height: 300,
+												[theme.breakpoints.down("md")]: {
+													height: 150,
+												},
+											}}
+										>
+											{empty}
+										</Box>
+									</Box>
+								</TableCell>
+							</TableRow>
+						)}
+						{displayRows.map(row => {
+							const id = getId(row, rowId);
+							return (
+								<TableRow key={id} selected={selected?.includes(row)}>
+									{hasSelection && (
+										<TableCell padding="checkbox">
+											<Checkbox
+												checked={Boolean(selected?.find(s => getId(s, rowId) == id))}
+												onChange={e => handleSelect(row, e.currentTarget.checked)}
+											/>
+										</TableCell>
+									)}
+									{columns.map(({field, component, align}) => {
+										const Component = component ?? DefaultDataTableCell;
+
+										return (
+											<TableCell key={field} align={align}>
+												<Component row={row} field={field} />
+											</TableCell>
+										);
+									})}
+								</TableRow>
+							);
+						})}
+					</TableBody>
+				</Table>
+			</TableContainer>
+			{toolbar && pagination && (
+				<Box display="flex" justifyContent="space-between">
+					{toolbar}
+					{pagination}
+				</Box>
+			)}
+			{!pagination && toolbar}
+			{!toolbar && pagination}
+		</Paper>
+	);
+}
+
+export function DefaultDataTableCell<T>({row, field}: DataTableCellProps<T>) {
+	const value = row[field as keyof T];
+	if (typeof value == "string" || typeof value == "number") {
+		return <Fragment>{value}</Fragment>;
+	}
+	return null;
+}
+
+interface DataTableHeaderCellProps<T> {
+	column: DataTableColumn<T>;
+	sortField?: string;
+	sortDirection?: SortDirection;
+	onSort?: (field: string) => void;
+}
+
+function DataTableHeaderCell<T>(props: DataTableHeaderCellProps<T>) {
+	const {column, sortField, sortDirection, onSort} = props;
+
+	const handleClick = useCallback(() => column.sortable && onSort && onSort(column.field), [onSort, column]);
+
+	return (
+		<TableCell style={{width: column.width}} align={column.align}>
+			{column.sortable
+				? (
+					<TableSortLabel
+						active={sortField == column.field}
+						direction={sortDirection || undefined}
+						onClick={handleClick}
+					>
+						{column.label}
+					</TableSortLabel>
+				)
+				: column.label}
+		</TableCell>
+	);
+}

package/src/data-table/DataTableColumnSettings.tsx

@@ -0,0 +1,204 @@
+import {DataTableColumn} from "./DataTable";
+import React, {Fragment, useState} from "react";
+import {
+    Avatar,
+    Dialog,
+    DialogActions,
+    DialogTitle,
+    IconButton,
+    List,
+    ListItemAvatar,
+    ListItemButton,
+    ListItemText,
+    ListSubheader,
+    Menu,
+    Stack,
+} from "@mui/material";
+import {AddCircleIcon, CloseIcon, MoveDownCircleIcon, MoveUpCircleIcon, RemoveCircleIcon, TuningIcon} from "../icons";
+import {useFlag} from "../utils";
+import {Labels} from "../localization";
+
+export interface DataTableColumnButtonProps<T> {
+    columns: ReadonlyArray<DataTableColumn<T>>;
+    selected: ReadonlyArray<DataTableColumn<T>>;
+    onChange: (selected: ReadonlyArray<DataTableColumn<T>>) => any;
+    labels: Labels<"title" | "close" | "add" | "remove" | "moveUp" | "moveDown">;
+}
+
+function groupColumns<T>(available: ReadonlyArray<DataTableColumn<T>>) {
+    const groups: Record<string, Array<DataTableColumn<T>>> = {};
+    const other: Array<DataTableColumn<T>> = [];
+    for (const column of available) {
+        const group = column.group;
+        if (group) {
+            if (!groups[group]) {
+                groups[group] = [column]
+            } else {
+                groups[group].push(column);
+            }
+        } else {
+            other.push(column);
+        }
+    }
+    return {groups, other};
+}
+
+export function DataTableColumnSettings<T>(props: DataTableColumnButtonProps<T>) {
+    const {
+        columns,
+        selected,
+        onChange,
+        labels,
+    } = props;
+
+    const [open, setOpen, clearOpen] = useFlag(false);
+    const [focus, setFocus] = useState<string>();
+    const [addMenu, setAddMenu, clearAddMenu] = useFlag(false);
+    const [addAnchor, setAddAnchor] = useState<HTMLElement | null>(null);
+
+    const available = columns.filter(column => !selected.find(s => s.field == column.field));
+    const {groups, other} = groupColumns(available);
+
+    function move(sourceIndex: number, targetIndex: number) {
+        const newSelected = [...selected];
+        const temp = newSelected[targetIndex];
+        newSelected[targetIndex] = newSelected[sourceIndex];
+        newSelected[sourceIndex] = temp;
+        onChange(newSelected);
+    }
+
+    function moveUp() {
+        const index = selected.findIndex(s => s.field == focus);
+        if (index >= 1) {
+            move(index, index - 1);
+        }
+    }
+
+    function moveDown() {
+        const index = selected.findIndex(s => s.field == focus);
+        if (index >= 0 && index + 1 < selected.length) {
+            move(index, index + 1);
+        }
+    }
+
+    function remove() {
+        onChange(selected.filter(c => c.field != focus));
+        setFocus(undefined);
+    }
+
+    function add(column: DataTableColumn<T>) {
+        onChange([...selected, column]);
+        clearAddMenu();
+    }
+
+    function changeFocus(column: DataTableColumn<T>) {
+        setFocus(focus != column.field ? column.field : undefined)
+    }
+
+    function renderSelectListItems(columns: ReadonlyArray<DataTableColumn<T>>) {
+        return columns.map(column => (
+            <ListItemButton key={column.field} onClick={() => add(column)}>
+                <ListItemText primary={column.label}/>
+            </ListItemButton>
+        ));
+    }
+
+    return (
+        <Fragment>
+            <IconButton onClick={setOpen} title={labels("title")}>
+                <TuningIcon/>
+            </IconButton>
+            <Dialog open={open} onClose={clearOpen} fullWidth maxWidth="xs">
+                <DialogTitle>
+                    {labels("title")}
+                </DialogTitle>
+                <IconButton
+                    aria-label={labels("close")}
+                    title={labels("close")}
+                    onClick={clearOpen}
+                    sx={{
+                        position: 'absolute',
+                        right: 8,
+                        top: 8,
+                    }}
+                >
+                    <CloseIcon/>
+                </IconButton>
+                <List sx={{flex: 1, overflowY: "scroll"}}>
+                    {selected.map((column, index) => (
+                        <ListItemButton
+                            key={column.field}
+                            onClick={() => changeFocus(column)}
+                            selected={focus == column.field}
+                        >
+                            <ListItemAvatar>
+                                <Avatar>{index + 1}</Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={column.label}
+                                secondary={column.group}
+                            />
+                        </ListItemButton>
+                    ))}
+                </List>
+                <DialogActions>
+                    <Stack spacing={2} direction="row" justifyContent="space-between" flex={1}>
+                        <IconButton
+                            onClick={setAddMenu}
+                            ref={setAddAnchor}
+                            disabled={available.length == 0}
+                            color="primary"
+                            title={labels("add")}
+                            size="large"
+                        >
+                            <AddCircleIcon fontSize="large"/>
+                        </IconButton>
+                        <Stack spacing={2} direction="row" justifyContent="center">
+                            <IconButton
+                                onClick={moveUp}
+                                disabled={!focus}
+                                color="secondary"
+                                title={labels("moveUp")}
+                                size="large"
+                            >
+                                <MoveUpCircleIcon fontSize="large"/>
+                            </IconButton>
+                            <IconButton
+                                onClick={moveDown}
+                                disabled={!focus}
+                                color="secondary"
+                                title={labels("moveDown")}
+                                size="large"
+                            >
+                                <MoveDownCircleIcon fontSize="large"/>
+                            </IconButton>
+                        </Stack>
+                        <IconButton
+                            onClick={remove}
+                            disabled={!focus}
+                            color="error"
+                            title={labels("remove")}
+                            size="large"
+                        >
+                            <RemoveCircleIcon fontSize="large"/>
+                        </IconButton>
+                    </Stack>
+                </DialogActions>
+
+                <Menu
+                    open={addMenu}
+                    anchorEl={addAnchor}
+                    onClose={clearAddMenu}
+                >
+                    {Object.entries(groups).map(([group, columns]) => (
+                        <Fragment>
+                            <ListSubheader>{group}</ListSubheader>
+                            {renderSelectListItems(columns)}
+                        </Fragment>
+                    ))}
+                    {renderSelectListItems(other)}
+                </Menu>
+            </Dialog>
+        </Fragment>
+    )
+}

package/src/data-table/DataTableHeader.tsx

@@ -0,0 +1,10 @@
+import React, {PropsWithChildren} from "react";
+import {Box} from "@mui/material";
+
+export function DataTableHeader({children}: PropsWithChildren<{}>) {
+    return (
+        <Box p={2} display="flex" alignItems="center">
+            {children}
+        </Box>
+    )
+}

package/src/data-table/DataTableToolbar.tsx

@@ -0,0 +1,10 @@
+import React, {PropsWithChildren} from "react";
+import {Stack} from "@mui/material";
+
+export function DataTableToolbar({children}: PropsWithChildren<{}>) {
+    return (
+        <Stack spacing={1} pl={1} minHeight="52px" direction="row" alignItems="center">
+            {children}
+        </Stack>
+    )
+}

package/src/data-table/index.tsx

@@ -0,0 +1,8 @@
+export * from "./DataTable";
+export * from "./useDataTableStorage";
+export * from "./useDataTableColumnStorage";
+export * from "./useSpringPageable";
+export * from "./useSpringPage";
+export * from "./DataTableColumnSettings";
+export * from "./DataTableHeader";
+export * from "./DataTableToolbar";

package/src/data-table/useDataTableColumnStorage.ts

@@ -0,0 +1,26 @@
+import {useStorage} from "../storage";
+import {useCallback, useMemo} from "react";
+import {DataTableColumn} from "./DataTable";
+import {defined} from "../utils";
+
+export function useDataTableColumnStorage<T>(key: string, availableColumns: ReadonlyArray<DataTableColumn<T>>) {
+
+    const defaultColumns = useMemo(() => availableColumns
+        .filter(c => c.default)
+        .map(c => c.field), [availableColumns]);
+
+    const [storage, setStorage] = useStorage(key, defaultColumns);
+
+    const columns = storage
+        .map(c => availableColumns.find(a => a.field == c))
+        .filter(defined);
+
+    const setColumns = useCallback((columns: ReadonlyArray<DataTableColumn<T>>) => {
+        setStorage(columns.map(c => c.field));
+    }, []);
+
+    return {
+        columns,
+        setColumns
+    }
+}

package/src/data-table/useDataTableStorage.ts

@@ -0,0 +1,43 @@
+import {useStorage} from "../storage";
+import {SortDirection} from "@mui/material";
+import {useCallback} from "react";
+import {DataTablePage} from "./DataTable";
+
+export interface DataTableStorage {
+    pageIndex?: number;
+    pageSize?: number;
+    sortField?: string;
+    sortDirection?: SortDirection;
+}
+
+export function useDataTableStorage(key: string, defaults?: DataTableStorage) {
+    const [storage, setStorage] = useStorage<DataTableStorage>(key, {
+        pageIndex: 0,
+        pageSize: 10,
+        sortDirection: "asc",
+        ...defaults,
+    });
+
+    const onPageChange = useCallback(({pageSize, pageIndex}: DataTablePage) => {
+        setStorage({...storage, pageSize, pageIndex});
+    }, [storage]);
+
+    const onSort = useCallback((field: string) => {
+        if (storage.sortField == field) {
+            setStorage({...storage, sortDirection: storage.sortDirection == "desc" ? "asc" : "desc" });
+        }
+        else {
+            setStorage({
+                ...storage,
+                sortDirection: "asc",
+                sortField: field,
+            });
+        }
+    }, [storage]);
+
+    return {
+        ...storage,
+        onPageChange,
+        onSort,
+    }
+}

package/src/data-table/useSpringPage.ts

@@ -0,0 +1,21 @@
+import {useEffect, useState} from "react";
+import {SpringPage} from "../spring";
+import {DataTablePage} from "./DataTable";
+
+export function useSpringPage<T>(springPage: SpringPage<T> | undefined) {
+	const [rows, setRows] = useState<T[]>([]);
+	const [page, setPage] = useState<DataTablePage>();
+
+	useEffect(() => {
+		if (springPage) {
+			setRows(springPage.content ?? []);
+			setPage({
+				totalElements: springPage.totalElements ?? 0,
+				pageSize: springPage.size ?? 0,
+				pageIndex: springPage.number ?? 0,
+			});
+		}
+	}, [springPage]);
+
+	return {rows, page} as const;
+}

package/src/data-table/useSpringPageable.ts

@@ -0,0 +1,25 @@
+import {SortDirection} from "@mui/material";
+import {useMemo} from "react";
+import {SpringPageable} from "../spring";
+
+export interface SpringPagingOptions {
+	pageIndex?: number;
+	pageSize?: number;
+	sortField?: string;
+	sortDirection?: SortDirection;
+}
+
+export function useSpringPageable(options: SpringPagingOptions): SpringPageable {
+	const {
+		pageIndex,
+		pageSize,
+		sortField,
+		sortDirection,
+	} = options;
+
+	return useMemo(() => ({
+		size: pageSize ?? 10,
+		sort: sortField ? [`${sortField},${sortDirection || "asc"}`] : undefined,
+		page: pageIndex ?? 0,
+	}), [pageIndex, pageSize, sortField, sortDirection]);
+}