@firecms/core 3.0.1 → 3.1.0-canary.7d91b7c

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -42,45 +42,48 @@ import { getRowHeight } from "../common/table_height";
  * @group Components
  */
 export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any> = any, USER extends User = any>
-({
-     className,
-     style,
-     forceFilter,
-     actionsStart,
-     actions,
-     title,
-     tableRowActionsBuilder,
-     uniqueFieldValidator,
-     getPropertyFor,
-     onValueChange,
-     selectionController,
-     highlightedEntities,
-     onEntityClick,
-     onColumnResize,
-     initialScroll,
-     onScroll,
-     onSizeChanged,
-     textSearchEnabled = false,
-     hoverRow = true,
-     inlineEditing = false,
-     additionalFields,
-     displayedColumnIds,
-     defaultSize,
-     properties,
-     tableController,
-     filterable = true,
-     sortable = true,
-     endAdornment,
-     AddColumnComponent,
-     AdditionalHeaderWidget,
-     additionalIDHeaderWidget,
-     emptyComponent,
-     getIdColumnWidth,
-     onTextSearchClick,
-     textSearchLoading,
-     enablePopupIcon,
-     openEntityMode = "side_panel"
- }: EntityCollectionTableProps<M>) {
+    ({
+        className,
+        style,
+        forceFilter,
+        actionsStart,
+        actions,
+        viewModeToggle,
+        title,
+        tableRowActionsBuilder,
+        uniqueFieldValidator,
+        getPropertyFor,
+        onValueChange,
+        selectionController,
+        highlightedEntities,
+        onEntityClick,
+        onColumnResize,
+        initialScroll,
+        onScroll,
+        onSizeChanged,
+        textSearchEnabled = false,
+        hoverRow = true,
+        inlineEditing = false,
+        additionalFields,
+        displayedColumnIds,
+        defaultSize,
+        properties,
+        tableController,
+        filterable = true,
+        sortable = true,
+        endAdornment,
+        AddColumnComponent,
+        AdditionalHeaderWidget,
+        additionalIDHeaderWidget,
+        emptyComponent,
+        getIdColumnWidth,
+        onTextSearchClick,
+        textSearchLoading,
+        enablePopupIcon,
+        openEntityMode = "side_panel",
+        onColumnsOrderChange,
+        hideToolbar = false
+    }: EntityCollectionTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
 
@@ -91,6 +94,13 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const [size, setSize] = React.useState<CollectionSize>(defaultSize ?? "m");
 
+    // Sync internal size with defaultSize prop when it changes
+    React.useEffect(() => {
+        if (defaultSize) {
+            setSize(defaultSize);
+        }
+    }, [defaultSize]);
+
     const updateSize = useCallback((size: CollectionSize) => {
         if (onSizeChanged)
             onSizeChanged(size);
@@ -110,11 +120,17 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     const customFieldValidator: CustomFieldValidator | undefined = uniqueFieldValidator;
 
     const propertyCellRenderer = ({
-                                      column,
-                                      columnIndex,
-                                      rowData,
-                                      rowIndex
-                                  }: CellRendererParams<any>) => {
+        column,
+        columnIndex,
+        rowData,
+        rowIndex,
+        sortableNodeRef,
+        sortableStyle,
+        sortableAttributes,
+        isDragging,
+        isDraggable,
+        frozen
+    }: CellRendererParams<any>) => {
 
         const entity: Entity<M> = rowData;
 
@@ -150,7 +166,13 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                         entity={entity}
                         disabled={disabled}
                         enablePopupIcon={enablePopupIcon}
-                        path={entity.path}/>
+                        path={entity.path}
+                        sortableNodeRef={sortableNodeRef}
+                        sortableStyle={sortableStyle}
+                        sortableAttributes={sortableAttributes}
+                        isDragging={isDragging}
+                        isDraggable={isDraggable}
+                        frozen={frozen} />
                     : renderSkeletonText()
                 }
             </ErrorBoundary>);
@@ -158,10 +180,16 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     };
 
     const additionalCellRenderer = useCallback(({
-                                                    column,
-                                                    rowData,
-                                                    width
-                                                }: CellRendererParams<any>) => {
+        column,
+        rowData,
+        width,
+        sortableNodeRef,
+        sortableStyle,
+        sortableAttributes,
+        isDragging,
+        isDraggable,
+        frozen
+    }: CellRendererParams<any>) => {
 
         const entity: Entity<M> = rowData;
 
@@ -178,7 +206,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         }
 
         const child: React.ReactNode = Builder
-            ? <Builder entity={entity} context={context}/>
+            ? <Builder entity={entity} context={context} />
             : <>
                 {additionalField.value?.({
                     entity,
@@ -198,6 +226,12 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 allowScroll={false}
                 showExpandIcon={false}
                 disabledTooltip={"This column can't be edited directly"}
+                sortableNodeRef={sortableNodeRef}
+                sortableStyle={sortableStyle}
+                sortableAttributes={sortableAttributes}
+                isDragging={isDragging}
+                isDraggable={isDraggable}
+                frozen={frozen}
             >
                 <ErrorBoundary>
                     {child}
@@ -215,8 +249,14 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             AdditionalHeaderWidget
         });
 
+        // Get keys from property columns to filter out duplicate additional fields
+        const propertyColumnKeys = new Set(columnsResult.map(col => col.key));
+
         const additionalTableColumns: VirtualTableColumn[] = additionalFields
-            ? additionalFields.map((additionalField) =>
+            // Filter out additional fields whose key already exists in property columns
+            ? additionalFields
+                .filter((additionalField) => !propertyColumnKeys.has(additionalField.key))
+                .map((additionalField) =>
                 ({
                     key: additionalField.key,
                     align: "left",
@@ -265,11 +305,16 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                     });
                 else
                     return <EntityCollectionRowActions entity={props.rowData}
-                                                       width={column.width}
-                                                       frozen={column.frozen}
-                                                       isSelected={false}
-                                                       size={size}
-                                                       openEntityMode={openEntityMode}/>;
+                        width={column.width}
+                        frozen={column.frozen}
+                        isSelected={false}
+                        size={size}
+                        openEntityMode={openEntityMode}
+                        sortableNodeRef={props.sortableNodeRef}
+                        sortableStyle={props.sortableStyle}
+                        sortableAttributes={props.sortableAttributes}
+                        isDragging={props.isDragging}
+                        isDraggable={props.isDraggable} />;
             } else if (additionalFieldsMap[columnKey]) {
                 return additionalCellRenderer(props);
             } else if (props.columnIndex < columns.length + 1) {
@@ -286,8 +331,14 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 value={null}
                 align={"left"}
                 fullHeight={false}
-                disabled={true}>
-                <ErrorView error={e}/>
+                disabled={true}
+                sortableNodeRef={props.sortableNodeRef}
+                sortableStyle={props.sortableStyle}
+                sortableAttributes={props.sortableAttributes}
+                isDragging={props.isDragging}
+                isDraggable={props.isDraggable}
+                frozen={props.frozen}>
+                <ErrorView error={e} />
             </EntityTableCell>;
         }
     }, [tableRowActionsBuilder, additionalCellRenderer, propertyCellRenderer, size]);
@@ -295,36 +346,36 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     return (
 
         <div ref={ref}
-             style={style}
-             className={cls("h-full w-full flex flex-col bg-white dark:bg-surface-950", className)}>
+            style={style}
+            className={cls("h-full w-full flex flex-col bg-white dark:bg-surface-950", className)}>
 
-            <CollectionTableToolbar
+            {!hideToolbar && <CollectionTableToolbar
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}
                 textSearchLoading={textSearchLoading}
                 onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
-                size={size}
-                onSizeChanged={updateSize}
                 title={title}
                 actionsStart={actionsStart}
                 actions={actions}
-                loading={tableController.dataLoading}/>
+                viewModeToggle={viewModeToggle}
+                loading={tableController.dataLoading} />}
 
             <SelectableTable columns={columns}
-                             size={size}
-                             inlineEditing={inlineEditing}
-                             cellRenderer={cellRenderer}
-                             onEntityClick={onEntityClick}
-                             highlightedRow={(entity: Entity<M>) => Boolean(selectedEntities?.find(e => e.id === entity.id && e.path === entity.path))}
-                             tableController={tableController}
-                             onValueChange={onValueChange}
-                             initialScroll={initialScroll}
-                             onScroll={onScroll}
-                             onColumnResize={onColumnResize}
-                             hoverRow={hoverRow}
-                             filterable={filterable}
-                             emptyComponent={emptyComponent}
-                             endAdornment={endAdornment}
-                             AddColumnComponent={AddColumnComponent}/>
+                size={size}
+                inlineEditing={inlineEditing}
+                cellRenderer={cellRenderer}
+                onEntityClick={onEntityClick}
+                highlightedRow={(entity: Entity<M>) => Boolean(selectedEntities?.find(e => e.id === entity.id && e.path === entity.path))}
+                tableController={tableController}
+                onValueChange={onValueChange}
+                initialScroll={initialScroll}
+                onScroll={onScroll}
+                onColumnResize={onColumnResize}
+                hoverRow={hoverRow}
+                filterable={filterable}
+                emptyComponent={emptyComponent}
+                endAdornment={endAdornment}
+                AddColumnComponent={AddColumnComponent}
+                onColumnsOrderChange={onColumnsOrderChange} />
 
         </div>
     );

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -11,6 +11,7 @@ import {
     User
 } from "../../types";
 import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from "../common/types";
