@vendure/dashboard 3.4.3-master-202509190229 → 3.4.3-master-202509200226

package/dist/vite/vite-plugin-config.js

@@ -47,6 +47,7 @@ export function viteConfigPlugin({ packageRoot }) {
                     ...(((_e = config.optimizeDeps) === null || _e === void 0 ? void 0 : _e.include) || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
+                    '@/components > @tiptap/react', // https://github.com/fawmi/vue-google-maps/issues/148#issuecomment-1235143844
                     '@vendure/common/lib/generated-types',
                 ] });
             return config;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.4.3-master-202509190229",
+    "version": "3.4.3-master-202509200226",
     "type": "module",
     "repository": {
         "type": "git",
@@ -104,8 +104,8 @@
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.4.3-master-202509190229",
-        "@vendure/core": "^3.4.3-master-202509190229",
+        "@vendure/common": "^3.4.3-master-202509200226",
+        "@vendure/core": "^3.4.3-master-202509200226",
         "@vitejs/plugin-react": "^4.3.4",
         "acorn": "^8.11.3",
         "acorn-walk": "^8.3.2",
@@ -156,5 +156,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "1a94626a2e07d33d881a751ff394f8351c3521b4"
+    "gitHead": "e2f1befe89f08f48faf285a6a929ca2a4042c903"
 }

package/src/app/routes/_authenticated/_administrators/administrators.tsx

