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

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

@@ -2,12 +2,19 @@
 
 import { DataTablePagination } from '@/vdb/components/data-table/data-table-pagination.js';
 import { DataTableViewOptions } from '@/vdb/components/data-table/data-table-view-options.js';
+import { GlobalViewsBar } from '@/vdb/components/data-table/global-views-bar.js';
+import { MyViewsButton } from '@/vdb/components/data-table/my-views-button.js';
 import { RefreshButton } from '@/vdb/components/data-table/refresh-button.js';
+import { SaveViewButton } from '@/vdb/components/data-table/save-view-button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Skeleton } from '@/vdb/components/ui/skeleton.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { useSavedViews } from '@/vdb/hooks/use-saved-views.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import {
     ColumnDef,
     ColumnFilter,
@@ -25,6 +32,7 @@ import { RowSelectionState, TableOptions } from '@tanstack/table-core';
 import React, { Suspense, useEffect } from 'react';
 import { AddFilterMenu } from './add-filter-menu.js';
 import { DataTableBulkActions } from './data-table-bulk-actions.js';
+import { DataTableProvider } from './data-table-context.js';
 import { DataTableFacetedFilter, DataTableFacetedFilterOption } from './data-table-faceted-filter.js';
 import { DataTableFilterBadge } from './data-table-filter-badge.js';
 
