@firecms/core 3.0.0-beta.2-pre.2 → 3.0.0-beta.2-pre.4

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -16,14 +16,11 @@ import {
     SelectionController
 } from "../../types";
 import {
+    EntityCollectionRowActions,
     EntityCollectionTable,
-    OnCellValueChange,
-    OnColumnResizeParams,
-    UniqueFieldValidator
+    useDataSourceEntityCollectionTableController
 } from "../EntityCollectionTable";
 
-import { EntityCollectionRowActions } from "../EntityCollectionTable/EntityCollectionRowActions";
-
 import {
     canCreateEntity,
     canDeleteEntity,
@@ -40,16 +37,12 @@ import {
     useAuthController,
     useCustomizationController,
     useDataSource,
-    useFireCMSContext,
     useLargeLayout,
     useNavigationController,
     useSideEntityController
 } from "../../hooks";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
-import {
-    useDataSourceEntityCollectionTableController
-} from "../EntityCollectionTable/useDataSourceEntityCollectionTableController";
 import {
     AddIcon,
     Button,
@@ -64,9 +57,15 @@ import {
     Tooltip,
     Typography
 } from "@firecms/ui";
-import { setIn } from "formik";
+import { setIn } from "@firecms/formex";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
-import { useColumnIds } from "./useColumnsIds";
+import {
+    OnCellValueChange,
+    OnColumnResizeParams,
+    UniqueFieldValidator,
+    useColumnIds,
+    useTableSearchHelper
+} from "../common";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
 import {
@@ -130,7 +129,6 @@ export const EntityCollectionView = React.memo(
         const userConfigPersistence = useUserConfigurationPersistence();
         const analyticsController = useAnalyticsController();
         const customizationController = useCustomizationController();
-        const context = useFireCMSContext();
 
         const containerRef = React.useRef<HTMLDivElement>(null);
 
@@ -148,7 +146,6 @@ export const EntityCollectionView = React.memo(
         const [selectedNavigationEntity, setSelectedNavigationEntity] = useState<Entity<M> | undefined>(undefined);
         const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
 
-        const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
         const [lastDeleteTimestamp, setLastDeleteTimestamp] = React.useState<number>(0);
 
         // number of entities in the collection
@@ -569,34 +566,16 @@ export const EntityCollectionView = React.memo(
             }
             : undefined;
 
-        const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
-        let onTextSearchClick: (() => void) | undefined;
-        let textSearchEnabled = Boolean(collection.textSearchEnabled);
-        if (customizationController?.plugins) {
-            const addTextSearchClickListener = customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
-
-            onTextSearchClick = addTextSearchClickListener
-                ? () => {
-                    setTextSearchLoading(true);
-                    Promise.all(customizationController.plugins?.map(p => {
-                        if (p.collectionView?.onTextSearchClick)
-                            return p.collectionView.onTextSearchClick({ context, path: resolvedFullPath, collection, parentCollectionIds });
-                        return Promise.resolve(true);
-                    }) as Promise<boolean>[])
-                        .then((res) => {
-                            if (res.every(Boolean)) setTextSearchInitialised(true);
-                        })
-                        .finally(() => setTextSearchLoading(false));
-                }
-                : undefined;
-
-            customizationController.plugins?.forEach(p => {
-                if (!textSearchEnabled)
-                    if (p.collectionView?.showTextSearchBar) {
-                        textSearchEnabled = p.collectionView.showTextSearchBar({ context, path: resolvedFullPath, collection, parentCollectionIds });
-                    }
-            })
-        }
+        const {
+            textSearchLoading,
+            textSearchInitialised,
+            onTextSearchClick,
+            textSearchEnabled
+        } = useTableSearchHelper({
+            collection,
+            fullPath: resolvedFullPath,
+            parentCollectionIds
+        });
 
         return (
             <div className={cn("overflow-hidden h-full w-full", className)}

package/src/components/{ReferenceSelectionInner.tsx → ReferenceTable/ReferenceSelectionTable.tsx}

@@ -1,8 +1,11 @@
 import React, { MouseEventHandler, useCallback, useEffect, useMemo, useState } from "react";
-import { CollectionSize, Entity, EntityCollection, FilterValues } from "../types";
+import { CollectionSize, Entity, EntityCollection, FilterValues } from "../../types";
 
-import { EntityCollectionTable } from "./EntityCollectionTable";
-import { EntityCollectionRowActions } from "./EntityCollectionTable/EntityCollectionRowActions";
+import {
+    EntityCollectionRowActions,
+    EntityCollectionTable,
+    useDataSourceEntityCollectionTableController
+} from "../EntityCollectionTable";
 import {
     useAuthController,
     useCustomizationController,
@@ -10,17 +13,14 @@ import {
     useLargeLayout,
     useNavigationController,
     useSideEntityController
-} from "../hooks";
-import { ErrorView } from "./ErrorView";
+} from "../../hooks";
+import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
-import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../util";
-import { useSelectionController } from "./EntityCollectionView/EntityCollectionView";
-import {
-    useDataSourceEntityCollectionTableController
-} from "./EntityCollectionTable/useDataSourceEntityCollectionTableController";
-import { useColumnIds } from "./EntityCollectionView/useColumnsIds";
-import { useSideDialogContext } from "../core";
-import { useAnalyticsController } from "../hooks/useAnalyticsController";
+import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
+import { useSelectionController } from "../EntityCollectionView/EntityCollectionView";
+import { useColumnIds, useTableSearchHelper } from "../common";
+import { useSideDialogContext } from "../../core";
+import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 
 /**
  * @group Components
@@ -88,7 +88,7 @@ export interface ReferenceSelectionInnerProps<M extends Record<string, any>> {
  * You probably want to open this dialog as a side view using {@link useReferenceDialog}
  * @group Components
  */
-export function ReferenceSelectionInner<M extends Record<string, any>>(
+export function ReferenceSelectionTable<M extends Record<string, any>>(
     {
         onSingleEntitySelected,
         onMultipleEntitiesSelected,
@@ -98,7 +98,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
         selectedEntityIds: selectedEntityIdsProp,
         description,
         forceFilter,
-        maxSelection
+        maxSelection,
     }: ReferenceSelectionInnerProps<M>) {
 
     const sideDialogContext = useSideDialogContext();
@@ -266,6 +266,19 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
         forceFilter
     });
 
+
+    const {
+        textSearchLoading,
+        textSearchInitialised,
+        onTextSearchClick,
+        textSearchEnabled
+    } =
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useTableSearchHelper({
+            collection,
+            fullPath,
+        });
+
     return (
 
         <div className="flex flex-col h-full">
@@ -273,6 +286,9 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
             <div className="flex-grow">
                 {entitiesDisplayedFirst &&
                     <EntityCollectionTable
+                        textSearchLoading={textSearchLoading}
+                        onTextSearchClick={textSearchInitialised ? undefined : onTextSearchClick}
+                        textSearchEnabled={textSearchEnabled}
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         tableController={tableController}

package/src/components/{EntityCollectionTable/SimpleTable.tsx → SelectableTable/SelectableTable.tsx}

@@ -10,17 +10,16 @@ import {
 } from "../../types";
 import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
 import { enumToObjectEntries } from "../../util";
-import { OnCellValueChange } from "./types";
-import { OnColumnResizeParams } from "./EntityCollectionTableProps";
+import { OnCellValueChange, OnColumnResizeParams } from "../common/types";
 import { FilterFormFieldProps } from "../VirtualTable/VirtualTableHeader";
 import { ReferenceFilterField } from "./filters/ReferenceFilterField";
 import { StringNumberFilterField } from "./filters/StringNumberFilterField";
 import { BooleanFilterField } from "./filters/BooleanFilterField";
 import { DateTimeFilterField } from "./filters/DateTimeFilterField";
-import { EntityCollectionTableContext } from "./EntityCollectionTable";
 import { useOutsideAlerter } from "@firecms/ui";
+import { SelectableTableContext } from "./SelectableTableContext";
 
-export type SimpleTableProps<M extends Record<string, any>> = {
+export type SelectableTableProps<M extends Record<string, any>> = {
 
     /**
      * Callback when a cell value changes.
@@ -108,8 +107,8 @@ export type SimpleTableProps<M extends Record<string, any>> = {
  * @see VirtualTable
  * @group Components
  */
-export const SimpleTable = React.memo<SimpleTableProps<any>>(
-    function SimpleTable<M extends Record<string, any>>
+export const SelectableTable = React.memo<SelectableTableProps<any>>(
+    function SelectableTable<M extends Record<string, any>>
     ({
          onValueChange,
          cellRenderer,
@@ -143,7 +142,7 @@ export const SimpleTable = React.memo<SimpleTableProps<any>>(
          highlightedRow,
          endAdornment,
          AddColumnComponent
-     }: SimpleTableProps<M>) {
+     }: SelectableTableProps<M>) {
 
         const ref = useRef<HTMLDivElement>(null);
         const [size, setSize] = React.useState<CollectionSize>("m");
@@ -203,7 +202,7 @@ export const SimpleTable = React.memo<SimpleTableProps<any>>(
         }, [forceFilter]);
 
         return (
-            <EntityCollectionTableContext.Provider
+            <SelectableTableContext.Provider
                 value={{
                     setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
                     select,
@@ -244,7 +243,7 @@ export const SimpleTable = React.memo<SimpleTableProps<any>>(
                     />
 
                 </div>
-            </EntityCollectionTableContext.Provider>
+            </SelectableTableContext.Provider>
         );
 
     },

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -0,0 +1,6 @@
+import React, { useContext } from "react";
+import { EntityCollectionTableController } from "../common/types";
+
+export const SelectableTableContext = React.createContext<EntityCollectionTableController<any>>({} as any);
+
+export const useSelectableTableController = () => useContext<EntityCollectionTableController<any>>(SelectableTableContext);

package/src/components/{EntityCollectionTable → SelectableTable}/filters/StringNumberFilterField.tsx

@@ -112,7 +112,6 @@ export function StringNumberFilterField({
                         updateFilter(operation, val);
                     }}
                     endAdornment={internalValue && <IconButton
-                        className="absolute right-3 top-2"
                         onClick={(e) => updateFilter(operation, undefined)}>
                         <ClearIcon/>
                     </IconButton>}

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -198,7 +198,7 @@ function FilterForm<M>({
                            onHover,
                            createFilterField,
                            hidden,
-                           setHidden,
+                           setHidden
                        }: FilterFormProps<M>) {
 
     const id = column.key;
@@ -232,7 +232,13 @@ function FilterForm<M>({
 
     if (!filterField) return null;
     return (
-        <div className={"text-gray-900 dark:text-white"}>
+        <form noValidate={true}
+              onSubmit={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  submit();
+              }}
+              className={"text-gray-900 dark:text-white"}>
             <div
                 className={cn(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
                 {column.title ?? id}
@@ -252,9 +258,9 @@ function FilterForm<M>({
                 <Button
                     variant="outlined"
                     color="primary"
-                    onClick={submit}>Filter</Button>
+                    type="submit">Filter</Button>
             </div>
-        </div>
+        </form>
     );
 
 }

package/src/components/common/index.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./useDebouncedData";
+export * from "./useColumnsIds";
+export * from "./useDataSourceEntityCollectionTableController";
+export * from "./useTableSearchHelper";

package/src/components/{EntityCollectionTable → common}/types.tsx

@@ -56,3 +56,8 @@ export type UniqueFieldValidator = (props: {
  * @group Collection components
  */
 export type OnCellValueChange<T, M extends Record<string, any>> = (params: OnCellValueChangeParams<T, M>) => Promise<void> | void;
+
+/**
+ * @group Collection components
+ */
+export type OnColumnResizeParams = { width: number, key: string };

package/src/components/common/useTableSearchHelper.ts

@@ -0,0 +1,47 @@
+import { useState } from "react";
+
+import { EntityCollection } from "../../types";
+import { useCustomizationController, useFireCMSContext } from "../../hooks";
+
+export interface UseTableSearchHelperParams<M extends Record<string, any>> {
+    collection: EntityCollection<M>;
+    fullPath: string;
+    parentCollectionIds?: string[];
+}
+
+export function useTableSearchHelper<M extends Record<string, any>>({ collection, fullPath, parentCollectionIds }: UseTableSearchHelperParams<M>) {
+
+    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
+    const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
+    const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+    let onTextSearchClick: (() => void) | undefined;
+    let textSearchEnabled = Boolean(collection.textSearchEnabled);
+    if (customizationController?.plugins) {
+        const addTextSearchClickListener = customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+
+        onTextSearchClick = addTextSearchClickListener
+            ? () => {
+                setTextSearchLoading(true);
+                Promise.all(customizationController.plugins?.map(p => {
+                    if (p.collectionView?.onTextSearchClick)
+                        return p.collectionView.onTextSearchClick({ context, path: fullPath, collection, parentCollectionIds });
+                    return Promise.resolve(true);
+                }) as Promise<boolean>[])
+                    .then((res) => {
+                        if (res.every(Boolean)) setTextSearchInitialised(true);
+                    })
+                    .finally(() => setTextSearchLoading(false));
+            }
+            : undefined;
+
+        customizationController.plugins?.forEach(p => {
+            if (!textSearchEnabled)
+                if (p.collectionView?.showTextSearchBar) {
+                    textSearchEnabled = p.collectionView.showTextSearchBar({ context, path: fullPath, collection, parentCollectionIds });
+                }
+        })
+    }
+    return { textSearchLoading, textSearchInitialised, onTextSearchClick, textSearchEnabled };
+}

package/src/components/index.tsx

@@ -4,13 +4,17 @@ export { ErrorView } from "./ErrorView";
 export type { EntityPreviewProps } from "./EntityPreview";
 export { EntityPreview } from "./EntityPreview";
 
-export type { ReferenceSelectionInnerProps } from "./ReferenceSelectionInner";
-export { ReferenceSelectionInner } from "./ReferenceSelectionInner";
+export type { ReferenceSelectionInnerProps } from "./ReferenceTable/ReferenceSelectionTable";
+export { ReferenceSelectionTable } from "./ReferenceTable/ReferenceSelectionTable";
 
 export { CircularProgressCenter } from "./CircularProgressCenter";
 
+export * from "./common";
+
 export * from "./HomePage";
+export * from "./SelectableTable/SelectableTable";
 export * from "./EntityCollectionView/EntityCollectionView";
+export * from "./EntityCollectionView/EntityCollectionViewActions";
 
 export * from "./PropertyConfigBadge";
 

package/src/core/EntitySidePanel.tsx

@@ -33,13 +33,15 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         if (!props) return undefined;
         let usedCollection = props.collection;
 
+        const registryCollection = navigationController.getCollection(props.path, props.entityId);
+        if (registryCollection) {
+            usedCollection = registryCollection;
+        }
         if (!usedCollection) {
-            usedCollection = navigationController.getCollection(props.path, props.entityId);
-            if (!usedCollection) {
-                console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
-                throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
-            }
+            console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
+            throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
         }
+
         return usedCollection;
     }, [navigationController, props]);
 

package/src/core/FireCMS.tsx

@@ -15,7 +15,6 @@ import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerC
 import { useLocaleConfig } from "../internal/useLocaleConfig";
 import { CenteredView } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
-import { useBuildNavigationController } from "../internal/useBuildNavigationController";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
@@ -50,25 +49,11 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         propertyConfigs,
         entityViews,
         components,
-        baseCollectionPath,
-        basePath,
-        collections,
-        views
+        navigationController,
     } = props;
 
     useLocaleConfig(locale);
 
-    const navigationController = useBuildNavigationController({
-        basePath,
-        baseCollectionPath,
-        authController,
-        collections,
-        views,
-        userConfigPersistence,
-        dataSource: dataSourceDelegate,
-        plugins
-    });
-
     /**
      * Controller in charge of fetching and persisting data
      */