@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/app/routes/_authenticated/_collections/components/collection-filters-selector.tsx

@@ -1,17 +1,5 @@
-import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
-import { Button } from '@/components/ui/button.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { Separator } from '@/components/ui/separator.js';
-import { ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationMultiSelector } from '@/vdb/components/shared/configurable-operation-multi-selector.js';
 import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { Plus } from 'lucide-react';
 import { getCollectionFiltersQueryOptions } from '../collections.graphql.js';
 
 export interface CollectionFiltersSelectorProps {
@@ -19,73 +7,18 @@ export interface CollectionFiltersSelectorProps {
     onChange: (filters: ConfigurableOperationInputType[]) => void;
 }
 
-export function CollectionFiltersSelector({ value, onChange }: CollectionFiltersSelectorProps) {
-    const { data: filtersData } = useQuery(getCollectionFiltersQueryOptions);
-
-    const filters = filtersData?.collectionFilters;
-
-    const onFilterSelected = (filter: ConfigurableOperationDefFragment) => {
-        const filterDef = filters?.find(f => f.code === filter.code);
-        if (!filterDef) {
-            return;
-        }
-        onChange([
-            ...value,
-            {
-                code: filter.code,
-                arguments: filterDef.args.map(arg => ({
-                    name: arg.name,
-                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
-                })),
-            },
-        ]);
-    };
-
-    const onOperationValueChange = (
-        filter: ConfigurableOperationInputType,
-        newVal: ConfigurableOperationInputType,
-    ) => {
-        onChange(value.map(f => (f.code === filter.code ? newVal : f)));
-    };
-
-    const onOperationRemove = (index: number) => {
-        onChange(value.filter((_, i) => i !== index));
-    };
-
+export function CollectionFiltersSelector({ value, onChange }: Readonly<CollectionFiltersSelectorProps>) {
     return (
-        <div className="flex flex-col gap-2 mt-4">
-            {(value ?? []).map((filter, index) => {
-                const filterDef = filters?.find(f => f.code === filter.code);
-                if (!filterDef) {
-                    return null;
-                }
-                return (
-                    <div key={index} className="flex flex-col gap-2">
-                        <ConfigurableOperationInput
-                            operationDefinition={filterDef}
-                            value={filter}
-                            onChange={value => onOperationValueChange(filter, value)}
-                            onRemove={() => onOperationRemove(index)}
-                        />
-                        <Separator className="my-2" />
-                    </div>
-                );
-            })}
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="outline">
-                        <Plus />
-                        <Trans context="Add new collection filter">Add condition</Trans>
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-96">
-                    {filters?.map(filter => (
-                        <DropdownMenuItem key={filter.code} onClick={() => onFilterSelected(filter)}>
-                            {filter.description}
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
+        <div className="mt-4">
+            <ConfigurableOperationMultiSelector
+                value={value}
+                onChange={onChange}
+                queryOptions={getCollectionFiltersQueryOptions}
+                queryKey="getCollectionFilters"
+                dataPath="collectionFilters"
+                buttonText="Add collection filter"
+                showEnhancedDropdown={false}
+            />
         </div>
     );
 }

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 '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/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/_countries/components/country-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteCountriesDocument } from '../countries.graphql.js';
+
+export const DeleteCountriesBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteCountriesDocument}
+            entityName="countries"
+            requiredPermissions={['DeleteCountry']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_countries/countries.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const countryItemFragment = graphql(`
     fragment CountryItem on Country {
@@ -24,7 +24,7 @@ export const countriesListQuery = graphql(
     [countryItemFragment],
 );
 
-export const countryDetailQuery = graphql(`
+export const countryDetailDocument = graphql(`
     query CountryDetail($id: ID!) {
         country(id: $id) {
             id
@@ -67,3 +67,12 @@ export const deleteCountryDocument = graphql(`
         }
     }
 `);
+
+export const deleteCountriesDocument = graphql(`
+    mutation DeleteCountries($ids: [ID!]!) {
+        deleteCountries(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_countries/countries.tsx

@@ -1,11 +1,12 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
+import { DeleteCountriesBulkAction } from './components/country-bulk-actions.js';
 import { countriesListQuery, deleteCountryDocument } from './countries.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries')({
@@ -51,6 +52,12 @@ function CountryListPage() {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteCountriesBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateCountry']}>