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

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

@@ -0,0 +1,297 @@
+import { Copy, Edit, Globe, MoreHorizontal, Trash2 } from 'lucide-react';
+import React, { useState } from 'react';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { useDataTableContext } from './data-table-context.js';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+} from '../ui/sheet.js';
+import { SavedView } from '../../types/saved-views.js';
+import { toast } from 'sonner';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '../ui/alert-dialog.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.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 { i18n } = 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 message = isGlobal
+            ? i18n.t(`Applied global view "${view.name}"`)
+            : i18n.t(`Applied view "${view.name}"`);
+        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
+                ? i18n.t('Global view renamed successfully')
+                : i18n.t('View renamed successfully');
+            toast.success(message);
+            setEditingId(null);
+            setEditingName('');
+        } catch (error) {
+            const message = isGlobal
+                ? i18n.t('Failed to rename global view')
+                : i18n.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
+                ? i18n.t('Global view deleted successfully')
+                : i18n.t('View deleted successfully');
+            toast.success(message);
+            setDeleteConfirmId(null);
+        } catch (error) {
+            const message = isGlobal
+                ? i18n.t('Failed to delete global view')
+                : i18n.t('Failed to delete view');
+            toast.error(message);
+        }
+    };
+
+    const handleDuplicate = async (view: SavedView) => {
+        try {
+            await duplicateView(view.id, type);
+            const message = isGlobal
+                ? i18n.t('Global view duplicated successfully')
+                : i18n.t('View duplicated successfully');
+            toast.success(message);
+        } catch (error) {
+            const message = isGlobal
+                ? i18n.t('Failed to duplicate global view')
+                : i18n.t('Failed to duplicate view');
+            toast.error(message);
+        }
+    };
+
+    const handleConvertToUser = async (view: SavedView) => {
+        try {
+            await duplicateView(view.id, 'user');
+            toast.success(i18n.t('Global view converted to personal view successfully'));
+        } catch (error) {
+            toast.error(i18n.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(i18n.t('View converted to global successfully'));
+        } catch (error) {
+            toast.error(i18n.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>
+        </>
+    );
+};

package/src/lib/components/date-range-picker.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import { Calendar } from '@/vdb/components/ui/calendar.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { DefinedDateRange } from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
+import { cn } from '@/vdb/lib/utils.js';
+import {
+    addDays,
+    endOfDay,
+    endOfMonth,
+    endOfWeek,
+    format,
+    startOfDay,
+    startOfMonth,
+    startOfWeek,
+    subDays
+} from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+import { DateRange } from 'react-day-picker';
+
+interface DateRangePickerProps {
+    className?: string;
+    dateRange: DefinedDateRange;
+    onDateRangeChange: (range: DefinedDateRange) => void;
+}
+
+const presets = [
+    {
+        label: 'Today',
+        getValue: () => ({
+            from: startOfDay(new Date()),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        label: 'Yesterday',
+        getValue: () => ({
+            from: startOfDay(subDays(new Date(), 1)),
+            to: endOfDay(subDays(new Date(), 1)),
+        }),
+    },
+    {
+        label: 'Last 7 days',
+        getValue: () => ({
+            from: startOfDay(subDays(new Date(), 6)),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        label: 'This week',
+        getValue: () => ({
+            from: startOfWeek(new Date(), { weekStartsOn: 1 }),
+            to: endOfWeek(new Date(), { weekStartsOn: 1 }),
+        }),
+    },
+    {
+        label: 'Last 30 days',
+        getValue: () => ({
+            from: startOfDay(subDays(new Date(), 29)),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        label: 'Month to date',
+        getValue: () => ({
+            from: startOfMonth(new Date()),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        label: 'This month',
+        getValue: () => ({
+            from: startOfMonth(new Date()),
+            to: endOfMonth(new Date()),
+        }),
+    },
+    {
+        label: 'Last month',
+        getValue: () => ({
+            from: startOfMonth(subDays(new Date(), 30)),
+            to: endOfMonth(subDays(new Date(), 30)),
+        }),
+    },
+];
+
+export function DateRangePicker({ className, dateRange, onDateRangeChange }: DateRangePickerProps) {
+    const [open, setOpen] = React.useState(false);
+    // Internal state uses react-day-picker's DateRange type for Calendar compatibility
+    const [selectedRange, setSelectedRange] = React.useState<DateRange>({
+        from: dateRange.from,
+        to: dateRange.to
+    });
+
+    React.useEffect(() => {
+        setSelectedRange({
+            from: dateRange.from,
+            to: dateRange.to
+        });
+    }, [dateRange]);
+
+    const handleSelect = (range: DateRange | undefined) => {
+        if (range?.from) {
+            // If no end date is selected, use the from date as the end date
+            const to = range.to || range.from;
+            const finalRange: DefinedDateRange = {
+                from: range.from,
+                to: to
+            };
+            setSelectedRange({ from: range.from, to });
+            onDateRangeChange(finalRange);
+        }
+    };
+
+    const handlePresetClick = (preset: typeof presets[number]) => {
+        const range = preset.getValue();
+        handleSelect(range);
+        setOpen(false);
+    };
+
+    const formatDateRange = () => {
+        if (!selectedRange.from) {
+            return 'Select date range';
+        }
+        if (!selectedRange.to || selectedRange.from === selectedRange.to) {
+            return format(selectedRange.from, 'MMM dd, yyyy');
+        }
+        return `${format(selectedRange.from, 'MMM dd, yyyy')} - ${format(selectedRange.to, 'MMM dd, yyyy')}`;
+    };
+
+    const isPresetActive = (preset: typeof presets[number]) => {
+        if (!selectedRange.from || !selectedRange.to) return false;
+        const presetRange = preset.getValue();
+        return (
+            selectedRange.from.getTime() === presetRange.from.getTime() &&
+            selectedRange.to.getTime() === presetRange.to.getTime()
+        );
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    className={cn(
+                        'w-[280px] justify-start text-left font-normal',
+                        className
+                    )}
+                >
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {formatDateRange()}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+                <div className="flex">
+                    <div className="border-r p-2 space-y-0.5 min-w-0 w-32">
+                        {presets.map((preset) => (
+                            <Button
+                                key={preset.label}
+                                variant={isPresetActive(preset) ? 'default' : 'ghost'}
+                                size="sm"
+                                className="w-full justify-start font-normal text-xs h-7 px-2"
+                                onClick={() => handlePresetClick(preset)}
+                            >
+                                {preset.label}
+                            </Button>
+                        ))}
+                    </div>
+                    <div className="p-3">
+                        <Calendar
+                            mode="range"
+                            defaultMonth={selectedRange?.from}
+                            selected={selectedRange}
+                            onSelect={handleSelect}
+                            numberOfMonths={2}
+                            showOutsideDays={false}
+                        />
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

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

@@ -1,13 +1,15 @@
-import { DataTable, FacetedFilter } from '\@/vdb/components/data-table/data-table.js';
-import { getObjectPathToPaginatedList } from '\@/vdb/framework/document-introspection/get-document-structure.js';
-import { useListQueryFields } from '\@/vdb/framework/document-introspection/hooks.js';
-import { api } from '\@/vdb/graphql/api.js';
+import { DataTable, FacetedFilter } from '@/vdb/components/data-table/data-table.js';
+import { getObjectPathToPaginatedList } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { useListQueryFields } from '@/vdb/framework/document-introspection/hooks.js';
+import { api } from '@/vdb/graphql/api.js';
 import { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 
-import { BulkAction } from '\@/vdb/framework/extension-api/types/index.js';
-import { ResultOf } from '\@/vdb/graphql/graphql.js';
-import { useExtendedListQuery } from '\@/vdb/hooks/use-extended-list-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { includeOnlySelectedListFields } from '@/vdb/framework/document-introspection/include-only-selected-list-fields.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useExtendedListQuery } from '@/vdb/hooks/use-extended-list-query.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { ColumnFiltersState, ColumnSort, SortingState, Table } from '@tanstack/react-table';
 import { ColumnDef, Row, TableOptions, VisibilityState } from '@tanstack/table-core';
@@ -88,7 +90,18 @@ export type AllItemFieldKeys<T extends TypedDocumentNode<any, any>> =
     | CustomFieldKeysOfItem<PaginatedListItemFields<T>>;
 
 export type CustomizeColumnConfig<T extends TypedDocumentNode<any, any>> = {
-    [Key in AllItemFieldKeys<T>]?: Partial<ColumnDef<PaginatedListItemFields<T>, any>>;
+    [Key in AllItemFieldKeys<T>]?: Partial<ColumnDef<PaginatedListItemFields<T>, any>> & {
+        meta?: {
+            /**
+             * @description
+             * Columns that rely on _other_ columns in order to correctly render,
+             * can declare those other columns as dependencies in order to ensure that
+             * those columns are always fetched, even when those columns are not explicitly
+             * included in the visible table columns.
+             */
+            dependencies?: Array<AllItemFieldKeys<T>>;
+        };
+    };
 };
 
 export type FacetedFilterConfig<T extends TypedDocumentNode<any, any>> = {
@@ -365,7 +378,7 @@ export function PaginatedListDataTable<
     const [searchTerm, setSearchTerm] = React.useState<string>('');
     const debouncedSearchTerm = useDebounce(searchTerm, 500);
     const queryClient = useQueryClient();
-    const extendedListQuery = useExtendedListQuery(listQuery);
+    const extendedListQuery = useExtendedListQuery(addCustomFields(listQuery));
 
     const sort = sorting?.reduce((acc: any, sort: ColumnSort) => {
         const direction = sort.desc ? 'DESC' : 'ASC';
@@ -388,9 +401,44 @@ export function PaginatedListDataTable<
           }
         : undefined;
 
+    function refetchPaginatedList() {
+        queryClient.invalidateQueries({ queryKey });
+    }
+
+    registerRefresher?.(refetchPaginatedList);
+
+    // First we get info on _all_ the fields, including all custom fields, for the
+    // purpose of configuring the table columns.
+    const fields = useListQueryFields(extendedListQuery);
+    const paginatedListObjectPath = getObjectPathToPaginatedList(extendedListQuery);
+
+    const { columns, customFieldColumnNames } = useGeneratedColumns({
+        fields,
+        customizeColumns,
+        rowActions,
+        bulkActions,
+        deleteMutation,
+        additionalColumns,
+        defaultColumnOrder,
+    });
+
+    const columnVisibility = getColumnVisibility(fields, defaultVisibility, customFieldColumnNames);
+    // Get the actual visible columns and only fetch those
+    const visibleColumns = columns
+        // Filter out invisible columns, but _always_ select "id"
+        // because it is usually needed.
+        .filter(c => columnVisibility[c.id as string] || c.id === 'id')
+        .map(c => ({
+            name: c.id as string,
+            isCustomField: (c.meta as any)?.isCustomField ?? false,
+            dependencies: (c.meta as any)?.dependencies ?? [],
+        }));
+    const minimalListQuery = includeOnlySelectedListFields(extendedListQuery, visibleColumns);
+
     const defaultQueryKey = [
         PaginatedListDataTableKey,
-        extendedListQuery,
+        minimalListQuery,
+        visibleColumns,
         page,
         itemsPerPage,
         sorting,
@@ -399,12 +447,6 @@ export function PaginatedListDataTable<
     ];
     const queryKey = transformQueryKey ? transformQueryKey(defaultQueryKey) : defaultQueryKey;
 
-    function refetchPaginatedList() {
-        queryClient.invalidateQueries({ queryKey });
-    }
-
-    registerRefresher?.(refetchPaginatedList);
-
     const { data, isFetching } = useQuery({
         queryFn: () => {
             const searchFilter = onSearchTermChange ? onSearchTermChange(debouncedSearchTerm) : {};
@@ -419,31 +461,16 @@ export function PaginatedListDataTable<
             } as V;
 
             const transformedVariables = transformVariables ? transformVariables(variables) : variables;
-            return api.query(extendedListQuery, transformedVariables);
+            return api.query(minimalListQuery, transformedVariables);
         },
         queryKey,
         placeholderData: keepPreviousData,
     });
-
-    const fields = useListQueryFields(extendedListQuery);
-    const paginatedListObjectPath = getObjectPathToPaginatedList(extendedListQuery);
-
     let listData = data as any;
     for (const path of paginatedListObjectPath) {
         listData = listData?.[path];
     }
 
-    const { columns, customFieldColumnNames } = useGeneratedColumns({
-        fields,
-        customizeColumns,
-        rowActions,
-        bulkActions,
-        deleteMutation,
-        additionalColumns,
-        defaultColumnOrder,
-    });
-
-    const columnVisibility = getColumnVisibility(fields, defaultVisibility, customFieldColumnNames);
     const transformedData =
         typeof transformData === 'function' ? transformData(listData?.items ?? []) : (listData?.items ?? []);
     return (

package/src/lib/components/ui/button.tsx

@@ -23,7 +23,7 @@ const buttonVariants = cva(
                 lg: 'h-10 rounded-md px-8',
                 icon: 'h-9 w-9',
                 xs: 'h-5 rounded-md px-2 text-xs',
-                'icon-sm': 'h-7 w-7 text-xs',
+                'icon-sm': 'h-8 w-8 text-xs',
                 'icon-xs': 'h-5 w-5 text-xs',
             },
         },