@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.80

package/src/components/EntityCollectionTable/filters/StringNumberFilterField.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import { EnumValuesChip } from "../../../preview";
+import { VirtualTableWhereFilterOp } from "../../VirtualTable";
+import { ClearIcon, IconButton, Select, SelectItem, TextField } from "@firecms/ui";
+import { EnumValueConfig } from "../../../types";
+
+interface StringNumberFilterFieldProps {
+    name: string,
+    dataType: "string" | "number";
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    isArray?: boolean;
+    enumValues?: EnumValueConfig[];
+    title?: string;
+}
+
+const operationLabels = {
+    "==": "==",
+    "!=": "!=",
+    ">": ">",
+    "<": "<",
+    ">=": ">=",
+    "<=": "<=",
+    in: "In",
+    "not-in": "Not in",
+    "array-contains": "Contains",
+    "array-contains-any": "Any"
+};
+
+const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
+
+export function StringNumberFilterField({
+                                            name,
+                                            value,
+                                            setValue,
+                                            dataType,
+                                            isArray,
+                                            enumValues,
+                                            title
+                                        }: StringNumberFilterFieldProps) {
+
+    const possibleOperations: (keyof typeof operationLabels) [] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<="];
+
+    if (enumValues)
+        isArray
+            ? possibleOperations.push("array-contains-any")
+            : possibleOperations.push("in", "not-in");
+
+    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
+    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | undefined>(fieldValue);
+
+    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | undefined) {
+        let newValue = val;
+        const prevOpIsArray = multipleSelectOperations.includes(operation);
+        const newOpIsArray = multipleSelectOperations.includes(op);
+        if (prevOpIsArray !== newOpIsArray) {
+            // @ts-ignore
+            newValue = newOpIsArray ? (typeof val === "string" || typeof val === "number" ? [val] : []) : "";
+        }
+
+        if (typeof newValue === "number" && isNaN(newValue))
+            newValue = undefined;
+
+        setOperation(op);
+        setInternalValue(newValue);
+
+        const hasNewValue = newValue !== null && Array.isArray(newValue)
+            ? newValue.length > 0
+            : newValue !== undefined;
+        if (op && hasNewValue) {
+            setValue(
+                [op, newValue]
+            );
+        } else {
+            setValue(
+                undefined
+            );
+        }
+    }
+
+    const multiple = multipleSelectOperations.includes(operation);
+    return (
+
+        <div className="flex w-[440px] items-center">
+            <div className={"w-[80px]"}>
+                <Select value={operation}
+                        position={"item-aligned"}
+                        onValueChange={(value) => {
+                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
+                        }}
+                        renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    {possibleOperations.map((op) => (
+                        <SelectItem key={op} value={op}>
+                            {operationLabels[op]}
+                        </SelectItem>
+                    ))}
+                </Select>
+            </div>
+
+            <div className="flex-grow ml-2">
+
+                {!enumValues && <TextField
+                    type={dataType === "number" ? "number" : undefined}
+                    value={internalValue !== undefined ? String(internalValue) : ""}
+                    onChange={(evt) => {
+                        const val = dataType === "number"
+                            ? parseFloat(evt.target.value)
+                            : evt.target.value;
+                        updateFilter(operation, val);
+                    }}
+                    endAdornment={internalValue && <IconButton
+                        className="absolute right-3 top-2"
+                        onClick={(e) => updateFilter(operation, undefined)}>
+                        <ClearIcon/>
+                    </IconButton>}
+                />}
+
+                {enumValues &&
+
+                    <Select
+                        position={"item-aligned"}
+                        value={internalValue !== undefined
+                            ? (Array.isArray(internalValue) ? internalValue.map(e => String(e)) : String(internalValue))
+                            : isArray ? [] : ""}
+                        onValueChange={(value) => {
+                            updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
+                        }}
+                        multiple={multiple}
+                        endAdornment={internalValue && <IconButton
+                            className="absolute right-3 top-2"
+                            onClick={(e) => updateFilter(operation, undefined)}>
+                            <ClearIcon/>
+                        </IconButton>}
+                        renderValue={(enumKey) => <EnumValuesChip
+                            key={`select_value_${name}_${enumKey}`}
+                            enumKey={enumKey}
+                            enumValues={enumValues}
+                            size={"small"}/>}>
+                        {enumValues.map((enumConfig) => (
+                            <SelectItem key={`select_value_${name}_${enumConfig.id}`}
+                                        value={String(enumConfig.id)}>
+                                <EnumValuesChip
+                                    enumKey={String(enumConfig.id)}
+                                    enumValues={enumValues}
+                                    size={"small"}/>
+                            </SelectItem>
+                        ))}
+                    </Select>
+                }
+
+            </div>
+
+        </div>
+    );
+
+}

