@variocube/app-ui 1.14.0

package/src/confirm/ConfirmButton.tsx

@@ -0,0 +1,69 @@
+import {Button, ButtonProps} from "@mui/material";
+import * as React from "react";
+import {Fragment, PropsWithChildren, useCallback} from "react";
+import {useFlag, useIsMounted} from "../utils";
+import {ConfirmDialog} from "./ConfirmDialog";
+
+interface ConfirmButtonProps {
+    title: string;
+    confirmTitle?: string;
+    cancel: string;
+    onConfirm: () => Promise<any>;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    color?: ButtonProps["color"];
+    variant?: ButtonProps["variant"];
+}
+
+export function ConfirmButton(props: PropsWithChildren<ConfirmButtonProps>) {
+    const {
+        fullWidth,
+        title,
+        confirmTitle,
+        cancel,
+        icon,
+        children,
+        onConfirm,
+        color,
+        variant,
+        disabled,
+    } = props;
+    const isMounted = useIsMounted();
+    const [dialogOpen, setDialogOpen, clearDialogOpen] = useFlag(false);
+
+    const handleConfirm = useCallback(async () => {
+        await onConfirm();
+        if (isMounted) {
+            clearDialogOpen();
+        }
+    }, [onConfirm, isMounted]);
+
+    return (
+        <Fragment>
+            <Button
+                onClick={setDialogOpen}
+                color={color}
+                variant={variant}
+                disabled={disabled}
+                startIcon={icon}
+                fullWidth={fullWidth}
+            >
+                {title}
+            </Button>
+            <ConfirmDialog
+                open={dialogOpen}
+                onClose={clearDialogOpen}
+                title={title}
+                confirmTitle={confirmTitle}
+                cancel={cancel}
+                onConfirm={handleConfirm}
+                color={color}
+                fullWidth={fullWidth}
+                icon={icon}
+            >
+                {children}
+            </ConfirmDialog>
+        </Fragment>
+    );
+}

package/src/confirm/ConfirmDialog.tsx

@@ -0,0 +1,68 @@
+import {Button, ButtonProps, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle} from "@mui/material";
+import * as React from "react";
+import {PropsWithChildren} from "react";
+import {useAsyncCallback} from "react-async-hook";
+import {ErrorAlert} from "../ErrorAlert";
+
+interface ConfirmDialogProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    confirmTitle?: string;
+    cancel: string;
+    onConfirm: () => Promise<any>;
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+    color?: ButtonProps["color"];
+}
+
+export function ConfirmDialog(props: PropsWithChildren<ConfirmDialogProps>) {
+    const {
+        open,
+        onClose,
+        title,
+        confirmTitle = title,
+        cancel,
+        onConfirm,
+        fullWidth = true,
+        icon,
+        color = "primary",
+        children
+    } = props;
+
+    const {loading, error, execute} = useAsyncCallback(onConfirm);
+
+    async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        if (e.currentTarget.reportValidity()) {
+            await execute();
+        }
+    }
+
+    return (
+        <Dialog fullWidth={fullWidth} open={open} onClose={onClose}>
+            <DialogTitle>{title}</DialogTitle>
+            <form onSubmit={handleSubmit}>
+                <DialogContent>{children}</DialogContent>
+                {error && (
+                    <DialogContent>
+                        <ErrorAlert error={error}/>
+                    </DialogContent>
+                )}
+                <DialogActions>
+                    <Button
+                        type="submit"
+                        color={color}
+                        disabled={loading}
+                        startIcon={loading ? <CircularProgress color={color} size={16} sx={{mx: 0.25}} /> : icon}
+                    >
+                        {confirmTitle}
+                    </Button>
+                    <Button onClick={onClose} color="inherit">
+                        {cancel}
+                    </Button>
+                </DialogActions>
+            </form>
+        </Dialog>
+    );
+}

package/src/confirm/ConfirmIconButton.tsx

