@rebasepro/core 0.0.1-canary.0

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+
+import { useAuthController, useCustomizationController, useRebaseContext, useLargeLayout } from "../../hooks";
+import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController, ViewMode } from "@rebasepro/types";
+import {
+    AddIcon,
+    Button,
+    DeleteIcon,
+    IconButton,
+    Tooltip
+} from "@rebasepro/ui";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { toArray } from "@rebasepro/common";
+import { usePermissions } from "../../hooks/usePermissions";
+
+export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
+    collection: EntityCollection<M>;
+    path: string;
+    relativePath: string;
+    parentCollectionIds: string[];
+    selectionEnabled: boolean;
+    onNewClick: () => void;
+    onMultipleDeleteClick: () => void;
+    selectionController: SelectionController<M>;
+    tableController: EntityTableController<M>;
+    collectionEntitiesCount?: number;
+}
+
+export function EntityCollectionViewActions<M extends Record<string, any>>({
+    collection,
+    relativePath,
+    parentCollectionIds,
+    onNewClick,
+    onMultipleDeleteClick,
+    selectionEnabled,
+    path,
+    selectionController,
+    tableController,
+    collectionEntitiesCount,
+}: EntityCollectionViewActionsProps<M>) {
+
+    const context = useRebaseContext();
+
+    const customizationController = useCustomizationController();
+    const plugins = customizationController.plugins ?? [];
+
+    const { canCreate, canDelete } = usePermissions();
+
+    const largeLayout = useLargeLayout();
+
+    const selectedEntities = selectionController.selectedEntities;
+
+    const addButton = canCreate(collection, path) &&
+        onNewClick && (largeLayout
+            ? <Button
+                id={`add_entity_${path}`}
+                onClick={onNewClick}
+                startIcon={<AddIcon size={"small"} />}
+                variant="filled"
+                color="primary">
+                Add {collection.singularName ?? collection.name}
+            </Button>
+            : <Button
+                id={`add_entity_${path}`}
+                onClick={onNewClick}
+                variant="filled"
+                color="primary"
+            >
+                <AddIcon size={"small"} />
+            </Button>);
+
+    const multipleDeleteEnabled = canDelete(collection, path, null);
+
+    let multipleDeleteButton: React.ReactNode | undefined;
+    if (selectionEnabled) {
+        const button = largeLayout
+            ? <Button
+                variant={"text"}
+                disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
+                startIcon={<DeleteIcon size={"small"} />}
+                onClick={onMultipleDeleteClick}
+                color={"primary"}
+                className="lg:w-20"
+            >
+                ({selectedEntities?.length})
+            </Button>
+            : <IconButton
+                size={"small"}
+                color={"primary"}
+                disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
+                onClick={onMultipleDeleteClick}>
+                <DeleteIcon size={"small"} />
+            </IconButton>;
+        multipleDeleteButton =
+            <Tooltip
+                title={multipleDeleteEnabled ? "Delete" : "You have selected at least one entity you cannot delete"}>
+                {button}
+            </Tooltip>
+    }
+
+
+    const actionProps: CollectionActionsProps = {
+        path,
+        relativePath,
+        parentCollectionIds,
+        collection,
+        selectionController,
+        context,
+        tableController,
+        collectionEntitiesCount
+    };
+
+    const actions = toArray(collection.Actions)
+        .map((Action, i) => (
+            <ErrorBoundary key={`actions_${i}`}>
+                <Action {...actionProps} />
+            </ErrorBoundary>
+        ));
+
+    if (plugins) {
+        plugins.forEach((plugin, i) => {
+            if (plugin.collectionView?.CollectionActions) {
+                actions.push(...toArray(plugin.collectionView?.CollectionActions)
+                    .map((Action, j) => (
+                        <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsProps} />
+                        </ErrorBoundary>
+                    )));
+            }
+        });
+    }
+
+    return (
+        <>
+            <ErrorBoundary>
+                {actions}
+            </ErrorBoundary>
+            {multipleDeleteButton}
+            {addButton}
+        </>
+    );
+}

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { useAuthController, useCustomizationController, useRebaseContext, useLargeLayout } from "../../hooks";
+import { CollectionActionsProps, EntityCollection, EntityTableController, Properties, SelectionController } from "@rebasepro/types";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { ClearFilterSortButton } from "../ClearFilterSortButton";
+import { toArray } from "@rebasepro/common";
+import { FiltersDialog } from "./FiltersDialog";
+import { Badge, Button, cls, FilterListIcon, IconButton, Tooltip } from "@rebasepro/ui";
+
+export type EntityCollectionViewStartActionsProps<M extends Record<string, any>> = {
+    collection: EntityCollection<M>;
+    path: string;
+    relativePath: string;
+    parentCollectionIds: string[];
+    selectionController: SelectionController<M>;
+    tableController: EntityTableController<M>;
+    collectionEntitiesCount?: number;
+    /**
+     * Resolved properties from the collection for the filters dialog
+     */
+    resolvedProperties?: Properties;
+}
+
+export function EntityCollectionViewStartActions<M extends Record<string, any>>({
+    collection,
+    relativePath,
+    parentCollectionIds,
+    path,
+    selectionController,
+    tableController,
+    collectionEntitiesCount,
+    resolvedProperties
+}: EntityCollectionViewStartActionsProps<M>) {
+
+    const context = useRebaseContext();
+    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,
+        relativePath,
+        parentCollectionIds,
+        collection,
+        selectionController,
+        context,
+        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} />
+    ];
+
+    if (plugins) {
+        plugins.forEach((plugin, i) => {
+            if (plugin.collectionView?.CollectionActionsStart) {
+                actions.push(...toArray(plugin.collectionView?.CollectionActionsStart)
+                    .map((Action, j) => (
+                        <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsStartProps} />
+                        </ErrorBoundary>
+                    )));
+            }
+        });
+    }
+
+    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,
+    Property,
+    WhereFilterOp
+} from "@rebasepro/types";
+import {
+    Button,
+    cls,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    FilterListIcon,
+    Typography
+} from "@rebasepro/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 "@rebasepro/common";
+
+export interface FiltersDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    properties: Record<string, Property>;
+    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.type === "array" ? property.of : property;
+            if (!baseProperty) return false;
+            return ["string", "number", "boolean", "date", "reference"].includes(baseProperty.type);
+        });
+    }, [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: Property) => {
+        const isArray = property.type === "array";
+        const baseProperty: Property | undefined = 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.type === "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.type === "number" || baseProperty.type === "string") {
+            const enumValues = baseProperty.enum ? enumToObjectEntries(baseProperty.enum) : undefined;
+            return (
+                <StringNumberFilterField
+                    value={filterValue}
+                    setValue={setValue}
+                    name={propertyKey}
+                    type={baseProperty.type}
+                    isArray={isArray}
+                    enumValues={enumValues}
+                    title={property.name}
+                />
+            );
+        } else if (baseProperty.type === "boolean") {
+            return (
+                <BooleanFilterField
+                    value={filterValue}
+                    setValue={setValue}
+                    name={propertyKey}
+                    title={property.name}
+                />
+            );
+        } else if (baseProperty.type === "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>
+    );
+}