@vendure/dashboard 3.2.0 → 3.2.1

package/src/app/routes/_authenticated/_products/components/option-value-input.tsx

@@ -1,96 +1,96 @@
-import { useFieldArray } from "react-hook-form";
-import { useFormContext } from "react-hook-form";
-import { useState } from "react";
-import { Input } from "@/components/ui/input.js";
-import { Button } from "@/components/ui/button.js";
-import { Badge } from "@/components/ui/badge.js";
-import { Plus, X } from "lucide-react";
-
-interface OptionValue {
-    value: string;
-    id: string;
-}
-
-interface FormValues {
-    optionGroups: {
-        name: string;
-        values: OptionValue[];
-    }[];
-    variants: Record<string, {
-        enabled: boolean;
-        sku: string;
-        price: string;
-        stock: string;
-    }>;
-}
-
-interface OptionValueInputProps {
-    groupName: string;
-    groupIndex: number;
-    disabled?: boolean;
-}
-
-export function OptionValueInput({ groupName, groupIndex, disabled = false }: OptionValueInputProps) {
-    const { control, watch } = useFormContext<FormValues>();
-    const { fields, append, remove } = useFieldArray({
-        control,
-        name: `optionGroups.${groupIndex}.values`,
-    });
-
-    const [newValue, setNewValue] = useState('');
-
-    const handleAddValue = () => {
-        if (newValue.trim() && !fields.some(f => f.value === newValue.trim())) {
-            append({ value: newValue.trim(), id: crypto.randomUUID() });
-            setNewValue('');
-        }
-    };
-
-    const handleKeyPress = (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            handleAddValue();
-        }
-    };
-
-    return (
-        <div className="space-y-2">
-            <div className="flex items-center gap-2">
-                <Input
-                    value={newValue}
-                    onChange={e => setNewValue(e.target.value)}
-                    onKeyDown={handleKeyPress}
-                    placeholder="Enter value and press Enter"
-                    disabled={disabled}
-                    className="flex-1"
-                />
-                <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={handleAddValue}
-                    disabled={disabled || !newValue.trim()}
-                >
-                    <Plus className="h-4 w-4" />
-                </Button>
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-                {fields.map((field, index) => (
-                    <Badge key={field.id} variant="secondary" className="flex items-center gap-1 py-1 px-2">
-                        {field.value}
-                        <Button
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            className="h-4 w-4 p-0 ml-1"
-                            onClick={() => remove(index)}
-                        >
-                            <X className="h-3 w-3" />
-                        </Button>
-                    </Badge>
-                ))}
-            </div>
-        </div>
-    );
+import { useFieldArray } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
+import { useState } from "react";
+import { Input } from "@/components/ui/input.js";
+import { Button } from "@/components/ui/button.js";
+import { Badge } from "@/components/ui/badge.js";
+import { Plus, X } from "lucide-react";
+
+interface OptionValue {
+    value: string;
+    id: string;
+}
+
+interface FormValues {
+    optionGroups: {
+        name: string;
+        values: OptionValue[];
+    }[];
+    variants: Record<string, {
+        enabled: boolean;
+        sku: string;
+        price: string;
+        stock: string;
+    }>;
+}
+
+interface OptionValueInputProps {
+    groupName: string;
+    groupIndex: number;
+    disabled?: boolean;
+}
+
+export function OptionValueInput({ groupName, groupIndex, disabled = false }: OptionValueInputProps) {
+    const { control, watch } = useFormContext<FormValues>();
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: `optionGroups.${groupIndex}.values`,
+    });
+
+    const [newValue, setNewValue] = useState('');
+
+    const handleAddValue = () => {
+        if (newValue.trim() && !fields.some(f => f.value === newValue.trim())) {
+            append({ value: newValue.trim(), id: crypto.randomUUID() });
+            setNewValue('');
+        }
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleAddValue();
+        }
+    };
+
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center gap-2">
+                <Input
+                    value={newValue}
+                    onChange={e => setNewValue(e.target.value)}
+                    onKeyDown={handleKeyPress}
+                    placeholder="Enter value and press Enter"
+                    disabled={disabled}
+                    className="flex-1"
+                />
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={handleAddValue}
+                    disabled={disabled || !newValue.trim()}
+                >
+                    <Plus className="h-4 w-4" />
+                </Button>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+                {fields.map((field, index) => (
+                    <Badge key={field.id} variant="secondary" className="flex items-center gap-1 py-1 px-2">
+                        {field.value}
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-4 w-4 p-0 ml-1"
+                            onClick={() => remove(index)}
+                        >
+                            <X className="h-3 w-3" />
+                        </Button>
+                    </Badge>
+                ))}
+            </div>
+        </div>
+    );
 }

