@firecms/core 3.0.0-canary.99 → 3.0.0-rc.2

package/src/components/VirtualTable/fields/VirtualTableUserSelect.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect } from "react";
+import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
+import { useInternalUserManagementController } from "../../../hooks";
+import { UserDisplay } from "../../UserDisplay";
+
+export function VirtualTableUserSelect(props: {
+    name: string;
+    error: Error | undefined;
+    multiple: boolean;
+    disabled: boolean;
+    small: boolean;
+    internalValue: string | string[] | undefined;
+    updateValue: (newValue: (string | string[] | null)) => void;
+    focused: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        internalValue,
+        disabled,
+        small,
+        focused,
+        updateValue,
+        multiple
+    } = props;
+
+    const { users, getUser } = useInternalUserManagementController();
+
+    const validValue = (Array.isArray(internalValue) && multiple) ||
+        (!Array.isArray(internalValue) && !multiple);
+
+    const ref = React.useRef<HTMLButtonElement>(null);
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current?.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    const onChange = useCallback((updatedValue: string | string[]) => {
+        if (!updatedValue) {
+            updateValue(null);
+        } else {
+            updateValue(updatedValue);
+        }
+    }, [updateValue]);
+
+    const renderValue = (userId: string) => {
+        const user = getUser(userId);
+        return <UserDisplay user={user}  />;
+    };
+
+    return (
+        multiple
+            ? <MultiSelect
+                inputRef={ref}
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                includeClear={false}
+                useChips={false}
+                value={validValue
+                    ? (internalValue as string[])
+                    : ([])}
+                onValueChange={onChange}>
+                {users?.map((user) => (
+                    <MultiSelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay
+                            user={user} />
+                    </MultiSelectItem>
+                ))}
+            </MultiSelect>
+            : <Select
+                inputRef={ref}
+                size={"large"}
+                fullWidth={true}
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                padding={false}
+                value={validValue
+                    ? internalValue as string
+                    : ""}
+                onValueChange={onChange}
+                renderValue={renderValue}>
+                {users?.map((user) => (
+                    <SelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay
+                            user={user}/>
+                    </SelectItem>
+                ))}
+            </Select>
+
+    );
+}
+

package/src/components/common/default_entity_actions.tsx

@@ -1,95 +1,112 @@
-import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon, OpenInNewIcon } from "@firecms/ui";
+import { DeleteIcon, EditIcon, FileCopyIcon } from "@firecms/ui";
 import { EntityAction } from "../../types";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
