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

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

@@ -0,0 +1,111 @@
+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 { Trans } from '@/vdb/lib/trans.js';
+import { Link } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { PlusIcon } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { deleteProductOptionDocument } from '../product-option-groups.graphql.js';
+
+export const productOptionListDocument = graphql(`
+    query ProductOptionList($options: ProductOptionListOptions, $groupId: ID) {
+        productOptions(options: $options, groupId: $groupId) {
+            items {
+                id
+                createdAt
+                updatedAt
+                name
+                code
+                customFields
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface ProductOptionsTableProps {
+    productOptionGroupId: string;
+    registerRefresher?: (refresher: () => void) => void;
+}
+
+export function ProductOptionsTable({
+    productOptionGroupId,
+    registerRefresher,
+}: Readonly<ProductOptionsTableProps>) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    const refreshRef = useRef<() => void>(() => {});
+
+    return (
+        <>
+            <PaginatedListDataTable
+                listQuery={addCustomFields(productOptionListDocument)}
+                deleteMutation={deleteProductOptionDocument}
+                page={page}
+                itemsPerPage={pageSize}
+                sorting={sorting}
+                columnFilters={filters}
+                onPageChange={(_, page, perPage) => {
+                    setPage(page);
+                    setPageSize(perPage);
+                }}
+                onSortChange={(_, sorting) => {
+                    setSorting(sorting);
+                }}
+                onFilterChange={(_, filters) => {
+                    setFilters(filters);
+                }}
+                registerRefresher={refresher => {
+                    refreshRef.current = refresher;
+                    registerRefresher?.(refresher);
+                }}
+                transformVariables={variables => {
+                    const filter = variables.options?.filter ?? {};
+                    return {
+                        options: {
+                            filter: {
+                                ...filter,
+                                groupId: { eq: productOptionGroupId },
+                            },
+                            sort: variables.options?.sort,
+                            take: pageSize,
+                            skip: (page - 1) * pageSize,
+                        },
+                    };
+                }}
+                onSearchTermChange={searchTerm => {
+                    return {
+                        name: {
+                            contains: searchTerm,
+                        },
+                    };
+                }}
+                customizeColumns={{
+                    name: {
+                        header: 'Name',
+                        cell: ({ row }) => (
+                            <DetailPageButton
+                                id={row.original.id}
+                                label={row.original.name}
+                                href={`options/${row.original.id}`}
+                            />
+                        ),
+                    },
+                }}
+            />
+            <div className="mt-4">
+                <Button asChild variant="outline">
+                    <Link to="./options/new">
+                        <PlusIcon />
+                        <Trans>Add product option</Trans>
+                    </Link>
+                </Button>
+            </div>
+        </>
+    );
+}

package/src/app/routes/_authenticated/_products/product-option-groups.graphql.ts

@@ -0,0 +1,103 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+
+export const productOptionGroupDetailDocument = graphql(`
+    query ProductOptionGroupDetail($id: ID!) {
+        productOptionGroup(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            code
+            languageCode
+            translations {
+                id
+                languageCode
+                name
+            }
+            customFields
+        }
+    }
+`);
+
+export const productIdNameDocument = graphql(`
+    query ProductIdName($id: ID!) {
+        product(id: $id) {
+            id
+            name
+        }
+    }
+`);
+
+export const productOptionGroupIdNameDocument = graphql(`
+    query ProductOptionGroupIdName($id: ID!) {
+        productOptionGroup(id: $id) {
+            id
+            name
+        }
+    }
+`);
+
+export const createProductOptionGroupDocument = graphql(`
+    mutation CreateProductOptionGroup($input: CreateProductOptionGroupInput!) {
+        createProductOptionGroup(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateProductOptionGroupDocument = graphql(`
+    mutation UpdateProductOptionGroup($input: UpdateProductOptionGroupInput!) {
+        updateProductOptionGroup(input: $input) {
+            id
+        }
+    }
+`);
+
+export const productOptionDetailDocument = graphql(`
+    query ProductOptionDetail($id: ID!) {
+        productOption(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            code
+            languageCode
+            translations {
+                id
+                languageCode
+                name
+            }
+            group {
+                id
+                name
+                code
+            }
+            customFields
+        }
+    }
+`);
+
+export const createProductOptionDocument = graphql(`
+    mutation CreateProductOption($input: CreateProductOptionInput!) {
+        createProductOption(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateProductOptionDocument = graphql(`
+    mutation UpdateProductOption($input: UpdateProductOptionInput!) {
+        updateProductOption(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteProductOptionDocument = graphql(`
+    mutation DeleteProductOption($id: ID!) {
+        deleteProductOption(id: $id) {
+            result
+            message
+        }
+    }
+`);

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

@@ -44,7 +44,11 @@ export const productDetailFragment = graphql(
                 slug
                 description
             }
-
+            optionGroups {
+                id
+                code
+                name
+            }
             facetValues {
                 id
                 name
@@ -332,3 +336,11 @@ export const createProductVariantsDocument = graphql(`
         }
     }
 `);
+
+export const reindexDocument = graphql(`
+    mutation Reindex {
+        reindex {
+            id
+        }
+    }
+`);

package/src/app/routes/_authenticated/_products/products.tsx

@@ -3,9 +3,12 @@ import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
-import { PlusIcon } from 'lucide-react';
+import { PlusIcon, RefreshCwIcon } from 'lucide-react';
+import { toast } from 'sonner';
 import {
     AssignFacetValuesToProductsBulkAction,
     AssignProductsToChannelBulkAction,
@@ -13,7 +16,7 @@ import {
     DuplicateProductsBulkAction,
     RemoveProductsFromChannelBulkAction,
 } from './components/product-bulk-actions.js';
-import { productListDocument } from './products.graphql.js';
+import { productListDocument, reindexDocument } from './products.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_products/products')({
     component: ProductListPage,
@@ -21,6 +24,21 @@ export const Route = createFileRoute('/_authenticated/_products/products')({
 });
 
 function ProductListPage() {
+    const { i18n } = useLingui();
+    const reindexMutation = useMutation({
+        mutationFn: () => api.mutate(reindexDocument, {}),
+        onSuccess: () => {
+            toast.success(i18n.t('Search index rebuild started'));
+        },
+        onError: () => {
+            toast.error(i18n.t('Search index rebuild could not be started'));
+        },
+    });
+
+    const handleRebuildSearchIndex = () => {
+        reindexMutation.mutate();
+    };
+
     return (
         <ListPage
             pageId="product-list"
@@ -62,6 +80,12 @@ function ProductListPage() {
             ]}
         >
             <PageActionBarRight>
+                <PermissionGuard requires={['UpdateCatalog']}>
+                    <Button variant="outline" onClick={handleRebuildSearchIndex}>
+                        <RefreshCwIcon />
+                        <Trans>Rebuild search index</Trans>
+                    </Button>
+                </PermissionGuard>
                 <PermissionGuard requires={['CreateProduct', 'CreateCatalog']}>
                     <Button asChild>
                         <Link to="./new">

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -1,4 +1,5 @@
 import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
+import { SlugInput } from '@/vdb/components/data-input/slug-input.js';
 import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
 import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
@@ -6,7 +7,7 @@ import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js'
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
 import { Button } from '@/vdb/components/ui/button.js';
-import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { FormControl, FormDescription, FormItem, FormMessage } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Switch } from '@/vdb/components/ui/switch.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
@@ -28,6 +29,7 @@ import { PlusIcon } from 'lucide-react';
 import { useRef } from 'react';
 import { toast } from 'sonner';
 import { CreateProductVariantsDialog } from './components/create-product-variants-dialog.js';
+import { ProductOptionGroupBadge } from './components/product-option-group-badge.js';
 import { ProductVariantsTable } from './components/product-variants-table.js';
 import { createProductDocument, productDetailDocument, updateProductDocument } from './products.graphql.js';
 
@@ -81,7 +83,9 @@ function ProductDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created product' : 'Successfully updated product'));
+            toast.success(
+                i18n.t(creatingNewEntity ? 'Successfully created product' : 'Successfully updated product'),
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
@@ -133,7 +137,15 @@ function ProductDetailPage() {
                             control={form.control}
                             name="slug"
                             label={<Trans>Slug</Trans>}
-                            render={({ field }) => <Input {...field} />}
+                            render={({ field }) => (
+                                <SlugInput
+                                    {...field}
+                                    entityName="Product"
+                                    fieldName="slug"
+                                    watchFieldName="name"
+                                    entityId={entity?.id}
+                                />
+                            )}
                         />
                     </DetailFormGrid>
 
@@ -175,21 +187,26 @@ function ProductDetailPage() {
                         />
                     </PageBlock>
                 )}
-                <PageBlock column="side" blockId="facet-values">
+                {entity?.optionGroups.length ? (
+                    <PageBlock column="side" blockId="option-groups" title={<Trans>Product Options</Trans>}>
+                        <div className="flex flex-wrap gap-1.5">
+                            {entity.optionGroups.map(g => (
+                                <ProductOptionGroupBadge key={g.id} id={g.id} name={g.name} />
+                            ))}
+                        </div>
+                    </PageBlock>
+                ) : null}
+                <PageBlock column="side" blockId="facet-values" title={<Trans>Facet Values</Trans>}>
                     <FormFieldWrapper
                         control={form.control}
                         name="facetValueIds"
-                        label={<Trans>Facet values</Trans>}
                         render={({ field }) => (
                             <AssignedFacetValues facetValues={entity?.facetValues ?? []} {...field} />
                         )}
                     />
                 </PageBlock>
-                <PageBlock column="side" blockId="assets">
+                <PageBlock column="side" blockId="assets" title={<Trans>Assets</Trans>}>
                     <FormItem>
-                        <FormLabel>
-                            <Trans>Assets</Trans>
-                        </FormLabel>
                         <FormControl>
                             <EntityAssets
                                 assets={entity?.assets}

package/src/app/routes/_authenticated/_products/products_.$productId.option-groups.$id.tsx

@@ -0,0 +1,181 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { createFileRoute, ParsedLocation, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { ProductOptionsTable } from './components/product-options-table.js';
+import {
+    createProductOptionGroupDocument,
+    productIdNameDocument,
+    productOptionGroupDetailDocument,
+    updateProductOptionGroupDocument,
+} from './product-option-groups.graphql.js';
+
+const pageId = 'product-option-group-detail';
+
+export const Route = createFileRoute('/_authenticated/_products/products_/$productId/option-groups/$id')({
+    component: ProductOptionGroupDetailPage,
+    loader: async ({ context, params }: { context: any; params: any; location: ParsedLocation }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+
+        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
+            addCustomFields(productOptionGroupDetailDocument),
+            pageId,
+        );
+        const result = await context.queryClient.ensureQueryData(
+            getDetailQueryOptions(extendedQueryDocument, { id: params.id }),
+        );
+        const productResult = await context.queryClient.fetchQuery({
+            queryKey: [pageId, 'productIdName', params.productId],
+            queryFn: () => api.query(productIdNameDocument, { id: params.productId }),
+        });
+        const entityName = 'ProductOptionGroup';
+
+        if (!result.productOptionGroup) {
+            throw new Error(`${entityName} with the ID ${params.id} was not found`);
+        }
+        return {
+            breadcrumb: [
+                { path: '/products', label: <Trans>Products</Trans> },
+                { path: `/products/${productResult.product.id}`, label: productResult.product.name },
+                { path: `/products/${productResult.product.id}`, label: <Trans>Option Groups</Trans> },
+                result.productOptionGroup?.name,
+            ],
+        };
+    },
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ProductOptionGroupDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: productOptionGroupDetailDocument,
+        createDocument: createProductOptionGroupDocument,
+        updateDocument: updateProductOptionGroupDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    customFields: (translation as any).customFields,
+                })),
+                options: [],
+                customFields: entity.customFields,
+            };
+        },
+        transformCreateInput: values => {
+            return {
+                ...values,
+                options: [],
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(
+                i18n.t(
+                    creatingNewEntity
+                        ? 'Successfully created product option group'
+                        : 'Successfully updated product option group',
+                ),
+            );
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast(
+                i18n.t(
+                    creatingNewEntity
+                        ? 'Failed to create product option group'
+                        : 'Failed to update product option group',
+                ),
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New product option group</Trans> : (entity?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => (
+                                <SlugInput
+                                    fieldName="code"
+                                    watchFieldName="name"
+                                    entityName="ProductOptionGroup"
+                                    entityId={entity?.id}
+                                    {...field}
+                                />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="ProductOptionGroup" control={form.control} />
+                {entity && (
+                    <PageBlock column="main" blockId="product-options" title={<Trans>Product Options</Trans>}>
+                        <ProductOptionsTable productOptionGroupId={entity?.id} />
+                    </PageBlock>
+                )}
+            </PageLayout>
+        </Page>
+    );
+}