@firecms/core 3.0.1 → 3.1.0-canary.9e89e98

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -2,8 +2,19 @@ import React from "react";
 
 import { canCreateEntity, canDeleteEntity } from "../../util";
 import { useAuthController, useCustomizationController, useFireCMSContext, useLargeLayout } from "../../hooks";
-import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
-import { AddIcon, Button, DeleteIcon, IconButton, Tooltip } from "@firecms/ui";
+import {
+    CollectionActionsProps,
+    EntityCollection,
+    EntityTableController,
+    SelectionController
+} from "../../types";
+import {
+    AddIcon,
+    Button,
+    DeleteIcon,
+    IconButton,
+    Tooltip
+} from "@firecms/ui";
 import { toArray } from "../../util/arrays";
 import { ErrorBoundary } from "../ErrorBoundary";
 
@@ -17,21 +28,21 @@ export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
     onMultipleDeleteClick: () => void;
     selectionController: SelectionController<M>;
     tableController: EntityTableController<M>;
-    collectionEntitiesCount: number;
+    collectionEntitiesCount?: number;
 }
 
 export function EntityCollectionViewActions<M extends Record<string, any>>({
-                                                                               collection,
-                                                                               relativePath,
-                                                                               parentCollectionIds,
-                                                                               onNewClick,
-                                                                               onMultipleDeleteClick,
-                                                                               selectionEnabled,
-                                                                               path,
-                                                                               selectionController,
-                                                                               tableController,
-                                                                               collectionEntitiesCount
-                                                                           }: EntityCollectionViewActionsProps<M>) {
+    collection,
+    relativePath,
+    parentCollectionIds,
+    onNewClick,
+    onMultipleDeleteClick,
+    selectionEnabled,
+    path,
+    selectionController,
+    tableController,
+    collectionEntitiesCount,
+}: EntityCollectionViewActionsProps<M>) {
 
     const context = useFireCMSContext();
 
@@ -49,7 +60,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             ? <Button
                 id={`add_entity_${path}`}
                 onClick={onNewClick}
-                startIcon={<AddIcon/>}
+                startIcon={<AddIcon size={"small"} />}
                 variant="filled"
                 color="primary">
                 Add {collection.singularName ?? collection.name}
@@ -60,7 +71,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 variant="filled"
                 color="primary"
             >
-                <AddIcon/>
+                <AddIcon size={"small"} />
             </Button>);
 
     const multipleDeleteEnabled = canDeleteEntity(collection, authController, path, null);
@@ -71,7 +82,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             ? <Button
                 variant={"text"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
-                startIcon={<DeleteIcon size={"small"}/>}
+                startIcon={<DeleteIcon size={"small"} />}
                 onClick={onMultipleDeleteClick}
                 color={"primary"}
                 className="lg:w-20"
@@ -83,7 +94,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 color={"primary"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
                 onClick={onMultipleDeleteClick}>
-                <DeleteIcon size={"small"}/>
+                <DeleteIcon size={"small"} />
             </IconButton>;
         multipleDeleteButton =
             <Tooltip
@@ -92,6 +103,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             </Tooltip>
     }
 
+
     const actionProps: CollectionActionsProps = {
         path,
         relativePath,
@@ -116,7 +128,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 actions.push(...toArray(plugin.collectionView?.CollectionActions)
                     .map((Action, j) => (
                         <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
-                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsProps}/>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsProps} />
                         </ErrorBoundary>
                     )));
             }

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -1,9 +1,17 @@
-import React from "react";
-import { useCustomizationController, useFireCMSContext } from "../../hooks";
-import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
+import React, { useState } from "react";
+import { useCustomizationController, useFireCMSContext, useLargeLayout } from "../../hooks";
+import {
+    CollectionActionsProps,
+    EntityCollection,
+    EntityTableController,
+    ResolvedProperty,
+    SelectionController
+} from "../../types";
 import { toArray } from "../../util/arrays";
 import { ErrorBoundary } from "../ErrorBoundary";
 import { ClearFilterSortButton } from "../ClearFilterSortButton";
