@wilshop/dashboard 3.5.2

package/src/lib/components/shared/asset/asset-picker-dialog.tsx

@@ -0,0 +1,109 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { useState } from 'react';
+import { Asset, AssetGallery } from './asset-gallery.js';
+
+/**
+ * @description
+ * Props for the {@link AssetPickerDialog} component.
+ * 
+ * @docsCategory components
+ * @docsPage AssetPickerDialog
+ */
+interface AssetPickerDialogProps {
+    /**
+     * @description
+     * Whether the dialog is open.
+     */
+    open: boolean;
+    /**
+     * @description
+     * The function to call when the dialog is closed.
+     */
+    onClose: () => void;
+    /**
+     * @description
+     * The function to call when assets are selected.
+     */
+    onSelect: (assets: Asset[]) => void;
+    /**
+     * @description
+     * Whether multiple assets can be selected.
+     */
+    multiSelect?: boolean;
+    /**
+     * @description
+     * The initial assets that should be selected.
+     */
+    initialSelectedAssets?: Asset[];
+    /**
+     * @description
+     * The title of the dialog.
+     */
+    title?: string;
+}
+
+/**
+ * @description
+ * A dialog which allows the creation and selection of assets.
+ * 
+ * @docsCategory components
+ * @docsPage AssetPickerDialog
+ * @docsWeight 0
+ */
+export function AssetPickerDialog({
+    open,
+    onClose,
+    onSelect,
+    multiSelect = false,
+    initialSelectedAssets = [],
+    title = 'Select Assets',
+}: AssetPickerDialogProps) {
+    const [selectedAssets, setSelectedAssets] = useState<Asset[]>(initialSelectedAssets);
+
+    const handleAssetSelect = (assets: Asset[]) => {
+        setSelectedAssets(assets);
+    };
+
+    const handleConfirm = () => {
+        onSelect(selectedAssets);
+        onClose();
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-[800px] lg:max-w-[1000px] h-[85vh] p-0 flex flex-col">
+                <DialogHeader className="px-6 pt-6">
+                    <DialogTitle>{multiSelect ? title : title.replace('Assets', 'Asset')}</DialogTitle>
+                </DialogHeader>
+
+                <div className="flex-1 overflow-y-auto px-6 pt-1">
+                    <AssetGallery
+                        onSelect={handleAssetSelect}
+                        multiSelect="manual"
+                        initialSelectedAssets={initialSelectedAssets}
+                        fixedHeight={false}
+                        displayBulkActions={false}
+                    />
+                </div>
+
+                <DialogFooter className="px-6 pb-6 pt-4 border-t">
+                    <Button variant="outline" onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleConfirm} disabled={selectedAssets.length === 0}>
+                        {selectedAssets.length > 0 && multiSelect
+                            ? `Select ${selectedAssets.length} Asset${selectedAssets.length > 1 ? 's' : ''}`
+                            : 'Select Asset'}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/lib/components/shared/asset/asset-preview-dialog.tsx

@@ -0,0 +1,38 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { AssetPreview, AssetWithTags } from './asset-preview.js';
+
+interface AssetPreviewDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    asset: AssetWithTags;
+    assets?: AssetWithTags[];
+    customFields?: any[];
+}
+
+export function AssetPreviewDialog({
+    open,
+    onOpenChange,
+    asset,
+    assets,
+    customFields,
+}: AssetPreviewDialogProps) {
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[800px] lg:max-w-[95vw] w-[95vw] p-0">
+                <DialogHeader className="p-6 pb-0">
+                    <DialogTitle>Asset</DialogTitle>
+                    <DialogDescription>Preview of {asset.name}</DialogDescription>
+                </DialogHeader>
+                <div className="h-full p-6">
+                    <AssetPreview asset={asset} assets={assets} customFields={customFields} />
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/lib/components/shared/asset/asset-preview-selector.tsx

@@ -0,0 +1,32 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { PreviewPreset } from './asset-preview.js';
+
+export interface AssetPreviewSelectorProps {
+    size: PreviewPreset;
+    setSize: (size: PreviewPreset) => void;
+    width: number;
+    height: number;
+}
+
+export function AssetPreviewSelector({ size, setSize, width, height }: Readonly<AssetPreviewSelectorProps>) {
+    return (
+        <div className="flex items-center gap-2">
+            <Select value={size} onValueChange={value => setSize(value as PreviewPreset)}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select size" />
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectItem value="tiny">Tiny</SelectItem>
+                    <SelectItem value="thumb">Thumb</SelectItem>
+                    <SelectItem value="small">Small</SelectItem>
+                    <SelectItem value="medium">Medium</SelectItem>
+                    <SelectItem value="large">Large</SelectItem>
+                    <SelectItem value="full">Full Size</SelectItem>
+                </SelectContent>
+            </Select>
+            <p className="text-sm text-muted-foreground">
+                {width} x {height}
+            </p>
+        </div>
+    );
+}

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

@@ -0,0 +1,114 @@
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Card, CardContent } from '@/vdb/components/ui/card.js';
+import { AssetFragment } from '@/vdb/graphql/fragments.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { AssetPreviewSelector } from './asset-preview-selector.js';
+import { AssetProperties } from './asset-properties.js';
+
+export type PreviewPreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | '';
+
+export type AssetWithTags = AssetFragment & { tags?: { value: string }[] };
+
+interface AssetPreviewProps {
+    asset: AssetWithTags;
+    assets?: AssetWithTags[];
+    customFields?: any[];
+}
+
+export function AssetPreview({ asset, assets, customFields = [] }: Readonly<AssetPreviewProps>) {
+    const [size, setSize] = useState<PreviewPreset>('medium');
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    const [centered, setCentered] = useState(true);
+    const [assetIndex, setAssetIndex] = useState(assets?.indexOf(asset) || 0);
+
+    const imageRef = useRef<HTMLImageElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const activeAsset = assets?.[assetIndex] ?? asset;
+
+    useEffect(() => {
+        if (assets?.length) {
+            const index = assets.findIndex(a => a.id === asset.id);
+            setAssetIndex(index === -1 ? 0 : index);
+        }
+    }, [assets, asset.id]);
+
+    useEffect(() => {
+        const handleResize = () => {
+            updateDimensions();
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const updateDimensions = () => {
+        if (!imageRef.current || !containerRef.current) return;
+
+        const img = imageRef.current;
+        const container = containerRef.current;
+        const imgWidth = img.naturalWidth;
+        const imgHeight = img.naturalHeight;
+        const containerWidth = container.offsetWidth;
+        const containerHeight = container.offsetHeight;
+        setWidth(imgWidth);
+        setHeight(imgHeight);
+        setCentered(imgWidth <= containerWidth && imgHeight <= containerHeight);
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-4 h-full">
+            <div className="space-y-4">
+                <Card>
+                    <CardContent className="pt-6 space-y-4">
+                        <AssetProperties asset={activeAsset} />
+                        <AssetPreviewSelector size={size} setSize={setSize} width={width} height={height} />
+                    </CardContent>
+                </Card>
+            </div>
+
+            <div className="relative flex items-center justify-center bg-muted/30 rounded-lg">
+                {assets && assets.length > 1 && (
+                    <>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute left-4 z-10"
+                            onClick={() => setAssetIndex(i => i - 1)}
+                            disabled={assetIndex === 0}
+                        >
+                            <ChevronLeft className="h-4 w-4" />
+                        </Button>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute right-4 z-10"
+                            onClick={() => setAssetIndex(i => i + 1)}
+                            disabled={assetIndex === assets.length - 1}
+                        >
+                            <ChevronRight className="h-4 w-4" />
+                        </Button>
+                    </>
+                )}
+                <div
+                    ref={containerRef}
+                    className={cn('relative', centered && 'flex items-center justify-center')}
+                >
+                    <VendureImage
+                        ref={imageRef}
+                        asset={activeAsset}
+                        preset={size || undefined}
+                        mode="resize"
+                        onLoad={updateDimensions}
+                        className="max-w-full max-h-full object-contain"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,44 @@
+import { formatFileSize } from '@/vdb/lib/utils.js';
+
+import { Label } from '@/vdb/components/ui/label.js';
+import { AssetFragment } from '@/vdb/graphql/fragments.js';
+import { ExternalLink } from 'lucide-react';
+
+export interface AssetPropertiesProps {
+    asset: AssetFragment;
+}
+
+export function AssetProperties({ asset }: Readonly<AssetPropertiesProps>) {
+    return (
+        <div className="space-y-4">
+            <div>
+                <Label>Name</Label>
+                <p className="truncate text-sm text-muted-foreground">{asset.name}</p>
+            </div>
+            <div>
+                <Label>Source File</Label>
+                <a
+                    href={asset.source}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-primary hover:underline"
+                >
+                    {asset.source.split('/').pop()}
+                    <ExternalLink className="ml-1 h-3 w-3 inline" />
+                </a>
+            </div>
+
+            <div>
+                <Label>File Size</Label>
+                <p className="text-sm text-muted-foreground">{formatFileSize(asset.fileSize)}</p>
+            </div>
+
+            <div>
+                <Label>Dimensions</Label>
+                <p className="text-sm text-muted-foreground">
+                    {asset.width} x {asset.height}
+                </p>
+            </div>
+        </div>
+    );
+}

package/src/lib/components/shared/assign-to-channel-bulk-action.tsx

@@ -0,0 +1,71 @@
+import { LayersIcon } from 'lucide-react';
+import { useState } from 'react';
+
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelDialog } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@lingui/react/macro';
+
+interface AssignToChannelBulkActionProps {
+    selection: any[];
+    table: any;
+    entityType: string;
+    mutationFn: (variables: any) => Promise<any>;
+    requiredPermissions: string[];
+    buildInput: (channelId: string, additionalData?: Record<string, any>) => Record<string, any>;
+    additionalFields?: React.ReactNode;
+    additionalData?: Record<string, any>;
+    /**
+     * Additional callback to run on success, after the standard refetch and reset
+     */
+    onSuccess?: () => void;
+}
+
+export function AssignToChannelBulkAction({
+    selection,
+    table,
+    entityType,
+    mutationFn,
+    requiredPermissions,
+    buildInput,
+    additionalFields,
+    additionalData = {},
+    onSuccess,
+}: Readonly<AssignToChannelBulkActionProps>) {
+    const { refetchPaginatedList } = usePaginatedList();
+    const { channels } = useChannel();
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    if (channels.length < 2) {
+        return null;
+    }
+
+    const handleSuccess = () => {
+        refetchPaginatedList();
+        table.resetRowSelection();
+        onSuccess?.();
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={requiredPermissions}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Assign to channel</Trans>}
+                icon={LayersIcon}
+            />
+            <AssignToChannelDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                entityIds={selection.map(s => s.id)}
+                entityType={entityType}
+                mutationFn={mutationFn}
+                onSuccess={handleSuccess}
+                buildInput={buildInput}
+                additionalFields={additionalFields}
+                additionalData={additionalData}
+            />
+        </>
+    );
+}

package/src/lib/components/shared/assign-to-channel-dialog.tsx

@@ -0,0 +1,156 @@
+import { useMutation } from '@tanstack/react-query';
+import { ReactNode, useState } from 'react';
+import { toast } from 'sonner';
+
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+
+interface AssignToChannelDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    entityIds: string[];
+    entityType: string;
+    mutationFn: (variables: any) => Promise<ResultOf<any>>;
+    onSuccess?: () => void;
+    /**
+     * Function to build the input object for the mutation
+     * @param channelId - The selected channel ID
+     * @param additionalData - Any additional data (like priceFactor for products)
+     * @returns The input object for the mutation
+     */
+    buildInput: (channelId: string, additionalData?: Record<string, any>) => Record<string, any>;
+    /**
+     * Optional additional form fields to render
+     */
+    additionalFields?: ReactNode;
+    /**
+     * Optional additional data to pass to buildInput
+     */
+    additionalData?: Record<string, any>;
+}
+
+export function AssignToChannelDialog({
+    open,
+    onOpenChange,
+    entityIds,
+    entityType,
+    mutationFn,
+    onSuccess,
+    buildInput,
+    additionalFields,
+    additionalData = {},
+}: Readonly<AssignToChannelDialogProps>) {
+    const { t } = useLingui();
+    const [selectedChannelId, setSelectedChannelId] = useState<string>('');
+    const { channels, activeChannel } = useChannel();
+    const entityIdsLength = entityIds.length;
+
+    // Filter out the currently selected channel from available options
+    const availableChannels = channels.filter(channel => channel.id !== activeChannel?.id);
+
+    const { mutate, isPending } = useMutation({
+        mutationFn,
+        onSuccess: () => {
+            toast.success(t`Successfully assigned ${entityIdsLength} ${entityType} to channel`);
+            onSuccess?.();
+            onOpenChange(false);
+        },
+        onError: () => {
+            toast.error(t`Failed to assign ${entityIdsLength} ${entityType} to channel`);
+        },
+    });
+
+    const handleAssign = () => {
+        if (!selectedChannelId) {
+            toast.error('Please select a channel');
+            return;
+        }
+
+        const input = buildInput(selectedChannelId, additionalData);
+        mutate({ input });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Assign {entityType} to channel</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>
+                            Select a channel to assign {entityIds.length} {entityType} to
+                        </Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                        <label className="text-sm font-medium">
+                            <Trans>Channel</Trans>
+                        </label>
+                        <Select value={selectedChannelId} onValueChange={setSelectedChannelId}>
+                            <SelectTrigger>
+                                <SelectValue placeholder={t`Select a channel`} />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {availableChannels.map(channel => (
+                                    <SelectItem key={channel.id} value={channel.id}>
+                                        <ChannelCodeLabel code={channel.code} />
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    {additionalFields}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleAssign} disabled={!selectedChannelId || isPending}>
+                        <Trans>Assign</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+/**
+ * Hook for managing price factor state in assign-to-channel dialogs
+ */
+export function usePriceFactor() {
+    const [priceFactor, setPriceFactor] = useState<number>(1);
+
+    const priceFactorField = (
+        <div className="grid gap-2">
+            <label className="text-sm font-medium">
+                <Trans>Price conversion factor</Trans>
+            </label>
+            <Input
+                type="number"
+                min="0"
+                max="99999"
+                step="0.01"
+                value={priceFactor}
+                onChange={e => setPriceFactor(parseFloat(e.target.value) || 1)}
+            />
+        </div>
+    );
+
+    return { priceFactor, priceFactorField };
+}

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

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