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

package/dist/types/collections.d.ts

@@ -276,7 +276,7 @@ export interface CollectionActionsProps<M extends Record<string, any> = any, Use
      * Use this controller to get the table controller and to update the
      * table controller state.
      */
-    tableController: TableController<M>;
+    tableController: EntityTableController<M>;
     /**
      * Context of the app status
      */
@@ -421,7 +421,7 @@ export type DefaultSelectedViewParams = {
 /**
  * You can use this controller to control the table view of a collection.
  */
-export type TableController<M extends Record<string, any> = any> = {
+export type EntityTableController<M extends Record<string, any> = any> = {
     data: Entity<M>[];
     dataLoading: boolean;
     noMoreToLoad: boolean;

package/dist/types/plugins.d.ts

@@ -101,11 +101,13 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             context: FireCMSContext;
             path: string;
             collection: EC;
+            parentCollectionIds?: string[];
         }) => boolean;
         onTextSearchClick?: (props: {
             context: FireCMSContext;
             path: string;
             collection: EC;
+            parentCollectionIds?: string[];
         }) => Promise<boolean>;
         /**
          * Use this method to inject widgets to the entity collections header

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-alpha.72",
+  "version": "3.0.0-alpha.74",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -38,7 +38,7 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/ui": "^3.0.0-alpha.72",
+    "@firecms/ui": "^3.0.0-alpha.74",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
@@ -107,7 +107,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e",
+  "gitHead": "52ebcaf1e5c019f0f5e03cc63a3ea7663c356d23",
   "publishConfig": {
     "access": "public"
   }

package/src/components/{EntityCollectionTable/internal/DeleteEntityDialog.tsx → DeleteEntityDialog.tsx}

@@ -1,9 +1,9 @@
-import { Entity, EntityCallbacks, EntityCollection } from "../../../types";
+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";
+import { deleteEntityWithCallbacks, useDataSource, useFireCMSContext, useSnackbarController } from "../hooks";
+import { resolveCollection } from "../util";
+import { EntityPreview } from "./EntityPreview";
 
 export interface DeleteEntityDialogProps<M extends Record<string, any>> {
     entityOrEntitiesToDelete?: Entity<M> | Entity<M>[],

package/src/components/EntityCollectionTable/{internal/EntityCollectionRowActions.tsx → EntityCollectionRowActions.tsx}

@@ -1,9 +1,9 @@
 import React, { MouseEvent, useCallback } from "react";
 import equal from "react-fast-compare"
 
-import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../../types";
+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";
+import { useFireCMSContext, useLargeLayout } from "../../hooks";
 
 /**
  *
@@ -45,7 +45,7 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
                                                                                                  width: number,
                                                                                                  frozen?: boolean,
                                                                                                  size: CollectionSize,
-                                                                                                 isSelected: boolean,
+                                                                                                 isSelected?: boolean,
                                                                                                  selectionEnabled?: boolean,
                                                                                                  actions?: EntityAction[],
                                                                                                  hideId?: boolean,
@@ -145,7 +145,7 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
                         <Tooltip title={`Select ${entity.id}`}>
                             <Checkbox
                                 size={largeLayout ? "medium" : "small"}
-                                checked={isSelected}
+                                checked={Boolean(isSelected)}
                                 onCheckedChange={onCheckedChange}
                             />
                         </Tooltip>}

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useContext, useEffect, useMemo } from "react";
 import equal from "react-fast-compare";
-import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/common";
 import {
     AdditionalFieldDelegate,
     CollectionSize,
@@ -11,13 +10,13 @@ import {
     SelectedCellProps,
     User
 } from "../../types";
-import { PropertyTableCell } from "./internal/PropertyTableCell";
+import { PropertyTableCell } from "./PropertyTableCell";
 import { ErrorBoundary } from "../ErrorBoundary";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
-import { enumToObjectEntries, getIconForProperty, getResolvedPropertyInPath, getValueInPath } from "../../util";
+import { enumToObjectEntries, getValueInPath } from "../../util";
 import { getRowHeight } from "../VirtualTable/common";
-import { EntityCollectionRowActions } from "./internal/EntityCollectionRowActions";
+import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
 import { EntityCollectionTableController } from "./types";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
 import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
@@ -27,9 +26,9 @@ import { ReferenceFilterField } from "./filters/ReferenceFilterField";
 import { StringNumberFilterField } from "./filters/StringNumberFilterField";
 import { BooleanFilterField } from "./filters/BooleanFilterField";
 import { DateTimeFilterField } from "./filters/DateTimeFilterField";
-import { getColumnKeysForProperty } from "../EntityCollectionView/useColumnsIds";
 import { CustomFieldValidator } from "../../form/validation";
 import { renderSkeletonText } from "../../preview";
+import { propertiesToColumns } from "./column_utils";
 
 const DEFAULT_STATE = {} as any;
 
@@ -52,7 +51,7 @@ export const useEntityCollectionTableController = () => useContext<EntityCollect
  * options you see in collections in the top level navigation, you can
  * check {@link EntityCollectionView}.
  *
- * The data displayed in the table is managed by a {@link TableController}.
+ * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the datasource, by using the hook
  * {@link useDataSourceEntityCollectionTableController}
  *
@@ -283,34 +282,13 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
         }, [additionalFieldsMap, size, selectedEntityIds]);
 
         const collectionColumns: VirtualTableColumn[] = useMemo(() => {
-                const columnsResult: VirtualTableColumn[] = 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: !disabledFilterChange && filterable,
-                            width: getTablePropertyColumnWidth(property),
-                            resizable: true,
-                            custom: {
-                                resolvedProperty: property,
-                                disabled
-                            },
-                            AdditionalHeaderWidget: ({ onHover }) => AdditionalHeaderWidget
-                                ? <AdditionalHeaderWidget property={property} propertyKey={key} onHover={onHover}/>
-                                : undefined
-                        };
-                    });
+                const columnsResult: VirtualTableColumn[] = propertiesToColumns({
+                    properties,
+                    sortable,
+                    forceFilter,
+                    disabledFilter: disabledFilterChange,
+                    AdditionalHeaderWidget
+                });
 
                 const additionalTableColumns: VirtualTableColumn[] = additionalFields
                     ? additionalFields.map((additionalField) =>
@@ -384,7 +362,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                     select,
                     onValueChange,
                     size,
-                    selectedCell,
+                    selectedCell
                 }}
             >
 
@@ -504,16 +482,3 @@ function createFilterField({
         <div>{`Currently the filter field ${resolvedProperty.dataType} is not supported`}</div>
     );
 }
-
-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/EntityCollectionTableProps.tsx

@@ -7,7 +7,7 @@ import {
     ResolvedProperties,
     ResolvedProperty,
     SelectionController,
-    TableController,
+    EntityTableController,
     User
 } from "../../types";
 import { OnCellValueChange, UniqueFieldValidator } from "./types";
@@ -93,9 +93,9 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     /**
      * Controller holding the logic for the table
      * {@link useDataSourceEntityCollectionTableController}
-     * {@link TableController}
+     * {@link EntityTableController}
      */
-    tableController: TableController<M>;
+    tableController: EntityTableController<M>;
 
     displayedColumnIds: PropertyColumnConfig[];
 

package/src/components/EntityCollectionTable/{internal/PropertyTableCell.tsx → PropertyTableCell.tsx}

@@ -8,28 +8,29 @@ import {
     ResolvedNumberProperty,
     ResolvedProperty,
     ResolvedStringProperty
-} from "../../../types";
+} from "../../types";
 