@@ -106,7 +114,12 @@ export function DataTable<TData>({
 }: Readonly<DataTableProps<TData>>) {
     const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
+    const [searchTerm, setSearchTerm] = React.useState<string>('');
     const { activeChannel } = useChannel();
+    const { pageId } = usePage();
+    const savedViewsResult = useSavedViews();
+    const globalViews = pageId && onFilterChange ? savedViewsResult.globalViews : [];
+    const { t } = useLingui();
     const [pagination, setPagination] = React.useState<PaginationState>({
         pageIndex: (page ?? 1) - 1,
         pageSize: itemsPerPage ?? 10,
@@ -175,19 +188,37 @@ export function DataTable<TData>({
     }, [columnVisibility]);
 
     const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
+
+    const handleSearchChange = (value: string) => {
+        setSearchTerm(value);
+        onSearchTermChange?.(value);
+    };
+
     return (
-        <>
-            <div className="flex justify-between items-start">
-                <div className="flex flex-col space-y-2">
-                    <div className="flex items-center justify-start gap-2">
+        <DataTableProvider
+            columnFilters={columnFilters}
+            setColumnFilters={setColumnFilters}
+            searchTerm={searchTerm}
+            setSearchTerm={setSearchTerm}
+            sorting={sorting}
+            setSorting={setSorting}
+            pageId={pageId}
+            onFilterChange={onFilterChange}
+            onSearchTermChange={onSearchTermChange}
+            onRefresh={onRefresh}
+            isLoading={isLoading}
+            table={table}
+        >
+            <div className="space-y-2">
+                <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2">
                         {onSearchTermChange && (
-                            <div className="flex items-center">
-                                <Input
-                                    placeholder="Filter..."
-                                    onChange={event => onSearchTermChange(event.target.value)}
-                                    className="max-w-sm w-md"
-                                />
-                            </div>
+                            <Input
+                                placeholder={t`Filter...`}
+                                value={searchTerm}
+                                onChange={event => handleSearchChange(event.target.value)}
+                                className="w-64"
+                            />
                         )}
                         <Suspense>
                             {Object.entries(facetedFilters ?? {}).map(([key, filter]) => (
@@ -201,99 +232,120 @@ export function DataTable<TData>({
                             ))}
                         </Suspense>
                         {onFilterChange && <AddFilterMenu columns={table.getAllColumns()} />}
+                        {pageId && onFilterChange && <MyViewsButton />}
                     </div>
-                    <div className="flex gap-1">
-                        {columnFilters
-                            .filter(f => !facetedFilters?.[f.id])
-                            .map(f => {
-                                const column = table.getColumn(f.id);
-                                const currency = activeChannel?.defaultCurrencyCode ?? 'USD';
-                                return (
-                                    <DataTableFilterBadge
-                                        key={f.id}
-                                        filter={f}
-                                        currencyCode={currency}
-                                        dataType={
-                                            (column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'
-                                        }
-                                        onRemove={() =>
-                                            setColumnFilters(old => old.filter(x => x.id !== f.id))
-                                        }
-                                    />
-                                );
-                            })}
+                    <div className="flex items-center gap-2">
+                        {pageId && onFilterChange && <SaveViewButton />}
+                        {!disableViewOptions && <DataTableViewOptions table={table} />}
+                        {onRefresh && <RefreshButton onRefresh={onRefresh} isLoading={isLoading ?? false} />}
                     </div>
                 </div>
-                <div className="flex items-center justify-start gap-2">
-                    {!disableViewOptions && <DataTableViewOptions table={table} />}
-                    {onRefresh && <RefreshButton onRefresh={onRefresh} isLoading={isLoading ?? false} />}
-                </div>
-            </div>
 
-            <div className="rounded-md border my-2 relative">
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map(headerGroup => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map(header => {
+                {(pageId && onFilterChange && globalViews.length > 0) ||
+                columnFilters.filter(f => !facetedFilters?.[f.id]).length > 0 ? (
+                    <div className="flex items-center justify-between bg-muted/40 rounded border border-border p-2">
+                        <div className="flex items-center">
+                            {pageId && onFilterChange && <GlobalViewsBar />}
+                        </div>
+                        <div className="flex gap-1 items-center">
+                            {columnFilters
+                                .filter(f => !facetedFilters?.[f.id])
+                                .map(f => {
+                                    const column = table.getColumn(f.id);
+                                    const currency = activeChannel?.defaultCurrencyCode ?? 'USD';
                                     return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
-                                        </TableHead>
+                                        <DataTableFilterBadge
+                                            key={f.id}
+                                            filter={f}
+                                            currencyCode={currency}
+                                            dataType={
+                                                (column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'
+                                            }
+                                            onRemove={() =>
+                                                setColumnFilters(old => old.filter(x => x.id !== f.id))
+                                            }
+                                        />
                                     );
                                 })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {isLoading && !data?.length ? (
-                            Array.from({ length: pagination.pageSize }).map((_, index) => (
-                                <TableRow
-                                    key={`skeleton-${index}`}
-                                    className="animate-in fade-in duration-100"
+                            {columnFilters.filter(f => !facetedFilters?.[f.id]).length > 0 && (
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => setColumnFilters([])}
+                                    className="text-xs opacity-60 hover:opacity-100"
                                 >
-                                    {Array.from({ length: visibleColumnCount }).map((_, cellIndex) => (
-                                        <TableCell
-                                            key={`skeleton-cell-${index}-${cellIndex}`}
-                                            className="h-12"
-                                        >
-                                            <Skeleton className="h-4 my-2 w-full" />
-                                        </TableCell>
-                                    ))}
+                                    <Trans>Clear all</Trans>
+                                </Button>
+                            )}
+                        </div>
+                    </div>
+                ) : null}
+
+                <div className="rounded-md border my-2 relative shadow-sm">
+                    <Table>
+                        <TableHeader className="bg-muted/50">
+                            {table.getHeaderGroups().map(headerGroup => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map(header => {
+                                        return (
+                                            <TableHead key={header.id}>
+                                                {header.isPlaceholder
+                                                    ? null
+                                                    : flexRender(
+                                                          header.column.columnDef.header,
+                                                          header.getContext(),
+                                                      )}
+                                            </TableHead>
+                                        );
+                                    })}
                                 </TableRow>
-                            ))
-                        ) : table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map(row => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={row.getIsSelected() && 'selected'}
-                                    className="animate-in fade-in duration-100"
-                                >
-                                    {row.getVisibleCells().map(cell => (
-                                        <TableCell key={cell.id} className="h-12">
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </TableCell>
-                                    ))}
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {isLoading && !data?.length ? (
+                                Array.from({ length: pagination.pageSize }).map((_, index) => (
+                                    <TableRow
+                                        key={`skeleton-${index}`}
+                                        className="animate-in fade-in duration-100"
+                                    >
+                                        {Array.from({ length: visibleColumnCount }).map((_, cellIndex) => (
+                                            <TableCell
+                                                key={`skeleton-cell-${index}-${cellIndex}`}
+                                                className="h-12"
+                                            >
+                                                <Skeleton className="h-4 my-2 w-full" />
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map(row => (
+                                    <TableRow
+                                        key={row.id}
+                                        data-state={row.getIsSelected() && 'selected'}
+                                        className="animate-in fade-in duration-100"
+                                    >
+                                        {row.getVisibleCells().map(cell => (
+                                            <TableCell key={cell.id} className="h-12">
+                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow className="animate-in fade-in duration-100">
+                                    <TableCell colSpan={columns.length} className="h-24 text-center">
+                                        <Trans>No results</Trans>
+                                    </TableCell>
                                 </TableRow>
-                            ))
-                        ) : (
-                            <TableRow className="animate-in fade-in duration-100">
-                                <TableCell colSpan={columns.length} className="h-24 text-center">
-                                    No results.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                        {children}
-                    </TableBody>
-                </Table>
-                <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
+                            )}
+                            {children}
+                        </TableBody>
+                    </Table>
+                    <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
+                </div>
+                {onPageChange && totalItems != null && <DataTablePagination table={table} />}
             </div>
-            {onPageChange && totalItems != null && <DataTablePagination table={table} />}
-        </>
+        </DataTableProvider>
     );
 }

package/src/lib/components/data-table/filters/data-table-boolean-filter.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
 
@@ -14,9 +14,9 @@ export interface DataTableBooleanFilterProps {
 export const BOOLEAN_OPERATORS = ['eq', 'isNull'] as const;
 
 export function DataTableBooleanFilter({
-    value: incomingValue,
-    onChange,
-}: Readonly<DataTableBooleanFilterProps>) {
+                                           value: incomingValue,
+                                           onChange,
+                                       }: Readonly<DataTableBooleanFilterProps>) {
     const initialOperator = incomingValue ? (Object.keys(incomingValue)[0] ?? 'eq') : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : true;
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');

package/src/lib/components/data-table/global-views-bar.tsx

@@ -0,0 +1,97 @@
+import { Trans } from '@lingui/react/macro';
+import { ChevronDown } from 'lucide-react';
+import React from 'react';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { SavedView } from '../../types/saved-views.js';
+import { findMatchingSavedView } from '../../utils/saved-views-utils.js';
+import { PermissionGuard } from '../shared/permission-guard.js';
+import { Button } from '../ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
+import { useDataTableContext } from './data-table-context.js';
+import { ManageGlobalViewsButton } from './manage-global-views-button.js';
+
+export const GlobalViewsBar: React.FC = () => {
+    const { globalViews, canManageGlobalViews } = useSavedViews();
+    const { columnFilters, searchTerm, handleApplyView } = useDataTableContext();
+
+    if (globalViews.length === 0) {
+        return null;
+    }
+
+    const sortedViews = [...globalViews].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+    );
+
+    const handleViewClick = (view: SavedView) => {
+        handleApplyView(view.filters, view.searchTerm);
+    };
+
+    const isViewActive = (view: SavedView) => {
+        return findMatchingSavedView(columnFilters, searchTerm, [view]) !== undefined;
+    };
+
+    if (sortedViews.length <= 3) {
+        // Show all views as buttons
+        return (
+            <div className="flex items-center gap-1">
+                {sortedViews.map(view => (
+                    <Button
+                        key={view.id}
+                        variant={isViewActive(view) ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => handleViewClick(view)}
+                    >
+                        {view.name}
+                    </Button>
+                ))}
+                {canManageGlobalViews && <ManageGlobalViewsButton />}
+            </div>
+        );
+    }
+
+    // Show first 3 as buttons, rest in dropdown
+    const visibleViews = sortedViews.slice(0, 3);
+    const dropdownViews = sortedViews.slice(3);
+
+    return (
+        <div className="flex items-center gap-1">
+            {visibleViews.map(view => (
+                <Button
+                    key={view.id}
+                    variant={isViewActive(view) ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => handleViewClick(view)}
+                >
+                    {view.name}
+                </Button>
+            ))}
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                        <Trans>More views</Trans>
+                        <ChevronDown className="h-3 w-3" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                    {dropdownViews.map(view => (
+                        <DropdownMenuItem
+                            key={view.id}
+                            onClick={() => handleViewClick(view)}
+                            className={isViewActive(view) ? 'bg-primary' : ''}
+                        >
+                            {view.name}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+            <PermissionGuard requires={['WriteDashboardGlobalViews']}>
+                {canManageGlobalViews && <ManageGlobalViewsButton />}
+            </PermissionGuard>
+        </div>
+    );
+};

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

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

package/src/lib/components/data-table/human-readable-operator.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { BOOLEAN_OPERATORS } from './filters/data-table-boolean-filter.js';
 import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
 import { ID_OPERATORS } from './filters/data-table-id-filter.js';

package/src/lib/components/data-table/manage-global-views-button.tsx

@@ -0,0 +1,26 @@
+import { Settings } from 'lucide-react';
+import React, { useState } from 'react';
+import { Button } from '../ui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+import { Trans } from '@lingui/react/macro';
+import { GlobalViewsSheet } from './global-views-sheet.js';
+
+export const ManageGlobalViewsButton: React.FC = () => {
+    const [sheetOpen, setSheetOpen] = useState(false);
+
+    return (
+        <>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button variant="outline" size="icon-sm" onClick={() => setSheetOpen(true)}>
+                        <Settings />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <Trans>Manage global views</Trans>
+                </TooltipContent>
+            </Tooltip>
+            <GlobalViewsSheet open={sheetOpen} onOpenChange={setSheetOpen} />
+        </>
+    );
+};

package/src/lib/components/data-table/my-views-button.tsx

@@ -0,0 +1,47 @@
+import { Bookmark } from 'lucide-react';
+import React, { useState, useMemo } from 'react';
+import { Button } from '../ui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+import { Trans } from '@lingui/react/macro';
+import { UserViewsSheet } from './user-views-sheet.js';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { findMatchingSavedView } from '../../utils/saved-views-utils.js';
+import { useDataTableContext } from './data-table-context.js';
+
+export const MyViewsButton: React.FC = () => {
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const { userViews } = useSavedViews();
+    const { columnFilters, searchTerm, handleApplyView } = useDataTableContext();
+
+    // Find the active view using centralized utility
+    const activeView = useMemo(() => {
+        return findMatchingSavedView(columnFilters, searchTerm, userViews);
+    }, [userViews, columnFilters, searchTerm]);
+
+    return (
+        <>
+            <div className="flex items-center gap-2">
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant={activeView ? 'default' : 'outline'}
+                            size="icon"
+                            onClick={() => setSheetOpen(true)}
+                        >
+                            <Bookmark />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <Trans>My saved views</Trans>
+                    </TooltipContent>
+                </Tooltip>
+                {activeView && (
+                    <span className="text-sm text-muted-foreground">
+                        {activeView.name}
+                    </span>
+                )}
+            </div>
+            <UserViewsSheet open={sheetOpen} onOpenChange={setSheetOpen} />
+        </>
+    );
+};

package/src/lib/components/data-table/refresh-button.tsx

@@ -1,4 +1,6 @@
 import { Button } from '@/vdb/components/ui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { Trans } from '@lingui/react/macro';
 import { RefreshCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
@@ -33,8 +35,15 @@ export function RefreshButton({
     };
 
     return (
-        <Button variant="ghost" size="sm" onClick={handleClick} disabled={delayedLoading}>
-            <RefreshCw className={delayedLoading ? 'animate-rotate' : ''} />
-        </Button>
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <Button variant="outline" size="sm" onClick={handleClick} disabled={delayedLoading}>
+                    <RefreshCw className={delayedLoading ? 'animate-rotate' : ''} />
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+                <Trans>Refresh data</Trans>
+            </TooltipContent>
+        </Tooltip>
     );
 }

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

@@ -0,0 +1,41 @@
+import { Trans } from '@lingui/react/macro';
+import { BookmarkPlus } from 'lucide-react';
+import React, { useState } from 'react';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { isMatchingSavedView } from '../../utils/saved-views-utils.js';
+import { Button } from '../ui/button.js';
+import { useDataTableContext } from './data-table-context.js';
+import { SaveViewDialog } from './save-view-dialog.js';
+
+interface SaveViewButtonProps {
+    disabled?: boolean;
+}
+
+export const SaveViewButton: React.FC<SaveViewButtonProps> = ({ disabled }) => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const { userViews, globalViews } = useSavedViews();
+    const { columnFilters, searchTerm } = useDataTableContext();
+
+    const hasFilters = columnFilters.length > 0 || (searchTerm && searchTerm.length > 0);
+    const matchesExistingView = isMatchingSavedView(columnFilters, searchTerm || '', userViews, globalViews);
+
+    // Don't show the button if there are no filters or if filters match an existing saved view
+    if (!hasFilters || matchesExistingView) {
+        return null;
+    }
+
+    return (
+        <>
+            <Button variant="outline" size="sm" onClick={() => setDialogOpen(true)} disabled={disabled}>
+                <BookmarkPlus className="h-4 w-4 mr-1" />
+                <Trans>Save View</Trans>
+            </Button>
+            <SaveViewDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                filters={columnFilters}
+                searchTerm={searchTerm}
+            />
+        </>
+    );
+};