@firecms/core 3.0.0-alpha.7 → 3.0.0-alpha.70

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

@@ -0,0 +1,187 @@
+import React, { useMemo, useState } from "react";
+import { VirtualTableWhereFilterOp } from "../../VirtualTable";
+import { Entity, EntityCollection, EntityReference } from "../../../types";
+import { ReferencePreview } from "../../../preview";
+import { getReferenceFrom } from "../../../util";
+import { useNavigationController, useReferenceDialog } from "../../../hooks";
+import { Button, Select, SelectItem } from "@firecms/ui";
+
+interface ReferenceFilterFieldProps {
+    name: string,
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (filterValue?: [VirtualTableWhereFilterOp, any]) => void;
+    isArray?: boolean;
+    path?: string;
+    title?: string;
+    previewProperties?: string[];
+    hidden: boolean;
+    setHidden: (hidden: boolean) => void;
+}
+
+const operationLabels = {
+    "==": "==",
+    "!=": "!=",
+    ">": ">",
+    "<": "<",
+    ">=": ">=",
+    "<=": "<=",
+    in: "In",
+    "not-in": "Not in",
+    "array-contains": "Contains",
+    "array-contains-any": "Contains Any"
+};
+
+const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
+
+export function ReferenceFilterField({
+                                         name,
+                                         value,
+                                         setValue,
+                                         isArray,
+                                         path,
+                                         title,
+                                         previewProperties,
+                                         setHidden
+                                     }: ReferenceFilterFieldProps) {
+
+    const possibleOperations: (keyof typeof operationLabels) [] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<="];
+
+    const [onHover, setOnHover] = React.useState(false);
+
+    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<EntityReference | EntityReference[] | undefined>(fieldValue);
+
+    const selectedEntityIds = internalValue
+        ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
+            if (!(ref instanceof EntityReference)) {
+                return null;
+            }
+            return ref.id;
+        }).filter(Boolean) as string[] : [internalValue.id])
+        : [];
+
+    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[]) {
+
+        const prevOpIsArray = multipleSelectOperations.includes(operation);
+        const newOpIsArray = multipleSelectOperations.includes(op);
+        let newValue = val;
+        if (prevOpIsArray !== newOpIsArray) {
+            // @ts-ignore
+            newValue = newOpIsArray ? (newValue instanceof EntityReference ? [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 navigationController = useNavigationController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return path ? navigationController.getCollection(path) : undefined;
+    }, [path]);
+
+    const onSingleEntitySelected = (entity: Entity<any>) => {
+        updateFilter(operation, getReferenceFrom(entity));
+    };
+
+    const onMultipleEntitiesSelected = (entities: Entity<any>[]) => {
+        updateFilter(operation, entities.map(e => getReferenceFrom(e)));
+    };
+
+    const multiple = multipleSelectOperations.includes(operation);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect: multiple,
+            path,
+            collection,
+            onSingleEntitySelected,
+            onMultipleEntitiesSelected,
+            selectedEntityIds,
+            onClose: () => {
+                setHidden(false);
+            }
+        }
+    );
+
+    const doOpenDialog = () => {
+        setHidden(true);
+        referenceDialogController.open();
+    };
+
+    const buildEntry = (reference: EntityReference) => {
+        return (
+            <div
+                className="mb-0.5"
+                onMouseEnter={() => setOnHover(true)}
+                onMouseMove={() => setOnHover(true)}
+                onMouseLeave={() => setOnHover(false)}>
+                <ReferencePreview
+                    disabled={!path}
+                    previewProperties={previewProperties}
+                    size={"medium"}
+                    onClick={doOpenDialog}
+                    reference={reference}
+                    onHover={onHover}
+                    allowEntityNavigation={false}
+                />
+            </div>
+        );
+    };
+
+    return (
+
+        <div className="flex w-[440px] flex-row">
+            <div className="w-[120px]">
+                <Select value={operation}
+                        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 h-full">
+
+                {internalValue && Array.isArray(internalValue) && <div>
+                    {internalValue.map((ref, index) => buildEntry(ref))}
+                </div>}
+                {internalValue && !Array.isArray(internalValue) && <div>
+                    {buildEntry(internalValue)}
+                </div>}
+                {(!internalValue || (Array.isArray(internalValue) && internalValue.length === 0)) &&
+                    <Button onClick={doOpenDialog}
+                            variant={"outlined"}
+                            className="h-full w-full">
+                        {multiple ? "Select references" : "Select reference"}
+                    </Button>
+                }
+            </div>
+
+        </div>
+    );
+
+}

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,16 @@
+export {
+    EntityCollectionTable
+} from "./EntityCollectionTable";
+
+export type {
+    EntityCollectionTableProps,
+    OnColumnResizeParams
+} from "./EntityCollectionTableProps";
+
+export type {
+    UniqueFieldValidator,
+    OnCellValueChange,
+    OnCellValueChangeParams
+} from "./types";
+
+export * from "./useEntityCollectionTableController";

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-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">
+
+                {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/DeleteEntityDialog.tsx

@@ -0,0 +1,207 @@
+import { Entity, EntityCallbacks, EntityCollection } from "../../../types";
+import React, { useCallback, useMemo, useState } from "react";
+import { deleteEntityWithCallbacks, useDataSource, useFireCMSContext, useSnackbarController } from "../../../hooks";
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { resolveCollection } from "../../../util";
+import { EntityPreview } from "../../EntityPreview";
+
+export interface DeleteEntityDialogProps<M extends Record<string, any>> {
+    entityOrEntitiesToDelete?: Entity<M> | Entity<M>[],
+    path: string,
+    collection: EntityCollection<M>
+    open: boolean;
+    onClose: () => void;
+    callbacks?: EntityCallbacks<M>,
+
+    onEntityDelete?(path: string, entity: Entity<M>): void;
+
+    onMultipleEntitiesDelete?(path: string, entities: Entity<M>[]): void;
+}
+
+export function DeleteEntityDialog<M extends Record<string, any>>({
+                                                                      entityOrEntitiesToDelete,
+                                                                      collection,
+                                                                      onClose,
+                                                                      open,
+                                                                      callbacks,
+                                                                      onEntityDelete,
+                                                                      onMultipleEntitiesDelete,
+                                                                      path
+                                                                  }: DeleteEntityDialogProps<M>) {
+
+    const dataSource = useDataSource();
+    console.log("dataSource", dataSource)
+    const snackbarController = useSnackbarController();
+    const [loading, setLoading] = useState(false);
+
+    const [entityOrEntities, setUsedEntityOrEntities] = React.useState<Entity<M> | Entity<M>[]>();
+
+    const [multipleEntities, setMultipleEntities] = React.useState<boolean>();
+    const context = useFireCMSContext();
+
+    React.useEffect(() => {
+        if (entityOrEntitiesToDelete) {
+            const revisedEntityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
+                ? entityOrEntitiesToDelete[0]
+                : entityOrEntitiesToDelete;
+            setUsedEntityOrEntities(revisedEntityOrEntities);
+            setMultipleEntities(Array.isArray(revisedEntityOrEntities));
+        }
+    }, [entityOrEntitiesToDelete]);
+
+    const resolvedCollection = useMemo(() => resolveCollection<M>({
+        collection,
+        path,
+        fields: context.propertyConfigs
+    }), [collection, path]);
+
+    const handleCancel = useCallback(() => {
+        onClose();
+    }, [onClose]);
+
+    const onDeleteSuccess = useCallback((entity: Entity<any>) => {
+        console.debug("Deleted", entity);
+    }, []);
+
+    const onDeleteFailure = useCallback((entity: Entity<any>, e: Error) => {
+        snackbarController.open({
+            type: "error",
+            message: "Error deleting: " + e?.message
+        });
+
+        console.error("Error deleting entity");
+        console.error(e);
+    }, [resolvedCollection.name]);
+
+    const onPreDeleteHookError = useCallback((entity: Entity<any>, e: Error) => {
+        snackbarController.open({
+            type: "error",
+            message: "Error before deleting: " + e?.message
+        });
+        console.error(e);
+    }, [resolvedCollection.name]);
+
+    const onDeleteSuccessHookError = useCallback((entity: Entity<any>, e: Error) => {
+        snackbarController.open({
+            type: "error",
+            message: "Error after deleting: " + e?.message
+        });
+        console.error(e);
+    }, [resolvedCollection.name]);
+
+    const performDelete = useCallback((entity: Entity<M>): Promise<boolean> =>
+        deleteEntityWithCallbacks({
+            dataSource,
+            entity,
+            collection: resolvedCollection,
+            callbacks,
+            onDeleteSuccess,
+            onDeleteFailure,
+            onPreDeleteHookError,
+            onDeleteSuccessHookError,
+            context
+        }), [dataSource, resolvedCollection, callbacks, onDeleteSuccess, onDeleteFailure, onPreDeleteHookError, onDeleteSuccessHookError, context]);
+
+    const handleOk = useCallback(async () => {
+        if (entityOrEntities) {
+
+            setLoading(true);
+
+            if (multipleEntities) {
+                Promise.all((entityOrEntities as Entity<M>[]).map(performDelete)).then((results) => {
+
+                    setLoading(false);
+
+                    if (onMultipleEntitiesDelete && entityOrEntities)
+                        onMultipleEntitiesDelete(path, entityOrEntities as Entity<M>[]);
+
+                    if (results.every(Boolean)) {
+                        snackbarController.open({
+                            type: "success",
+                            message: `${resolvedCollection.name}: multiple deleted`
+                        });
+                    } else if (results.some(Boolean)) {
+                        snackbarController.open({
+                            type: "warning",
+                            message: `${resolvedCollection.name}: Some of the entities have been deleted, but not all`
+                        });
+                    } else {
+                        snackbarController.open({
+                            type: "error",
+                            message: `${resolvedCollection.name}: Error deleting entities`
+                        });
+                    }
+                    onClose();
+                });
+
+            } else {
+                performDelete(entityOrEntities as Entity<M>).then((success) => {
+                    setLoading(false);
+                    if (success) {
+                        if (onEntityDelete && entityOrEntities)
+                            onEntityDelete(path, entityOrEntities as Entity<M>);
+                        snackbarController.open({
+                            type: "success",
+                            message: `${resolvedCollection.singularName ?? resolvedCollection.name} deleted`
+                        });
+                        onClose();
+                    }
+                });
+            }
+        }
+    }, [entityOrEntities, multipleEntities, performDelete, onMultipleEntitiesDelete, path, onClose, snackbarController, resolvedCollection.name, onEntityDelete]);
+
+    let content: React.ReactNode;
+    if (entityOrEntities && multipleEntities) {
+        content = <>Multiple entities</>;
+    } else {
+        const entity = entityOrEntities as Entity<M> | undefined;
+        content = entity
+            ? <EntityPreview
+                entity={entity}
+                collection={collection}
+                path={path}/>
+            : <></>;
+    }
+
+    const dialogTitle = multipleEntities
+        ? <><b>{resolvedCollection.name}</b>: Confirm multiple delete?</>
+        : `Would you like to delete this ${resolvedCollection.singularName ?? resolvedCollection.name}?`;
+
+    return (
+        <Dialog
+            maxWidth={"2xl"}
+            aria-labelledby="delete-dialog"
+            open={open}
+            onOpenChange={(open) => !open ? onClose() : undefined}
+        >
+            <DialogContent fullHeight={true}>
+                <Typography variant={"subtitle2"} className={"p-4"}>
+                    {dialogTitle}
+                </Typography>
+
+                {!multipleEntities && <div className={"p-4"}>{content}</div>}
+            </DialogContent>
+            <DialogActions>
+
+                {loading && <CircularProgress size={"small"}/>}
+
+                <Button onClick={handleCancel}
+                        disabled={loading}
+                        variant="text"
+                        color="primary">
+                    Cancel
+                </Button>
+                <Button
+                    autoFocus
+                    disabled={loading}
+                    onClick={handleOk}
+                    variant="filled"
+                    color="primary">
+                    Ok
+                </Button>
+            </DialogActions>
+
+        </Dialog>
+    );
+}