+import { FiltersDialog } from "./FiltersDialog";
+import { Badge, Button, cls, FilterListIcon, IconButton, Tooltip } from "@firecms/ui";
 
 export type EntityCollectionViewStartActionsProps<M extends Record<string, any>> = {
     collection: EntityCollection<M>;
@@ -12,23 +20,38 @@ export type EntityCollectionViewStartActionsProps<M extends Record<string, any>>
     parentCollectionIds: string[];
     selectionController: SelectionController<M>;
     tableController: EntityTableController<M>;
-    collectionEntitiesCount: number;
+    collectionEntitiesCount?: number;
+    /**
+     * Resolved properties from the collection for the filters dialog
+     */
+    resolvedProperties?: Record<string, ResolvedProperty>;
 }
 
 export function EntityCollectionViewStartActions<M extends Record<string, any>>({
-                                                                                    collection,
-                                                                                    relativePath,
-                                                                                    parentCollectionIds,
-                                                                                    path,
-                                                                                    selectionController,
-                                                                                    tableController,
-                                                                                    collectionEntitiesCount
-                                                                                }: EntityCollectionViewStartActionsProps<M>) {
+    collection,
+    relativePath,
+    parentCollectionIds,
+    path,
+    selectionController,
+    tableController,
+    collectionEntitiesCount,
+    resolvedProperties
+}: EntityCollectionViewStartActionsProps<M>) {
 
     const context = useFireCMSContext();
-
     const customizationController = useCustomizationController();
     const plugins = customizationController.plugins ?? [];
+    const largeLayout = useLargeLayout();
+
+    // Filters dialog state
+    const [filtersDialogOpen, setFiltersDialogOpen] = useState(false);
+
+    // Count active filters (excluding force filters)
+    const filterValues = tableController.filterValues;
+    const forceFilter = collection.forceFilter;
+    const activeFilterCount = filterValues
+        ? Object.keys(filterValues).filter(key => !forceFilter || !(key in forceFilter)).length
+        : 0;
 
     const actionProps: CollectionActionsProps = {
         path,
@@ -40,11 +63,44 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
         tableController,
         collectionEntitiesCount
     };
+
+    // Filters button
+    const filtersButton = resolvedProperties && tableController.setFilterValues && (
+        <Tooltip title="Filters"
+            key={"filters_tooltip"}>
+            <Badge
+                color="primary"
+                invisible={activeFilterCount === 0}
+            >
+                {largeLayout ? (
+                    <Button
+                        variant="text"
+                        size="small"
+                        onClick={() => setFiltersDialogOpen(true)}
+                        startIcon={<FilterListIcon size="small" />}
+                        className={cls(activeFilterCount > 0 && "text-primary")}
+                    >
+                        Filters{activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}
+                    </Button>
+                ) : (
+                    <IconButton
+                        size="small"
+                        onClick={() => setFiltersDialogOpen(true)}
+                        className={cls(activeFilterCount > 0 && "text-primary")}
+                    >
+                        <FilterListIcon size="small" />
+                    </IconButton>
+                )}
+            </Badge>
+        </Tooltip>
+    );
+
     const actions: React.ReactNode[] = [
+        filtersButton,
         <ClearFilterSortButton
             key={"clear_filter"}
             tableController={tableController}
-            enabled={!collection.forceFilter}/>
+            enabled={!collection.forceFilter} />
     ];
 
     if (plugins) {
@@ -53,7 +109,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
                 actions.push(...toArray(plugin.collectionView?.CollectionActionsStart)
                     .map((Action, j) => (
                         <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
-                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsStartProps}/>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsStartProps} />
                         </ErrorBoundary>
                     )));
             }
@@ -63,6 +119,19 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
     return (
         <>
             {actions}
+
+            {/* Filters Dialog */}
+            {resolvedProperties && tableController.setFilterValues && (
+                <FiltersDialog
+                    open={filtersDialogOpen}
+                    onOpenChange={setFiltersDialogOpen}
+                    properties={resolvedProperties}
+                    filterValues={tableController.filterValues}
+                    setFilterValues={(filterValues) => tableController.setFilterValues?.(filterValues ?? {})}
+                    forceFilter={collection.forceFilter}
+                />
+            )}
         </>
     );
 }