-import { VirtualTableInput } from "../../VirtualTable/fields/VirtualTableInput";
-import { VirtualTableSelect } from "../../VirtualTable/fields/VirtualTableSelect";
-import { VirtualTableNumberInput } from "../../VirtualTable/fields/VirtualTableNumberInput";
-import { VirtualTableSwitch } from "../../VirtualTable/fields/VirtualTableSwitch";
-import { VirtualTableDateField } from "../../VirtualTable/fields/VirtualTableDateField";
+import { VirtualTableInput } from "../VirtualTable/fields/VirtualTableInput";
+import { VirtualTableSelect } from "../VirtualTable/fields/VirtualTableSelect";
+import { VirtualTableNumberInput } from "../VirtualTable/fields/VirtualTableNumberInput";
+import { VirtualTableSwitch } from "../VirtualTable/fields/VirtualTableSwitch";
+import { VirtualTableDateField } from "../VirtualTable/fields/VirtualTableDateField";
 
-import { TableStorageUpload } from "../fields/TableStorageUpload";
-import { TableReferenceField } from "../fields/TableReferenceField";
+import { TableStorageUpload } from "./fields/TableStorageUpload";
+import { TableReferenceField } from "./fields/TableReferenceField";
 
-import { PropertyPreview } from "../../../preview";
-import { getPreviewSizeFrom } from "../../../preview/util";
-import { isReadOnly } from "../../../util";
+import { PropertyPreview } from "../../preview";
+import { getPreviewSizeFrom } from "../../preview/util";
+import { isReadOnly } from "../../util";
 