package/src/app/routes/_authenticated/_products/components/product-variants-table.tsx

@@ -1,87 +1,87 @@
-import { PaginatedListDataTable } from "@/components/shared/paginated-list-data-table.js";
-import { productVariantListDocument } from "../products.graphql.js";
-import { useState } from "react";
-import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
-import { Money } from "@/components/data-display/money.js";
-import { useLocalFormat } from "@/hooks/use-local-format.js";
-import { Link } from "@tanstack/react-router";
-import { Button } from "@/components/ui/button.js";
-
-interface ProductVariantsTableProps {
-    productId: string;
-}
-
-export function ProductVariantsTable({ productId }: ProductVariantsTableProps) {
-    const { formatCurrencyName } = useLocalFormat();
-    const [page, setPage] = useState(1);
-    const [pageSize, setPageSize] = useState(10);
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [filters, setFilters] = useState<ColumnFiltersState>([]);
-
-    return <PaginatedListDataTable
-        listQuery={productVariantListDocument}
-        transformVariables={variables => ({
-            ...variables,
-            productId,
-        })}
-        defaultVisibility={{
-            id: false,
-            currencyCode: false,
-        }}
-        customizeColumns={{
-            name: {
-                header: 'Variant name',
-                cell: ({ row }) => {
-                    const variant = row.original as any;
-                    return (
-                        <Button asChild variant="ghost">
-                            <Link to={`../../product-variants/${variant.id}`}>{variant.name} </Link>
-                        </Button>
-                    );
-                },
-            },
-            currencyCode: {
-                cell: ({ cell, row }) => {
-                    const value = cell.getValue();
-                    return formatCurrencyName(value as string, 'full');
-                },
-            },
-            price: {
-                cell: ({ cell, row }) => {
-                    const variant = row.original as any;
-                    const value = cell.getValue();
-                    const currencyCode = variant.currencyCode;
-                    if (typeof value === 'number') {
-                        return <Money value={value} currency={currencyCode} />;
-                    }
-                    return value;
-                },
-            },
-            priceWithTax: {
-                cell: ({ cell, row }) => {
-                    const variant = row.original as any;
-                    const value = cell.getValue();
-                    const currencyCode = variant.currencyCode;
-                    if (typeof value === 'number') {
-                        return <Money value={value} currency={currencyCode} />;
-                    }
-                    return value;
-                },
-            },
-        }}
-        page={page}
-        itemsPerPage={pageSize}
-        sorting={sorting}
-        columnFilters={filters}
-        onPageChange={(_, page, perPage) => {
-            setPage(page);
-            setPageSize(perPage);
-        }}
-        onSortChange={(_, sorting) => {
-            setSorting(sorting);
-        }}
-        onFilterChange={(_, filters) => {
-            setFilters(filters);
-        }}
-    />;
-}
+import { PaginatedListDataTable } from "@/components/shared/paginated-list-data-table.js";
+import { productVariantListDocument } from "../products.graphql.js";
+import { useState } from "react";
+import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
+import { Money } from "@/components/data-display/money.js";
+import { useLocalFormat } from "@/hooks/use-local-format.js";
+import { Link } from "@tanstack/react-router";
+import { Button } from "@/components/ui/button.js";
+
+interface ProductVariantsTableProps {
+    productId: string;
+}
+
+export function ProductVariantsTable({ productId }: ProductVariantsTableProps) {
+    const { formatCurrencyName } = useLocalFormat();
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+
+    return <PaginatedListDataTable
+        listQuery={productVariantListDocument}
+        transformVariables={variables => ({
+            ...variables,
+            productId,
+        })}
+        defaultVisibility={{
+            id: false,
+            currencyCode: false,
+        }}
+        customizeColumns={{
+            name: {
+                header: 'Variant name',
+                cell: ({ row }) => {
+                    const variant = row.original as any;
+                    return (
+                        <Button asChild variant="ghost">
+                            <Link to={`../../product-variants/${variant.id}`}>{variant.name} </Link>
+                        </Button>
+                    );
+                },
+            },
+            currencyCode: {
+                cell: ({ cell, row }) => {
+                    const value = cell.getValue();
+                    return formatCurrencyName(value as string, 'full');
+                },
+            },
+            price: {
+                cell: ({ cell, row }) => {
+                    const variant = row.original as any;
+                    const value = cell.getValue();
+                    const currencyCode = variant.currencyCode;
+                    if (typeof value === 'number') {
+                        return <Money value={value} currency={currencyCode} />;
+                    }
+                    return value;
+                },
+            },
+            priceWithTax: {
+                cell: ({ cell, row }) => {
+                    const variant = row.original as any;
+                    const value = cell.getValue();
+                    const currencyCode = variant.currencyCode;
+                    if (typeof value === 'number') {
+                        return <Money value={value} currency={currencyCode} />;
+                    }
+                    return value;
+                },
+            },
+        }}
+        page={page}
+        itemsPerPage={pageSize}
+        sorting={sorting}
+        columnFilters={filters}
+        onPageChange={(_, page, perPage) => {
+            setPage(page);
+            setPageSize(perPage);
+        }}
+        onSortChange={(_, sorting) => {
+            setSorting(sorting);
+        }}
+        onFilterChange={(_, filters) => {
+            setFilters(filters);
+        }}
+    />;
+}