+import { VirtualTableColumn } from "../VirtualTable";
 
 /**
  * @group Collection components
@@ -18,142 +19,158 @@ import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from ".
 export type EntityCollectionTableProps<M extends Record<string, any>,
     USER extends User = User> = {
 
-    className?: string;
-
-    style?: React.CSSProperties;
-
-    /**
-     * Display these entities as selected
-     */
-    selectionController: SelectionController<M>;
-
-    /**
-     * List of entities that will be displayed as selected;
-     */
-    highlightedEntities?: Entity<M>[];
+        className?: string;
+
+        style?: React.CSSProperties;
+
+        /**
+         * Display these entities as selected
+         */
+        selectionController: SelectionController<M>;
+
+        /**
+         * List of entities that will be displayed as selected;
+         */
+        highlightedEntities?: Entity<M>[];
+
+        /**
+         * Override the title in the toolbar
+         */
+        title?: React.ReactNode;
 
-    /**
-     * Override the title in the toolbar
-     */
-    title?: React.ReactNode;
-
-    /**
-     * 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 left side
+         */
+        actionsStart?: React.ReactNode;
 
-    /**
-     * Callback when a cell value changes.
-     */
-    onValueChange?: OnCellValueChange<any, M>;
+        /**
+         * Callback when a cell value changes.
+         */
+        onValueChange?: OnCellValueChange<any, M>;
 
