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

package/src/lib/components/shared/assigned-channels.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Plus } from 'lucide-react';
+
+import { ChannelChip } from '@/vdb/components/shared/channel-chip.js';
+import { AssignToChannelDialog } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { usePriceFactor } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
+import type { SimpleChannel } from '@/vdb/providers/channel-provider.js';
+
+interface AssignedChannelsProps {
+    channels: SimpleChannel[];
+    entityId: string;
+    canUpdate?: boolean;
+    assignMutationFn: (variables: any) => Promise<any>;
+    removeMutationFn: (variables: any) => Promise<any>;
+}
+
+export function AssignedChannels({
+    channels,
+    entityId,
+    canUpdate = true,
+    assignMutationFn,
+    removeMutationFn,
+}: AssignedChannelsProps) {
+    const { t } = useLingui();
+    const queryClient = useQueryClient();
+    const { activeChannel, channels: allChannels } = useChannel();
+    const [assignDialogOpen, setAssignDialogOpen] = useState(false);
+    const { priceFactor, priceFactorField } = usePriceFactor();
+
+    const { mutate: removeFromChannel, isPending: isRemoving } = useMutation({
+        mutationFn: removeMutationFn,
+        onSuccess: () => {
+            toast.success(t`Successfully removed product from channel`);
+            queryClient.invalidateQueries({ queryKey: ['DetailPage', 'product', { id: entityId }] });
+        },
+        onError: () => {
+            toast.error(t`Failed to remove product from channel`);
+        },
+    });
+
+    async function onRemoveHandler(channelId: string) {
+        if (channelId === activeChannel?.id) {
+            toast.error(t`Cannot remove from active channel`);
+            return;
+        }
+        removeFromChannel({
+            input: {
+                productIds: [entityId],
+                channelId,
+            },
+        });
+    }
+
+    const handleAssignSuccess = () => {
+        queryClient.invalidateQueries({ queryKey: ['DetailPage', 'product', { id: entityId }] });
+        setAssignDialogOpen(false);
+    };
+
+    // Only show add button if there are more channels available
+    const availableChannels = allChannels.filter(ch => !channels.map(c => c.id).includes(ch.id));
+    const showAddButton = canUpdate && availableChannels.length > 0;
+
+    return (
+        <>
+            <div className="flex flex-wrap gap-1 mb-2">
+                {channels.filter(c => c.code !== DEFAULT_CHANNEL_CODE).map((channel: SimpleChannel) => {
+                    return (
+                        <ChannelChip key={channel.id} channel={channel} removable={canUpdate && channel.id !== activeChannel?.id} onRemove={onRemoveHandler} />
+                    );
+                })}
+            </div>
+            {showAddButton && (
+                <>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setAssignDialogOpen(true)}
+                        disabled={isRemoving}
+                    >
+                        <Plus className="h-4 w-4 mr-1" />
+                        <Trans>Assign to channel</Trans>
+                    </Button>
+                    <AssignToChannelDialog
+                        entityType="product"
+                        open={assignDialogOpen}
+                        onOpenChange={setAssignDialogOpen}
+                        entityIds={[entityId]}
+                        mutationFn={assignMutationFn}
+                        onSuccess={handleAssignSuccess}
+                        buildInput={(channelId: string) => ({
+                            productIds: [entityId],
+                            channelId,
+                            priceFactor,
+                        })}
+                        additionalFields={priceFactorField}
+                    />
+                </>
+            )}
+        </>
+    );
+}

package/src/lib/components/shared/assigned-facet-values.tsx

