@vendure/dashboard 3.5.0-minor-202510071456 → 3.5.0-minor-202510161257

package/src/app/routes/_authenticated/_facets/components/facet-values-table.tsx

@@ -1,14 +1,17 @@
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Trans } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
-import { Button } from '@/vdb/components/ui/button.js';
-import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { SortingState } from '@tanstack/react-table';
 import { PlusIcon } from 'lucide-react';
 import { useRef, useState } from 'react';
-import { deleteFacetValuesDocument } from '../facets.graphql.js';
+import { DeleteFacetValuesBulkAction } from './facet-value-bulk-actions.js';
+
+const pageId = 'facet-values-table';
 
 export const facetValueListDocument = graphql(`
     query FacetValueList($options: FacetValueListOptions) {
@@ -35,27 +38,49 @@ export function FacetValuesTable({ facetId, registerRefresher }: Readonly<FacetV
     const [sorting, setSorting] = useState<SortingState>([]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
-    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    const { setTableSettings, settings } = useUserSettings();
     const refreshRef = useRef<() => void>(() => {});
 
+    const tableSettings = pageId ? settings.tableSettings?.[pageId] : undefined;
+    const defaultVisibility = {
+        name: true,
+        code: true,
+    };
+
+    const columnVisibility = pageId
+        ? (tableSettings?.columnVisibility ?? defaultVisibility)
+        : defaultVisibility;
+    const columnOrder = pageId ? (tableSettings?.columnOrder ?? []) : ['name', 'code'];
+    const columnFilters = pageId ? tableSettings?.columnFilters : [];
+
     return (
         <>
             <PaginatedListDataTable
                 listQuery={addCustomFields(facetValueListDocument)}
-                deleteMutation={deleteFacetValuesDocument}
                 page={page}
                 itemsPerPage={pageSize}
                 sorting={sorting}
-                columnFilters={filters}
-                onPageChange={(_, page, perPage) => {
-                    setPage(page);
-                    setPageSize(perPage);
+                columnFilters={columnFilters}
+                defaultColumnOrder={columnOrder}
+                defaultVisibility={columnVisibility}
+                onPageChange={(table, page, perPage) => {
+                    if (pageId) {
+                        setPageSize(perPage);
+                        setPage(page);
+                    }
                 }}
-                onSortChange={(_, sorting) => {
+                onSortChange={(table, sorting) => {
                     setSorting(sorting);
                 }}
-                onFilterChange={(_, filters) => {
-                    setFilters(filters);
+                onFilterChange={(table, filters) => {
+                    if (pageId) {
+                        setTableSettings(pageId, 'columnFilters', filters);
+                    }
+                }}
+                onColumnVisibilityChange={(table, columnVisibility) => {
+                    if (pageId) {
+                        setTableSettings(pageId, 'columnVisibility', columnVisibility);
+                    }
                 }}
                 registerRefresher={refresher => {
                     refreshRef.current = refresher;
@@ -94,6 +119,12 @@ export function FacetValuesTable({ facetId, registerRefresher }: Readonly<FacetV
                         ),
                     },
                 }}
+                bulkActions={[
+                    {
+                        order: 400,
+                        component: DeleteFacetValuesBulkAction,
+                    },
+                ]}
             />
             <div className="mt-4">
                 <Button asChild variant="outline">

package/src/app/routes/_authenticated/_facets/facets_.$facetId.values_.$id.tsx

@@ -1,3 +1,4 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
 import { PageBreadcrumb } from '@/vdb/components/layout/generated-breadcrumbs.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
@@ -115,8 +116,8 @@ function FacetValueDetailPage() {
                 </PageActionBarRight>
             </PageActionBar>
             <PageLayout>
-                <PageBlock column="side" blockId="facet-info">
-                    {entity?.facet && (
+                {entity?.facet && (
+                    <PageBlock column="side" blockId="facet-info">
                         <div className="space-y-2">
                             <div className="text-sm font-medium">
                                 <Trans>Facet</Trans>
@@ -124,8 +125,8 @@ function FacetValueDetailPage() {
                             <div className="text-sm text-muted-foreground">{entity?.facet.name}</div>
                             <div className="text-xs text-muted-foreground">{entity?.facet.code}</div>
                         </div>
-                    )}
-                </PageBlock>
+                    </PageBlock>
+                )}
                 <PageBlock column="main" blockId="main-form">
                     <DetailFormGrid>
                         <TranslatableFormFieldWrapper
@@ -138,7 +139,15 @@ function FacetValueDetailPage() {
                             control={form.control}
                             name="code"
                             label={<Trans>Code</Trans>}
-                            render={({ field }) => <Input {...field} />}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="code"
+                                    watchFieldName="name"
+                                    entityName="FacetValue"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
                         />
                     </DetailFormGrid>
                 </PageBlock>

package/src/app/routes/_authenticated/_orders/components/edit-order-table.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import {
     ColumnDef,
     flexRender,
@@ -14,7 +14,7 @@ import {
     VisibilityState,
 } from '@tanstack/react-table';
 import { Trash2 } from 'lucide-react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
     couponCodeSelectorPromotionListDocument,
     draftOrderEligibleShippingMethodsDocument,
@@ -44,7 +44,11 @@ export interface OrderTableProps {
         price?: any;
         priceWithTax?: any;
     }) => void;
-    onAdjustLine: (event: { lineId: string; quantity: number; customFields: Record<string, any> }) => void;
+    onAdjustLine: (event: {
+        lineId: string;
+        quantity: number;
+        customFields: Record<string, any> | undefined;
+    }) => void;
     onRemoveLine: (event: { lineId: string }) => void;
     onSetShippingMethod: (event: { shippingMethodId: string }) => void;
     onApplyCouponCode: (event: { couponCode: string }) => void;
@@ -53,95 +57,116 @@ export interface OrderTableProps {
 }
 
 export function EditOrderTable({
-                                   order,
-                                   eligibleShippingMethods,
-                                   onAddItem,
-                                   onAdjustLine,
-                                   onRemoveLine,
-                                   onSetShippingMethod,
-                                   onApplyCouponCode,
-                                   onRemoveCouponCode,
-                                   displayTotals = true,
-                               }: Readonly<OrderTableProps>) {
+    order,
+    eligibleShippingMethods,
+    onAddItem,
+    onAdjustLine,
+    onRemoveLine,
+    onSetShippingMethod,
+    onApplyCouponCode,
+    onRemoveCouponCode,
+    displayTotals = true,
+}: Readonly<OrderTableProps>) {
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+    const { t } = useLingui();
     const currencyCode = order.currencyCode;
-    const columns: ColumnDef<OrderLineFragment & { customFields?: Record<string, any> }>[] = [
-        {
-            header: 'Image',
-            accessorKey: 'featuredAsset',
-            cell: ({ row }) => {
-                const asset = row.original.featuredAsset;
-                return <VendureImage asset={asset} preset="tiny" />;
+    const columns: ColumnDef<OrderLineFragment & { customFields?: Record<string, any> }>[] = useMemo(
+        () => [
+            {
+                header: '',
+                accessorKey: 'featuredAsset',
+                cell: ({ row }) => {
+                    const asset = row.original.featuredAsset;
+                    const removing = row.original.quantity === 0;
+                    return (
+                        <VendureImage className={removing ? 'opacity-50' : ''} asset={asset} preset="tiny" />
+                    );
+                },
             },
-        },
-        {
-            header: 'Product',
-            accessorKey: 'productVariant.name',
-        },
-        {
-            header: 'SKU',
-            accessorKey: 'productVariant.sku',
-        },
-        {
-            header: 'Unit price',
-            accessorKey: 'unitPriceWithTax',
-            cell: ({ row }) => {
-                const value = row.original.unitPriceWithTax;
-                const netValue = row.original.unitPrice;
-                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
+            {
+                header: t`Product`,
+                accessorKey: 'productVariant.name',
+                cell: ({ row }) => {
+                    const value = row.original.productVariant.name;
+                    const removing = row.original.quantity === 0;
+                    return <div className={removing ? 'text-muted-foreground' : ''}>{value}</div>;
+                },
             },
-        },
-        {
-            header: 'Quantity',
-            accessorKey: 'quantity',
-            cell: ({ row }) => {
-                return (
-                    <div className="flex gap-2">
-                        <Input
-                            type="number"
-                            value={row.original.quantity}
-                            onChange={e =>
-                                onAdjustLine({
-                                    lineId: row.original.id,
-                                    quantity: e.target.valueAsNumber,
-                                    customFields: row.original.customFields ?? {},
-                                })
-                            }
-                        />
-                        <Button
-                            variant="outline"
-                            type="button"
-                            size="icon"
-                            onClick={() => onRemoveLine({ lineId: row.original.id })}
-                        >
-                            <Trash2 />
-                        </Button>
-                        {row.original.customFields && (
-                            <OrderLineCustomFieldsForm
-                                onUpdate={customFields => {
+            {
+                header: t`SKU`,
+                accessorKey: 'productVariant.sku',
+            },
+            {
+                header: t`Unit price`,
+                accessorKey: 'unitPriceWithTax',
+                cell: ({ row }) => {
+                    const value = row.original.unitPriceWithTax;
+                    const netValue = row.original.unitPrice;
+                    return (
+                        <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />
+                    );
+                },
+            },
+            {
+                header: t`Quantity`,
+                accessorKey: 'quantity',
+                cell: ({ row }) => {
+                    return (
+                        <div className="flex gap-2">
+                            <Input
+                                type="number"
+                                value={row.original.quantity}
+                                min={0}
+                                onChange={e => {
+                                    const value = Number.isNaN(e.target.valueAsNumber)
+                                        ? 0
+                                        : e.target.valueAsNumber;
                                     onAdjustLine({
                                         lineId: row.original.id,
-                                        quantity: row.original.quantity,
-                                        customFields: customFields,
+                                        quantity: value,
+                                        customFields: row.original.customFields,
                                     });
                                 }}
-                                value={row.original.customFields}
                             />
-                        )}
-                    </div>
-                );
+                            <Button
+                                variant="outline"
+                                type="button"
+                                size="icon"
+                                disabled={row.original.quantity === 0}
+                                onClick={() => onRemoveLine({ lineId: row.original.id })}
+                            >
+                                <Trash2 />
+                            </Button>
+                            {row.original.customFields && (
+                                <OrderLineCustomFieldsForm
+                                    onUpdate={customFields => {
+                                        onAdjustLine({
+                                            lineId: row.original.id,
+                                            quantity: row.original.quantity,
+                                            customFields: customFields,
+                                        });
+                                    }}
+                                    value={row.original.customFields}
+                                />
+                            )}
+                        </div>
+                    );
+                },
             },
-        },
-        {
-            header: 'Total',
-            accessorKey: 'linePriceWithTax',
-            cell: ({ row }) => {
-                const value = row.original.linePriceWithTax;
-                const netValue = row.original.linePrice;
-                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
+            {
+                header: t`Total`,
+                accessorKey: 'linePriceWithTax',
+                cell: ({ row }) => {
+                    const value = row.original.linePriceWithTax;
+                    const netValue = row.original.linePrice;
+                    return (
+                        <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />
+                    );
+                },
             },
-        },
-    ];
+        ],
+        [],
+    );
 
     const data = order.lines;
 
@@ -169,9 +194,9 @@ export function EditOrderTable({
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext(),
-                                                )}
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
                                         </TableHead>
                                     );
                                 })}
@@ -181,14 +206,14 @@ export function EditOrderTable({
                     <TableBody>
                         {table.getRowModel().rows?.length
                             ? table.getRowModel().rows.map(row => (
-                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                                    {row.getVisibleCells().map(cell => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
+                                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                                      {row.getVisibleCells().map(cell => (
+                                          <TableCell key={cell.id}>
+                                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                          </TableCell>
+                                      ))}
+                                  </TableRow>
+                              ))
                             : null}
                         <TableRow>
                             <TableCell colSpan={columns.length} className="h-12">

package/src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx

@@ -234,7 +234,7 @@ export function OrderDetailShared({
                 {/* Side Column Blocks */}
                 <PageBlock column="side" blockId="state">
                     <StateTransitionControl
-                        currentState={getTranslatedOrderState(entity?.state)}
+                        currentState={entity?.state}
                         actions={stateTransitionActions}
                         isLoading={transitionOrderToStateMutation.isPending}
                     />

package/src/app/routes/_authenticated/_orders/components/order-modification-summary.tsx

@@ -42,7 +42,8 @@ export function OrderModificationSummary({
             if (
                 orig &&
                 (adj.quantity !== orig.quantity ||
-                    JSON.stringify(adj.customFields) !== JSON.stringify((orig as any).customFields))
+                    JSON.stringify(adj.customFields) !== JSON.stringify((orig as any).customFields)) &&
+                adj.quantity > 0
             ) {
                 return {
                     orderLineId: adj.orderLineId,

package/src/app/routes/_authenticated/_orders/components/order-table-totals.tsx

@@ -10,40 +10,39 @@ export interface OrderTableTotalsProps {
 
 export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTotalsProps>) {
     const currencyCode = order.currencyCode;
-
     return (
         <>
             {order.surcharges?.length > 0
                 ? order.surcharges.map((surcharge, index) => (
-                    <TableRow key={`${surcharge.description}-${index}`}>
-                        <TableCell colSpan={columnCount - 1} className="h-12">
-                            <Trans>Surcharge</Trans>: {surcharge.description}
-                        </TableCell>
-                        <TableCell colSpan={1} className="h-12">
-                            <MoneyGrossNet
-                                priceWithTax={surcharge.priceWithTax}
-                                price={surcharge.price}
-                                currencyCode={currencyCode}
-                            />
-                        </TableCell>
-                    </TableRow>
-                ))
+                      <TableRow key={`${surcharge.description}-${index}`}>
+                          <TableCell colSpan={columnCount - 1} className="h-12">
+                              <Trans>Surcharge</Trans>: {surcharge.description}
+                          </TableCell>
+                          <TableCell colSpan={1} className="h-12">
+                              <MoneyGrossNet
+                                  priceWithTax={surcharge.priceWithTax}
+                                  price={surcharge.price}
+                                  currencyCode={currencyCode}
+                              />
+                          </TableCell>
+                      </TableRow>
+                  ))
                 : null}
             {order.discounts?.length > 0
                 ? order.discounts.map((discount, index) => (
-                    <TableRow key={`${discount.description}-${index}`}>
-                        <TableCell colSpan={columnCount - 1} className="h-12">
-                            <Trans>Discount</Trans>: {discount.description}
-                        </TableCell>
-                        <TableCell colSpan={1} className="h-12">
-                            <MoneyGrossNet
-                                priceWithTax={discount.amountWithTax}
-                                price={discount.amount}
-                                currencyCode={currencyCode}
-                            />
-                        </TableCell>
-                    </TableRow>
-                ))
+                      <TableRow key={`${discount.description}-${index}`}>
+                          <TableCell colSpan={columnCount - 1} className="h-12">
+                              <Trans>Discount</Trans>: {discount.description}
+                          </TableCell>
+                          <TableCell colSpan={1} className="h-12">
+                              <MoneyGrossNet
+                                  priceWithTax={discount.amountWithTax}
+                                  price={discount.amount}
+                                  currencyCode={currencyCode}
+                              />
+                          </TableCell>
+                      </TableRow>
+                  ))
                 : null}
             <TableRow>
                 <TableCell colSpan={columnCount - 1} className="h-12">

package/src/app/routes/_authenticated/_orders/components/order-table.tsx

@@ -34,7 +34,10 @@ function createCustomizeColumns(currencyCode: string) {
             accessorKey: 'featuredAsset',
             cell: ({ row }: { row: any }) => {
                 const asset = row.original.featuredAsset;
-                return <VendureImage asset={asset} preset="tiny" />;
+                const fallbackAsset =
+                    row.original.productVariant?.featuredAsset ??
+                    row.original.productVariant?.product?.featuredAsset;
+                return <VendureImage asset={asset ?? fallbackAsset} preset="tiny" />;
             },
         },
         productVariant: {
@@ -154,14 +157,13 @@ export function OrderTable({ order, pageId }: Readonly<OrderTableProps>) {
         customizeColumns: customizeColumns as any,
         deleteMutation: undefined,
         defaultColumnOrder: columnOrder,
-        additionalColumns: {},
         includeSelectionColumn: false,
         includeActionsColumn: false,
         enableSorting: false,
     });
 
     const columnVisibility = getColumnVisibility(columns, defaultColumnVisibility, customFieldColumnNames);
-    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
+    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length - 2; // -2 for "actions" and "selection" cols
     const data = order.lines;
 
     return (

package/src/app/routes/_authenticated/_orders/components/state-transition-control.tsx

@@ -5,9 +5,10 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
-import { Trans } from '@lingui/react/macro';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { cn } from '@/vdb/lib/utils.js';
-import { EllipsisVertical, CircleDashed, CircleCheck, CircleX } from 'lucide-react';
+import { Trans } from '@lingui/react/macro';
+import { CircleCheck, CircleDashed, CircleX, EllipsisVertical } from 'lucide-react';
 
 export type StateType = 'default' | 'destructive' | 'success';
 
@@ -44,6 +45,7 @@ export function StateTransitionControl({
     actions,
     isLoading,
 }: Readonly<StateTransitionControlProps>) {
+    const { getTranslatedOrderState } = useDynamicTranslations();
     const currentStateType = getTypeForState(currentState);
     const iconForType = {
         destructive: <CircleX className="h-4 w-4 text-destructive" />,
@@ -61,9 +63,7 @@ export function StateTransitionControl({
                 title={currentState}
             >
                 <div className="flex-shrink-0">{iconForType[currentStateType]}</div>
-                <span className="truncate">
-                    {currentState}
-                </span>
+                <span className="truncate">{getTranslatedOrderState(currentState)}</span>
             </div>
             {actions.length > 0 && (
                 <DropdownMenu>
@@ -72,10 +72,7 @@ export function StateTransitionControl({
                             variant="outline"
                             size="sm"
                             disabled={isLoading}
-                            className={cn(
-                                'rounded-l-none border-l-0 shadow-none',
-                                'bg-background',
-                            )}
+                            className={cn('rounded-l-none border-l-0 shadow-none', 'bg-background')}
                         >
                             <EllipsisVertical className="h-4 w-4" />
                         </Button>

package/src/app/routes/_authenticated/_orders/orders.graphql.ts

@@ -638,8 +638,24 @@ export const modifyOrderDocument = graphql(
         mutation ModifyOrder($input: ModifyOrderInput!) {
             modifyOrder(input: $input) {
                 __typename
-                ...OrderDetail
                 ...ErrorResult
+                ... on Order {
+                    lines {
+                        productVariant {
+                            featuredAsset {
+                                id
+                                preview
+                            }
+                            product {
+                                featuredAsset {
+                                    id
+                                    preview
+                                }
+                            }
+                        }
+                    }
+                }
+                ...OrderDetail
             }
         }
     `,