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

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -23,6 +23,8 @@ import { useDebounce } from '@uidotdev/usehooks';
 import { Loader2, Search, Upload, X } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { tagListDocument } from '../../../../app/routes/_authenticated/_assets/assets.graphql.js';
+import { AssetTagFilter } from '../../../../app/routes/_authenticated/_assets/components/asset-tag-filter.js';
 import { DetailPageButton } from '../detail-page-button.js';
 import { AssetBulkAction, AssetBulkActions } from './asset-bulk-actions.js';
 
@@ -74,7 +76,7 @@ export type Asset = AssetFragment;
 /**
  * @description
  * Props for the {@link AssetGallery} component.
- * 
+ *
  * @docsCategory components
  * @docsPage AssetGallery
  */
@@ -134,16 +136,16 @@ export interface AssetGalleryProps {
 /**
  * @description
  * A component for displaying a gallery of assets.
- * 
+ *
  * @example
  * ```tsx
  *  <AssetGallery
-        onSelect={handleAssetSelect}
-        multiSelect="manual"
-        initialSelectedAssets={initialSelectedAssets}
-        fixedHeight={false}
-        displayBulkActions={false}
-    />
+ onSelect={handleAssetSelect}
+ multiSelect="manual"
+ initialSelectedAssets={initialSelectedAssets}
+ fixedHeight={false}
+ displayBulkActions={false}
+ />
  * ```
  *
  * @docsCategory components
@@ -169,9 +171,19 @@ export function AssetGallery({
     const debouncedSearch = useDebounce(search, 500);
     const [assetType, setAssetType] = useState<string>(AssetType.ALL);
     const [selected, setSelected] = useState<Asset[]>(initialSelectedAssets || []);
+    const [selectedTags, setSelectedTags] = useState<string[]>([]);
     const queryClient = useQueryClient();
 
-    const queryKey = ['AssetGallery', page, pageSize, debouncedSearch, assetType];
+    const queryKey = ['AssetGallery', page, pageSize, debouncedSearch, assetType, selectedTags];
+
+    // Query for available tags to check if we should show the filter
+    const { data: tagsData } = useQuery({
+        queryKey: ['tags-check'],
+        queryFn: () => api.query(tagListDocument, { options: { take: 1 } }),
+        staleTime: 1000 * 60 * 5,
+    });
+
+    const hasTags = (tagsData?.tags.items?.length || 0) > 0;
 
     // Query for assets
     const { data, isLoading, refetch } = useQuery({
@@ -187,14 +199,20 @@ export function AssetGallery({
                 filter.type = { eq: assetType };
             }
 
-            return api.query(getAssetListDocument, {
-                options: {
-                    skip: (page - 1) * pageSize,
-                    take: pageSize,
-                    filter: Object.keys(filter).length > 0 ? filter : undefined,
-                    sort: { createdAt: 'DESC' },
-                },
-            });
+            const options: any = {
+                skip: (page - 1) * pageSize,
+                take: pageSize,
+                filter: Object.keys(filter).length > 0 ? filter : undefined,
+                sort: { createdAt: 'DESC' },
+            };
+
+            // Add tag filtering if tags are provided
+            if (selectedTags && selectedTags.length > 0) {
+                options.tags = selectedTags;
+                options.tagsOperator = 'AND';
+            }
+
+            return api.query(getAssetListDocument, { options });
         },
     });
 
@@ -262,10 +280,17 @@ export function AssetGallery({
     // Check if an asset is selected
     const isSelected = (asset: Asset) => selected.some(a => a.id === asset.id);
 
+    // Handle tag changes
+    const handleTagsChange = (tags: string[]) => {
+        setSelectedTags(tags);
+        setPage(1); // Reset to page 1 when tags change
+    };
+
     // Clear filters
     const clearFilters = () => {
         setSearch('');
         setAssetType(AssetType.ALL);
+        setSelectedTags([]);
         setPage(1);
     };
 
@@ -294,40 +319,48 @@ export function AssetGallery({
     return (
         <div className={`relative flex flex-col w-full ${fixedHeight ? 'h-[600px]' : 'h-full'} ${className}`}>
             {showHeader && (
-                <div className="flex flex-col md:flex-row gap-2 mb-4 flex-shrink-0">
-                    <div className="relative flex-grow flex items-center gap-2">
-                        <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                        <Input
-                            placeholder="Search assets..."
-                            value={search}
-                            onChange={e => setSearch(e.target.value)}
-                            className="pl-8"
-                        />
-                        {(search || assetType !== AssetType.ALL) && (
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={clearFilters}
-                                className="absolute right-0"
-                            >
-                                <X className="h-4 w-4 mr-1" /> Clear filters
-                            </Button>
-                        )}
+                <div className="space-y-4 mb-4 flex-shrink-0">
+                    <div className="flex flex-col md:flex-row gap-2">
+                        <div className="relative flex-grow flex items-center gap-2">
+                            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                            <Input
+                                placeholder="Search assets..."
+                                value={search}
+                                onChange={e => setSearch(e.target.value)}
+                                className="pl-8"
+                            />
+                            {(search || assetType !== AssetType.ALL || selectedTags.length > 0) && (
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={clearFilters}
+                                    className="absolute right-0"
+                                >
+                                    <X className="h-4 w-4 mr-1" /> Clear filters
+                                </Button>
+                            )}
+                        </div>
+                        <Select value={assetType} onValueChange={setAssetType}>
+                            <SelectTrigger className="w-full md:w-[180px]">
+                                <SelectValue placeholder="Asset type" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value={AssetType.ALL}>All types</SelectItem>
+                                <SelectItem value={AssetType.IMAGE}>Images</SelectItem>
+                                <SelectItem value={AssetType.VIDEO}>Video</SelectItem>
+                                <SelectItem value={AssetType.BINARY}>Binary</SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <Button onClick={openFileDialog} className="whitespace-nowrap">
+                            <Upload className="h-4 w-4 mr-2" /> <Trans>Upload</Trans>
+                        </Button>
                     </div>
-                    <Select value={assetType} onValueChange={setAssetType}>
-                        <SelectTrigger className="w-full md:w-[180px]">
-                            <SelectValue placeholder="Asset type" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value={AssetType.ALL}>All types</SelectItem>
-                            <SelectItem value={AssetType.IMAGE}>Images</SelectItem>
-                            <SelectItem value={AssetType.VIDEO}>Video</SelectItem>
-                            <SelectItem value={AssetType.BINARY}>Binary</SelectItem>
-                        </SelectContent>
-                    </Select>
-                    <Button onClick={openFileDialog} className="whitespace-nowrap">
-                        <Upload className="h-4 w-4 mr-2" /> <Trans>Upload</Trans>
-                    </Button>
+
+                    {hasTags && (
+                        <div className="flex items-center -mt-2">
+                            <AssetTagFilter selectedTags={selectedTags} onTagsChange={handleTagsChange} />
+                        </div>
+                    )}
                 </div>
             )}
 

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

@@ -437,6 +437,7 @@ export function PaginatedListDataTable<
         fields,
         customizeColumns,
         rowActions,
+        bulkActions,
         deleteMutation,
         additionalColumns,
         defaultColumnOrder,

package/src/lib/components/shared/rich-text-editor/image-dialog.tsx

@@ -0,0 +1,223 @@
+import { Trans } from '@/vdb/lib/trans.js';
+import { SetImageOptions } from '@tiptap/extension-image';
+import { Editor } from '@tiptap/react';
+import { ImageIcon, PaperclipIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '../../ui/button.js';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../ui/dialog.js';
+import { Input } from '../../ui/input.js';
+import { Label } from '../../ui/label.js';
+import { Asset } from '../asset/asset-gallery.js';
+import { AssetPickerDialog } from '../asset/asset-picker-dialog.js';
+
+export interface ImageDialogProps {
+    editor: Editor;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export function ImageDialog({ editor, isOpen, onClose }: Readonly<ImageDialogProps>) {
+    const [src, setSrc] = useState('');
+    const [alt, setAlt] = useState('');
+    const [title, setTitle] = useState('');
+    const [width, setWidth] = useState('');
+    const [height, setHeight] = useState('');
+    const [assetPickerOpen, setAssetPickerOpen] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState('');
+
+    useEffect(() => {
+        if (isOpen) {
+            // Get current image attributes if editing existing image
+            const {
+                src: currentSrc,
+                alt: currentAlt,
+                title: currentTitle,
+                width: currentWidth,
+                height: currentHeight,
+            } = editor.getAttributes('image');
+
+            setSrc(currentSrc || '');
+            setAlt(currentAlt || '');
+            setTitle(currentTitle || '');
+            setWidth(currentWidth || '');
+            setHeight(currentHeight || '');
+            setPreviewUrl(currentSrc || '');
+        }
+    }, [isOpen, editor]);
+
+    const handleInsertImage = () => {
+        if (!src) {
+            return;
+        }
+
+        const attrs: SetImageOptions = {
+            src,
+            alt: alt || undefined,
+            title: title || undefined,
+        };
+
+        // Only add width/height if they are valid numbers
+        if (width && !isNaN(Number(width))) {
+            attrs.width = Number(width);
+        }
+        if (height && !isNaN(Number(height))) {
+            attrs.height = Number(height);
+        }
+
+        editor.chain().focus().setImage(attrs).run();
+
+        handleClose();
+    };
+
+    const handleClose = () => {
+        setSrc('');
+        setAlt('');
+        setTitle('');
+        setWidth('');
+        setHeight('');
+        setPreviewUrl('');
+        onClose();
+    };
+
+    const handleAssetSelect = (assets: Asset[]) => {
+        if (assets.length > 0) {
+            const asset = assets[0];
+            setSrc(asset.source);
+            setPreviewUrl(asset.preview);
+            // Set width and height from asset if available
+            if (asset.width) {
+                setWidth(asset.width.toString());
+            }
+            if (asset.height) {
+                setHeight(asset.height.toString());
+            }
+        }
+        setAssetPickerOpen(false);
+    };
+
+    const isEditing = editor.isActive('image');
+
+    return (
+        <>
+            <Dialog open={isOpen} onOpenChange={open => !open && handleClose()}>
+                <DialogContent className="sm:max-w-[525px]">
+                    <DialogHeader>
+                        <DialogTitle>
+                            {isEditing ? <Trans>Edit image</Trans> : <Trans>Insert image</Trans>}
+                        </DialogTitle>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                        <div className="flex items-center justify-center">
+                            {previewUrl ? (
+                                <img
+                                    src={previewUrl}
+                                    alt={alt || 'Preview'}
+                                    className="max-w-[200px] max-h-[200px] object-contain border rounded"
+                                />
+                            ) : (
+                                <div className="w-[200px] h-[200px] border rounded flex items-center justify-center bg-muted">
+                                    <ImageIcon className="w-16 h-16 text-muted-foreground" />
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="flex items-center justify-center">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setAssetPickerOpen(true)}
+                            >
+                                <PaperclipIcon className="w-4 h-4 mr-2" />
+                                <Trans>Add asset</Trans>
+                            </Button>
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="image-source">
+                                <Trans>Source</Trans>
+                            </Label>
+                            <Input
+                                id="image-source"
+                                value={src}
+                                onChange={e => {
+                                    setSrc(e.target.value);
+                                    setPreviewUrl(e.target.value);
+                                }}
+                                placeholder="https://example.com/image.jpg"
+                                autoFocus
+                            />
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="image-title">
+                                <Trans>Title</Trans>
+                            </Label>
+                            <Input
+                                id="image-title"
+                                value={title}
+                                onChange={e => setTitle(e.target.value)}
+                                placeholder=""
+                            />
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="image-alt">
+                                <Trans>Description (alt)</Trans>
+                            </Label>
+                            <Input
+                                id="image-alt"
+                                value={alt}
+                                onChange={e => setAlt(e.target.value)}
+                                placeholder=""
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="grid gap-2">
+                                <Label htmlFor="image-width">
+                                    <Trans>Width</Trans>
+                                </Label>
+                                <Input
+                                    id="image-width"
+                                    type="number"
+                                    value={width}
+                                    onChange={e => setWidth(e.target.value)}
+                                    placeholder="auto"
+                                />
+                            </div>
+                            <div className="grid gap-2">
+                                <Label htmlFor="image-height">
+                                    <Trans>Height</Trans>
+                                </Label>
+                                <Input
+                                    id="image-height"
+                                    type="number"
+                                    value={height}
+                                    onChange={e => setHeight(e.target.value)}
+                                    placeholder="auto"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={handleClose}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="button" onClick={handleInsertImage} disabled={!src}>
+                            <Trans>Insert image</Trans>
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <AssetPickerDialog
+                open={assetPickerOpen}
+                onClose={() => setAssetPickerOpen(false)}
+                onSelect={handleAssetSelect}
+                multiSelect={false}
+                title="Select asset"
+            />
+        </>
+    );
+}

package/src/lib/components/shared/rich-text-editor/link-dialog.tsx

@@ -0,0 +1,151 @@
+import { Trans } from '@/vdb/lib/trans.js';
+import { Editor } from '@tiptap/react';
+import { useEffect, useState } from 'react';
+import { Button } from '../../ui/button.js';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../ui/dialog.js';
+import { Input } from '../../ui/input.js';
+import { Label } from '../../ui/label.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select.js';
+
+export interface LinkDialogProps {
+    editor: Editor;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export function LinkDialog({ editor, isOpen, onClose }: Readonly<LinkDialogProps>) {
+    const [href, setHref] = useState('');
+    const [title, setTitle] = useState('');
+    const [target, setTarget] = useState<'_self' | '_blank'>('_self');
+
+    useEffect(() => {
+        if (isOpen) {
+            // Get current link attributes if editing existing link
+            const {
+                href: currentHref,
+                target: currentTarget,
+                title: currentTitle,
+            } = editor.getAttributes('link');
+
+            setHref(currentHref || '');
+            setTitle(currentTitle || '');
+            setTarget(currentTarget === '_blank' ? '_blank' : '_self');
+
+            // If text is selected but no link, use selection as initial href if it looks like a URL
+            if (!currentHref) {
+                const { from, to } = editor.state.selection;
+                const selectedText = editor.state.doc.textBetween(from, to);
+                if (selectedText && (selectedText.startsWith('http') || selectedText.startsWith('www'))) {
+                    setHref(selectedText);
+                }
+            }
+        }
+    }, [isOpen, editor]);
+
+    const handleSetLink = () => {
+        if (!href) {
+            // Remove link if href is empty
+            editor.chain().focus().unsetLink().run();
+        } else {
+            // Set link with all attributes
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setLink({
+                    href,
+                    target,
+                    rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+                })
+                .run();
+        }
+        handleClose();
+    };
+
+    const handleClose = () => {
+        setHref('');
+        setTitle('');
+        setTarget('_self');
+        onClose();
+    };
+
+    const handleRemoveLink = () => {
+        editor.chain().focus().unsetLink().run();
+        handleClose();
+    };
+
+    const isEditing = editor.isActive('link');
+
+    return (
+        <Dialog open={isOpen} onOpenChange={open => !open && handleClose()}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>
+                        {isEditing ? <Trans>Edit link</Trans> : <Trans>Insert link</Trans>}
+                    </DialogTitle>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="link-href" className="text-right">
+                            <Trans>Link href</Trans>
+                        </Label>
+                        <Input
+                            id="link-href"
+                            value={href}
+                            onChange={e => setHref(e.target.value)}
+                            placeholder="https://example.com"
+                            className="col-span-3"
+                            autoFocus
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="link-title" className="text-right">
+                            <Trans>Link title</Trans>
+                        </Label>
+                        <Input
+                            id="link-title"
+                            value={title}
+                            onChange={e => setTitle(e.target.value)}
+                            placeholder=""
+                            className="col-span-3"
+                        />
+                    </div>
+                    <div className="grid grid-cols-4 items-center gap-4">
+                        <Label htmlFor="link-target" className="text-right">
+                            <Trans>Link target</Trans>
+                        </Label>
+                        <Select
+                            value={target}
+                            onValueChange={value => setTarget(value as '_self' | '_blank')}
+                        >
+                            <SelectTrigger className="col-span-3">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="_self">
+                                    <Trans>Same window</Trans>
+                                </SelectItem>
+                                <SelectItem value="_blank">
+                                    <Trans>New window</Trans>
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+                <DialogFooter>
+                    {isEditing && (
+                        <Button type="button" variant="destructive" onClick={handleRemoveLink}>
+                            <Trans>Remove link</Trans>
+                        </Button>
+                    )}
+                    <Button type="button" variant="outline" onClick={handleClose}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button type="button" onClick={handleSetLink}>
+                        <Trans>Set link</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}