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

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.d.ts

@@ -0,0 +1,12 @@
+import { Entity, EntityCallbacks, EntityCollection } from "../../../types";
+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 declare function DeleteEntityDialog<M extends Record<string, any>>({ entityOrEntitiesToDelete, collection, onClose, open, callbacks, onEntityDelete, onMultipleEntitiesDelete, path }: DeleteEntityDialogProps<M>): import("react/jsx-runtime").JSX.Element;

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>
+    );
+}

package/src/components/EntityCollectionTable/internal/EntityCollectionRowActions.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../../types";
+/**
+ *
+ * @param entity
+ * @param width
+ * @param frozen
+ * @param isSelected
+ * @param selectionEnabled
+ * @param size
+ * @param toggleEntitySelection
+ * @param onCopyClicked
+ * @param onEditClicked
+ * @param onDeleteClicked
+ * @param hideId
+ * @constructor
+ *
+ * @group Collection components
+ */
+export declare const EntityCollectionRowActions: React.NamedExoticComponent<{
+    entity: Entity<any>;
+    collection?: EntityCollection<any, import("../../../types").User> | undefined;
+    fullPath?: string | undefined;
+    width: number;
+    frozen?: boolean | undefined;
+    size: CollectionSize;
+    isSelected: boolean;
+    selectionEnabled?: boolean | undefined;
+    actions?: EntityAction[] | undefined;
+    hideId?: boolean | undefined;
+    onCollectionChange?: (() => void) | undefined;
+    selectionController?: SelectionController | undefined;
+    highlightEntity?: ((entity: Entity<any>) => void) | undefined;
+    unhighlightEntity?: ((entity: Entity<any>) => void) | undefined;
+}>;

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

@@ -0,0 +1,174 @@
+import React, { MouseEvent, useCallback } from "react";
+import equal from "react-fast-compare"
+
+import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../../types";
+import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { useFireCMSContext, useLargeLayout } from "../../../hooks";
+
+/**
+ *
+ * @param entity
+ * @param width
+ * @param frozen
+ * @param isSelected
+ * @param selectionEnabled
+ * @param size
+ * @param toggleEntitySelection
+ * @param onCopyClicked
+ * @param onEditClicked
+ * @param onDeleteClicked
+ * @param hideId
+ * @constructor
+ *
+ * @group Collection components
+ */
+export const EntityCollectionRowActions = React.memo(function EntityCollectionRowActions({
+                                                                                             entity,
+                                                                                             collection,
+                                                                                             fullPath,
+                                                                                             width,
+                                                                                             frozen,
+                                                                                             isSelected,
+                                                                                             selectionEnabled,
+                                                                                             size,
+                                                                                             highlightEntity,
+                                                                                             onCollectionChange,
+                                                                                             unhighlightEntity,
+                                                                                             actions = [],
+                                                                                             hideId,
+                                                                                             selectionController
+                                                                                         }:
+                                                                                             {
+                                                                                                 entity: Entity<any>,
+                                                                                                 collection?: EntityCollection<any>,
+                                                                                                 fullPath?: string,
+                                                                                                 width: number,
+                                                                                                 frozen?: boolean,
+                                                                                                 size: CollectionSize,
+                                                                                                 isSelected: boolean,
+                                                                                                 selectionEnabled?: boolean,
+                                                                                                 actions?: EntityAction[],
+                                                                                                 hideId?: boolean,
+                                                                                                 onCollectionChange?: () => void,
+                                                                                                 selectionController?: SelectionController;
+                                                                                                 highlightEntity?: (entity: Entity<any>) => void;
+                                                                                                 unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                             }) {
+
+    const largeLayout = useLargeLayout();
+
+    const context = useFireCMSContext();
+
+    const onCheckedChange = useCallback((checked: boolean) => {
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const onClick = useCallback((event: MouseEvent) => {
+        event.stopPropagation();
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const hasActions = actions.length > 0;
+    const hasCollapsedActions = actions.some(a => a.collapsed || a.collapsed === undefined);
+
+    const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
+    const uncollapsedActions = actions.filter(a => a.collapsed === false);
+    return (
+        <div
+            onClick={onClick}
+            className={cn(
+                "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                frozen ? "sticky left-0" : ""
+            )}
+            style={{
+                width,
+                position: frozen ? "sticky" : "initial",
+                left: frozen ? 0 : "initial",
+                contain: "strict"
+            }}>
+
+            {(hasActions || selectionEnabled) &&
+                <div className="w-34 flex justify-center">
+
+                    {uncollapsedActions.map((action, index) => (
+                        <Tooltip key={index} title={action.name}>
+                            <IconButton
+                                onClick={(event: MouseEvent) => {
+                                    event.stopPropagation();
+                                    action.onClick({
+                                        entity,
+                                        fullPath,
+                                        collection,
+                                        context,
+                                        selectionController,
+                                        highlightEntity,
+                                        unhighlightEntity,
+                                        onCollectionChange
+                                    });
+                                }}
+                                size={largeLayout ? "medium" : "small"}>
+                                {action.icon}
+                            </IconButton>
+                        </Tooltip>
+                    ))}
+
+                    {hasCollapsedActions &&
+                        <Menu
+                            trigger={<IconButton
+                                size={largeLayout ? "medium" : "small"}>
+                                <MoreVertIcon/>
+                            </IconButton>}>
+                            {collapsedActions.map((action, index) => (
+                                <MenuItem
+                                    key={index}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        action.onClick({
+                                            entity,
+                                            fullPath,
+                                            collection,
+                                            context,
+                                            selectionController,
+                                            highlightEntity,
+                                            unhighlightEntity,
+                                            onCollectionChange
+                                        });
+                                    }}>
+                                    {action.icon}
+                                    {action.name}
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    }
+
+                    {selectionEnabled &&
+                        <Tooltip title={`Select ${entity.id}`}>
+                            <Checkbox
+                                size={largeLayout ? "medium" : "small"}
+                                checked={isSelected}
+                                onCheckedChange={onCheckedChange}
+                            />
+                        </Tooltip>}
+
+                </div>}
+
+            {!hideId && size !== "xs" && (
+                <div className="w-[138px] text-center overflow-hidden truncate">
+
+                    {entity
+                        ? <Typography
+                            onClick={(event) => {
+                                event.stopPropagation();
+                            }}
+                            className={"font-mono select-all"}
+                            variant={"caption"}
+                            color={"secondary"}> {entity.id} </Typography>
+                        : <Skeleton/>
+                    }
+                </div>
+            )}
+
+        </div>
+    );
+
+}, equal);

package/src/components/EntityCollectionTable/internal/EntityTableCell.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { VirtualTableSize } from "../../VirtualTable";
+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;
+}
+export declare const EntityTableCell: React.FunctionComponent<EntityTableCellProps>;
+export {};