@firecms/core 3.0.0-alpha.72 → 3.0.0-alpha.74

package/src/components/EntityCollectionTable/column_utils.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/common";
+import { FilterValues, ResolvedProperties, ResolvedProperty } from "../../types";
+import { VirtualTableColumn } from "../VirtualTable";
+import { getIconForProperty, getResolvedPropertyInPath } from "../../util";
+import { getColumnKeysForProperty } from "../EntityCollectionView/useColumnsIds";
+
+export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
+    return {
+        key: "id_ewcfedcswdf3",
+        width: (largeLayout ? 160 : 130),
+        title: "ID",
+        resizable: false,
+        frozen: largeLayout ?? false,
+        headerAlign: "center",
+        align: "center",
+    };
+}
+
+export interface PropertiesToColumnsParams<M extends Record<string, any>> {
+    properties: ResolvedProperties<M>;
+    sortable?: boolean;
+    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+    disabledFilter?: boolean;
+    AdditionalHeaderWidget?: (props: {
+        property: ResolvedProperty,
+        propertyKey: string,
+        onHover: boolean,
+    }) => React.ReactNode;
+}
+
+export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forceFilter, disabledFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
+    return Object.entries<ResolvedProperty>(properties)
+        .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
+        .map(({
+                  key,
+                  disabled
+              }) => {
+            const property = getResolvedPropertyInPath(properties, key);
+            if (!property)
+                throw Error("Internal error: no property found in path " + key);
+            const filterable = filterableProperty(property);
+            return {
+                key: key as string,
+                align: getTableCellAlignment(property),
+                icon: (hoverOrOpen) => getIconForProperty(property, "small"),
+                title: property.name ?? key as string,
+                sortable: sortable && (forceFilter ? Object.keys(forceFilter).includes(key) : true),
+                filter: !disabledFilter && filterable,
+                width: getTablePropertyColumnWidth(property),
+                resizable: true,
+                custom: {
+                    resolvedProperty: property,
+                    disabled
+                },
+                AdditionalHeaderWidget: AdditionalHeaderWidget
+                    ? ({ onHover }) => <AdditionalHeaderWidget property={property} propertyKey={key} onHover={onHover}/>
+                    : undefined
+            } satisfies VirtualTableColumn;
+        });
+}
+
+function filterableProperty(property: ResolvedProperty, partOfArray = false): boolean {
+    if (partOfArray) {
+        return ["string", "number", "date", "reference"].includes(property.dataType);
+    }
+    if (property.dataType === "array") {
+        if (property.of)
+            return filterableProperty(property.of, true);
+        else
+            return false;
+    }
+    return ["string", "number", "boolean", "date", "reference", "array"].includes(property.dataType);
+}

package/src/components/EntityCollectionTable/index.tsx

@@ -13,4 +13,8 @@ export type {
     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

@@ -17,7 +17,7 @@ interface CollectionTableToolbarProps {
     size: CollectionSize;
     filterIsSet: boolean;
     loading: boolean;
-    forceFilter: boolean;
+    forceFilter?: boolean;
     actionsStart?: React.ReactNode;
     actions?: React.ReactNode;
     title?: React.ReactNode,
@@ -71,9 +71,9 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
 
     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")}>
+            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">
+            <div className="flex items-center gap-2 md:mr-4 mr-2">
 
                 {props.title && <div className={"hidden lg:block"}>
                     {props.title}

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

@@ -4,8 +4,7 @@ import useMeasure from "react-use-measure";
 
 import { VirtualTableSize } from "../../VirtualTable";
 import { getRowHeight } from "../../VirtualTable/common";
-import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
-import { useOutsideAlerter } from "@firecms/ui";
+import { useOutsideAlerter, cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
 
 interface EntityTableCellProps {

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

@@ -1,6 +1,6 @@
 import { EntityAction } from "../../../types";
-import { DeleteEntityDialog } from "./DeleteEntityDialog";
 import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon, OpenInNewIcon } from "@firecms/ui";
+import { DeleteEntityDialog } from "../../DeleteEntityDialog";
 
 export const editEntityAction: EntityAction = {
     icon: <KeyboardTabIcon/>,

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -40,7 +40,7 @@ interface PopupFormFieldProps<M extends Record<string, any>> {
      * Callback when the value of a cell has been edited
      * @param params
      */
-    onCellValueChange?: (params: OnCellValueChangeParams<any, M>) => Promise<void>;
+    onCellValueChange?: (params: OnCellValueChangeParams<any, M>) => Promise<void> | void;
 }
 
 export function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>) {
@@ -63,7 +63,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                                                                           container
                                                                       }: PopupFormFieldProps<M>) {
 
-    const dataSource = useDataSource();
+    // const dataSource = useDataSource();
     const fireCMSContext = useFireCMSContext();
 
     const [savingError, setSavingError] = React.useState<any>();
@@ -74,22 +74,22 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     const entityId = entityProp?.id;
     const [entity, setEntity] = useState<Entity<M> | undefined>(entityProp);
-    useEffect(() => {
-        if (entityId && inputCollection) {
-            return dataSource.listenEntity?.({
-                path,
-                entityId,
-                collection: inputCollection,
-                onUpdate: (e) => {
-                    setEntity(e);
-                    setInternalValue(e?.values);
-                }
-            });
-        } else {
-            return () => {
-            };
-        }
-    }, [dataSource, entityId, inputCollection, path, open]);
+    // useEffect(() => {
+    //     if (entityId && inputCollection) {
+    //         return dataSource.listenEntity?.({
+    //             path,
+    //             entityId,
+    //             collection: inputCollection,
+    //             onUpdate: (e) => {
+    //                 setEntity(e);
+    //                 setInternalValue(e?.values);
+    //             }
+    //         });
+    //     } else {
+    //         return () => {
+    //         };
+    //     }
+    // }, [dataSource, entityId, inputCollection, path, open]);
 
     const [internalValue, setInternalValue] = useState<EntityValues<M> | undefined>(entity?.values);
 

package/src/components/EntityCollectionTable/types.tsx

@@ -31,7 +31,7 @@ export type EntityCollectionTableController<M extends Record<string, any>> = {
  * Props passed in a callback when the content of a cell in a table has been edited
  * @group Collection components
  */
-export interface OnCellValueChangeParams<T, M extends Record<string, any>> {
+export interface OnCellValueChangeParams<T = any, M extends Record<string, any> = any> {
     value: T,
     propertyKey: string,
     entity: Entity<M>,
@@ -55,4 +55,4 @@ export type UniqueFieldValidator = (props: {
  * Callback when a cell has changed in a table
  * @group Collection components
  */
-export type OnCellValueChange<T, M extends Record<string, any>> = (params: OnCellValueChangeParams<T, M>) => Promise<void>;
+export type OnCellValueChange<T, M extends Record<string, any>> = (params: OnCellValueChangeParams<T, M>) => Promise<void> | void;

package/src/components/EntityCollectionTable/useDataSourceEntityCollectionTableController.tsx

@@ -8,7 +8,7 @@ import {
     FilterValues,
     FireCMSContext,
     SelectedCellProps,
-    TableController,
+    EntityTableController,
     User
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
@@ -38,7 +38,7 @@ export type DataSourceEntityCollectionTableControllerProps<M extends Record<stri
  * Use this hook to build a controller for the {@link EntityCollectionTable}.
  * This controller is bound to data in a path in your specified datasource.
  *
- * Note that you can build your own hook returning a {@link TableController}
+ * Note that you can build your own hook returning a {@link EntityTableController}
  * if you would like to display different data.
  *
  * @param fullPath
@@ -55,7 +55,7 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
         lastDeleteTimestamp,
         forceFilter: forceFilterFromProps,
     }: DataSourceEntityCollectionTableControllerProps<M>)
-    : TableController<M> {
+    : EntityTableController<M> {
 
     const {
         initialFilter,

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -22,8 +22,7 @@ import {
     UniqueFieldValidator
 } from "../EntityCollectionTable";
 
-import { EntityCollectionRowActions } from "../EntityCollectionTable/internal/EntityCollectionRowActions";
-import { DeleteEntityDialog } from "../EntityCollectionTable/internal/DeleteEntityDialog";
+import { EntityCollectionRowActions } from "../EntityCollectionTable/EntityCollectionRowActions";
 
 import {
     canCreateEntity,
@@ -72,6 +71,7 @@ import {
     deleteEntityAction,
     editEntityAction
 } from "../EntityCollectionTable/internal/default_entity_actions";
+import { DeleteEntityDialog } from "../DeleteEntityDialog";
 
 const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
@@ -570,7 +570,7 @@ export const EntityCollectionView = React.memo(
                     setTextSearchLoading(true);
                     Promise.all(context.plugins?.map(p => {
                         if (p.collectionView?.onTextSearchClick)
-                            return p.collectionView.onTextSearchClick({ context, path: resolvedFullPath, collection });
+                            return p.collectionView.onTextSearchClick({ context, path: resolvedFullPath, collection, parentCollectionIds });
                         return Promise.resolve(true);
                     }) as Promise<boolean>[])
                         .then((res) => {
@@ -583,7 +583,7 @@ export const EntityCollectionView = React.memo(
             context.plugins?.forEach(p => {
                 if (!textSearchEnabled)
                     if (p.collectionView?.showTextSearchBar) {
-                        textSearchEnabled = p.collectionView.showTextSearchBar({ context, path: resolvedFullPath, collection });
+                        textSearchEnabled = p.collectionView.showTextSearchBar({ context, path: resolvedFullPath, collection, parentCollectionIds });
                     }
             })
         }

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { canCreateEntity, canDeleteEntity, fullPathToCollectionSegments } from "../../util";
 import { useAuthController, useFireCMSContext, useLargeLayout } from "../../hooks";
-import { CollectionActionsProps, EntityCollection, SelectionController, TableController } from "../../types";
+import { CollectionActionsProps, EntityCollection, SelectionController, EntityTableController } from "../../types";
 import { AddIcon, Button, DeleteIcon, IconButton, Tooltip } from "@firecms/ui";
 import { toArray } from "../../util/arrays";
 import { ErrorBoundary } from "../ErrorBoundary";
@@ -16,7 +16,7 @@ export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
     onNewClick: () => void;
     onMultipleDeleteClick: () => void;
     selectionController: SelectionController<M>;
-    tableController: TableController<M>;
+    tableController: EntityTableController<M>;
     collectionEntitiesCount: number;
 }
 

package/src/components/ReferenceSelectionInner.tsx

@@ -2,7 +2,7 @@ import React, { MouseEventHandler, useCallback, useEffect, useMemo, useState } f
 import { CollectionSize, Entity, EntityCollection, FilterValues } from "../types";
 
 import { EntityCollectionTable } from "./EntityCollectionTable";
-import { EntityCollectionRowActions } from "./EntityCollectionTable/internal/EntityCollectionRowActions";
+import { EntityCollectionRowActions } from "./EntityCollectionTable/EntityCollectionRowActions";
 import {
     useAuthController,
     useDataSource,

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -12,23 +12,19 @@ type VirtualTableCellProps<T extends any> = {
     cellData: any;
     rowIndex: any;
     columnIndex: number;
-    cellRenderer: (params: CellRendererParams<T>) => React.ReactNode;
+    cellRenderer: React.ComponentType<CellRendererParams<T>>;
 };
 
 export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
     function VirtualTableCell<T extends any>(props: VirtualTableCellProps<T>) {
-        return props.rowData && props.cellRenderer(
-            {
-                cellData: props.cellData,
-                rowData: props.rowData,
-                rowIndex: props.rowIndex,
-                isScrolling: false,
-                column: props.column,
-                columns: props.columns,
-                columnIndex: props.columnIndex,
-                width: props.column.width
-            } as CellRendererParams<T>
-        );
+        return props.rowData && <props.cellRenderer
+            rowData={props.rowData}
+            rowIndex={props.rowIndex}
+            isScrolling={false}
+            column={props.column}
+            columns={props.columns}
+            columnIndex={props.columnIndex}
+            width={props.column.width}/>
     },
     (a, b) => {
         return equal(a, b);

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { WhereFilterOp } from "../../types";
+import { ResolvedProperty, WhereFilterOp } from "../../types";
 import { FilterFormFieldProps } from "./VirtualTableHeader";
 
 export type OnRowClickParams<T extends Record<string, any>> = {
@@ -29,7 +29,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      * Custom cell renderer
      * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }`
      */
-    cellRenderer: (params: CellRendererParams<T>) => React.ReactNode;
+    cellRenderer: React.ComponentType<CellRendererParams<T>>;
 
     /**
      * If enabled, content is loaded in batch
@@ -144,8 +144,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
 
 }
 
-export type CellRendererParams<T extends any> = {
-    cellData?: any;
+export type CellRendererParams<T extends any = any> = {
     column: VirtualTableColumn;
     columns: VirtualTableColumn[];
     columnIndex: number;

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -19,7 +19,6 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                                 }: VirtualTableRowProps<T>) {
 
         const onClick = useCallback((event: React.SyntheticEvent) => {
-            console.debug("VirtualTableRow click");
             if (onRowClick)
                 onRowClick({
                     rowData,

package/src/components/VirtualTable/types.tsx

@@ -26,7 +26,7 @@ export type VirtualTableContextProps<T extends any> = {
     data?: T[];
     size?: VirtualTableSize,
     columns: VirtualTableColumn[];
-    cellRenderer: (params: CellRendererParams<T>) => React.ReactNode;
+    cellRenderer: React.ComponentType<CellRendererParams<T>>;
     currentSort: "asc" | "desc" | undefined;
     filter?: VirtualTableFilterValues<any>;
     onRowClick?: (props: OnRowClickParams<any>) => void;

package/src/core/EntitySidePanel.tsx

@@ -74,7 +74,6 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     return (
         <>
-
             <ErrorBoundary>
                 <EntityView
                     {...props}

package/src/core/FireCMS.tsx

@@ -95,7 +95,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     if (navigationController.navigationLoadingError) {
         return (
-            <CenteredView maxWidth={"md"} fullScreen={true}>
+            <CenteredView maxWidth={"md"}>
                 <ErrorView
                     title={"Error loading navigation"}
                     error={navigationController.navigationLoadingError}/>
@@ -105,7 +105,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     if (authController.authError) {
         return (
-            <CenteredView maxWidth={"md"} fullScreen={true}>
+            <CenteredView maxWidth={"md"}>
                 <ErrorView
                     title={"Error loading auth"}
                     error={authController.authError}/>

package/src/form/EntityForm.tsx

@@ -28,7 +28,7 @@ import {
 import { useAuthController, useDataSource, useFireCMSContext, useSideEntityController } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { Button, cn, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { Alert, Button, cn, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../components";
 import {
     copyEntityAction,
@@ -400,25 +400,24 @@ function EntityFormInternal<M extends Record<string, any>>({
                     )).filter(Boolean));
                 }
 
-                return <div
-                    className="h-full overflow-auto"
-                >
+                return <div className="h-full overflow-auto">
 
                     {pluginActions.length > 0 && <div
                         className={cn("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
                         {pluginActions}
                     </div>}
 
-                    <div
-                        className="pl-4 pr-4 pt-12 pb-16 md:pl-8"
-                    >
+                    <div className="pl-4 pr-4 pt-12 pb-16 md:pl-8">
                         <div
-                            className={`w-full py-2 flex items-center mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
+                            className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
 
                             <Typography
                                 className={"mt-4 flex-grow " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
                                 variant={"h4"}>{inputCollection.singularName ?? inputCollection.name}
                             </Typography>
+                            <Alert color={"base"} className={"w-full"} size={"small"}>
+                                <code className={"text-xs select-all"}>{path}/{entityId}</code>
+                            </Alert>
                         </div>
 
                         {!hideId &&

package/src/form/PropertyFieldBinding.tsx

@@ -197,12 +197,14 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
     const error = getIn(fieldProps.form.errors, propertyKey);
     const touched = getIn(fieldProps.form.touched, propertyKey);
 
+    console.log("error", propertyKey, error);
+
     const showError: boolean = error &&
         (fieldProps.form.submitCount > 0 || property.validation?.unique) &&
         (!Array.isArray(error) || !!error.filter((e: any) => !!e).length);
 
     const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent(context.path, context.collection, propertyKey, property, Component, plugins);
-    const UsedComponent: ComponentType<FieldProps<T>> = Component;
+    const UsedComponent: ComponentType<FieldProps<T>> = WrappedComponent ?? Component;
 
     const isSubmitting = fieldProps.form.isSubmitting;
 

package/src/form/components/FieldHelperText.tsx

@@ -12,7 +12,7 @@ export function FieldHelperText({
                                     includeDescription = true,
                                     disabled
                                 }: {
-                                    error: string,
+                                    error?: string,
                                     showError: boolean,
                                     property: ResolvedProperty,
                                     includeDescription?: boolean,
@@ -27,7 +27,7 @@ export function FieldHelperText({
 
     if (showError && error) {
         return <Typography variant={"caption"}
-                           className={"ml-3.5 text-red-500"}>
+                           className={"ml-3.5 text-red-500 dark:text-red-500"}>
             {error}
         </Typography>
     }

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -48,10 +48,11 @@ export function DateTimeFieldBinding({
                 mode={property.mode}
                 clearable={property.clearable}
                 locale={locale}
+                error={showError}
                 label={<LabelWithIcon
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
-                    className={"text-text-secondary dark:text-text-secondary-dark"}
+                    className={showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
                     title={property.name}/>}
             />
 

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -51,12 +51,6 @@ export function MapFieldBinding<T extends Record<string, any>>({
         mapProperties = property.properties;
     }
 
-    // useClearRestoreValue({
-    //     property,
-    //     value,
-    //     setValue
-    // });
-
     const mapFormView = <>
         <div className="py-1 flex flex-col space-y-2">
             {Object.entries(mapProperties)
@@ -99,14 +93,14 @@ export function MapFieldBinding<T extends Record<string, any>>({
         <>
 
             {!tableMode && !partOfBlock && <ExpandablePanel initiallyExpanded={expanded}
-                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
-                                            title={title}>{mapFormView}</ExpandablePanel>}
+                                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                            title={title}>{mapFormView}</ExpandablePanel>}
 
             {(tableMode || partOfBlock) && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
-                             error={error}
+                             error={error ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
                              disabled={disabled}
                              property={property}/>