@@ -18,17 +18,15 @@ interface AssignedFacetValuesProps {
     value?: string[] | null;
     facetValues: FacetValue[];
     canUpdate?: boolean;
-    onBlur?: () => void;
     onChange?: (value: string[]) => void;
 }
 
 export function AssignedFacetValues({
-                                        value = [],
-                                        facetValues,
-                                        canUpdate = true,
-                                        onBlur,
-                                        onChange,
-                                    }: AssignedFacetValuesProps) {
+    value = [],
+    facetValues,
+    canUpdate = true,
+    onChange,
+}: Readonly<AssignedFacetValuesProps>) {
     const [knownFacetValues, setKnownFacetValues] = useState<FacetValue[]>(facetValues);
 
     function onSelectHandler(facetValue: FacetValue) {

package/src/lib/components/shared/channel-chip.tsx

@@ -0,0 +1,43 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { X } from 'lucide-react';
+import type { SimpleChannel } from '@/vdb/providers/channel-provider.js';
+
+interface ChannelChipProps {
+    channel: SimpleChannel;
+    removable?: boolean;
+    onRemove?: (id: string) => void;
+}
+
+/**
+ * @description
+ * A component for displaying a channel as a chip.
+ *
+ * @docsCategory components
+ * @since 3.5.2
+ */
+export function ChannelChip({
+    channel,
+    removable = true,
+    onRemove,
+}: Readonly<ChannelChipProps>) {
+    return (
+        <Badge
+            variant="secondary"
+            className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
+        >
+            <div className="flex items-center gap-1.5">
+                <span className="font-medium">{channel.code}</span>
+            </div>
+            {removable && (
+                <button
+                    type="button"
+                    className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-muted/30 hover:cursor-pointer"
+                    onClick={() => onRemove?.(channel.id)}
+                    aria-label={`Remove ${channel.code} from ${channel.token}`}
+                >
+                    <X className="h-3 w-3" />
+                </button>
+            )}
+        </Badge>
+    );
+}

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -234,6 +234,21 @@ export interface PaginatedListDataTableProps<
      * the list needs to be refreshed.
      */
     registerRefresher?: PaginatedListRefresherRegisterFn;
+    /**
+     * @description
+     * Callback when items are reordered via drag and drop.
+     * When provided, enables drag-and-drop functionality.
+     */
+    onReorder?: (
+        oldIndex: number,
+        newIndex: number,
+        item: PaginatedListItemFields<T>,
+    ) => 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
+     */
+    disableDragAndDrop?: boolean;
 }
 
 export const PaginatedListDataTableKey = 'PaginatedListDataTable';
@@ -378,6 +393,8 @@ export function PaginatedListDataTable<
     setTableOptions,
     transformData,
     registerRefresher,
+    onReorder,
+    disableDragAndDrop = false,
 }: Readonly<PaginatedListDataTableProps<T, U, V, AC>>) {
     const [searchTerm, setSearchTerm] = React.useState<string>('');
     const debouncedSearchTerm = useDebounce(searchTerm, 500);
@@ -498,6 +515,8 @@ export function PaginatedListDataTable<
                 bulkActions={bulkActions}
                 setTableOptions={setTableOptions}
                 onRefresh={refetchPaginatedList}
+                onReorder={onReorder}
+                disableDragAndDrop={disableDragAndDrop}
             />
         </PaginatedListContext.Provider>
     );

package/src/lib/components/ui/alert.tsx

@@ -8,7 +8,7 @@ const alertVariants = cva(
     {
         variants: {
             variant: {
-                default: 'bg-background text-foreground',
+                default: 'bg-background text-primary/80',
                 destructive:
                     'border-destructive/50 text-destructive dark:text-destructive-foreground/80 dark:border-destructive [&>svg]:text-current dark:bg-destructive/50',
             },

package/src/lib/components/ui/dropdown-menu.tsx

@@ -161,6 +161,8 @@ function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuP
     return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
+const customDropdownMenuSubTriggerClassNames = 'data-[inset]:ps-8';
+const customChevronIconClassNames = 'ms-auto rtl:rotate-180';
 function DropdownMenuSubTrigger({
     className,
     inset,
@@ -175,12 +177,13 @@ function DropdownMenuSubTrigger({
             data-inset={inset}
             className={cn(
                 'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+                customDropdownMenuSubTriggerClassNames,
                 className,
             )}
             {...props}
         >
             {children}
-            <ChevronRightIcon className="ml-auto size-4" />
+            <ChevronRightIcon className={cn('size-4', customChevronIconClassNames)} />
         </DropdownMenuPrimitive.SubTrigger>
     );
 }

package/src/lib/components/ui/sidebar.tsx

@@ -443,8 +443,9 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
     );
 }
 
+const customLogicalPropsClassNames = 'text-start group-has-data-[sidebar=menu-action]/menu-item:pe-8';
 const sidebarMenuButtonVariants = cva(
-    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    `peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 ${customLogicalPropsClassNames}`,
     {
         variants: {
             variant: {

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,
+    };
+}

package/src/lib/hooks/use-saved-views.ts

@@ -113,6 +113,7 @@ export function useSavedViews() {
             scope: input.scope,
             filters: input.filters,
             searchTerm: input.searchTerm,
+            columnConfig: input.columnConfig,
             pageId,
             blockId: blockId === 'default' ? undefined : blockId,
             createdAt: new Date().toISOString(),

package/src/lib/providers/channel-provider.tsx

@@ -51,7 +51,13 @@ const channelsDocument = graphql(
 
 // Define the type for a channel
 type ActiveChannel = ResultOf<typeof activeChannelDocument>['activeChannel'];
-type Channel = ResultOf<typeof channelFragment>;
+export type Channel = ResultOf<typeof channelFragment>;
+
+/**
+ * Simplified channel type with only the basic fields (id, code, token)
+ * Used in components that don't need the full channel information
+ */
+export type SimpleChannel = Pick<Channel, 'id' | 'code' | 'token'>;
 
 /**
  * @description

package/src/lib/types/saved-views.ts

@@ -1,10 +1,12 @@
 import { ColumnFiltersState } from '@tanstack/react-table';
+import { ColumnConfig } from '../components/data-table/data-table-context.js';
 
 export interface SavedView {
     id: string;
     name: string;
     scope: 'user' | 'global';
     filters: ColumnFiltersState;
+    columnConfig: ColumnConfig;
     searchTerm?: string;
     pageId?: string;
     blockId?: string;
@@ -28,6 +30,7 @@ export interface SaveViewInput {
     name: string;
     scope: 'user' | 'global';
     filters: ColumnFiltersState;
+    columnConfig: ColumnConfig;
     searchTerm?: string;
 }