package/src/app/routes/_authenticated/_products/products.graphql.ts

@@ -1,116 +1,116 @@
-import { assetFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
-
-export const productListDocument = graphql(`
-    query ProductList($options: ProductListOptions) {
-        products(options: $options) {
-            items {
-                id
-                createdAt
-                updatedAt
-                featuredAsset {
-                    id
-                    preview
-                }
-                name
-                slug
-                enabled
-            }
-            totalItems
-        }
-    }
-`);
-
-export const productDetailFragment = graphql(
-    `
-        fragment ProductDetail on Product {
-            id
-            createdAt
-            updatedAt
-            enabled
-            name
-            slug
-            description
-            featuredAsset {
-                ...Asset
-            }
-            assets {
-                ...Asset
-            }
-            translations {
-                id
-                languageCode
-                name
-                slug
-                description
-            }
-
-            facetValues {
-                id
-                name
-                code
-                facet {
-                    id
-                    name
-                    code
-                }
-            }
-            customFields
-        }
-    `,
-    [assetFragment],
-);
-
-export const productVariantListDocument = graphql(`
-    query ProductVariantList($options: ProductVariantListOptions, $productId: ID) {
-        productVariants(options: $options, productId: $productId) {
-            items {
-                id
-                name
-                sku
-                currencyCode
-                price
-                priceWithTax
-            }
-        }
-    }
-`);
-
-export const productDetailDocument = graphql(
-    `
-        query ProductDetail($id: ID!) {
-            product(id: $id) {
-                ...ProductDetail
-                variantList {
-                    totalItems
-                }
-            }
-        }
-    `,
-    [productDetailFragment],
-);
-
-export const createProductDocument = graphql(`
-    mutation CreateProduct($input: CreateProductInput!) {
-        createProduct(input: $input) {
-            id
-        }
-    }
-`);
-
-export const updateProductDocument = graphql(`
-    mutation UpdateProduct($input: UpdateProductInput!) {
-        updateProduct(input: $input) {
-            id
-        }
-    }
-`);
-
-export const deleteProductDocument = graphql(`
-    mutation DeleteProduct($id: ID!) {
-        deleteProduct(id: $id) {
-            result
-            message
-        }
-    }
-`);
+import { assetFragment } from '@/graphql/fragments.js';
+import { graphql } from '@/graphql/graphql.js';
+
+export const productListDocument = graphql(`
+    query ProductList($options: ProductListOptions) {
+        products(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                featuredAsset {
+                    id
+                    preview
+                }
+                name
+                slug
+                enabled
+            }
+            totalItems
+        }
+    }
+`);
+
+export const productDetailFragment = graphql(
+    `
+        fragment ProductDetail on Product {
+            id
+            createdAt
+            updatedAt
+            enabled
+            name
+            slug
+            description
+            featuredAsset {
+                ...Asset
+            }
+            assets {
+                ...Asset
+            }
+            translations {
+                id
+                languageCode
+                name
+                slug
+                description
+            }
+
+            facetValues {
+                id
+                name
+                code
+                facet {
+                    id
+                    name
+                    code
+                }
+            }
+            customFields
+        }
+    `,
+    [assetFragment],
+);
+
+export const productVariantListDocument = graphql(`
+    query ProductVariantList($options: ProductVariantListOptions, $productId: ID) {
+        productVariants(options: $options, productId: $productId) {
+            items {
+                id
+                name
+                sku
+                currencyCode
+                price
+                priceWithTax
+            }
+        }
+    }
+`);
+
+export const productDetailDocument = graphql(
+    `
+        query ProductDetail($id: ID!) {
+            product(id: $id) {
+                ...ProductDetail
+                variantList {
+                    totalItems
+                }
+            }
+        }
+    `,
+    [productDetailFragment],
+);
+
+export const createProductDocument = graphql(`
+    mutation CreateProduct($input: CreateProductInput!) {
+        createProduct(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateProductDocument = graphql(`
+    mutation UpdateProduct($input: UpdateProductInput!) {
+        updateProduct(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteProductDocument = graphql(`
+    mutation DeleteProduct($id: ID!) {
+        deleteProduct(id: $id) {
+            result
+            message
+        }
+    }
+`);