@vendure/dashboard 3.2.3 → 3.3.0

package/src/lib/components/shared/customer-selector.tsx

@@ -5,6 +5,7 @@ import { api } from '@/graphql/api.js';
 import { graphql } from '@/graphql/graphql.js';
 import { Trans } from '@/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
 import { Plus, Search } from 'lucide-react';
 import { useState } from 'react';
 
@@ -38,19 +39,20 @@ export interface CustomerSelectorProps {
 export function CustomerSelector(props: CustomerSelectorProps) {
     const [open, setOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
+    const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
     const { data, isLoading } = useQuery({
-        queryKey: ['customers', searchTerm],
+        queryKey: ['customers', debouncedSearchTerm],
         queryFn: () =>
             api.query(customersDocument, {
                 options: {
                     sort: { lastName: 'ASC' },
-                    filter: searchTerm ? {
-                        firstName: { contains: searchTerm },
-                        lastName: { contains: searchTerm },
-                        emailAddress: { contains: searchTerm },
+                    filter: debouncedSearchTerm ? {
+                        firstName: { contains: debouncedSearchTerm },
+                        lastName: { contains: debouncedSearchTerm },
+                        emailAddress: { contains: debouncedSearchTerm },
                     } : undefined,
-                    filterOperator: searchTerm ? 'OR' : undefined,
+                    filterOperator: debouncedSearchTerm ? 'OR' : undefined,
                 },
             }),
         staleTime: 1000 * 60, // 1 minute
@@ -70,14 +72,11 @@ export function CustomerSelector(props: CustomerSelectorProps) {
             </PopoverTrigger>
             <PopoverContent className="p-0 w-[350px]" align="start">
                 <Command shouldFilter={false}>
-                    <div className="flex items-center border-b px-3">
-                        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                        <CommandInput 
-                            placeholder="Search customers..." 
-                            onValueChange={handleSearch}
-                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
-                        />
-                    </div>
+                    <CommandInput
+                        placeholder="Search customers..."
+                        onValueChange={handleSearch}
+                        className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+                    />
                     <CommandList>
                         <CommandEmpty>
                             {isLoading ? (

package/src/lib/components/shared/detail-page-button.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router';
+import { ChevronRight } from 'lucide-react';
 import { Button } from '../ui/button.js';
-import { SquareArrowOutUpRightIcon } from 'lucide-react';
 
 export function DetailPageButton({
     id,
@@ -15,7 +15,7 @@ export function DetailPageButton({
         <Button asChild variant="ghost" disabled={disabled}>
             <Link to={`./${id}`}>
                 {label}
-                {!disabled && <SquareArrowOutUpRightIcon className="h-3 w-3 text-muted-foreground" />}
+                {!disabled && <ChevronRight className="h-3 w-3 text-muted-foreground" />}
             </Link>
         </Button>
     );

package/src/lib/components/shared/entity-assets.tsx

@@ -24,9 +24,9 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { EllipsisIcon, ImageIcon, PaperclipIcon } from 'lucide-react';
-import React, { useCallback, useEffect, useState } from 'react';
-import { AssetPickerDialog } from './asset-picker-dialog.js';
-import { AssetPreviewDialog } from './asset-preview-dialog.js';
+import { useCallback, useEffect, useState } from 'react';
+import { AssetPickerDialog } from './asset/asset-picker-dialog.js';
+import { AssetPreviewDialog } from './asset/asset-preview-dialog.js';
 import { VendureImage } from './vendure-image.js';
 
 type Asset = AssetFragment;

package/src/lib/components/shared/error-page.tsx

@@ -13,12 +13,12 @@ export interface ErrorPageProps {
  */
 export function ErrorPage({ message }: ErrorPageProps) {
     return (
-        <Page>
+        <Page pageId='error-page'>
             <PageTitle>
                 <Trans>Error</Trans>
             </PageTitle>
             <PageLayout>
-                <PageBlock column="main">
+                <PageBlock column="main" blockId='error-message'>
                     <Alert variant="destructive">
                         <AlertCircle className="h-4 w-4" />
                         <AlertTitle>Error</AlertTitle>

package/src/lib/components/shared/navigation-confirmation.tsx

@@ -0,0 +1,49 @@
+import { Trans } from '@/lib/trans.js';
+import { useBlocker } from '@tanstack/react-router';
+import { UseFormReturn } from 'react-hook-form';
+
+import { Button } from '../ui/button.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog.js';
+
+export interface NavigationConfirmationProps {
+    form: UseFormReturn<any>;
+}
+
+/**
+ * Navigation confirmation dialog that blocks navigation when the form is dirty.
+ */
+export function NavigationConfirmation(props: Readonly<NavigationConfirmationProps>) {
+    const { proceed, reset, status } = useBlocker({
+        shouldBlockFn: (args) => {
+            // When a new entity is being created, we don't want to block navigation
+            // to the newly-created entity page.
+            const isNavigatingToNewlyCreatedEntity = args.current.fullPath === args.next.fullPath
+                && args.current.params.id === 'new' && args.next.params.id !== 'new'
+            if (isNavigatingToNewlyCreatedEntity) {
+                return false;
+            }
+            return props.form.formState.isDirty;
+        },
+        withResolver: true,
+        enableBeforeUnload: true,
+    });
+    return (
+        <Dialog open={status === 'blocked'} onOpenChange={reset}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle><Trans>Confirm navigation</Trans></DialogTitle>
+                    <DialogDescription>
+                        <Trans>Are you sure you want to navigate away from this page? Any unsaved changes will be
+                            lost.</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                    <Button variant="outline" onClick={reset}><Trans>Cancel</Trans></Button>
+                    <Button type="button" onClick={proceed}>
+                        <Trans>Confirm</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

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

@@ -28,7 +28,7 @@ import {
     SortingState,
     Table,
 } from '@tanstack/react-table';
-import { AccessorKeyColumnDef, ColumnDef, Row, TableOptions } from '@tanstack/table-core';
+import { AccessorKeyColumnDef, ColumnDef, Row, TableOptions, VisibilityState } from '@tanstack/table-core';
 import { EllipsisIcon, TrashIcon } from 'lucide-react';
 import React, { useMemo } from 'react';
 import { toast } from 'sonner';
@@ -196,6 +196,7 @@ export interface PaginatedListDataTableProps<
     onPageChange: (table: Table<any>, page: number, perPage: number) => void;
     onSortChange: (table: Table<any>, sorting: SortingState) => void;
     onFilterChange: (table: Table<any>, filters: ColumnFiltersState) => void;
+    onColumnVisibilityChange?: (table: Table<any>, columnVisibility: VisibilityState) => void;
     facetedFilters?: FacetedFilterConfig<T>;
     rowActions?: RowAction<PaginatedListItemFields<T>>[];
     disableViewOptions?: boolean;
@@ -227,6 +228,7 @@ export function PaginatedListDataTable<
     onPageChange,
     onSortChange,
     onFilterChange,
+    onColumnVisibilityChange,
     facetedFilters,
     rowActions,
     disableViewOptions,
@@ -331,6 +333,10 @@ export function PaginatedListDataTable<
                 meta: { fieldInfo, isCustomField },
                 enableColumnFilter,
                 enableSorting: fieldInfo.isScalar,
+                // Filtering is done on the server side, but we set this to 'equalsString' because
+                // otherwise the TanStack Table with apply an "auto" function which somehow
+                // prevents certain filters from working.
+                filterFn: 'equalsString',
                 cell: ({ cell, row }) => {
                     const value = !isCustomField
                         ? cell.getValue()
@@ -416,11 +422,13 @@ export function PaginatedListDataTable<
                 onPageChange={onPageChange}
                 onSortChange={onSortChange}
                 onFilterChange={onFilterChange}
+                onColumnVisibilityChange={onColumnVisibilityChange}
                 onSearchTermChange={onSearchTermChange ? term => setSearchTerm(term) : undefined}
                 defaultColumnVisibility={columnVisibility}
                 facetedFilters={facetedFilters}
                 disableViewOptions={disableViewOptions}
                 setTableOptions={setTableOptions}
+                onRefresh={refetchPaginatedList}
             />
         </PaginatedListContext.Provider>
     );
@@ -434,6 +442,7 @@ function getRowActions(
         id: 'actions',
         accessorKey: 'actions',
         header: 'Actions',
+        enableColumnFilter: false,
         cell: ({ row }) => {
             return (
                 <DropdownMenu>

package/src/lib/components/shared/product-variant-selector.tsx

@@ -0,0 +1,111 @@
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover.js";
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { cn } from '@/lib/utils.js';
+import { useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { ChevronsUpDown, Plus } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../ui/button.js';
+import { assetFragment } from '@/graphql/fragments.js';
+import { VendureImage } from './vendure-image.js';
+
+const productVariantListDocument = graphql(`
+    query ProductVariantList($options: ProductVariantListOptions) {
+        productVariants(options: $options) {
+            items {
+                id
+                name
+                sku
+                featuredAsset {
+                    ...Asset
+                }
+            }
+            totalItems
+        }
+    }
+`, [assetFragment]);
+
+export interface ProductVariantSelectorProps {
+    onProductVariantIdChange: (productVariantId: string) => void;
+}
+
+export function ProductVariantSelector({ onProductVariantIdChange }: ProductVariantSelectorProps) {
+    const [search, setSearch] = useState('');
+    const [open, setOpen] = useState(false);
+    const debouncedSearch = useDebounce(search, 500);
+
+    const { data, isLoading } = useQuery({
+        queryKey: ['productVariants', debouncedSearch],
+        staleTime: 1000 * 60 * 5,
+        enabled: debouncedSearch.length > 0,
+        queryFn: () =>
+            api.query(productVariantListDocument, {
+                options: {
+                    take: 10,
+                    filter: {
+                        name: { contains: debouncedSearch },
+                        sku: { contains: debouncedSearch },
+                    },
+                    filterOperator: 'OR',
+                },
+            }),
+    });
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    role="combobox"
+                    className="w-full"
+                >
+                    Add item to order
+                    <Plus className="opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0">
+                <Command shouldFilter={false}>
+                    <CommandInput
+                        placeholder="Add item to order..."
+                        className="h-9"
+                       onValueChange={(value) => setSearch(value)}
+                    />
+                    <CommandList>
+                        <CommandEmpty>No products found.</CommandEmpty>
+                        <CommandGroup>
+                            {data?.productVariants.items.map((variant) => (
+                                <CommandItem
+                                    key={variant.id}
+                                    value={variant.id}
+                                    onSelect={() => {
+                                        onProductVariantIdChange(variant.id);
+                                        setOpen(false);
+                                    }}
+                                    className="flex items-center gap-2 p-2"
+                                >
+                                    {variant.featuredAsset && (
+                                        <VendureImage
+                                            asset={variant.featuredAsset}
+                                            preset="tiny"
+                                            className="size-8 rounded-md object-cover"
+                                        />
+                                    )}
+                                    <div className="flex flex-col">
+                                        <span className="text-sm font-medium">{variant.name}</span>
+                                        <span className="text-xs text-muted-foreground">{variant.sku}</span>
+                                    </div>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/vendure-image.tsx

@@ -70,7 +70,7 @@ export function VendureImage({
     }
 
     // Apply focal point if available and requested
-    if (useFocalPoint && asset.focalPoint && mode === 'crop') {
+    if (useFocalPoint && asset.focalPoint) {
         url.searchParams.set('fpx', asset.focalPoint.x.toString());
         url.searchParams.set('fpy', asset.focalPoint.y.toString());
     }