+import { addRecentId } from "../EntityCollectionView/utils";
+import { navigateToEntity, resolveDefaultSelectedView } from "../../util";
 
 export const editEntityAction: EntityAction = {
-    icon: <KeyboardTabIcon/>,
+    icon: <EditIcon size={"small"}/>,
+    key: "edit",
     name: "Edit",
     collapsed: false,
+    isEnabled: ({ entity }) => Boolean(entity),
     onClick({
                 entity,
                 collection,
                 fullPath,
+                fullIdPath,
                 context,
                 highlightEntity,
                 unhighlightEntity,
+                openEntityMode
             }): Promise<void> {
+
+        if (!entity) {
+            throw new Error("INTERNAL: editEntityAction: Entity is undefined");
+        }
+
         highlightEntity?.(entity);
+
         context.analyticsController?.onAnalyticsEvent?.("entity_click", {
             path: entity.path,
             entityId: entity.id
         });
-        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path);
-        context.sideEntityController.open({
+
+        if (collection) {
+            addRecentId(collection.id, entity.id);
+        }
+
+        const path = collection?.collectionGroup ? entity.path : (fullPath ?? collection?.path ?? entity.path);
+        const newFullIdPath = collection?.collectionGroup ? collection.id : (fullIdPath ?? collection?.id ?? entity.path);
+        const defaultSelectedView = resolveDefaultSelectedView(
+            collection ? collection.defaultSelectedView : undefined,
+            {
+                status: "existing",
+                entityId: entity.id,
+            }
+        );
+        navigateToEntity({
+            openEntityMode,
+            collection,
             entityId: entity.id,
             path,
-            collection,
-            updateUrl: true,
+            fullIdPath: newFullIdPath,
+            sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
+            navigation: context.navigation,
+            selectedTab: defaultSelectedView
         });
+
         return Promise.resolve(undefined);
     }
 }
 
 export const copyEntityAction: EntityAction = {
-    icon: <FileCopyIcon/>,
+    icon: <FileCopyIcon size={"small"}/>,
     name: "Copy",
+    key: "copy",
+    isEnabled: ({ entity }) => Boolean(entity),
     onClick({
                 entity,
                 collection,
                 context,
+                fullPath,
                 highlightEntity,
                 unhighlightEntity,
+                openEntityMode
             }): Promise<void> {
+        if (!entity) {
+            throw new Error("INTERNAL: copyEntityAction: Entity is undefined");
+        }
         highlightEntity?.(entity);
         context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
             path: entity.path,
             entityId: entity.id
         });
-        context.sideEntityController.open({
+
+        const path = collection?.collectionGroup ? collection.path : (fullPath ?? collection?.path ?? entity.path);
+        const fullIdPath = collection?.collectionGroup ? collection.id : (fullPath ?? collection?.id ?? entity.path);
+        navigateToEntity({
+            openEntityMode,
+            collection,
             entityId: entity.id,
-            path: entity.path,
+            path,
+            fullIdPath,
             copy: true,
-            collection,
-            updateUrl: true,
+            sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
+            navigation: context.navigation
         });
-        return Promise.resolve(undefined);
-    }
-}
 
-export const archiveEntityAction: EntityAction = {
-    icon: <ArchiveIcon/>,
-    name: "Archive",
-    onClick({
-                entity,
-                collection,
-                context: {
-                    dataSource,
-                }
-            }): Promise<void> {
-        // Add your code here
-        return Promise.resolve(undefined);
-    }
-}
-
-export const openWebsiteAction: EntityAction = {
-    icon: <OpenInNewIcon/>,
-    name: "See in website",
-    onClick({
-                entity,
-                collection,
-                context,
-            }): Promise<void> {
-        // open a new tab
-        window.open(`https://example.com/${entity.id}`, "_blank");
         return Promise.resolve(undefined);
     }
 }
 
 export const deleteEntityAction: EntityAction = {
-    icon: <DeleteIcon/>,
+    icon: <DeleteIcon size={"small"}/>,
     name: "Delete",
+    key: "delete",
+    isEnabled: ({ entity }) => Boolean(entity),
     onClick({
                 entity,
                 fullPath,
@@ -97,8 +114,11 @@ export const deleteEntityAction: EntityAction = {
                 context,
                 selectionController,
                 onCollectionChange,
-                sideEntityController
+                navigateBack
             }): Promise<void> {
+        if (!entity) {
+            throw new Error("INTERNAL: deleteEntityAction: Entity is undefined");
+        }
         const { closeDialog } = context.dialogsController.open({
             key: "delete_entity_dialog_" + entity.id,
             Component: ({ open }) => {
@@ -116,7 +136,7 @@ export const deleteEntityAction: EntityAction = {
                         });
                         selectionController?.setSelectedEntities(selectionController.selectedEntities.filter(e => e.id !== entity.id));
                         onCollectionChange?.();
-                        sideEntityController?.close();
+                        navigateBack?.();
                     }}
                     onClose={closeDialog}/>;
             }

package/src/components/common/index.ts

@@ -1,6 +1,6 @@
 export * from "./types";
 export * from "./useDebouncedData";
 export * from "./useColumnsIds";
-export * from "./useDataSourceEntityCollectionTableController";
+export * from "./useDataSourceTableController";
 export * from "./useTableSearchHelper";
 export * from "./default_entity_actions";

package/src/components/common/useColumnsIds.tsx

@@ -3,19 +3,12 @@ import { EntityCollection, ResolvedEntityCollection, ResolvedProperty } from "..
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import { PropertyColumnConfig } from "../EntityCollectionTable/EntityCollectionTableProps";
 
-const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
+export const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
 export function useColumnIds<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
     return useMemo(() => {
         if (collection.propertiesOrder) {
-            const propertyColumnConfigs = hideAndExpandKeys(collection, collection.propertiesOrder);
-            if (collection.collectionGroup) {
-                propertyColumnConfigs.push({
-                    key: COLLECTION_GROUP_PARENT_ID,
-                    disabled: true
-                });
-            }
-            return propertyColumnConfigs;
+            return hideAndExpandKeys(collection, collection.propertiesOrder);
         }
         return getDefaultColumnKeys(collection, includeSubcollections);
     }, [collection, includeSubcollections]);