-    uniqueFieldValidator?: UniqueFieldValidator;
+        uniqueFieldValidator?: UniqueFieldValidator;
 
-    /**
-     * 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;
+        /**
+         * 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 anywhere on the table is clicked
+         */
+        onEntityClick?(entity: Entity<M>): void;
 
-    /**
-     * Callback when a column is resized
-     */
-    onColumnResize?(params: OnColumnResizeParams): void;
+        /**
+         * Callback when a column is resized
+         */
+        onColumnResize?(params: OnColumnResizeParams): void;
 
-    /**
-     * Initial scroll position
-     */
-    initialScroll?: number;
+        /**
+         * Initial scroll position
+         */
+        initialScroll?: number;
 
-    /**
-     * Callback when the table is scrolled
-     * @param props
-     */
-    onScroll?: (props: {
-        scrollDirection: "forward" | "backward",
-        scrollOffset: number,
-        scrollUpdateWasRequested: boolean
-    }) => void;
+        /**
+         * Callback when the table is scrolled
+         * @param props
+         */
+        onScroll?: (props: {
+            scrollDirection: "forward" | "backward",
+            scrollOffset: number,
+            scrollUpdateWasRequested: boolean
+        }) => void;
 
-    /**
-     * Callback when the selected size of the table is changed
-     */
-    onSizeChanged?(size: CollectionSize): 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;
+        /**
+         * 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 right side
-     */
-    actions?: 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 useDataSourceTableController}
-     * {@link EntityTableController}
-     */
-    tableController: EntityTableController<M>;
+        /**
+         * View mode toggle button, positioned left of the search bar.
+         */
+        viewModeToggle?: React.ReactNode;
 
