@vendure/dashboard 3.3.6-master-202507030732 → 3.3.6-master-202507030835

package/src/app/routes/_authenticated/_collections/components/move-collections-dialog.tsx

@@ -0,0 +1,430 @@
+import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+
+import { Alert, AlertDescription } from '@/components/ui/alert.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { Input } from '@/components/ui/input.js';
+import { ScrollArea } from '@/components/ui/scroll-area.js';
+import { api } from '@/graphql/api.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { ChevronRight, Folder, FolderOpen, Search } from 'lucide-react';
+
+import { collectionListForMoveDocument, moveCollectionDocument } from '../collections.graphql.js';
+
+type Collection = {
+    id: string;
+    name: string;
+    slug: string;
+    children?: { id: string }[] | null;
+    breadcrumbs: Array<{ id: string; name: string; slug: string }>;
+    parentId?: string;
+};
+
+interface MoveCollectionsDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    collectionsToMove: Collection[];
+    onSuccess?: () => void;
+}
+
+interface CollectionTreeNodeProps {
+    collection: Collection;
+    depth: number;
+    expanded: Record<string, boolean>;
+    onToggleExpanded: (id: string) => void;
+    onSelect: (collection: Collection) => void;
+    selectedCollectionId?: string;
+    collectionsToMove: Collection[];
+    childCollectionsByParentId: Record<string, Collection[]>;
+}
+
+interface TargetAlertProps {
+    selectedCollectionId?: string;
+    collectionsToMove: Collection[];
+    topLevelCollectionId?: string;
+    collectionNameCache: React.MutableRefObject<Map<string, string>>;
+}
+
+interface MoveToTopLevelProps {
+    selectedCollectionId?: string;
+    topLevelCollectionId?: string;
+    onSelect: (id?: string) => void;
+}
+
+function TargetAlert({
+    selectedCollectionId,
+    collectionsToMove,
+    topLevelCollectionId,
+    collectionNameCache,
+}: Readonly<TargetAlertProps>) {
+    return (
+        <Alert className={selectedCollectionId ? 'border-blue-200 bg-blue-50' : ''}>
+            <Folder className="h-4 w-4" />
+            <AlertDescription>
+                {selectedCollectionId ? (
+                    <Trans>
+                        Moving {collectionsToMove.length} collection
+                        {collectionsToMove.length === 1 ? '' : 's'} into{' '}
+                        {selectedCollectionId === topLevelCollectionId
+                            ? 'top level'
+                            : collectionNameCache.current.get(selectedCollectionId) || 'selected collection'}
+                    </Trans>
+                ) : (
+                    <Trans>Select a destination collection</Trans>
+                )}
+            </AlertDescription>
+        </Alert>
+    );
+}
+
+function MoveToTopLevel({
+    selectedCollectionId,
+    topLevelCollectionId,
+    onSelect,
+}: Readonly<MoveToTopLevelProps>) {
+    return (
+        <button
+            type="button"
+            className={`flex items-center gap-2 py-2 px-3 hover:bg-accent rounded-sm cursor-pointer w-full text-left ${
+                selectedCollectionId === topLevelCollectionId ? 'bg-accent' : ''
+            }`}
+            onClick={() => onSelect(topLevelCollectionId)}
+        >
+            <div className="w-3 h-3" />
+            <div className="flex items-center gap-2">
+                <Folder className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">
+                    <Trans>Move to the top level</Trans>
+                </span>
+            </div>
+        </button>
+    );
+}
+
+function CollectionTreeNode({
+    collection,
+    depth,
+    expanded,
+    onToggleExpanded,
+    onSelect,
+    selectedCollectionId,
+    collectionsToMove,
+    childCollectionsByParentId,
+}: Readonly<CollectionTreeNodeProps>) {
+    const hasChildren = collection.children && collection.children.length > 0;
+    const isExpanded = expanded[collection.id];
+    const isSelected = selectedCollectionId === collection.id;
+    const isBeingMoved = collectionsToMove.some(c => c.id === collection.id);
+    const isChildOfBeingMoved = collectionsToMove.some(c => collection.breadcrumbs.some(b => b.id === c.id));
+
+    // Don't allow selecting collections that are being moved or are children of collections being moved
+    const isSelectable = !isBeingMoved && !isChildOfBeingMoved;
+
+    const childCollections = childCollectionsByParentId[collection.id] || [];
+
+    return (
+        <div className="my-0.5">
+            <div className="flex items-center" style={{ marginLeft: depth * 20 }}>
+                {hasChildren && (
+                    <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-4 w-4 p-0 mr-1"
+                        onClick={() => onToggleExpanded(collection.id)}
+                    >
+                        {isExpanded ? (
+                            <ChevronRight className="h-3 w-3 rotate-90" />
+                        ) : (
+                            <ChevronRight className="h-3 w-3" />
+                        )}
+                    </Button>
+                )}
+                {!hasChildren && <div className="w-5 h-4 mr-1" />}
+                <button
+                    type="button"
+                    className={`flex items-center gap-2 py-2 px-3 hover:bg-accent rounded-sm cursor-pointer w-full text-left ${
+                        isSelected ? 'bg-accent' : ''
+                    } ${!isSelectable ? 'opacity-50 cursor-not-allowed' : ''}`}
+                    onClick={() => {
+                        if (isSelectable) {
+                            onSelect(collection);
+                        }
+                    }}
+                    disabled={!isSelectable}
+                >
+                    <div className="flex items-center gap-2">
+                        {hasChildren &&
+                            (isExpanded ? (
+                                <FolderOpen className="h-4 w-4 text-muted-foreground" />
+                            ) : (
+                                <Folder className="h-4 w-4 text-muted-foreground" />
+                            ))}
+                        {!hasChildren && <div className="w-4 h-4" />}
+                        <div className="flex flex-col">
+                            <span className="text-sm">{collection.name}</span>
+                            {collection.breadcrumbs.length > 1 && (
+                                <span className="text-xs text-muted-foreground">
+                                    {collection.breadcrumbs
+                                        .slice(1)
+                                        .map(b => b.name)
+                                        .join(' / ')}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                </button>
+            </div>
+            {hasChildren && isExpanded && (
+                <div>
+                    {childCollections.map((childCollection: Collection) => (
+                        <CollectionTreeNode
+                            key={childCollection.id}
+                            collection={childCollection}
+                            depth={depth + 1}
+                            expanded={expanded}
+                            onToggleExpanded={onToggleExpanded}
+                            onSelect={onSelect}
+                            selectedCollectionId={selectedCollectionId}
+                            collectionsToMove={collectionsToMove}
+                            childCollectionsByParentId={childCollectionsByParentId}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export function MoveCollectionsDialog({
+    open,
+    onOpenChange,
+    collectionsToMove,
+    onSuccess,
+}: Readonly<MoveCollectionsDialogProps>) {
+    const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+    const [selectedCollectionId, setSelectedCollectionId] = useState<string>();
+    const [searchTerm, setSearchTerm] = useState('');
+    const debouncedSearchTerm = useDebounce(searchTerm, 300);
+    const collectionNameCache = useRef<Map<string, string>>(new Map());
+    const queryClient = useQueryClient();
+    const { i18n } = useLingui();
+    const collectionForMoveKey = ['collectionsForMove', debouncedSearchTerm];
+    const childCollectionsForMoveKey = (collectionId?: string) =>
+        collectionId ? ['childCollectionsForMove', collectionId] : ['childCollectionsForMove'];
+
+    const { data: collectionsData, isLoading } = useQuery({
+        queryKey: collectionForMoveKey,
+        queryFn: () =>
+            api.query(collectionListForMoveDocument, {
+                options: {
+                    take: 100,
+                    topLevelOnly: !debouncedSearchTerm,
+                    ...(debouncedSearchTerm && {
+                        filter: {
+                            name: { contains: debouncedSearchTerm },
+                        },
+                    }),
+                },
+            }),
+        staleTime: 1000 * 60 * 5,
+        enabled: open,
+    });
+
+    const topLevelCollectionId = collectionsData?.collections.items[0]?.parentId;
+    const selectionHasTopLevelParent = collectionsToMove.some(c => c.parentId === topLevelCollectionId);
+
+    // Load child collections for expanded nodes
+    const childrenQueries = useQueries({
+        queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
+            return {
+                queryKey: childCollectionsForMoveKey(collectionId),
+                queryFn: () =>
+                    api.query(collectionListForMoveDocument, {
+                        options: {
+                            filter: {
+                                parentId: { eq: collectionId },
+                            },
+                        },
+                    }),
+                staleTime: 1000 * 60 * 5,
+            };
+        }),
+    });
+
+    const childCollectionsByParentId = childrenQueries.reduce(
+        (acc, query, index) => {
+            const collectionId = Object.keys(expanded)[index];
+            if (query.data) {
+                const collections = query.data.collections.items as Collection[];
+                // Populate the name cache with these collections
+                collections.forEach(collection => {
+                    collectionNameCache.current.set(collection.id, collection.name);
+                });
+                acc[collectionId] = collections;
+            }
+            return acc;
+        },
+        {} as Record<string, Collection[]>,
+    );
+
+    const moveCollectionsMutation = useMutation({
+        mutationFn: api.mutate(moveCollectionDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Collections moved successfully'));
+            queryClient.invalidateQueries({ queryKey: collectionForMoveKey });
+            queryClient.invalidateQueries({ queryKey: childCollectionsForMoveKey() });
+            onSuccess?.();
+            onOpenChange(false);
+        },
+        onError: error => {
+            toast.error(i18n.t('Failed to move collections'));
+            console.error('Move collections error:', error);
+        },
+    });
+
+    const handleToggleExpanded = (id: string) => {
+        setExpanded(prev => ({
+            ...prev,
+            [id]: !prev[id],
+        }));
+    };
+
+    const handleSelect = (collection: Collection) => {
+        setSelectedCollectionId(collection.id);
+    };
+
+    const handleMove = () => {
+        if (!selectedCollectionId) {
+            toast.error(i18n.t('Please select a target collection'));
+            return;
+        }
+        // Move to a specific parent using moveCollection
+        const movePromises = collectionsToMove.map((collection: Collection) =>
+            moveCollectionsMutation.mutateAsync({
+                input: {
+                    collectionId: collection.id,
+                    parentId: selectedCollectionId,
+                    index: 0, // Move to the beginning of the target collection
+                },
+            }),
+        );
+        Promise.all(movePromises);
+    };
+
+    const collections = (collectionsData?.collections.items as Collection[]) || [];
+
+    // Populate the name cache with top-level collections
+    collections.forEach(collection => {
+        collectionNameCache.current.set(collection.id, collection.name);
+    });
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[600px] max-h-[80vh]">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Move Collections</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>
+                            Select a target collection to move{' '}
+                            {collectionsToMove.length === 1
+                                ? 'this collection'
+                                : `${collectionsToMove.length} collections`}{' '}
+                            to.
+                        </Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="px-6 py-3 bg-muted/50 border-b">
+                    <div className="flex flex-wrap gap-2">
+                        {collectionsToMove.map(collection => (
+                            <div
+                                key={collection.id}
+                                className="flex items-center gap-2 px-3 py-1 bg-background border rounded-md text-sm"
+                            >
+                                <Folder className="h-3 w-3 text-muted-foreground" />
+                                <span>{collection.name}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div className="py-4">
+                    <div className="px-6 pb-3">
+                        <div className="relative mb-3">
+                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                            <Input
+                                placeholder={i18n.t('Filter by collection name')}
+                                value={searchTerm}
+                                onChange={e => setSearchTerm(e.target.value)}
+                                className="pl-10"
+                            />
+                        </div>
+                        <ScrollArea className="h-[400px]">
+                            <div className="space-y-1">
+                                {isLoading ? (
+                                    <div className="flex items-center justify-center py-8">
+                                        <Trans>Loading collections...</Trans>
+                                    </div>
+                                ) : (
+                                    <>
+                                        {!debouncedSearchTerm && !selectionHasTopLevelParent && (
+                                            <MoveToTopLevel
+                                                selectedCollectionId={selectedCollectionId}
+                                                topLevelCollectionId={topLevelCollectionId}
+                                                onSelect={setSelectedCollectionId}
+                                            />
+                                        )}
+                                        {collections.map((collection: Collection) => (
+                                            <CollectionTreeNode
+                                                key={collection.id}
+                                                collection={collection}
+                                                depth={0}
+                                                expanded={expanded}
+                                                onToggleExpanded={handleToggleExpanded}
+                                                onSelect={handleSelect}
+                                                selectedCollectionId={selectedCollectionId}
+                                                collectionsToMove={collectionsToMove}
+                                                childCollectionsByParentId={childCollectionsByParentId}
+                                            />
+                                        ))}
+                                    </>
+                                )}
+                            </div>
+                        </ScrollArea>
+                        <TargetAlert
+                            selectedCollectionId={selectedCollectionId}
+                            collectionsToMove={collectionsToMove}
+                            topLevelCollectionId={topLevelCollectionId}
+                            collectionNameCache={collectionNameCache}
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button
+                        onClick={handleMove}
+                        disabled={!selectedCollectionId || moveCollectionsMutation.isPending}
+                    >
+                        {moveCollectionsMutation.isPending ? (
+                            <Trans>Moving...</Trans>
+                        ) : (
+                            <Trans>Move Collections</Trans>
+                        )}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_collections/components/move-single-collection.tsx

@@ -0,0 +1,33 @@
+import { ResultOf } from 'gql.tada';
+import { useState } from 'react';
+
+import { collectionListDocument } from '../collections.graphql.js';
+import { MoveCollectionsDialog } from './move-collections-dialog.js';
+
+type Collection = ResultOf<typeof collectionListDocument>['collections']['items'][number];
+
+export function useMoveSingleCollection() {
+    const [moveDialogOpen, setMoveDialogOpen] = useState(false);
+    const [collectionsToMove, setCollectionsToMove] = useState<Collection[]>([]);
+
+    const handleMoveClick = (collection: Collection) => {
+        setCollectionsToMove([collection]);
+        setMoveDialogOpen(true);
+    };
+
+    const MoveDialog = () => (
+        <MoveCollectionsDialog
+            open={moveDialogOpen}
+            onOpenChange={setMoveDialogOpen}
+            collectionsToMove={collectionsToMove}
+            onSuccess={() => {
+                // The dialog will handle invalidating queries internally
+            }}
+        />
+    );
+
+    return {
+        handleMoveClick,
+        MoveDialog,
+    };
+}

package/src/app/routes/_authenticated/_customers/components/customer-address-card.tsx

@@ -11,6 +11,7 @@ import {
     DialogTrigger,
 } from '@/vdb/components/ui/dialog.js';
 import { api } from '@/vdb/graphql/api.js';
+import { Button } from '@/vdb/index.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { useMutation } from '@tanstack/react-query';
 import { EditIcon, TrashIcon } from 'lucide-react';
@@ -120,8 +121,10 @@ export function CustomerAddressCard({
                 <div className="flex gap-4 mt-3 pt-3 border-t border-border">
                     {editable && (
                         <Dialog open={open} onOpenChange={setOpen}>
-                            <DialogTrigger>
-                                <EditIcon className="w-4 h-4" />
+                            <DialogTrigger asChild>
+                                <Button size="icon" variant="secondary">
+                                    <EditIcon />
+                                </Button>
                             </DialogTrigger>
                             <DialogContent>
                                 <DialogHeader>
@@ -145,7 +148,9 @@ export function CustomerAddressCard({
                                 onDelete?.();
                             }}
                         >
-                            <TrashIcon className="w-4 h-4 text-destructive" />
+                            <Button size="icon" variant="destructive">
+                                <TrashIcon />
+                            </Button>
                         </ConfirmationDialog>
                     )}
                 </div>

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

@@ -81,7 +81,7 @@ export function DataTable<TData>({
     bulkActions,
     setTableOptions,
     onRefresh,
-}: DataTableProps<TData>) {
+}: Readonly<DataTableProps<TData>>) {
     const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
     const { activeChannel } = useChannel();

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

@@ -273,7 +273,7 @@ export function PaginatedListDataTable<
     setTableOptions,
     transformData,
     registerRefresher,
-}: PaginatedListDataTableProps<T, U, V, AC>) {
+}: Readonly<PaginatedListDataTableProps<T, U, V, AC>>) {
     const [searchTerm, setSearchTerm] = React.useState<string>('');
     const debouncedSearchTerm = useDebounce(searchTerm, 500);
     const queryClient = useQueryClient();

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

@@ -1,59 +1,64 @@
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDownIcon } from 'lucide-react';
-import * as React from 'react';
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
 
-import { cn } from '@/vdb/lib/utils.js';
+import { cn } from "@/vdb/lib/utils"
 
-function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-    return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
 }
 
-function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-    return (
-        <AccordionPrimitive.Item
-            data-slot="accordion-item"
-            className={cn('border-b last:border-b-0', className)}
-            {...props}
-        />
-    );
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
 }
 
 function AccordionTrigger({
-    className,
-    children,
-    ...props
+  className,
+  children,
+  ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-    return (
-        <AccordionPrimitive.Header className="flex">
-            <AccordionPrimitive.Trigger
-                data-slot="accordion-trigger"
-                className={cn(
-                    'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
-                    className,
-                )}
-                {...props}
-            >
-                {children}
-                <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-            </AccordionPrimitive.Trigger>
-        </AccordionPrimitive.Header>
-    );
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
 }
 
 function AccordionContent({
-    className,
-    children,
-    ...props
+  className,
+  children,
+  ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-    return (
-        <AccordionPrimitive.Content
-            data-slot="accordion-content"
-            className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-            {...props}
-        >
-            <div className={cn('pt-0 pb-4', className)}>{children}</div>
-        </AccordionPrimitive.Content>
-    );
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }