@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

package/src/lib/components/data-table/save-view-dialog.tsx

@@ -0,0 +1,113 @@
+import { ColumnFiltersState } from '@tanstack/react-table';
+import React, { useState } from 'react';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { Button } from '../ui/button.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog.js';
+import { Input } from '../ui/input.js';
+import { Label } from '../ui/label.js';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group.js';
+import { toast } from 'sonner';
+
+interface SaveViewDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    filters: ColumnFiltersState;
+    searchTerm?: string;
+}
+
+export const SaveViewDialog: React.FC<SaveViewDialogProps> = ({
+    open,
+    onOpenChange,
+    filters,
+    searchTerm,
+}) => {
+    const [name, setName] = useState('');
+    const [scope, setScope] = useState<'user' | 'global'>('user');
+    const [saving, setSaving] = useState(false);
+    const { saveView, userViews, globalViews, canManageGlobalViews } = useSavedViews();
+
+    const handleSave = async () => {
+        if (!name.trim()) {
+            toast.error('Please enter a name for the view');
+            return;
+        }
+
+        // Check for duplicate names
+        const existingViews = scope === 'user' ? userViews : globalViews;
+        if (existingViews.some(v => v.name === name.trim())) {
+            toast.error(`A ${scope} view with this name already exists`);
+            return;
+        }
+
+        setSaving(true);
+        try {
+            await saveView({
+                name: name.trim(),
+                scope,
+                filters,
+                searchTerm,
+            });
+            toast.success(`View "${name}" saved successfully`);
+            onOpenChange(false);
+            setName('');
+            setScope('user');
+        } catch (error) {
+            toast.error('Failed to save view');
+            console.error('Failed to save view:', error);
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Save Current View</DialogTitle>
+                    <DialogDescription>
+                        Save the current filters and search term as a reusable view.
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="view-name">View Name</Label>
+                        <Input
+                            id="view-name"
+                            value={name}
+                            onChange={e => setName(e.target.value)}
+                            placeholder="Enter a name for this view"
+                            autoFocus
+                        />
+                    </div>
+                    {canManageGlobalViews && (
+                        <div className="space-y-2">
+                            <Label>View Scope</Label>
+                            <RadioGroup value={scope} onValueChange={value => setScope(value as 'user' | 'global')}>
+                                <div className="flex items-center space-x-2">
+                                    <RadioGroupItem value="user" id="scope-user" />
+                                    <Label htmlFor="scope-user" className="font-normal">
+                                        Personal View (only visible to you)
+                                    </Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                    <RadioGroupItem value="global" id="scope-global" />
+                                    <Label htmlFor="scope-global" className="font-normal">
+                                        Global View (visible to all users)
+                                    </Label>
+                                </div>
+                            </RadioGroup>
+                        </div>
+                    )}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSave} disabled={saving || !name.trim()}>
+                        {saving ? 'Saving...' : 'Save View'}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+};

package/src/lib/components/data-table/use-generated-columns.tsx

@@ -7,10 +7,10 @@ import {
 } from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
-import { AccessorKeyColumnDef, createColumnHelper, Row } from '@tanstack/react-table';
+import { AccessorFnColumnDef, AccessorKeyColumnDef, createColumnHelper, Row } from '@tanstack/react-table';
 import { EllipsisIcon, TrashIcon } from 'lucide-react';
 import { useMemo } from 'react';
 import { toast } from 'sonner';
@@ -73,7 +73,10 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
     includeSelectionColumn?: boolean;
     includeActionsColumn?: boolean;
     enableSorting?: boolean;
-}>) {
+}>): {
+    columns: Array<AccessorKeyColumnDef<any> | AccessorFnColumnDef<any>>;
+    customFieldColumnNames: string[];
+} {
     const columnHelper = createColumnHelper<PaginatedListItemFields<T>>();
     const allBulkActions = useAllBulkActions(bulkActions ?? []);
 
@@ -136,7 +139,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
                         return <DisplayComponent id="vendure:asset" value={value} />;
                     }
                     if (value !== null && typeof value === 'object') {
-                        return JSON.stringify(value);
+                        return <DisplayComponent id="vendure:json" value={value} />;
                     }
                     return value;
                 },
@@ -196,6 +199,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
                     />
                 ),
                 enableColumnFilter: false,
+                enableHiding: false,
                 cell: ({ row }) => {
                     return (
                         <Checkbox
@@ -224,6 +228,7 @@ function getRowActions(
         accessorKey: 'actions',
         header: () => <Trans>Actions</Trans>,
         enableColumnFilter: false,
+        enableHiding: false,
         cell: ({ row, table }) => {
             return (
                 <DropdownMenu>
@@ -262,7 +267,7 @@ function DeleteMutationRowAction({
     row: Row<{ id: string }>;
 }>) {
     const { refetchPaginatedList } = usePaginatedList();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     // Inspect the mutation variables to determine if it expects 'id' or 'ids'
     const mutationVariables = getOperationVariablesFields(deleteMutation);
@@ -283,15 +288,15 @@ function DeleteMutationRowAction({
             const resultToCheck = Array.isArray(unwrappedResult) ? unwrappedResult[0] : unwrappedResult;
             if (resultToCheck.result === 'DELETED') {
                 refetchPaginatedList();
-                toast.success(i18n.t('Deleted successfully'));
+                toast.success(t`Deleted successfully`);
             } else {
-                toast.error(i18n.t('Failed to delete'), {
+                toast.error(t`Failed to delete`, {
                     description: resultToCheck.message,
                 });
             }
         },
         onError: (err: Error) => {
-            toast.error(i18n.t('Failed to delete'), {
+            toast.error(t`Failed to delete`, {
                 description: err.message,
             });
         },

package/src/lib/components/data-table/user-views-sheet.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ViewsSheet } from './views-sheet.js';
+
+interface UserViewsSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export const UserViewsSheet: React.FC<UserViewsSheetProps> = ({ open, onOpenChange }) => {
+    return <ViewsSheet open={open} onOpenChange={onOpenChange} type="user" />;
+};

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

@@ -0,0 +1,305 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { Copy, Edit, Globe, MoreHorizontal, Trash2 } from 'lucide-react';
+import React, { useState } from 'react';
+import { toast } from 'sonner';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { SavedView } from '../../types/saved-views.js';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '../ui/alert-dialog.js';
+import { Button } from '../ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
+import { Input } from '../ui/input.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet.js';
+import { useDataTableContext } from './data-table-context.js';
+
+interface ViewsSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    type: 'user' | 'global';
+}
+
+export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type }) => {
+    const { userViews, globalViews, deleteView, updateView, duplicateView, canManageGlobalViews } =
+        useSavedViews();
+    const { handleApplyView } = useDataTableContext();
+    const { t } = useLingui();
+    const [editingId, setEditingId] = useState<string | null>(null);
+    const [editingName, setEditingName] = useState('');
+    const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+    const views = type === 'global' ? globalViews : userViews;
+    const isGlobal = type === 'global';
+
+    const handleViewApply = (view: SavedView) => {
+        handleApplyView(view.filters, view.searchTerm);
+        const viewName = view.name;
+        const message = isGlobal ? t`Applied global view "${viewName}"` : t`Applied view "${viewName}"`;
+        toast.success(message);
+    };
+
+    const handleStartEdit = (view: SavedView) => {
+        setEditingId(view.id);
+        setEditingName(view.name);
+    };
+
+    const handleSaveEdit = async () => {
+        if (!editingId || !editingName.trim()) return;
+
+        try {
+            await updateView({ id: editingId, name: editingName.trim() });
+            const message = isGlobal ? t`Global view renamed successfully` : t`View renamed successfully`;
+            toast.success(message);
+            setEditingId(null);
+            setEditingName('');
+        } catch (error) {
+            const message = isGlobal ? t`Failed to rename global view` : t`Failed to rename view`;
+            toast.error(message);
+        }
+    };
+
+    const handleCancelEdit = () => {
+        setEditingId(null);
+        setEditingName('');
+    };
+
+    const handleDelete = async () => {
+        if (!deleteConfirmId) return;
+
+        try {
+            await deleteView(deleteConfirmId);
+            const message = isGlobal ? t`Global view deleted successfully` : t`View deleted successfully`;
+            toast.success(message);
+            setDeleteConfirmId(null);
+        } catch (error) {
+            const message = isGlobal ? t`Failed to delete global view` : t`Failed to delete view`;
+            toast.error(message);
+        }
+    };
+
+    const handleDuplicate = async (view: SavedView) => {
+        try {
+            await duplicateView(view.id, type);
+            const message = isGlobal
+                ? t`Global view duplicated successfully`
+                : t`View duplicated successfully`;
+            toast.success(message);
+        } catch (error) {
+            const message = isGlobal ? t`Failed to duplicate global view` : t`Failed to duplicate view`;
+            toast.error(message);
+        }
+    };
+
+    const handleConvertToUser = async (view: SavedView) => {
+        try {
+            await duplicateView(view.id, 'user');
+            toast.success(t`Global view converted to personal view successfully`);
+        } catch (error) {
+            toast.error(t`Failed to convert global view to personal view`);
+        }
+    };
+
+    const handleConvertToGlobal = async (view: SavedView) => {
+        try {
+            await duplicateView(view.id, 'global');
+            await deleteView(view.id);
+            toast.success(t`View converted to global successfully`);
+        } catch (error) {
+            toast.error(t`Failed to convert view to global`);
+        }
+    };
+
+    const getTitle = () => {
+        return isGlobal ? <Trans>Manage Global Views</Trans> : <Trans>My Saved Views</Trans>;
+    };
+
+    const getDescription = () => {
+        return isGlobal ? (
+            <Trans>Manage global saved views that are visible to all users</Trans>
+        ) : (
+            <Trans>Manage your personal saved views for this table</Trans>
+        );
+    };
+
+    const getEmptyStateMessage = () => {
+        if (isGlobal) {
+            return (
+                <>
+                    <p>
+                        <Trans>No global views have been created yet.</Trans>
+                    </p>
+                    <p className="text-sm mt-2">
+                        <Trans>Save a view as "Global" to make it available to all users.</Trans>
+                    </p>
+                </>
+            );
+        } else {
+            return (
+                <>
+                    <p>
+                        <Trans>You haven't saved any views yet.</Trans>
+                    </p>
+                    <p className="text-sm mt-2">
+                        <Trans>Apply filters to the table and click "Save View" to get started.</Trans>
+                    </p>
+                </>
+            );
+        }
+    };
+
+    const getDeleteDialogTitle = () => {
+        return isGlobal ? <Trans>Delete Global View</Trans> : <Trans>Delete View</Trans>;
+    };
+
+    const getDeleteDialogDescription = () => {
+        return isGlobal ? (
+            <Trans>
+                Are you sure you want to delete this global view? This action cannot be undone and will affect
+                all users.
+            </Trans>
+        ) : (
+            <Trans>Are you sure you want to delete this view? This action cannot be undone.</Trans>
+        );
+    };
+
+    return (
+        <>
+            <Sheet open={open} onOpenChange={onOpenChange}>
+                <SheetContent className="w-[400px] sm:w-[540px]">
+                    <SheetHeader>
+                        <SheetTitle>{getTitle()}</SheetTitle>
+                        <SheetDescription>{getDescription()}</SheetDescription>
+                    </SheetHeader>
+                    <div className="mt-4">
+                        {views.length === 0 ? (
+                            <div className="text-center py-8 text-muted-foreground">
+                                {getEmptyStateMessage()}
+                            </div>
+                        ) : (
+                            <div className="divide-y">
+                                {views.map(view => (
+                                    <div
+                                        key={view.id}
+                                        className="flex items-center justify-between py-3 first:pt-0 last:pb-0 hover:bg-accent/50 transition-colors rounded-md px-2"
+                                    >
+                                        {editingId === view.id ? (
+                                            <div className="flex items-center gap-2 flex-1">
+                                                <Input
+                                                    value={editingName}
+                                                    onChange={e => setEditingName(e.target.value)}
+                                                    onKeyDown={e => {
+                                                        if (e.key === 'Enter') handleSaveEdit();
+                                                        if (e.key === 'Escape') handleCancelEdit();
+                                                    }}
+                                                    autoFocus
+                                                    className="flex-1"
+                                                />
+                                                <Button size="sm" onClick={handleSaveEdit}>
+                                                    <Trans>Save</Trans>
+                                                </Button>
+                                                <Button
+                                                    size="sm"
+                                                    variant="outline"
+                                                    onClick={handleCancelEdit}
+                                                >
+                                                    <Trans>Cancel</Trans>
+                                                </Button>
+                                            </div>
+                                        ) : (
+                                            <>
+                                                <span className="font-medium text-sm truncate flex-1">
+                                                    {view.name}
+                                                </span>
+                                                <div className="flex items-center gap-1">
+                                                    <Button size="sm" onClick={() => handleViewApply(view)}>
+                                                        <Trans>Apply</Trans>
+                                                    </Button>
+                                                    <DropdownMenu>
+                                                        <DropdownMenuTrigger asChild>
+                                                            <Button variant="ghost" size="sm">
+                                                                <MoreHorizontal className="h-4 w-4" />
+                                                            </Button>
+                                                        </DropdownMenuTrigger>
+                                                        <DropdownMenuContent align="end">
+                                                            <DropdownMenuItem
+                                                                onClick={() => handleStartEdit(view)}
+                                                            >
+                                                                <Edit className="h-4 w-4 mr-2" />
+                                                                <Trans>Rename</Trans>
+                                                            </DropdownMenuItem>
+                                                            <DropdownMenuItem
+                                                                onClick={() => handleDuplicate(view)}
+                                                            >
+                                                                <Copy className="h-4 w-4 mr-2" />
+                                                                <Trans>Duplicate</Trans>
+                                                            </DropdownMenuItem>
+                                                            {isGlobal ? (
+                                                                <DropdownMenuItem
+                                                                    onClick={() => handleConvertToUser(view)}
+                                                                >
+                                                                    <Copy className="h-4 w-4 mr-2" />
+                                                                    <Trans>Copy to Personal</Trans>
+                                                                </DropdownMenuItem>
+                                                            ) : (
+                                                                canManageGlobalViews && (
+                                                                    <DropdownMenuItem
+                                                                        onClick={() =>
+                                                                            handleConvertToGlobal(view)
+                                                                        }
+                                                                    >
+                                                                        <Globe className="h-4 w-4 mr-2" />
+                                                                        <Trans>Make Global</Trans>
+                                                                    </DropdownMenuItem>
+                                                                )
+                                                            )}
+                                                            <DropdownMenuItem
+                                                                onClick={() => setDeleteConfirmId(view.id)}
+                                                                className="text-destructive"
+                                                            >
+                                                                <Trash2 className="h-4 w-4 mr-2" />
+                                                                <Trans>Delete</Trans>
+                                                            </DropdownMenuItem>
+                                                        </DropdownMenuContent>
+                                                    </DropdownMenu>
+                                                </div>
+                                            </>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </SheetContent>
+            </Sheet>
+
+            <AlertDialog open={!!deleteConfirmId} onOpenChange={() => setDeleteConfirmId(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{getDeleteDialogTitle()}</AlertDialogTitle>
+                        <AlertDialogDescription>{getDeleteDialogDescription()}</AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>
+                            <Trans>Cancel</Trans>
+                        </AlertDialogCancel>
+                        <AlertDialogAction onClick={handleDelete}>
+                            <Trans>Delete</Trans>
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    );
+};