@@ -0,0 +1,62 @@
+import {ButtonProps, IconButton} from "@mui/material";
+import * as React from "react";
+import {Fragment, PropsWithChildren, useCallback} from "react";
+import {useFlag, useIsMounted} from "../utils";
+import {ConfirmDialog} from "./ConfirmDialog";
+
+interface ConfirmIconButtonProps {
+	title: string;
+	confirmTitle?: string;
+	cancel: string;
+	onConfirm: () => Promise<any>;
+	disabled?: boolean;
+	icon?: React.ReactNode;
+	color?: ButtonProps["color"];
+}
+
+export function ConfirmIconButton(props: PropsWithChildren<ConfirmIconButtonProps>) {
+	const {
+		title,
+		confirmTitle,
+		cancel,
+		icon,
+		children,
+		onConfirm,
+		color,
+		disabled,
+	} = props;
+	const isMounted = useIsMounted();
+	const [dialogOpen, setDialogOpen, clearDialogOpen] = useFlag(false);
+
+	const handleConfirm = useCallback(async () => {
+		await onConfirm();
+		if (isMounted) {
+			clearDialogOpen();
+		}
+	}, [onConfirm, isMounted]);
+
+	return (
+		<Fragment>
+			<IconButton
+				onClick={setDialogOpen}
+				color={color}
+				disabled={disabled}
+				title={title}
+			>
+				{icon}
+			</IconButton>
+			<ConfirmDialog
+				open={dialogOpen}
+				onClose={clearDialogOpen}
+				title={title}
+				confirmTitle={confirmTitle}
+				cancel={cancel}
+				onConfirm={handleConfirm}
+				color={color}
+				icon={icon}
+			>
+				{children}
+			</ConfirmDialog>
+		</Fragment>
+	);
+}

package/src/confirm/ConfirmMenuItem.tsx

@@ -0,0 +1,66 @@
+import {ButtonProps, ListItemIcon, ListItemText, MenuItem} from "@mui/material";
+import * as React from "react";
+import {Fragment, PropsWithChildren, useCallback} from "react";
+import {useFlag, useIsMounted} from "../utils";
+import {ConfirmDialog} from "./ConfirmDialog";
+
+interface ConfirmButtonProps {
+    title: string;
+    confirmTitle?: string;
+    cancel: string;
+    onConfirm: () => Promise<any>;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    color?: ButtonProps["color"];
+}
+
+export function ConfirmMenuItem(props: PropsWithChildren<ConfirmButtonProps>) {
+    const {
+        fullWidth,
+        title,
+        confirmTitle,
+        cancel,
+        icon,
+        children,
+        onConfirm,
+        color,
+        disabled,
+    } = props;
+    const isMounted = useIsMounted();
+    const [dialogOpen, setDialogOpen, clearDialogOpen] = useFlag(false);
+
+    const handleConfirm = useCallback(async () => {
+        await onConfirm();
+        if (isMounted) {
+            clearDialogOpen();
+        }
+    }, [onConfirm, isMounted]);
+
+    return (
+        <Fragment>
+            <MenuItem
+                onClick={setDialogOpen}
+                disabled={disabled}
+            >
+                {icon && (
+                    <ListItemIcon>{icon}</ListItemIcon>
+                )}
+                <ListItemText primary={title} />
+            </MenuItem>
+            <ConfirmDialog
+                open={dialogOpen}
+                onClose={clearDialogOpen}
+                title={title}
+                confirmTitle={confirmTitle}
+                cancel={cancel}
+                onConfirm={handleConfirm}
+                color={color}
+                fullWidth={fullWidth}
+                icon={icon}
+            >
+                {children}
+            </ConfirmDialog>
+        </Fragment>
+    );
+}

package/src/confirm/index.ts

@@ -0,0 +1,4 @@
+export * from "./ConfirmButton";
+export * from "./ConfirmDialog";
+export * from "./ConfirmIconButton";
+export * from "./ConfirmMenuItem";

package/src/container/ContainerLayout.tsx