-    displayedColumnIds?: PropertyColumnConfig[];
+        /**
+         * Controller holding the logic for the table
+         * {@link useDataSourceTableController}
+         * {@link EntityTableController}
+         */
+        tableController: EntityTableController<M>;
 
-    forceFilter?: FilterValues<Extract<keyof M, string>>;
+        displayedColumnIds?: PropertyColumnConfig[];
 
-    textSearchEnabled?: boolean;
+        forceFilter?: FilterValues<Extract<keyof M, string>>;
 
-    inlineEditing?: boolean;
+        textSearchEnabled?: boolean;
 
-    additionalFields?: AdditionalFieldDelegate<M, USER>[];
+        inlineEditing?: boolean;
 
-    defaultSize?: CollectionSize;
+        additionalFields?: AdditionalFieldDelegate<M, USER>[];
 
-    properties: ResolvedProperties<M>;
+        defaultSize?: CollectionSize;
 
-    getPropertyFor?: (props: GetPropertyForProps<M>) => ResolvedProperties<M>[string];
+        properties: ResolvedProperties<M>;
 
-    filterable?: boolean;
+        getPropertyFor?: (props: GetPropertyForProps<M>) => ResolvedProperties<M>[string];
 
-    sortable?: boolean;
+        filterable?: boolean;
 
-    endAdornment?: React.ReactNode;
+        sortable?: boolean;
 
-    AdditionalHeaderWidget?: React.ComponentType<{
-        property: ResolvedProperty,
-        propertyKey: string,
-        onHover: boolean,
-    }>;
+        endAdornment?: React.ReactNode;
 
-    AddColumnComponent?: React.ComponentType;
+        AdditionalHeaderWidget?: React.ComponentType<{
+            property: ResolvedProperty,
+            propertyKey: string,
+            onHover: boolean,
+        }>;
 
-    additionalIDHeaderWidget?: React.ReactNode;
+        AddColumnComponent?: React.ComponentType;
 
-    emptyComponent?: React.ReactNode;
+        additionalIDHeaderWidget?: React.ReactNode;
 
-    getIdColumnWidth?: () => number;
+        emptyComponent?: React.ReactNode;
 
-    onTextSearchClick?: () => void;
+        getIdColumnWidth?: () => number;
 
-    textSearchLoading?: boolean;
+        onTextSearchClick?: () => void;
 
-    enablePopupIcon: boolean;
+        textSearchLoading?: boolean;
 
-    openEntityMode?: "side_panel" | "full_screen";
-};
+        enablePopupIcon: boolean;
+
+        openEntityMode?: "side_panel" | "full_screen";
+
+        /**
+         * Callback when columns are reordered via drag-and-drop
+         */
+        onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+
+        /**
+         * If true, the internal toolbar will not be rendered.
+         * Used when the parent component renders its own toolbar.
+         */
+        hideToolbar?: boolean;
+    };
 
 export type GetPropertyForProps<M extends Record<string, any>> = {
     propertyKey: string,