@@ -8,7 +8,7 @@ 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 { administratorListDocument, deleteAdministratorDocument } from './administrators.graphql.js';
+import { administratorListDocument } from './administrators.graphql.js';
 import { DeleteAdministratorsBulkAction } from './components/administrator-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_administrators/administrators')({
@@ -22,7 +22,6 @@ function AdministratorListPage() {
             pageId="administrator-list"
             title="Administrators"
             listQuery={administratorListDocument}
-            deleteMutation={deleteAdministratorDocument}
             route={Route}
             onSearchTermChange={searchTerm => {
                 return {

package/src/app/routes/_authenticated/_assets/assets.graphql.ts

@@ -35,3 +35,42 @@ export const deleteAssetsDocument = graphql(`
         }
     }
 `);
+
+export const tagListDocument = graphql(`
+    query TagList($options: TagListOptions) {
+        tags(options: $options) {
+            items {
+                id
+                value
+            }
+            totalItems
+        }
+    }
+`);
+
+export const createTagDocument = graphql(`
+    mutation CreateTag($input: CreateTagInput!) {
+        createTag(input: $input) {
+            id
+            value
+        }
+    }
+`);
+
+export const updateTagDocument = graphql(`
+    mutation UpdateTag($input: UpdateTagInput!) {
+        updateTag(input: $input) {
+            id
+            value
+        }
+    }
+`);
+
+export const deleteTagDocument = graphql(`
+    mutation DeleteTag($id: ID!) {
+        deleteTag(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -2,7 +2,6 @@ import { AssetFocalPointEditor } from '@/vdb/components/shared/asset/asset-focal
 import { AssetPreviewSelector } from '@/vdb/components/shared/asset/asset-preview-selector.js';
 import { PreviewPreset } from '@/vdb/components/shared/asset/asset-preview.js';
 import { AssetProperties } from '@/vdb/components/shared/asset/asset-properties.js';
-import { Point } from '@/vdb/components/shared/asset/focal-point-control.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
@@ -25,6 +24,7 @@ import { FocusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
+import { AssetTagsEditor } from './components/asset-tags-editor.js';
 
 const pageId = 'asset-detail';
 
@@ -51,9 +51,8 @@ function AssetDetailPage() {
     const [size, setSize] = useState<PreviewPreset>('medium');
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
-    const [focalPoint, setFocalPoint] = useState<Point | undefined>(undefined);
     const [settingFocalPoint, setSettingFocalPoint] = useState(false);
-    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+    const { form, submitHandler, entity, isPending, refreshEntity } = useDetailPage({
         pageId,
         queryDocument: assetDetailDocument,
         updateDocument: assetUpdateDocument,
@@ -106,12 +105,12 @@ function AssetDetailPage() {
             </PageActionBar>
             <PageLayout>
                 <PageBlock column="main" blockId="asset-preview">
-                    <div className="relative flex items-center justify-center bg-muted/30 rounded-lg min-h-[300px] overflow-auto">
+                    <div className="relative flex items-center justify-center bg-muted/30 rounded-lg min-h-[300px] overflow-auto resize-y">
                         <AssetFocalPointEditor
                             width={width}
                             height={height}
                             settingFocalPoint={settingFocalPoint}
-                            focalPoint={form.getValues().focalPoint ?? { x: 0.5, y: 0.5 }}
+                            focalPoint={entity.focalPoint ?? { x: 0.5, y: 0.5 }}
                             onFocalPointChange={point => {
                                 form.setValue('focalPoint.x', point.x, { shouldDirty: true });
                                 form.setValue('focalPoint.y', point.y, { shouldDirty: true });
@@ -125,10 +124,9 @@ function AssetDetailPage() {
                                 ref={imageRef}
                                 asset={entity}
                                 preset={size || undefined}
-                                mode="resize"
                                 useFocalPoint={true}
                                 onLoad={updateDimensions}
-                                className="max-w-full max-h-full object-contain"
+                                className="max-w-full object-contain"
                             />
                         </AssetFocalPointEditor>
                     </div>
@@ -164,6 +162,19 @@ function AssetDetailPage() {
                         </div>
                     </div>
                 </PageBlock>
+                <PageBlock column="side" blockId="asset-tags">
+                    <AssetTagsEditor
+                        selectedTags={form.watch('tags') || []}
+                        onTagsChange={tags => {
+                            form.setValue('tags', tags, { shouldDirty: true });
+                        }}
+                        onTagsUpdated={() => {
+                            // Refresh the asset entity to get updated tag values
+                            refreshEntity();
+                        }}
+                        disabled={isPending}
+                    />
+                </PageBlock>
             </PageLayout>
         </Page>
     );

package/src/app/routes/_authenticated/_assets/components/asset-tag-filter.tsx

@@ -0,0 +1,206 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { Check, Filter, Loader2, X } from 'lucide-react';
+import { useState } from 'react';
+import { tagListDocument } from '../assets.graphql.js';
+
+interface AssetTagFilterProps {
+    selectedTags: string[];
+    onTagsChange: (tags: string[]) => void;
+}
+
+export function AssetTagFilter({ selectedTags, onTagsChange }: Readonly<AssetTagFilterProps>) {
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+
+    const debouncedSearch = useDebounce(searchValue, 300);
+    const pageSize = 25;
+
+    // Fetch available tags with infinite query
+    const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
+        queryKey: ['tags', debouncedSearch],
+        queryFn: async ({ pageParam = 0 }) => {
+            const options: any = {
+                skip: pageParam * pageSize,
+                take: pageSize,
+                sort: { value: 'ASC' },
+            };
+
+            if (debouncedSearch.trim()) {
+                options.filter = {
+                    value: { contains: debouncedSearch.trim() },
+                };
+            }
+
+            const response = await api.query(tagListDocument, { options });
+            return response.tags;
+        },
+        getNextPageParam: (lastPage, allPages) => {
+            if (!lastPage) return undefined;
+            const totalFetched = allPages.length * pageSize;
+            return totalFetched < lastPage.totalItems ? allPages.length : undefined;
+        },
+        initialPageParam: 0,
+        staleTime: 1000 * 60 * 5,
+    });
+
+    const availableTags = data?.pages.flatMap(page => page?.items ?? []) ?? [];
+    const totalTags = data?.pages[0]?.totalItems ?? 0;
+
+    // Tags are already filtered server-side, so use them directly
+    const filteredTags = availableTags;
+
+    const handleSelectTag = (tagValue: string) => {
+        if (!selectedTags.includes(tagValue)) {
+            onTagsChange([...selectedTags, tagValue]);
+        }
+        setSearchValue('');
+    };
+
+    const handleRemoveTag = (tagToRemove: string) => {
+        onTagsChange(selectedTags.filter(tag => tag !== tagToRemove));
+    };
+
+    const handleClearAll = () => {
+        onTagsChange([]);
+        setOpen(false);
+    };
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        const target = e.currentTarget;
+        const scrolledToBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1;
+
+        if (scrolledToBottom && hasNextPage && !isFetchingNextPage) {
+            fetchNextPage();
+        }
+    };
+
+    return (
+        <div className="flex items-center gap-2">
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        role="combobox"
+                        aria-expanded={open}
+                        className="justify-start"
+                    >
+                        <Filter className="h-4 w-4 mr-2" />
+                        <Trans>Filter by tags</Trans>
+                        {selectedTags.length > 0 && (
+                            <Badge variant="secondary" className="ml-2">
+                                {selectedTags.length}
+                            </Badge>
+                        )}
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-80 p-0" align="start">
+                    <Command shouldFilter={false}>
+                        <CommandInput
+                            placeholder="Search tags..."
+                            value={searchValue}
+                            onValueChange={setSearchValue}
+                        />
+                        <CommandList className="max-h-[300px] overflow-y-auto" onScroll={handleScroll}>
+                            <CommandEmpty>
+                                {isLoading ? (
+                                    <div className="flex items-center justify-center py-6">
+                                        <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                                        <Trans>Loading...</Trans>
+                                    </div>
+                                ) : (
+                                    <div className="p-2 text-sm">
+                                        <Trans>No tags found</Trans>
+                                    </div>
+                                )}
+                            </CommandEmpty>
+                            <CommandGroup>
+                                {filteredTags.map(tag => {
+                                    const isSelected = selectedTags.includes(tag.value);
+                                    return (
+                                        <CommandItem
+                                            key={tag.id}
+                                            onSelect={() => {
+                                                if (isSelected) {
+                                                    handleRemoveTag(tag.value);
+                                                } else {
+                                                    handleSelectTag(tag.value);
+                                                }
+                                            }}
+                                        >
+                                            <Check
+                                                className={cn(
+                                                    'mr-2 h-4 w-4',
+                                                    isSelected ? 'opacity-100' : 'opacity-0',
+                                                )}
+                                            />
+                                            {tag.value}
+                                        </CommandItem>
+                                    );
+                                })}
+
+                                {(isFetchingNextPage || isLoading) && (
+                                    <div className="flex items-center justify-center py-2">
+                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                    </div>
+                                )}
+
+                                {!hasNextPage &&
+                                    filteredTags.length > 0 &&
+                                    totalTags > filteredTags.length && (
+                                        <div className="text-center py-2 text-xs text-muted-foreground">
+                                            <Trans>Showing all {filteredTags.length} results</Trans>
+                                        </div>
+                                    )}
+                            </CommandGroup>
+                        </CommandList>
+                        {selectedTags.length > 0 && (
+                            <div className="border-t p-2">
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="w-full justify-start"
+                                    onClick={handleClearAll}
+                                >
+                                    <Trans>Clear all</Trans>
+                                </Button>
+                            </div>
+                        )}
+                    </Command>
+                </PopoverContent>
+            </Popover>
+
+            {/* Display selected tags */}
+            {selectedTags.length > 0 && (
+                <div className="flex flex-wrap gap-1">
+                    {selectedTags.map(tag => (
+                        <Badge key={tag} variant="secondary" className="text-xs">
+                            {tag}
+                            <button
+                                onClick={() => handleRemoveTag(tag)}
+                                className="ml-1 hover:bg-destructive/20 rounded-full p-0.5 transition-colors"
+                            >
+                                <X className="h-3 w-3" />
+                            </button>
+                        </Badge>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_assets/components/asset-tags-editor.tsx

@@ -0,0 +1,226 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+} from '@/vdb/components/ui/command.js';
+import { Label } from '@/vdb/components/ui/label.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Check, ChevronsUpDown, Settings2, X } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { createTagDocument, tagListDocument } from '../assets.graphql.js';
+import { ManageTagsDialog } from './manage-tags-dialog.js';
+
+interface AssetTagsEditorProps {
+    selectedTags: string[];
+    onTagsChange: (tags: string[]) => void;
+    disabled?: boolean;
+    onTagsUpdated?: () => void;
+}
+
+export function AssetTagsEditor({
+    selectedTags,
+    onTagsChange,
+    disabled = false,
+    onTagsUpdated,
+}: Readonly<AssetTagsEditorProps>) {
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const [manageDialogOpen, setManageDialogOpen] = useState(false);
+    const queryClient = useQueryClient();
+
+    // Fetch available tags
+    const { data: tagsData } = useQuery({
+        queryKey: ['tags'],
+        queryFn: () => api.query(tagListDocument, { options: { take: 100 } }),
+        staleTime: 1000 * 60 * 5, // 5 minutes
+    });
+
+    // Create new tag mutation
+    const createTagMutation = useMutation({
+        mutationFn: (tagValue: string) => api.mutate(createTagDocument, { input: { value: tagValue } }),
+        onSuccess: data => {
+            const newTag = data.createTag.value;
+            onTagsChange([...selectedTags, newTag]);
+            toast.success(`Created tag "${newTag}"`);
+            setSearchValue('');
+            // Invalidate and refetch tags list
+            queryClient.invalidateQueries({ queryKey: ['tags'] });
+        },
+        onError: error => {
+            toast.error('Failed to create tag', {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        },
+    });
+
+    const availableTags = tagsData?.tags.items || [];
+
+    // Filter tags based on search value
+    const filteredTags = availableTags.filter(tag =>
+        tag.value.toLowerCase().includes(searchValue.toLowerCase()),
+    );
+
+    // Check if search value would create a new tag
+    const isNewTag =
+        searchValue.trim() &&
+        !availableTags.some(tag => tag.value.toLowerCase() === searchValue.toLowerCase());
+
+    const handleSelectTag = useCallback(
+        (tagValue: string) => {
+            if (!selectedTags.includes(tagValue)) {
+                onTagsChange([...selectedTags, tagValue]);
+            }
+            setSearchValue('');
+            setOpen(false);
+        },
+        [selectedTags, onTagsChange],
+    );
+
+    const handleRemoveTag = useCallback(
+        (tagToRemove: string) => {
+            onTagsChange(selectedTags.filter(tag => tag !== tagToRemove));
+        },
+        [selectedTags, onTagsChange],
+    );
+
+    const handleCreateTag = useCallback(() => {
+        if (isNewTag) {
+            createTagMutation.mutate(searchValue.trim());
+        }
+    }, [isNewTag, searchValue, createTagMutation]);
+
+    return (
+        <div className="space-y-3">
+            <Label>
+                <Trans>Tags</Trans>
+            </Label>
+
+            {/* Selected tags display */}
+            <div className="flex flex-wrap gap-2 min-h-[32px]">
+                {selectedTags.length === 0 ? (
+                    <span className="text-sm text-muted-foreground">
+                        <Trans>No tags selected</Trans>
+                    </span>
+                ) : (
+                    selectedTags.map(tag => (
+                        <Badge key={tag} variant="secondary" className="flex items-center gap-1">
+                            {tag}
+                            {!disabled && (
+                                <button
+                                    type="button"
+                                    onClick={() => handleRemoveTag(tag)}
+                                    className="ml-1 hover:bg-destructive/20 rounded-full p-0.5 transition-colors"
+                                >
+                                    <X className="h-3 w-3" />
+                                </button>
+                            )}
+                        </Badge>
+                    ))
+                )}
+            </div>
+
+            {/* Tag selector */}
+            {!disabled && (
+                <Popover open={open} onOpenChange={setOpen}>
+                    <PopoverTrigger asChild>
+                        <Button
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={open}
+                            className="w-full justify-between"
+                        >
+                            <Trans>Add tags...</Trans>
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-full p-0" align="start">
+                        <Command>
+                            <CommandInput
+                                placeholder="Search tags..."
+                                value={searchValue}
+                                onValueChange={setSearchValue}
+                            />
+                            <CommandEmpty>
+                                {searchValue.trim() ? (
+                                    <div className="">
+                                        <Button
+                                            variant="ghost"
+                                            className="w-full justify-start"
+                                            onClick={handleCreateTag}
+                                            disabled={createTagMutation.isPending}
+                                        >
+                                            <Trans>Create "{searchValue.trim()}"</Trans>
+                                        </Button>
+                                    </div>
+                                ) : (
+                                    <div className="p-2 text-sm">
+                                        <Trans>No tags found</Trans>
+                                    </div>
+                                )}
+                            </CommandEmpty>
+                            <CommandGroup>
+                                {/* Show option to create new tag if search doesn't match exactly */}
+                                {isNewTag && (
+                                    <CommandItem
+                                        onSelect={handleCreateTag}
+                                        disabled={createTagMutation.isPending}
+                                        className="font-medium"
+                                    >
+                                        <Trans>Create "{searchValue.trim()}"</Trans>
+                                    </CommandItem>
+                                )}
+
+                                {/* Show existing tags */}
+                                {filteredTags.map(tag => {
+                                    const isSelected = selectedTags.includes(tag.value);
+                                    return (
+                                        <CommandItem
+                                            key={tag.id}
+                                            onSelect={() => handleSelectTag(tag.value)}
+                                            disabled={isSelected}
+                                        >
+                                            <Check
+                                                className={cn(
+                                                    'mr-2 h-4 w-4',
+                                                    isSelected ? 'opacity-100' : 'opacity-0',
+                                                )}
+                                            />
+                                            {tag.value}
+                                        </CommandItem>
+                                    );
+                                })}
+                            </CommandGroup>
+                        </Command>
+                    </PopoverContent>
+                </Popover>
+            )}
+
+            {!disabled && (
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setManageDialogOpen(true)}
+                    className="w-full justify-start"
+                >
+                    <Settings2 className="h-4 w-4 mr-2" />
+                    <Trans>Manage tags</Trans>
+                </Button>
+            )}
+            {/* Manage Tags Dialog */}
+            <ManageTagsDialog
+                open={manageDialogOpen}
+                onOpenChange={setManageDialogOpen}
+                onTagsUpdated={onTagsUpdated}
+            />
+        </div>
+    );
+}