+

package/src/components/EntityCollectionView/FiltersDialog.tsx

@@ -0,0 +1,249 @@
+import React, { useCallback, useMemo, useState } from "react";
+import {
+    FilterValues,
+    ResolvedProperty,
+    WhereFilterOp
+} from "../../types";
+import {
+    Button,
+    cls,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    FilterListIcon,
+    Typography
+} from "@firecms/ui";
+import { StringNumberFilterField } from "../SelectableTable/filters/StringNumberFilterField";
+import { BooleanFilterField } from "../SelectableTable/filters/BooleanFilterField";
+import { DateTimeFilterField } from "../SelectableTable/filters/DateTimeFilterField";
+import { ReferenceFilterField } from "../SelectableTable/filters/ReferenceFilterField";
+import { VirtualTableWhereFilterOp } from "../VirtualTable";
+import { enumToObjectEntries } from "../../util";
+
+export interface FiltersDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    properties: Record<string, ResolvedProperty>;
+    filterValues: FilterValues<any> | undefined;
+    setFilterValues: (filterValues?: FilterValues<any>) => void;
+    forceFilter?: FilterValues<any>;
+}
+
+/**
+ * Dialog that displays all filterable properties from a collection
+ * and allows setting filter values for each.
+ */
+export function FiltersDialog({
+    open,
+    onOpenChange,
+    properties,
+    filterValues,
+    setFilterValues,
+    forceFilter
+}: FiltersDialogProps) {
+    // Local state for filters being edited
+    const [localFilters, setLocalFilters] = useState<FilterValues<any>>(filterValues ?? {});
+
+    // Track hidden state for reference fields (when reference dialog is open)
+    const [hiddenFields, setHiddenFields] = useState<Record<string, boolean>>({});
+
+    // Reset local state when dialog opens
+    React.useEffect(() => {
+        if (open) {
+            setLocalFilters(filterValues ?? {});
+        }
+    }, [open, filterValues]);
+
+    // Get list of filterable properties
+    const filterableProperties = useMemo(() => {
+        return Object.entries(properties).filter(([key, property]) => {
+            if (!property) return false;
+            // Force filter properties should not be editable
+            if (forceFilter && key in forceFilter) return false;
+            // Check if property type is filterable
+            const baseProperty = property.dataType === "array" ? property.of : property;
+            if (!baseProperty) return false;
+            return ["string", "number", "boolean", "date", "reference"].includes(baseProperty.dataType);
+        });
+    }, [properties, forceFilter]);
+
+    const handleFilterChange = useCallback((propertyKey: string, value?: [VirtualTableWhereFilterOp, any]) => {
+        setLocalFilters(prev => {
+            const newFilters = { ...prev };
+            if (value) {
+                newFilters[propertyKey] = value as [WhereFilterOp, any];
+            } else {
+                delete newFilters[propertyKey];
+            }
+            return newFilters;
+        });
+    }, []);
+
+    const handleApply = useCallback(() => {
+        const hasFilters = Object.keys(localFilters).length > 0;
+        setFilterValues(hasFilters ? { ...localFilters, ...forceFilter } : (forceFilter || undefined));
+        onOpenChange(false);
+    }, [localFilters, setFilterValues, forceFilter, onOpenChange]);
+
+    const handleClearAll = useCallback(() => {
+        setLocalFilters({});
+    }, []);
+
+    const setHiddenForField = useCallback((propertyKey: string, hidden: boolean) => {
+        setHiddenFields(prev => ({
+            ...prev,
+            [propertyKey]: hidden
+        }));
+    }, []);
+
+    // Check if any reference field's dialog is currently open (should hide this dialog)
+    const isAnyFieldHidden = Object.values(hiddenFields).some(hidden => hidden);
+    const activeFilterCount = Object.keys(localFilters).length;
+
+    const renderFilterField = useCallback((propertyKey: string, property: ResolvedProperty) => {
+        const isArray = property.dataType === "array";
+        const baseProperty: ResolvedProperty = isArray ? property.of : property;
+
+        if (!baseProperty) return null;
+
+        const filterValue = localFilters[propertyKey] as [VirtualTableWhereFilterOp, any] | undefined;
+        const setValue = (value?: [VirtualTableWhereFilterOp, any]) => handleFilterChange(propertyKey, value);
+
+        if (baseProperty.dataType === "reference") {
+            return (
+                <ReferenceFilterField
+                    value={filterValue}
+                    setValue={setValue}
+                    name={propertyKey}
+                    isArray={isArray}
+                    path={baseProperty.path}
+                    title={property.name}
+                    includeId={baseProperty.includeId}
+                    previewProperties={baseProperty.previewProperties}
+                    hidden={hiddenFields[propertyKey] ?? false}
+                    setHidden={(hidden) => setHiddenForField(propertyKey, hidden)}
+                />
+            );
+        } else if (baseProperty.dataType === "number" || baseProperty.dataType === "string") {
+            const enumValues = baseProperty.enumValues ? enumToObjectEntries(baseProperty.enumValues) : undefined;
+            return (
+                <StringNumberFilterField
+                    value={filterValue}
+                    setValue={setValue}
+                    name={propertyKey}
+                    dataType={baseProperty.dataType}
+                    isArray={isArray}
+                    enumValues={enumValues}
+                    title={property.name}
+                />
+            );
+        } else if (baseProperty.dataType === "boolean") {
+            return (
+                <BooleanFilterField
+                    value={filterValue}
+                    setValue={setValue}
+                    name={propertyKey}
+                    title={property.name}
+                />
+            );
+        } else if (baseProperty.dataType === "date") {
+            return (
+                <DateTimeFilterField
+                    value={filterValue}
+                    setValue={setValue}
+                    name={propertyKey}
+                    mode={baseProperty.mode}
+                    isArray={isArray}
+                    title={property.name}
+                />
+            );
+        }
+
+        return null;
+    }, [localFilters, handleFilterChange, hiddenFields, setHiddenForField]);
+
+    return (
+        <Dialog
+            open={open}
+            onOpenChange={onOpenChange}
+            maxWidth="3xl"
+            fullWidth
+            containerClassName={isAnyFieldHidden ? "hidden" : undefined}
+        >
+            <DialogTitle className="flex items-center gap-2">
+                <Typography variant="h6">Filters</Typography>
+                {activeFilterCount > 0 && (
+                    <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-primary text-white">
+                        {activeFilterCount}
+                    </span>
+                )}
+            </DialogTitle>
+
+            <DialogContent >
+                {filterableProperties.length === 0 ? (
+                    <Typography color="secondary" className="py-8 text-center">
+                        No filterable properties available
+                    </Typography>
+                ) : (
+                    <table className="w-full border-collapse">
+                        <tbody>
+                            {filterableProperties.map(([propertyKey, property], index) => {
+                                const hasFilter = propertyKey in localFilters;
+
+                                return (
+                                    <tr key={propertyKey} className={cls(
+                                        index > 0 && "border-t",
+                                        defaultBorderMixin
+                                    )}>
+                                        {/* Property name on the left */}
+                                        <td className="py-3 pr-4 align-middle w-[160px]">
+                                            <Typography
+                                                variant="body2"
+                                                className={cls(
+                                                    "font-medium",
+                                                    hasFilter && "text-primary"
+                                                )}
+                                            >
+                                                {property.name || propertyKey}
+                                            </Typography>
+                                        </td>
+
+                                        {/* Filter field on the right */}
+                                        <td className="py-3">
+                                            {renderFilterField(propertyKey, property)}
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                )}
+            </DialogContent>
+
+            <DialogActions>
+                <Button
+                    variant="text"
+                    onClick={handleClearAll}
+                    disabled={activeFilterCount === 0}
+                >
+                    Clear all
+                </Button>
+                <div className="flex-grow" />
+                <Button
+                    variant="text"
+                    onClick={() => onOpenChange(false)}
+                >
+                    Cancel
+                </Button>
+                <Button
+                    variant="filled"
+                    onClick={handleApply}
+                >
+                    Apply filters
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}