-import { CustomFieldValidator, mapPropertyToYup } from "../../../form/validation";
-import { useEntityCollectionTableController } from "../EntityCollectionTable";
-import { useClearRestoreValue, useFireCMSContext } from "../../../hooks";
+import { CustomFieldValidator, mapPropertyToYup } from "../../form/validation";
+import { useEntityCollectionTableController } from "./EntityCollectionTable";
+import { useClearRestoreValue, useFireCMSContext } from "../../hooks";
 
-import { EntityTableCell } from "./EntityTableCell";
-import { getRowHeight } from "../../VirtualTable/common";
-import { EntityTableCellActions } from "./EntityTableCellActions";
+import { EntityTableCell } from "./internal/EntityTableCell";
+import { EntityTableCellActions } from "./internal/EntityTableCellActions";
+
+import { getRowHeight } from "../VirtualTable/common";
 
 export interface PropertyTableCellProps<T extends CMSType, M extends Record<string, any>> {
     propertyKey: string;
@@ -46,7 +47,7 @@ export interface PropertyTableCellProps<T extends CMSType, M extends Record<stri
     disabled: boolean;
 }
 
-function isStorageProperty<T>(property: ResolvedProperty) {
+function isStorageProperty(property: ResolvedProperty) {
     if (property.dataType === "string" && (property as ResolvedStringProperty).storage)
         return true;
     if (property.dataType === "array") {

package/src/components/EntityCollectionTable/SimpleEntityCollectionTable.tsx

@@ -0,0 +1,369 @@
+import React, { useCallback, useEffect } from "react";
+import equal from "react-fast-compare";
+import {
+    CollectionSize,
+    Entity,
+    EntityTableController,
+    FilterValues,
+    ResolvedProperty,
+    SelectedCellProps,
+    User
+} from "../../types";
+import { useLargeLayout } from "../../hooks";
+import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
+import { enumToObjectEntries } from "../../util";
+import { OnCellValueChange } from "./types";
+import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
+import { EntityCollectionTableProps, OnColumnResizeParams } from "./EntityCollectionTableProps";
+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";
+
+export type SimpleEntityCollectionTableProps<M extends Record<string, any>> = {
+
+    /**
+     * List of entities that will be displayed as selected;
+     */
+    highlightedEntities?: Entity<M>[];
+
+    /**
+     * Override the title in the toolbar
+     */
+    title?: React.ReactNode;
+
+    /**
+     * Callback when a cell value changes.
+     */
+    onValueChange?: OnCellValueChange<any, M>;
+
+    columns: VirtualTableColumn[];
+
+    cellRenderer: React.ComponentType<CellRendererParams<Entity<M>>>;
+
+    /**
+     * Builder for creating the buttons in each row
+     * @param entity
+     * @param size
+     */
+    tableRowActionsBuilder?: (params: {
+        entity: Entity<M>,
+        size: CollectionSize,
+        width: number,
+        frozen?: boolean
+    }) => React.ReactNode;
+
+    /**
+     * Callback when anywhere on the table is clicked
+     */
+    onEntityClick?(entity: Entity<M>): void;
+
+    /**
+     * Callback when a column is resized
+     */
+    onColumnResize?(params: OnColumnResizeParams): void;
+
+    /**
+     * Callback when the selected size of the table is changed
+     */
+    onSizeChanged?(size: CollectionSize): void;
+
+    /**
+     * Should apply a different style to a row when hovering
+     */
+    hoverRow?: boolean;
+
+    /**
+     * Additional component that renders actions such as buttons in the
+     * collection toolbar, displayed on the left side
+     */
+    actionsStart?: React.ReactNode;
+
+    /**
+     * Additional component that renders actions such as buttons in the
+     * collection toolbar, displayed on the right side
+     */
+    actions?: React.ReactNode;
+
+    /**
+     * Controller holding the logic for the table
+     * {@link useDataSourceEntityCollectionTableController}
+     * {@link EntityTableController}
+     */
+    tableController: EntityTableController<M>;
+
+    filterable?: boolean;
+
+    sortable?: boolean;
+
+    inlineEditing?: boolean;
+
+    textSearchEnabled?: boolean;
+
+    emptyComponent?: React.ReactNode;
+
+    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+}
+
+
+
+/**
+ * This component is in charge of rendering a collection table with a high
+ * degree of customization.
+ *
+ * This component is used internally by {@link EntityCollectionView} and
+ * {@link useReferenceDialog}
+ *
+ * Please note that you only need to use this component if you are building
+ * a custom view. If you just need to create a default view you can do it
+ * exclusively with config options.
+ *
+ * If you want to bind a {@link EntityCollection} to a table with the default
+ * options you see in collections in the top level navigation, you can
+ * check {@link EntityCollectionView}.
+ *
+ * The data displayed in the table is managed by a {@link EntityTableController}.
+ * You can build the default, bound to a path in the datasource, by using the hook
+ * {@link useDataSourceEntityCollectionTableController}
+ *
+ * @see EntityCollectionTableProps
+ * @see EntityCollectionView
+ * @see VirtualTable
+ * @group Components
+ */
+export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTableProps<any>>(
+    function SimpleEntityCollectionTable<M extends Record<string, any>, UserType extends User>
+    ({
+         actionsStart,
+         actions,
+         title,
+         onValueChange,
+         cellRenderer,
+         highlightedEntities,
+         onEntityClick,
+         onColumnResize,
+         onSizeChanged,
+         hoverRow = true,
+         inlineEditing = false,
+         tableController:
+             {
+                 data,
+                 dataLoading,
+                 noMoreToLoad,
+                 dataLoadingError,
+                 filterValues,
+                 setFilterValues,
+                 sortBy,
+                 setSortBy,
+                 setSearchString,
+                 clearFilter,
+                 itemCount,
+                 setItemCount,
+                 pageSize = 50,
+                 paginationEnabled,
+                 checkFilterCombination,
+                 setPopupCell
+             },
+         filterable = true,
+         sortable = true,
+         emptyComponent,
+         textSearchEnabled,
+         columns,
+         forceFilter
+     }: SimpleEntityCollectionTableProps<M>) {
+
+        const largeLayout = useLargeLayout();
+
+        const [size, setSize] = React.useState<CollectionSize>("m");
+
+        const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
+
+        const filterIsSet = !!filterValues && Object.keys(filterValues).length > 0;
+
+        const loadNextPage = () => {
+            if (!paginationEnabled || dataLoading || noMoreToLoad)
+                return;
+            if (itemCount !== undefined)
+                setItemCount?.(itemCount + pageSize);
+        };
+
+        const resetPagination = useCallback(() => {
+            setItemCount?.(pageSize);
+        }, [pageSize]);
+
+        const onRowClick = useCallback(({ rowData }: {
+            rowData: Entity<M>
+        }) => {
+            console.debug("EntityCollectionTable click");
+            if (inlineEditing)
+                return;
+            return onEntityClick && onEntityClick(rowData);
+        }, [onEntityClick, inlineEditing]);
+
+        const updateSize = useCallback((size: CollectionSize) => {
+            if (onSizeChanged)
+                onSizeChanged(size);
+            setSize(size);
+        }, []);
+
+        const onTextSearch = useCallback((newSearchString?: string) => setSearchString?.(newSearchString), []);
+
+        // on ESC key press
+        useEffect(() => {
+            const escFunction = (event: any) => {
+                if (event.keyCode === 27) {
+                    unselect();
+                }
+            };
+            document.addEventListener("keydown", escFunction, false);
+            return () => {
+                document.removeEventListener("keydown", escFunction, false);
+            };
+        });
+
+        const select = useCallback((cell?: SelectedCellProps<M>) => {
+            setSelectedCell(cell);
+        }, []);
+
+        const unselect = useCallback(() => {
+            setSelectedCell(undefined);
+        }, []);
+
+
+        const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
+            setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
+        }, [forceFilter]);
+
+        return (
+            <EntityCollectionTableContext.Provider
+                value={{
+                    setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
+                    select,
+                    onValueChange,
+                    size,
+                    selectedCell,
+                }}
+            >
+                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
+
+                    <CollectionTableToolbar
+                        filterIsSet={filterIsSet}
+                        onTextSearch={textSearchEnabled ? onTextSearch : undefined}
+                        clearFilter={clearFilter}
+                        size={size}
+                        onSizeChanged={updateSize}
+                        title={title}
+                        actionsStart={actionsStart}
+                        actions={actions}
+                        loading={dataLoading}/>
+
+                    <VirtualTable
+                        data={data}
+                        columns={columns}
+                        cellRenderer={cellRenderer}
+                        onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
+                        onEndReached={loadNextPage}
+                        onResetPagination={resetPagination}
+                        error={dataLoadingError}
+                        paginationEnabled={paginationEnabled}
+                        onColumnResize={onColumnResize}
+                        size={size}
+                        loading={dataLoading}
+                        filter={filterValues}
+                        onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
+                        sortBy={sortBy}
+                        onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
+                        hoverRow={hoverRow}
+                        emptyComponent={emptyComponent}
+                        checkFilterCombination={checkFilterCombination}
+                        createFilterField={filterable ? createFilterField : undefined}
+                        className="flex-grow"
+                    />
+
+                </div>
+            </EntityCollectionTableContext.Provider>
+        );
+
+    },
+    equal
+);
+
+function createFilterField({
+                               id,
+                               filterValue,
+                               setFilterValue,
+                               column,
+                               hidden,
+                               setHidden
+                           }: FilterFormFieldProps<{
+    resolvedProperty: ResolvedProperty,
+    disabled: boolean,
+}>): React.ReactNode {
+
+    if (!column.custom) {
+        return null;
+    }
+
+    const { resolvedProperty } = column.custom;
+
+    const isArray = resolvedProperty?.dataType === "array";
+    const baseProperty: ResolvedProperty = isArray ? resolvedProperty.of : resolvedProperty;
+    if (!baseProperty) {
+        return null;
+    }
+    if (baseProperty.dataType === "reference") {
+        return <ReferenceFilterField value={filterValue}
+                                     setValue={setFilterValue}
+                                     name={id as string}
+                                     isArray={isArray}
+                                     path={baseProperty.path}
+                                     title={resolvedProperty?.name}
+                                     previewProperties={baseProperty?.previewProperties}
+                                     hidden={hidden}
+                                     setHidden={setHidden}/>;
+    } else if (baseProperty.dataType === "number" || baseProperty.dataType === "string") {
+        const name = baseProperty.name;
+        const enumValues = baseProperty.enumValues ? enumToObjectEntries(baseProperty.enumValues) : undefined;
+        return <StringNumberFilterField value={filterValue}
+                                        setValue={setFilterValue}
+                                        name={id as string}
+                                        dataType={baseProperty.dataType}
+                                        isArray={isArray}
+                                        enumValues={enumValues}
+                                        title={name}/>;
+    } else if (baseProperty.dataType === "boolean") {
+        const name = baseProperty.name;
+        return <BooleanFilterField value={filterValue}
+                                   setValue={setFilterValue}
+                                   name={id as string}
+                                   title={name}/>;
+
+    } else if (baseProperty.dataType === "date") {
+        const title = baseProperty.name;
+        return <DateTimeFilterField value={filterValue}
+                                    setValue={setFilterValue}
+                                    name={id as string}
+                                    mode={baseProperty.mode}
+                                    isArray={isArray}
+                                    title={title}/>;
+    }
+
+    return (
+        <div>{`Currently the filter field ${resolvedProperty.dataType} is not supported`}</div>
+    );
+}
+
+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);
+}