@@ -0,0 +1,40 @@
+import React, {createElement, PropsWithChildren} from "react";
+import {Breakpoint} from "@mui/system";
+import {Box, Container} from "@mui/material";
+import {containerWidthToBreakPoint, useContainerSettingsContext} from "./ContainerSettingsContext";
+import {useHelpSettingsContext} from "../help/HelpSettingsContext";
+import {HelpDrawer} from "../help/HelpDrawer";
+
+interface ContainerLayoutProps extends PropsWithChildren<any> {
+	fixedWidth?: Breakpoint | false;
+	margin?: number;
+}
+
+export function ContainerLayout({children, fixedWidth, margin, helpKey}: ContainerLayoutProps) {
+	const {width} = useContainerSettingsContext();
+	const {baseUrl} = useHelpSettingsContext();
+
+	let selectedWidth = fixedWidth;
+	if(!selectedWidth && width) {
+		selectedWidth = containerWidthToBreakPoint(width);
+	}
+
+	return (
+		<Container maxWidth={selectedWidth} id="containerLayout">
+			<Box
+				marginTop={margin != undefined ? margin : 5}
+				id="containerLayoutBoxScreen"
+				display="block"
+				displayPrint="none"
+			>
+				{children}
+				{baseUrl &&
+					<HelpDrawer />
+				}
+			</Box>
+			<Box id="containerLayoutBoxPrint" display="none" displayPrint="block" style={{marginTop: "-32px"}}>
+				{children}
+			</Box>
+		</Container>
+	);
+}

package/src/container/ContainerSettingsContext.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import {
+    createContext,
+    createElement,
+    PropsWithChildren,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState
+} from "react";
+import {Breakpoint} from "@mui/system";
+
+type ContainerWidth = Breakpoint | 'max';
+
+const availableWidths: ContainerWidth[] = [ 'lg', 'xl', 'max'];
+
+export function nextWidth(currentWidth: ContainerWidth): ContainerWidth {
+    const currentIndex = availableWidths.indexOf(currentWidth);
+    const nextIndex = currentIndex + 1;
+    return nextIndex >= availableWidths.length ? availableWidths[0] : availableWidths[nextIndex];
+}
+
+export function containerWidthToBreakPoint(width: ContainerWidth): Breakpoint | false {
+    return width === 'max' ? false : width;
+}
+
+const WIDTH_KEY = "variocube-container-width";
+const DEFAULT_WIDTH: ContainerWidth = 'lg';
+
+interface ContainerSettingsContextData {
+    width: ContainerWidth;
+    setWidth: (width: ContainerWidth) => void;
+}
+
+const emptyContext: ContainerSettingsContextData = {
+    width: DEFAULT_WIDTH,
+    setWidth: (width: ContainerWidth) => console.error(`Empty context should not call setWidth(${width}), you most likely do not have <ContainerSettingsContextProvider/> in your component tree.`)
+};
+
+const ContainerSettingsContext = createContext(emptyContext);
+
+export function ContainerSettingsContextProvider({children}: PropsWithChildren<any>) {
+    const [width, setWidth] = useState<ContainerWidth | undefined>(undefined);
+
+    const handleSetWidth = useCallback((next: ContainerWidth) => {
+        console.log(`Setting container width to ${next}`);
+        localStorage.setItem(WIDTH_KEY, next);
+        setWidth(next);
+    }, []);
+
+    const defaultContext = useMemo<ContainerSettingsContextData>(() => {
+        return {
+            width: width || DEFAULT_WIDTH,
+            setWidth: handleSetWidth
+        };
+    }, [width, handleSetWidth]);
+
+    useEffect(() => {
+        let configured = localStorage.getItem(WIDTH_KEY);
+        if(configured) {
+            setWidth(configured as ContainerWidth);
+        } else {
+            setWidth(DEFAULT_WIDTH);
+        }
+    }, []);
+
+    return (
+        <ContainerSettingsContext.Provider value={defaultContext}>
+            {children}
+        </ContainerSettingsContext.Provider>
+    );
+}
+
+export function useContainerSettingsContext(): ContainerSettingsContextData {
+    return useContext<ContainerSettingsContextData>(ContainerSettingsContext);
+}

