@vendure/dashboard 3.5.2-master-202512170238 → 3.5.2-master-202512180239

package/src/lib/framework/page/list-page.tsx

@@ -361,6 +361,22 @@ export interface ListPageProps<
      * the list needs to be refreshed.
      */
     registerRefresher?: PaginatedListRefresherRegisterFn;
+    /**
+     * @description
+     * Callback when items are reordered via drag and drop.
+     * Only applies to top-level items. When provided, enables drag-and-drop functionality.
+     *
+     * @param oldIndex - The original index of the dragged item
+     * @param newIndex - The new index where the item was dropped
+     * @param item - The data of the item that was moved
+     */
+    onReorder?: (oldIndex: number, newIndex: number, item: any) => void | Promise<void>;
+    /**
+     * @description
+     * When true, drag and drop will be disabled. This will only have an effect if the onReorder prop is also set Useful when filtering or searching.
+     * Defaults to false. Only relevant when `onReorder` is provided.
+     */
+    disableDragAndDrop?: boolean;
 }
 
 /**
@@ -481,6 +497,8 @@ export function ListPage<
     setTableOptions,
     bulkActions,
     registerRefresher,
+    onReorder,
+    disableDragAndDrop = false,
 }: Readonly<ListPageProps<T, U, V, AC>>) {
     const route = typeof routeOrFn === 'function' ? routeOrFn() : routeOrFn;
     const routeSearch = route.useSearch();
@@ -536,6 +554,47 @@ export function ListPage<
         });
     }
 
+    const commonTableProps = {
+        listQuery,
+        deleteMutation,
+        transformVariables,
+        customizeColumns: customizeColumns as any,
+        additionalColumns: additionalColumns as any,
+        defaultColumnOrder: columnOrder as any,
+        defaultVisibility: columnVisibility as any,
+        onSearchTermChange,
+        page: pagination.page,
+        itemsPerPage: pagination.itemsPerPage,
+        sorting,
+        columnFilters,
+        onPageChange: (table: Table<any>, page: number, perPage: number) => {
+            persistListStateToUrl(table, { page, perPage });
+            if (pageId) {
+                setTableSettings(pageId, 'pageSize', perPage);
+            }
+        },
+        onSortChange: (table: Table<any>, sorting: SortingState) => {
+            persistListStateToUrl(table, { sort: sorting });
+        },
+        onFilterChange: (table: Table<any>, filters: ColumnFiltersState) => {
+            persistListStateToUrl(table, { filters });
+            if (pageId) {
+                setTableSettings(pageId, 'columnFilters', filters);
+            }
+        },
+        onColumnVisibilityChange: (table: Table<any>, columnVisibility: any) => {
+            if (pageId) {
+                setTableSettings(pageId, 'columnVisibility', columnVisibility);
+            }
+        },
+        facetedFilters,
+        rowActions,
+        bulkActions,
+        setTableOptions,
+        transformData,
+        registerRefresher,
+    };
+
     return (
         <Page pageId={pageId}>
             <PageTitle>{title}</PageTitle>
@@ -543,44 +602,9 @@ export function ListPage<
             <PageLayout>
                 <FullWidthPageBlock blockId="list-table">
                     <PaginatedListDataTable
-                        listQuery={listQuery}
-                        deleteMutation={deleteMutation}
-                        transformVariables={transformVariables}
-                        customizeColumns={customizeColumns as any}
-                        additionalColumns={additionalColumns as any}
-                        defaultColumnOrder={columnOrder as any}
-                        defaultVisibility={columnVisibility as any}
-                        onSearchTermChange={onSearchTermChange}
-                        page={pagination.page}
-                        itemsPerPage={pagination.itemsPerPage}
-                        sorting={sorting}
-                        columnFilters={columnFilters}
-                        onPageChange={(table, page, perPage) => {
-                            persistListStateToUrl(table, { page, perPage });
-                            if (pageId) {
-                                setTableSettings(pageId, 'pageSize', perPage);
-                            }
-                        }}
-                        onSortChange={(table, sorting) => {
-                            persistListStateToUrl(table, { sort: sorting });
-                        }}
-                        onFilterChange={(table, filters) => {
-                            persistListStateToUrl(table, { filters });
-                            if (pageId) {
-                                setTableSettings(pageId, 'columnFilters', filters);
-                            }
-                        }}
-                        onColumnVisibilityChange={(table, columnVisibility) => {
-                            if (pageId) {
-                                setTableSettings(pageId, 'columnVisibility', columnVisibility);
-                            }
-                        }}
-                        facetedFilters={facetedFilters}
-                        rowActions={rowActions}
-                        bulkActions={bulkActions}
-                        setTableOptions={setTableOptions}
-                        transformData={transformData}
-                        registerRefresher={registerRefresher}
+                        {...commonTableProps}
+                        onReorder={onReorder}
+                        disableDragAndDrop={disableDragAndDrop}
                     />
                 </FullWidthPageBlock>
             </PageLayout>

package/src/lib/hooks/use-drag-and-drop.ts

@@ -0,0 +1,86 @@
+import { DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+interface UseDragAndDropOptions<TData> {
+    data: TData[];
+    onReorder?: (oldIndex: number, newIndex: number, item: TData, allItems?: TData[]) => void | Promise<void>;
+    onError?: (error: Error) => void;
+    disabled?: boolean;
+}
+
+/**
+ * @description
+ * Provides the sensors and state management for drag and drop functionality.
+ *
+ *
+ * @docsCategory hooks
+ * @docsPage useDragAndDrop
+ * @docsWeight 0
+ * @since 3.3.0
+ */
+export function useDragAndDrop<TData = any>(options: UseDragAndDropOptions<TData>) {
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        }),
+    );
+
+    const { data, onReorder, disabled = false } = options;
+
+    const [localData, setLocalData] = useState<TData[]>(data);
+    const [isReordering, setIsReordering] = useState(false);
+
+    // Update local data when data prop changes (but not during reordering)
+    useEffect(() => {
+        if (!isReordering) {
+            setLocalData(data);
+        }
+    }, [data, isReordering]);
+
+    const handleDragEnd = useCallback(
+        async (event: DragEndEvent) => {
+            const { active, over } = event;
+
+            if (!over || active.id === over.id || !onReorder || disabled) {
+                return;
+            }
+
+            const oldIndex = localData.findIndex(item => (item as { id: string }).id === active.id);
+            const newIndex = localData.findIndex(item => (item as { id: string }).id === over.id);
+
+            if (oldIndex === -1 || newIndex === -1) {
+                return;
+            }
+
+            // Optimistically update the UI
+            const originalState = [...localData];
+            const newData = arrayMove(localData, oldIndex, newIndex);
+            setLocalData(newData);
+            setIsReordering(true);
+
+            try {
+                // Call the user's onReorder callback with all items for context
+                await onReorder(oldIndex, newIndex, localData[oldIndex], localData);
+            } catch (error) {
+                // Revert on error
+                setLocalData(originalState);
+                options.onError?.(error as Error);
+            } finally {
+                setIsReordering(false);
+            }
+        },
+        [localData, onReorder, disabled],
+    );
+
+    const itemIds = useMemo(() => localData.map(item => (item as { id: string }).id), [localData]);
+
+    return {
+        sensors,
+        localData,
+        handleDragEnd,
+        itemIds,
+        isReordering,
+    };
+}