@firecms/core 3.0.1 → 3.1.0-canary.02232f4

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -5,6 +5,7 @@ import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleto
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 import { getEntityFromCache } from "../../util/entity_cache";
 import { getLocalChangesBackup } from "../../util";
+import { getChanges } from "../../form/EntityForm";
 
 /**
  *
@@ -20,41 +21,52 @@ import { getLocalChangesBackup } from "../../util";
  * @group Collection components
  */
 export const EntityCollectionRowActions = function EntityCollectionRowActions({
-                                                                                  entity,
-                                                                                  collection,
-                                                                                  fullPath,
-                                                                                  fullIdPath,
-                                                                                  width,
-                                                                                  frozen,
-                                                                                  isSelected,
-                                                                                  selectionEnabled,
-                                                                                  size,
-                                                                                  highlightEntity,
-                                                                                  onCollectionChange,
-                                                                                  unhighlightEntity,
-                                                                                  actions = [],
-                                                                                  hideId,
-                                                                                  selectionController,
-                                                                                  openEntityMode
-                                                                              }:
-                                                                              {
-                                                                                  entity: Entity<any>,
-                                                                                  collection?: EntityCollection<any>,
-                                                                                  fullPath?: string,
-                                                                                  fullIdPath?: string,
-                                                                                  width: number,
-                                                                                  frozen?: boolean,
-                                                                                  size: CollectionSize,
-                                                                                  isSelected?: boolean,
-                                                                                  selectionEnabled?: boolean,
-                                                                                  actions?: EntityAction[],
-                                                                                  hideId?: boolean,
-                                                                                  onCollectionChange?: () => void,
-                                                                                  selectionController?: SelectionController;
-                                                                                  highlightEntity?: (entity: Entity<any>) => void;
-                                                                                  unhighlightEntity?: (entity: Entity<any>) => void;
-                                                                                  openEntityMode: "side_panel" | "full_screen";
-                                                                              }) {
+    entity,
+    collection,
+    fullPath,
+    fullIdPath,
+    width,
+    frozen,
+    isSelected,
+    selectionEnabled,
+    size,
+    highlightEntity,
+    onCollectionChange,
+    unhighlightEntity,
+    actions = [],
+    hideId,
+    selectionController,
+    openEntityMode,
+    sortableNodeRef,
+    sortableStyle,
+    sortableAttributes,
+    isDragging,
+    isDraggable
+}:
+    {
+        entity: Entity<any>,
+        collection?: EntityCollection<any>,
+        fullPath?: string,
+        fullIdPath?: string,
+        width: number,
+        frozen?: boolean,
+        size: CollectionSize,
+        isSelected?: boolean,
+        selectionEnabled?: boolean,
+        actions?: EntityAction[],
+        hideId?: boolean,
+        onCollectionChange?: () => void,
+        selectionController?: SelectionController;
+        highlightEntity?: (entity: Entity<any>) => void;
+        unhighlightEntity?: (entity: Entity<any>) => void;
+        openEntityMode: "side_panel" | "full_screen";
+        // Sortable props for dnd-kit integration
+        sortableNodeRef?: (node: HTMLElement | null) => void;
+        sortableStyle?: React.CSSProperties;
+        sortableAttributes?: Record<string, any>;
+        isDragging?: boolean;
+        isDraggable?: boolean;
+    }) {
 
     const largeLayout = useLargeLayout();
 
@@ -70,12 +82,18 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
     const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
-    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
+    const cachedData = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : undefined;
+    const hasDraft = (() => {
+        if (!cachedData || typeof cachedData !== "object" || Object.keys(cachedData).length === 0) return false;
+        const realChanges = getChanges(cachedData as any, (entity?.values ?? {}) as any);
+        return Object.keys(realChanges).length > 0;
+    })();
     const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
-    return (
+
+    const content = (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10 shrink-0",
                 frozen ? "sticky left-0" : ""
             )}
             onClick={useCallback((event: any) => {
@@ -89,7 +107,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
             }}>
 
             {(hasActions || selectionEnabled) &&
-                <div className="w-34 flex justify-center">
+                <div className="w-full flex justify-center">
 
                     {uncollapsedActions.map((action, index) => {
                         const isEditAction = action.key === "edit";
@@ -124,8 +142,8 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                         }
                         return (
                             <Tooltip key={index}
-                                     title={tooltip}
-                                     asChild={true}>
+                                title={tooltip}
+                                asChild={true}>
                                 {iconButton}
                             </Tooltip>
                         );
@@ -135,7 +153,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                         <Menu
                             trigger={<IconButton
                                 size={iconSize}>
-                                <MoreVertIcon/>
+                                <MoreVertIcon />
                             </IconButton>}>
                             {collapsedActions.map((action, index) => (
                                 <MenuItem
@@ -183,7 +201,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                     <span className="min-w-0 truncate text-center">
                         {entity
                             ? entity.id
-                            : <Skeleton/>
+                            : <Skeleton />
                         }
                     </span>
                 </div>
@@ -192,4 +210,25 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
         </div>
     );
 
+    // Wrap with sortable outer div when sortable props are provided
+    // Remove tabIndex from attributes to avoid capturing focus before cell content
+    if (sortableNodeRef) {
+        const { tabIndex: _tabIndex, ...sortableAttrsWithoutTabIndex } = sortableAttributes ?? {};
+        return (
+            <div
+                ref={sortableNodeRef}
+                style={sortableStyle}
+                className={cls(
+                    "flex-shrink-0",
+                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-950"
+                )}
+                {...sortableAttrsWithoutTabIndex}
+            >
+                {content}
+            </div>
+        );
+    }
+
+    return content;
+
 };

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>
     );