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

package/src/lib/components/data-input/number-input.tsx

@@ -3,11 +3,14 @@ import { Input } from '@/vdb/components/ui/input.js';
 
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { ReactNode } from 'react';
 
 export type NumberInputProps = DashboardFormComponentProps & {
     min?: number;
     max?: number;
     step?: number;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
 };
 
 /**
@@ -17,28 +20,43 @@ export type NumberInputProps = DashboardFormComponentProps & {
  * @docsCategory form-components
  * @docsPage NumberInput
  */
-export function NumberInput({ fieldDef, onChange, ...fieldProps }: Readonly<NumberInputProps>) {
+export function NumberInput({
+    fieldDef,
+    onChange,
+    prefix: overridePrefix,
+    suffix: overrideSuffix,
+    ...fieldProps
+}: Readonly<NumberInputProps>) {
     const readOnly = fieldProps.disabled || isReadonlyField(fieldDef);
     const isFloat = fieldDef ? fieldDef.type === 'float' : false;
     const min = fieldProps.min ?? fieldDef?.ui?.min;
     const max = fieldProps.max ?? fieldDef?.ui?.max;
     const step = fieldProps.step ?? (fieldDef?.ui?.step || (isFloat ? 0.01 : 1));
-    const prefix = fieldDef?.ui?.prefix;
-    const suffix = fieldDef?.ui?.suffix;
+    const prefix = overridePrefix ?? fieldDef?.ui?.prefix;
+    const suffix = overrideSuffix ?? fieldDef?.ui?.suffix;
     const shouldUseAffixedInput = prefix || suffix;
+    const value = fieldProps.value ?? '';
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (readOnly) return;
-        const numValue = e.target.valueAsNumber;
+
+        let numValue = e.target.valueAsNumber;
+
+        if (Number.isNaN(numValue) && e.target.value) {
+            const normalized = e.target.value.replace(',', '.');
+            numValue = Number(normalized);
+        }
+
         if (Number.isNaN(numValue)) {
             onChange(null);
         } else {
-            onChange(e.target.valueAsNumber);
+            onChange(numValue);
         }
     };
     if (shouldUseAffixedInput) {
         return (
             <AffixedInput
                 {...fieldProps}
+                value={value}
                 type="number"
                 onChange={handleChange}
                 min={min}
@@ -57,6 +75,7 @@ export function NumberInput({ fieldDef, onChange, ...fieldProps }: Readonly<Numb
             type="number"
             onChange={handleChange}
             {...fieldProps}
+            value={value}
             min={min}
             max={max}
             step={step}

package/src/lib/components/data-table/data-table-context.tsx

@@ -1,8 +1,10 @@
 'use client';
-
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import React, { createContext, ReactNode, useContext } from 'react';
 
+export type ColumnConfig = { columnOrder: string[]; columnVisibility: Record<string, boolean> };
+
 interface DataTableContextValue {
     columnFilters: ColumnFiltersState;
     setColumnFilters: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
@@ -16,7 +18,7 @@ interface DataTableContextValue {
     onRefresh?: () => void;
     isLoading?: boolean;
     table?: Table<any>;
-    handleApplyView: (filters: ColumnFiltersState, searchTerm?: string) => void;
+    handleApplyView: (filters: ColumnFiltersState, columnConfig: ColumnConfig, searchTerm?: string) => void;
 }
 
 const DataTableContext = createContext<DataTableContextValue | undefined>(undefined);
@@ -52,7 +54,13 @@ export function DataTableProvider({
     isLoading,
     table,
 }: DataTableProviderProps) {
-    const handleApplyView = (filters: ColumnFiltersState, viewSearchTerm?: string) => {
+    const { setTableSettings } = useUserSettings();
+
+    const handleApplyView = (
+        filters: ColumnFiltersState,
+        columnConfig: ColumnConfig,
+        viewSearchTerm?: string,
+    ) => {
         setColumnFilters(filters);
         if (viewSearchTerm !== undefined && onSearchTermChange) {
             setSearchTerm(viewSearchTerm);
@@ -61,6 +69,13 @@ export function DataTableProvider({
         if (onFilterChange && table) {
             onFilterChange(table, filters);
         }
+
+        if (pageId && columnConfig.columnOrder) {
+            setTableSettings(pageId, 'columnOrder', columnConfig.columnOrder);
+        }
+        if (pageId && columnConfig.columnVisibility) {
+            setTableSettings(pageId, 'columnVisibility', columnConfig.columnVisibility);
+        }
     };
 
     const value: DataTableContextValue = {

package/src/lib/components/data-table/data-table-utils.ts

@@ -1,4 +1,4 @@
-import { AccessorFnColumnDef } from '@tanstack/react-table';
+import { AccessorFnColumnDef, ExpandedState } from '@tanstack/react-table';
 import { AccessorKeyColumnDef } from '@tanstack/table-core';
 
 /**
@@ -49,3 +49,243 @@ export function getStandardizedDefaultColumnOrder<T extends string | number | sy
     const rest = defaultColumnOrder.filter(c => !standardFirstColumns.has(c as string));
     return [...standardFirstColumns, ...rest] as T[];
 }
+
+/**
+ * Hierarchical item type with parent-child relationships
+ */
+export interface HierarchicalItem {
+    id: string;
+    parentId?: string | null;
+    breadcrumbs?: Array<{ id: string }>;
+    children?: Array<{ id: string }> | null;
+}
+
+/**
+ * Gets the parent ID of a hierarchical item
+ */
+export function getItemParentId<T extends HierarchicalItem>(
+    item: T | null | undefined,
+): string | null | undefined {
+    return item?.parentId || item?.breadcrumbs?.[0]?.id;
+}
+
+/**
+ * Gets all siblings (items with the same parent) for a given parent ID
+ */
+export function getItemSiblings<T extends HierarchicalItem>(
+    items: T[],
+    parentId: string | null | undefined,
+): T[] {
+    return items.filter(item => getItemParentId(item) === parentId);
+}
+
+/**
+ * Checks if moving an item to a new parent would create a circular reference
+ */
+export function isCircularReference<T extends HierarchicalItem>(
+    item: T,
+    targetParentId: string,
+    items: T[],
+): boolean {
+    const targetParentItem = items.find(i => i.id === targetParentId);
+    return (
+        item.children?.some(child => {
+            if (child.id === targetParentId) return true;
+            const targetBreadcrumbIds = targetParentItem?.breadcrumbs?.map(b => b.id) || [];
+            return targetBreadcrumbIds.includes(item.id);
+        }) ?? false
+    );
+}
+
+/**
+ * Result of calculating the target position for a drag and drop operation
+ */
+export interface TargetPosition {
+    targetParentId: string;
+    adjustedIndex: number;
+}
+
+/**
+ * Context for drag and drop position calculation
+ */
+interface DragContext<T extends HierarchicalItem> {
+    item: T;
+    targetItem: T | undefined;
+    previousItem: T | null;
+    isDraggingDown: boolean;
+    isTargetExpanded: boolean;
+    isPreviousExpanded: boolean;
+    sourceParentId: string;
+    items: T[];
+}
+
+/**
+ * Checks if dragging down directly onto an expanded item
+ */
+function isDroppingIntoExpandedTarget<T extends HierarchicalItem>(context: DragContext<T>): boolean {
+    const { isDraggingDown, targetItem, item, isTargetExpanded } = context;
+    return isDraggingDown && targetItem?.id !== item.id && isTargetExpanded;
+}
+
+/**
+ * Checks if dragging down into an expanded item's children area
+ */
+function isDroppingIntoExpandedPreviousChildren<T extends HierarchicalItem>(
+    context: DragContext<T>,
+): boolean {
+    const { isDraggingDown, targetItem, previousItem, item, isPreviousExpanded } = context;
+    return (
+        isDraggingDown &&
+        previousItem !== null &&
+        targetItem?.id !== item.id &&
+        isPreviousExpanded &&
+        targetItem?.parentId === previousItem.id
+    );
+}
+
+/**
+ * Checks if dragging up into an expanded item's children area
+ */
+function isDroppingIntoExpandedPreviousWhenDraggingUp<T extends HierarchicalItem>(
+    context: DragContext<T>,
+): boolean {
+    const { isDraggingDown, previousItem, isPreviousExpanded } = context;
+    return !isDraggingDown && previousItem !== null && isPreviousExpanded;
+}
+
+/**
+ * Creates a position for dropping into an expanded item as first child
+ */
+function createFirstChildPosition(parentId: string): TargetPosition {
+    return { targetParentId: parentId, adjustedIndex: 0 };
+}
+
+/**
+ * Calculates position for cross-parent drag operations
+ */
+function calculateCrossParentPosition<T extends HierarchicalItem>(
+    targetItem: T,
+    sourceParentId: string,
+    items: T[],
+): TargetPosition | null {
+    const targetItemParentId = getItemParentId(targetItem);
+
+    if (!targetItemParentId || targetItemParentId === sourceParentId) {
+        return null;
+    }
+
+    const targetSiblings = getItemSiblings(items, targetItemParentId);
+    const adjustedIndex = targetSiblings.findIndex(i => i.id === targetItem.id);
+
+    return { targetParentId: targetItemParentId, adjustedIndex };
+}
+
+/**
+ * Calculates position when dropping at the end of the list
+ */
+function calculateDropAtEndPosition<T extends HierarchicalItem>(
+    previousItem: T | null,
+    sourceParentId: string,
+    items: T[],
+): TargetPosition | null {
+    if (!previousItem) {
+        return null;
+    }
+
+    const previousItemParentId = getItemParentId(previousItem);
+
+    if (!previousItemParentId || previousItemParentId === sourceParentId) {
+        return null;
+    }
+
+    const targetSiblings = getItemSiblings(items, previousItemParentId);
+    return { targetParentId: previousItemParentId, adjustedIndex: targetSiblings.length };
+}
+
+/**
+ * Determines the target parent and index for a hierarchical drag and drop operation
+ */
+export function calculateDragTargetPosition<T extends HierarchicalItem>(params: {
+    item: T;
+    oldIndex: number;
+    newIndex: number;
+    items: T[];
+    sourceParentId: string;
+    expanded: ExpandedState;
+}): TargetPosition {
+    const { item, oldIndex, newIndex, items, sourceParentId, expanded } = params;
+
+    const targetItem = items[newIndex];
+    const previousItem = newIndex > 0 ? items[newIndex - 1] : null;
+
+    const context: DragContext<T> = {
+        item,
+        targetItem,
+        previousItem,
+        isDraggingDown: oldIndex < newIndex,
+        isTargetExpanded: targetItem ? !!expanded[targetItem.id as keyof ExpandedState] : false,
+        isPreviousExpanded: previousItem ? !!expanded[previousItem.id as keyof ExpandedState] : false,
+        sourceParentId,
+        items,
+    };
+
+    // Handle dropping into expanded items (becomes first child)
+    if (isDroppingIntoExpandedTarget(context)) {
+        return createFirstChildPosition(targetItem.id);
+    }
+
+    if (previousItem && isDroppingIntoExpandedPreviousChildren(context)) {
+        return createFirstChildPosition(previousItem.id);
+    }
+
+    if (previousItem && isDroppingIntoExpandedPreviousWhenDraggingUp(context)) {
+        return createFirstChildPosition(previousItem.id);
+    }
+
+    // Handle cross-parent drag operations
+    if (targetItem?.id !== item.id) {
+        const crossParentPosition = calculateCrossParentPosition(targetItem, sourceParentId, items);
+        if (crossParentPosition) {
+            return crossParentPosition;
+        }
+    }
+
+    // Handle dropping at the end of the list
+    if (!targetItem && previousItem) {
+        const dropAtEndPosition = calculateDropAtEndPosition(previousItem, sourceParentId, items);
+        if (dropAtEndPosition) {
+            return dropAtEndPosition;
+        }
+    }
+
+    // Default: stay in the same parent at the beginning
+    return { targetParentId: sourceParentId, adjustedIndex: 0 };
+}
+
+/**
+ * Calculates the adjusted sibling index when reordering within the same parent
+ */
+export function calculateSiblingIndex<T extends HierarchicalItem>(params: {
+    item: T;
+    oldIndex: number;
+    newIndex: number;
+    items: T[];
+    parentId: string;
+}): number {
+    const { item, oldIndex, newIndex, items, parentId } = params;
+
+    const siblings = getItemSiblings(items, parentId);
+    const oldSiblingIndex = siblings.findIndex(i => i.id === item.id);
+    const isDraggingDown = oldIndex < newIndex;
+
+    let newSiblingIndex = oldSiblingIndex;
+    const [start, end] = isDraggingDown ? [oldIndex + 1, newIndex] : [newIndex, oldIndex - 1];
+
+    for (let i = start; i <= end; i++) {
+        if (getItemParentId(items[i]) === parentId) {
+            newSiblingIndex += isDraggingDown ? 1 : -1;
+        }
+    }
+
+    return newSiblingIndex;
+}