package/src/container/ContainerWidthControl.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import {Link} from "@mui/material";
+import {LinkProps} from "@mui/material/Link/Link";
+import {nextWidth, useContainerSettingsContext} from "./ContainerSettingsContext";
+import {useCallback} from "react";
+
+interface ContainerWidthControlProps extends Omit<LinkProps, "children"> {
+}
+
+export function ContainerWidthControl(props: ContainerWidthControlProps) {
+    const {width, setWidth} = useContainerSettingsContext();
+
+    const handleChangeContainerWidth = useCallback(() => {
+        setWidth(nextWidth(width));
+    }, [width]);
+
+    return (
+        <Link href="#" underline="hover" color="secondary" onClick={handleChangeContainerWidth} {...props}>{width}</Link>
+    );
+}

package/src/container/index.ts

@@ -0,0 +1,3 @@
+export {ContainerSettingsContextProvider, useContainerSettingsContext, containerWidthToBreakPoint, nextWidth} from "./ContainerSettingsContext";
+export {ContainerLayout} from "./ContainerLayout";
+export {ContainerWidthControl} from "./ContainerWidthControl";

package/src/content-table/ContentTable.tsx

@@ -0,0 +1,214 @@
+import React, {Fragment, ReactComponentElement, useMemo, useState} from "react";
+import {
+    Box,
+    Button,
+    Checkbox,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    FormControlLabel,
+    Grid,
+    IconButton,
+    LinearProgress, Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TablePagination,
+    TableRow,
+    TableSortLabel,
+    useTheme
+} from "@mui/material";
+import {FilterListIcon, TuningIcon} from "../icons";
+import {Page, PagingSettings} from "../Paging";
+import {UndrawEmpty} from "./UndrawEmpty";
+
+export type ColumnType = { [sortKey: string]: { show: boolean, name: string, align?: 'left'|'right'|'center', unsortable?: boolean } }
+
+type ContentTableProps<T> = {
+    pageable: PagingSettings<keyof ColumnType>,
+    columns: ColumnType,
+    onPageableChange: (pageable: PagingSettings<keyof ColumnType>) => void,
+    onColumnsChange: (columns: ColumnType) => void,
+    page?: Page<T>,
+    inProgress?: boolean,
+    onFilterClick?: () => void,
+    renderEmptyContent?: ReactComponentElement<any>,
+    renderTableBody?: ReactComponentElement<any>,
+    renderFilterOptions?: ReactComponentElement<any>
+    renderColumnFilter?: ReactComponentElement<any>,
+}
+
+export const ContentTable = <T extends unknown>(props: ContentTableProps<T>) => {
+    const {
+        page, pageable, columns,
+        renderEmptyContent, renderTableBody, renderFilterOptions, renderColumnFilter,
+        inProgress,
+        onPageableChange,
+        onColumnsChange,
+        onFilterClick,
+    } = props;
+    const currentPage = useMemo(() => page, [page]);
+    const currentPageable = useMemo(() => pageable, [pageable]);
+    const [showColumnSettings, setShowColumnSettings] = useState(false);
+
+    const handleSortColumn = (key: keyof typeof columns) => {
+        const {sort, direction} = currentPageable;
+        let oD: 'desc'|'asc';
+        if (sort == key) {
+            oD = direction === 'desc' ? 'asc' : 'desc';
+        } else {
+            oD = 'desc';
+        }
+        updatePageable({
+            ...currentPageable,
+            sort: key,
+            direction: oD
+        });
+    };
+
+    const handlePageChange = (e: any, pageNumber: number) => {
+        updatePageable({
+            ...currentPageable,
+            pageNumber: pageNumber
+        });
+    };
+
+    const handleRowsPerPageChange = (e: any) => {
+        updatePageable({
+            ...currentPageable,
+            pageSize: e.target.value as number
+        });
+    };
+
+    const updatePageable = (settings: PagingSettings<keyof typeof columns>) => {
+        onPageableChange(settings);
+    }
+
+    const toggleColumnSettings = () => setShowColumnSettings(!showColumnSettings);
+
+    const handleColumnsChange = (sortKey: keyof typeof columns, show: boolean) => {
+        onColumnsChange({
+            ...columns,
+            [sortKey]: {
+                ...columns[sortKey],
+                show
+            }
+        })
+    }
+
+    const theme = useTheme();
+    return (
+        <Paper sx={{ maxWidth: `calc(100vw - ${theme.spacing(4)})` }}>
+            {!currentPage && (
+                <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" p={3}>
+                    <CircularProgress />
+                </Box>
+            )}
+            {currentPage && (
+                <Fragment>
+                    <Box p={1}>
+                        <Grid container>
+                            <Grid item display="flex" flexGrow={1} alignItems="center">
+                                {onFilterClick && (
+                                    <IconButton onClick={onFilterClick}>
+                                        <FilterListIcon />
+                                    </IconButton>
+                                )}
+                                <Box mx={1} />
+                                {renderFilterOptions && ( renderFilterOptions )}
+                            </Grid>
+                            <Grid item>
+                                <IconButton onClick={toggleColumnSettings}>
+                                    <TuningIcon />
+                                </IconButton>
+                            </Grid>
+                        </Grid>
+                    </Box>
+                    <TableContainer >
+                        <Table size="small">
+                            <TableHead sx={{
+                                background: theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[600]
+                            }}>
+                                <TableRow>
+                                    {Object.keys(columns).filter(k => columns[k].show).map((k) => (
+                                        <TableCell key={'data-table-' + k} sx={{ whiteSpace: 'nowrap' }} align={columns[k].align}>
+                                            {!columns[k].unsortable && (
+                                                <TableSortLabel
+                                                    active={currentPageable.sort === k}
+                                                    direction={currentPageable.sort === k ? currentPageable.direction : 'asc'}
+                                                    onClick={() => handleSortColumn(k)}
+                                                >
+                                                    {columns[k].name}
+                                                </TableSortLabel>
+                                            )}
+                                            {columns[k].unsortable && (columns[k].name)}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            </TableHead>
+                            <TableBody sx={{
+                                '& > tr:not(.empty)': {
+                                    cursor: 'pointer',
+                                    '&:hover': {
+                                        background: `${theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[800]} !important`
+                                    }
+                                }
+                            }}>
+                                {currentPage.content.length === 0 && (
+                                    renderEmptyContent ?
+                                        (<Fragment>{renderEmptyContent}</Fragment>) :
+                                        (
+                                            <TableRow className={'empty'}>
+                                                <TableCell colSpan={Object.keys(columns).length}>
+                                                    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" p={3}>
+                                                        <Box sx={{
+                                                            height: 300,
+                                                            [theme.breakpoints.down('md')]: {
+                                                                height: 150
+                                                            },
+                                                        }}>
+                                                            <UndrawEmpty height="100%" width="auto" />
+                                                        </Box>
+                                                    </Box>
+                                                </TableCell>
+                                            </TableRow>
+                                        )
+                                )}
+                                {renderTableBody}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                    <TablePagination
+                        rowsPerPageOptions={[10, 25, 50]}
+                        component="div"
+                        count={currentPage.totalElements}
+                        rowsPerPage={currentPageable.pageSize}
+                        page={currentPageable.pageNumber}
+                        onPageChange={handlePageChange}
+                        onRowsPerPageChange={handleRowsPerPageChange}
+                    />
+                    {inProgress && (
+                        <LinearProgress variant="indeterminate" />
+                    )}
+                    <Dialog fullWidth maxWidth="sm" open={showColumnSettings}>
+                        <DialogContent>
+                            {renderColumnFilter && <Fragment>{renderColumnFilter}</Fragment>}
+                            {!renderColumnFilter && Object.keys(columns).map((k, i) => (
+                                <FormControlLabel key={'column-setting-' + i} label={columns[k].name}
+                                                  color="primary"
+                                                  control={<Checkbox checked={columns[k].show} onChange={e => handleColumnsChange(k, e.target.checked)} />}
+                                />
+                            ))}
+                        </DialogContent>
+                        <DialogActions>
+                            <Button variant="contained" color="primary" onClick={toggleColumnSettings}>OK</Button>
+                        </DialogActions>
+                    </Dialog>
+                </Fragment>
+            )}
+        </Paper>
+    )
+}