package/src/components/EntityCollectionTable/index.tsx

@@ -0,0 +1,20 @@
+export {
+    EntityCollectionTable
+} from "./EntityCollectionTable";
+
+export type {
+    EntityCollectionTableProps,
+    OnColumnResizeParams
+} from "./EntityCollectionTableProps";
+
+export type {
+    UniqueFieldValidator,
+    OnCellValueChange,
+    OnCellValueChangeParams
+} from "./types";
+
+export * from "./PropertyTableCell";
+export * from "./SimpleEntityCollectionTable";
+export * from "./EntityCollectionRowActions";
+export * from "./useDataSourceEntityCollectionTableController";
+export * from "./column_utils";

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect } from "react";
+
+import {
+    Button,
+    CircularProgress,
+    cn,
+    defaultBorderMixin,
+    FilterListOffIcon,
+    SearchBar,
+    Select,
+    SelectItem
+} from "@firecms/ui";
+import { CollectionSize } from "../../../types";
+import { useLargeLayout } from "../../../hooks";
+
+interface CollectionTableToolbarProps {
+    size: CollectionSize;
+    filterIsSet: boolean;
+    loading: boolean;
+    forceFilter?: boolean;
+    actionsStart?: React.ReactNode;
+    actions?: React.ReactNode;
+    title?: React.ReactNode,
+    onTextSearchClick?: () => void;
+    onTextSearch?: (searchString?: string) => void;
+    onSizeChanged: (size: CollectionSize) => void;
+    clearFilter?: () => void;
+    textSearchLoading?: boolean;
+}
+
+export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
+
+    const searchInputRef = React.useRef<HTMLInputElement>(null);
+    const largeLayout = useLargeLayout();
+
+    const searchLoading = React.useRef<boolean>(false);
+
+    useEffect(() => {
+        if (searchInputRef.current && searchLoading.current && !props.textSearchLoading) {
+            searchInputRef.current.focus();
+        }
+        searchLoading.current = props.textSearchLoading ?? false;
+    }, [props.textSearchLoading]);
+
+    const clearFilterButton = !props.forceFilter && props.filterIsSet && props.clearFilter &&
+        <Button
+            variant={"outlined"}
+            className="h-fit-content"
+            aria-label="filter clear"
+            onClick={props.clearFilter}
+            size="small">
+            <FilterListOffIcon/>
+            Clear filter
+        </Button>;
+
+    const sizeSelect = (
+        <Select
+            value={props.size as string}
+            className="w-16 h-10"
+            size={"small"}
+            onValueChange={(v) => props.onSizeChanged(v as CollectionSize)}
+            renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
+        >
+            {["xs", "s", "m", "l", "xl"].map((size) => (
+                <SelectItem key={size} value={size} className={"w-12 font-medium text-center"}>
+                    {size.toUpperCase()}
+                </SelectItem>
+            ))}
+        </Select>
+    );
+
+    return (
+        <div
+            className={cn(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
+
+            <div className="flex items-center gap-2 md:mr-4 mr-2">
+
+                {props.title && <div className={"hidden lg:block"}>
+                    {props.title}
+                </div>}
+
+                {sizeSelect}
+
+                {props.actionsStart}
+
+                {clearFilterButton}
+
+            </div>
+
+            <div className="flex items-center gap-2">
+
+                {largeLayout && <div className="w-[22px]">
+                    {props.loading &&
+                        <CircularProgress size={"small"}/>}
+                </div>}
+
+                {(props.onTextSearch || props.onTextSearchClick) &&
+                    <SearchBar
+                        key={"search-bar"}
+                        inputRef={searchInputRef}
+                        loading={props.textSearchLoading}
+                        disabled={Boolean(props.onTextSearchClick)}
+                        onClick={props.onTextSearchClick}
+                        onTextSearch={props.onTextSearchClick ? undefined : props.onTextSearch}
+                        expandable={true}/>}
+
+                {props.actions}
+
+            </div>
+
+        </div>
+    );
+}

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -0,0 +1,257 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import useMeasure from "react-use-measure";
+
+import { VirtualTableSize } from "../../VirtualTable";
+import { getRowHeight } from "../../VirtualTable/common";
+import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { ErrorBoundary } from "../../../components";
+
+interface EntityTableCellProps {
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    /**
+     * The value is used only to check changes and force re-renders
+     */
+    value?: any;
+    disabled: boolean;
+    saved?: boolean;
+    error?: Error;
+    allowScroll?: boolean;
+    align: "right" | "left" | "center";
+    size: VirtualTableSize;
+    disabledTooltip?: string;
+    width: number;
+    showExpandIcon?: boolean;
+    removePadding?: boolean;
+    fullHeight?: boolean;
+    selected?: boolean;
+    hideOverflow?: boolean;
+    onSelect?: (cellRect: DOMRect | undefined) => void;
+}
+
+type TableCellInnerProps = {
+    justifyContent: string;
+    scrollable: boolean;
+    faded: boolean;
+    fullHeight: boolean;
+    children: React.ReactNode;
+}
+
+const TableCellInner = ({
+                            justifyContent,
+                            scrollable,
+                            faded,
+                            fullHeight,
+                            children
+                        }: TableCellInnerProps) => {
+    return (
+        <div
+            className={cn("flex flex-col max-h-full w-full",
+                {
+                    "items-start": faded || scrollable
+                })}
+            style={{
+                justifyContent,
+                height: fullHeight ? "100%" : undefined,
+                overflow: scrollable ? "auto" : undefined,
+                WebkitMaskImage: faded
+                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                    : undefined,
+                maskImage: faded
+                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                    : undefined
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export const EntityTableCell = React.memo<EntityTableCellProps>(
+    function EntityTableCell({
+                                 children,
+                                 actions,
+                                 size,
+                                 selected,
+                                 disabled,
+                                 disabledTooltip,
+                                 saved,
+                                 error,
+                                 align,
+                                 allowScroll,
+                                 removePadding,
+                                 fullHeight,
+                                 onSelect,
+                                 width,
+                                 hideOverflow = true,
+                                 showExpandIcon = true
+                             }: EntityTableCellProps) {
+
+        const [measureRef, bounds] = useMeasure();
+        const ref = useRef<HTMLDivElement>(null);
+
+        const maxHeight = useMemo(() => getRowHeight(size), [size]);
+
+        const [onHover, setOnHover] = useState(false);
+        const [internalSaved, setInternalSaved] = useState(saved);
+
+        const showError = !disabled && error;
+
+        useEffect(() => {
+            if (saved) {
+                setInternalSaved(true);
+            }
+            const handler = setTimeout(() => {
+                setInternalSaved(false);
+            }, 800);
+            return () => {
+                clearTimeout(handler);
+            };
+        }, [saved]);
+
+        let p = 0;
+        if (!removePadding) {
+            switch (size) {
+                case "l":
+                case "xl":
+                    p = 4;
+                    break;
+                case "m":
+                    p = 2;
+                    break;
+                case "s":
+                default:
+                    p = 1;
+                    break;
+            }
+        }
+
+        let justifyContent;
+        switch (align) {
+            case "right":
+                justifyContent = "flex-end";
+                break;
+            case "center":
+                justifyContent = "center";
+                break;
+            case "left":
+            default:
+                justifyContent = "flex-start";
+        }
+
+        // const onClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+        //     if (event.detail === 3) {
+        //         doOpenPopup();
+        //     }
+        // }, [doOpenPopup]);
+
+        const onSelectCallback = useCallback(() => {
+            if (!onSelect) return;
+            const cellRect = ref && ref?.current?.getBoundingClientRect();
+            if (disabled) {
+                onSelect(undefined);
+            } else if (!selected && cellRect) {
+                onSelect(cellRect);
+            }
+        }, [ref, onSelect, selected, disabled]);
+
+        const onFocus = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
+            onSelectCallback();
+            event.stopPropagation();
+        }, [onSelectCallback]);
+
+        const isOverflowing = useMemo(() => {
+            if (bounds) {
+                return bounds.height > maxHeight;
+            }
+            return false;
+        }, [bounds, maxHeight]);
+
+        const isSelected = !showError && selected;
+
+        const scrollable = !disabled && allowScroll && isOverflowing;
+        const faded = !disabled && !allowScroll && isOverflowing;
+
+        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "transition-colors duration-100 ease-in-out",
+                    `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
+                    onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",
+                    saved ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "",
+                    !isSelected && !internalSaved && !showError ? "border-transparent" : "",
+                    hideOverflow ? "overflow-hidden" : "",
+                    isSelected ? "bg-gray-50 dark:bg-gray-900" : "",
+                    isSelected && !internalSaved ? "border-primary" : "",
+                    internalSaved ? "border-green-500 " : "",
+                    showError ? "border-red-500" : ""
+                )}
+                style={{
+                    justifyContent,
+                    alignItems: disabled || !isOverflowing ? "center" : undefined,
+                    width: width ?? "100%",
+                    textAlign: align
+                }}
+                tabIndex={selected || disabled ? undefined : 0}
+                onFocus={onFocus}
+                // onClick={onClick}
+                onMouseEnter={setOnHoverTrue}
+                onMouseMove={setOnHoverTrue}
+                onMouseLeave={setOnHoverFalse}
+                // contain={scrollable ? "content" : "size"}
+            >
+
+                <ErrorBoundary>
+
+                    {fullHeight && !faded && children}
+
+                    {(!fullHeight || faded) && <TableCellInner
+                        fullHeight={fullHeight ?? false}
+                        justifyContent={justifyContent}
+                        scrollable={scrollable ?? false}
+                        faded={faded}>
+
+                        {!fullHeight && <div ref={measureRef}
+                                             style={{
+                                                 display: "flex",
+                                                 width: "100%",
+                                                 justifyContent,
+                                                 height: fullHeight ? "100%" : undefined
+                                             }}>
+                            {children}
+                        </div>}
+
+                    </TableCellInner>}
+                </ErrorBoundary>
+
+                {actions}
+
+                {disabled && onHover && disabledTooltip &&
+                    <div className="absolute top-1 right-1 text-xs">
+                        <Tooltip title={disabledTooltip}>
+                            <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-gray-500"}/>
+                        </Tooltip>
+                    </div>}
+
+            </div>
+        );
+    }, (a, b) => {
+        return a.error === b.error &&
+            a.value === b.value &&
+            a.disabled === b.disabled &&
+            a.saved === b.saved &&
+            a.allowScroll === b.allowScroll &&
+            a.align === b.align &&
+            a.size === b.size &&
+            a.disabledTooltip === b.disabledTooltip &&
+            a.width === b.width &&
+            a.showExpandIcon === b.showExpandIcon &&
+            a.removePadding === b.removePadding &&
+            a.fullHeight === b.fullHeight &&
+            a.selected === b.selected;
+    }) as React.FunctionComponent<EntityTableCellProps>;

package/src/components/EntityCollectionTable/internal/EntityTableCellActions.tsx

@@ -0,0 +1,70 @@
+import { ErrorOutlineIcon, IconButton } from "@firecms/ui";
+import { ErrorTooltip } from "../../ErrorTooltip";
+import { useCallback, useEffect, useRef } from "react";
+
+export interface EntityTableCellActionsProps {
+    showError: false | Error | undefined;
+    disabled: boolean;
+    showExpandIcon: boolean | undefined;
+    selected: boolean | undefined;
+    openPopup?: (cellRect: DOMRect | undefined) => void;
+    children?: React.ReactNode;
+}
+
+export function EntityTableCellActions({ showError, disabled, showExpandIcon, selected, openPopup, children }: EntityTableCellActionsProps) {
+
+    const ref = useRef<HTMLDivElement>(null);
+    const doOpenPopup = useCallback(() => {
+        if (openPopup) {
+            const cellRect = ref && ref?.current?.getBoundingClientRect();
+            openPopup(cellRect);
+        }
+    }, []);
+
+    const iconRef = useRef<HTMLButtonElement>();
+    useEffect(() => {
+        if (iconRef.current && selected) {
+            iconRef.current.focus({ preventScroll: true });
+        }
+    }, [selected]);
+
+    return <>
+        {(showError || (!disabled && showExpandIcon)) &&
+            <div ref={ref} className="absolute top-0.5 right-0.5 flex items-center">
+                {selected && children}
+
+                {selected && !disabled && showExpandIcon &&
+                    <IconButton
+                        ref={iconRef}
+                        color={"inherit"}
+                        size={"small"}
+                        onClick={doOpenPopup}>
+                        <svg
+                            fill={"#888"}
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24">
+                            <path className="cls-2"
+                                  d="M20,5a1,1,0,0,0-1-1L14,4h0a1,1,0,0,0,0,2h2.57L13.29,9.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L18,7.42V10a1,1,0,0,0,1,1h0a1,1,0,0,0,1-1Z"/>
+                            <path className="cls-2"
+                                  d="M10.71,13.29a1,1,0,0,0-1.42,0L6,16.57V14a1,1,0,0,0-1-1H5a1,1,0,0,0-1,1l0,5a1,1,0,0,0,1,1h5a1,1,0,0,0,0-2H7.42l3.29-3.29A1,1,0,0,0,10.71,13.29Z"/>
+                        </svg>
+                    </IconButton>
+                }
+
+                {showError && <ErrorTooltip
+                    side={"left"}
+                    className={"flex items-center justify-center"}
+                    style={{ width: 32, height: 32 }}
+                    title={showError.message}>
+                    <ErrorOutlineIcon
+                        size={"small"}
+                        color={"error"}
+                    />
+                </ErrorTooltip>
+                }
+
+            </div>
+        }
+    </>;
+}

package/src/components/EntityCollectionTable/internal/common.tsx

@@ -0,0 +1,70 @@
+import { EntityCollection, Property, ResolvedArrayProperty, ResolvedProperty } from "../../../types";
+
+export function getTableCellAlignment(property: Property | ResolvedProperty): "right" | "left" | "center" {
+    if (property.dataType === "boolean") {
+        return "center";
+    } else if (property.dataType === "number") {
+        if (property.enumValues)
+            return "left";
+        return "right";
+    } else if (property.dataType === "date") {
+        return "right";
+    } else {
+        return "left";
+    }
+}
+
+export function getTablePropertyColumnWidth(property: ResolvedProperty): number {
+
+    if (property.columnWidth) {
+        return property.columnWidth;
+    }
+
+    if (property.dataType === "string") {
+        if (property.url) {
+            return 280;
+        } else if (property.storage) {
+            return 160;
+        } else if (property.enumValues) {
+            return 200;
+        } else if (property.multiline) {
+            return 300;
+        } else if (property.markdown) {
+            return 300;
+        } else if (property.email) {
+            return 200;
+        } else {
+            return 200;
+        }
+    } else if (property.dataType === "array") {
+        const arrayProperty = property as ResolvedArrayProperty;
+        if (arrayProperty.of) {
+            if (Array.isArray(property.of)) {
+                return 300;
+            } else {
+                return getTablePropertyColumnWidth(arrayProperty.of as ResolvedProperty);
+            }
+        } else {
+            return 300;
+        }
+    } else if (property.dataType === "number") {
+        if (property.enumValues) {
+            return 200;
+        }
+        return 140;
+    } else if (property.dataType === "map") {
+        return 360;
+    } else if (property.dataType === "date") {
+        return 200;
+    } else if (property.dataType === "reference") {
+        return 220;
+    } else if (property.dataType === "boolean") {
+        return 140;
+    } else {
+        return 200;
+    }
+}
+
+export function getSubcollectionColumnId(collection: EntityCollection) {
+    return `subcollection:${collection.id ?? collection.path}`;
+}