@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -0,0 +1,224 @@
+import { RichTextInput } from '@/components/data-input/richt-text-input.js';
+import { EntityAssets } from '@/components/shared/entity-assets.js';
+import { ErrorPage } from '@/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
+import { Button } from '@/components/ui/button.js';
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { Switch } from '@/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import {
+    collectionDetailDocument,
+    createCollectionDocument,
+    updateCollectionDocument,
+} from './collections.graphql.js';
+import { CollectionContentsPreviewTable } from './components/collection-contents-preview-table.js';
+import { CollectionContentsTable } from './components/collection-contents-table.js';
+import { CollectionFiltersSelector } from './components/collection-filters-selector.js';
+
+export const Route = createFileRoute('/_authenticated/_collections/collections_/$id')({
+    component: CollectionDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: collectionDetailDocument,
+        breadcrumb: (isNew, entity) => [
+            { path: '/collections', label: 'Collections' },
+            isNew ? <Trans>New collection</Trans> : entity?.name,
+        ],
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function CollectionDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        queryDocument: collectionDetailDocument,
+        createDocument: createCollectionDocument,
+        transformCreateInput: values => {
+            return {
+                ...values,
+                filters: values.filters.filter(f => f.code !== ''),
+            };
+        },
+        updateDocument: updateCollectionDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                isPrivate: entity.isPrivate,
+                featuredAssetId: entity.featuredAsset?.id,
+                assets: entity.assets.map(asset => asset.id),
+                parentId: entity.parent?.id,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    slug: translation.slug,
+                    description: translation.description,
+                })),
+                filters: entity.filters.map(f => ({
+                    code: f.code,
+                    arguments: f.args.map(a => ({ name: a.name, value: a.value })),
+                })),
+                inheritFilters: entity.inheritFilters,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(i18n.t('Successfully updated collection'), {
+                position: 'top-right',
+            });
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update collection'), {
+                position: 'top-right',
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    const shouldPreviewContents =
+        form.getFieldState('inheritFilters').isDirty || form.getFieldState('filters').isDirty;
+
+    const currentFiltersValue = form.watch('filters');
+    const currentInheritFiltersValue = form.watch('inheritFilters');
+
+    return (
+        <Page pageId="collection-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>{creatingNewEntity ? <Trans>New collection</Trans> : (entity?.name ?? '')}</PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateCollection', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="privacy">
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="isPrivate"
+                        label={<Trans>Private</Trans>}
+                        description={<Trans>Private collections are not visible in the shop</Trans>}
+                        render={({ field }) => (
+                            <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="slug"
+                            label={<Trans>Slug</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                    </DetailFormGrid>
+                    <TranslatableFormFieldWrapper
+                        control={form.control}
+                        name="description"
+                        label={<Trans>Description</Trans>}
+                        render={({ field }) => <RichTextInput {...field} />}
+                    />
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Collection" control={form.control} />
+                <PageBlock column="main" blockId="filters" title={<Trans>Filters</Trans>}>
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="inheritFilters"
+                        label={<Trans>Inherit filters</Trans>}
+                        description={
+                            <Trans>
+                                If enabled, the filters will be inherited from the parent collection and
+                                combined with the filters set on this collection.
+                            </Trans>
+                        }
+                        render={({ field }) => (
+                            <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        )}
+                    />
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="filters"
+                        render={({ field }) => (
+                            <CollectionFiltersSelector value={field.value ?? []} onChange={field.onChange} />
+                        )}
+                    />
+                </PageBlock>
+                <PageBlock column="side" blockId="assets">
+                    <FormItem>
+                        <FormLabel>
+                            <Trans>Assets</Trans>
+                        </FormLabel>
+                        <FormControl>
+                            <EntityAssets
+                                assets={entity?.assets}
+                                featuredAsset={entity?.featuredAsset}
+                                compact={true}
+                                value={form.getValues()}
+                                onChange={value => {
+                                    form.setValue('featuredAssetId', value.featuredAssetId ?? undefined, {
+                                        shouldDirty: true,
+                                        shouldValidate: true,
+                                    });
+                                    form.setValue('assetIds', value.assetIds ?? [], {
+                                        shouldDirty: true,
+                                        shouldValidate: true,
+                                    });
+                                }}
+                            />
+                        </FormControl>
+                        <FormDescription></FormDescription>
+                        <FormMessage />
+                    </FormItem>
+                </PageBlock>
+                <PageBlock column="main" blockId="contents" title={<Trans>Facet values</Trans>}>
+                    {shouldPreviewContents || creatingNewEntity ? (
+                        <CollectionContentsPreviewTable
+                            parentId={entity?.parent?.id}
+                            filters={currentFiltersValue ?? []}
+                            inheritFilters={currentInheritFiltersValue ?? false}
+                        />
+                    ) : (
+                        <CollectionContentsTable collectionId={entity?.id} />
+                    )}
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_collections/components/collection-contents-preview-table.tsx

@@ -0,0 +1,127 @@
+import { PaginatedListDataTable } from '@/components/shared/paginated-list-data-table.js';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert.js';
+import { Button } from '@/components/ui/button.js';
+import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { PreviewCollectionVariantsInput } from '@vendure/common/lib/generated-types';
+import { Eye } from 'lucide-react';
+import { useState } from 'react';
+import { getCollectionFiltersQueryOptions } from '../collections.graphql.js';
+
+export const previewCollectionContentsDocument = graphql(`
+    query PreviewCollectionContents(
+        $input: PreviewCollectionVariantsInput!
+        $options: ProductVariantListOptions
+    ) {
+        previewCollectionVariants(input: $input, options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                productId
+                name
+                sku
+            }
+            totalItems
+        }
+    }
+`);
+
+export type CollectionContentsPreviewTableProps = PreviewCollectionVariantsInput;
+
+export function CollectionContentsPreviewTable({
+    parentId,
+    filters: collectionFilters,
+    inheritFilters,
+}: CollectionContentsPreviewTableProps) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    const { data: filterDefs } = useQuery(getCollectionFiltersQueryOptions);
+
+    const effectiveFilters = collectionFilters.filter(f => {
+        // ensure that every filter has all required arguments
+        const filterDef = filterDefs?.collectionFilters.find(fd => fd.code === f.code);
+        if (!filterDef) {
+            return false;
+        }
+        for (const arg of filterDef.args) {
+            const argPair = f.arguments.find(a => a.name === arg.name);
+            const argValue = argPair?.value ?? arg.defaultValue;
+            if (arg.required && argValue == null) {
+                return false;
+            }
+        }
+        return true;
+    });
+
+    return (
+        <div>
+            <Alert>
+                <Eye className="h-4 w-4" />
+                <AlertTitle>Preview</AlertTitle>
+                <AlertDescription>
+                    This is a preview of the collection contents based on the current
+                    filter settings. Once you save the collection, the contents will be
+                    updated to reflect the new filter settings.
+                </AlertDescription>
+            </Alert>
+
+            <PaginatedListDataTable
+                listQuery={addCustomFields(previewCollectionContentsDocument)}
+                transformQueryKey={queryKey => {
+                    return [...queryKey, JSON.stringify(effectiveFilters), inheritFilters];
+                }}
+                transformVariables={variables => {
+                    return {
+                        options: variables.options,
+                        input: {
+                            parentId,
+                            filters: effectiveFilters,
+                            inheritFilters,
+                        },
+                    };
+                }}
+                customizeColumns={{
+                    name: {
+                        header: 'Variant name',
+                        cell: ({ row }) => {
+                            return (
+                                <Button asChild variant="ghost">
+                                    <Link to={`../../product-variants/${row.original.id}`}>
+                                        {row.original.name}{' '}
+                                    </Link>
+                                </Button>
+                            );
+                        },
+                    },
+                }}
+                page={page}
+                itemsPerPage={pageSize}
+                sorting={sorting}
+                columnFilters={filters}
+                onPageChange={(_, page, perPage) => {
+                    setPage(page);
+                    setPageSize(perPage);
+                }}
+                onSortChange={(_, sorting) => {
+                    setSorting(sorting);
+                }}
+                onFilterChange={(_, filters) => {
+                    setFilters(filters);
+                }}
+                onSearchTermChange={searchTerm => {
+                    return {
+                        name: {
+                            contains: searchTerm,
+                        },
+                    };
+                }}
+            />
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_collections/components/collection-contents-sheet.tsx

@@ -0,0 +1,46 @@
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger
+} from '@/components/ui/sheet.js';
+import { Trans } from '@/lib/trans.js';
+import { PanelLeftOpen } from 'lucide-react';
+import { CollectionContentsTable } from './collection-contents-table.js';
+import { Button } from '@/components/ui/button.js';
+
+export interface CollectionContentsSheetProps {
+    collectionId: string;
+    collectionName: string;
+    children?: React.ReactNode;
+}
+
+export function CollectionContentsSheet({ collectionId, collectionName, children }: CollectionContentsSheetProps) {
+    return (
+        <Sheet>
+            <SheetTrigger asChild>
+                <Button variant="outline" size="sm" className="flex items-center gap-2">
+                    {children}
+                    <PanelLeftOpen className="w-4 h-4" />
+                </Button>
+            </SheetTrigger>
+            <SheetContent className="min-w-[90vw] lg:min-w-[800px]">
+                <SheetHeader>
+                    <SheetTitle>
+                        <Trans>Collection contents for {collectionName}</Trans>
+                    </SheetTitle>
+                    <SheetDescription>
+                        <Trans>
+                            This is the contents of the <strong>{collectionName}</strong> collection.
+                        </Trans>
+                    </SheetDescription>
+                </SheetHeader>
+                <div className="px-4">
+                    <CollectionContentsTable collectionId={collectionId} />
+                </div>
+            </SheetContent>
+        </Sheet>
+    );
+}

package/src/app/routes/_authenticated/_collections/components/collection-contents-table.tsx

@@ -0,0 +1,82 @@
+import { PaginatedListDataTable } from '@/components/shared/paginated-list-data-table.js';
+import { Button } from '@/components/ui/button.js';
+import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Link } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+
+export const collectionContentsDocument = graphql(`
+    query CollectionContentsList($collectionId: ID!, $options: ProductVariantListOptions) {
+        collection(id: $collectionId) {
+            id
+            productVariants(options: $options) {
+                items {
+                    id
+                    createdAt
+                    updatedAt
+                    name
+                    sku
+                }
+                totalItems
+            }
+        }
+    }
+`);
+
+
+export interface CollectionContentsTableProps {
+    collectionId?: string;
+}
+
+export function CollectionContentsTable({ collectionId }: CollectionContentsTableProps) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    
+    return (
+        <PaginatedListDataTable
+            listQuery={addCustomFields(collectionContentsDocument)}
+            transformVariables={(variables) => {
+                return {
+                    ...variables,
+                    collectionId: collectionId,
+                };
+            }}
+            customizeColumns={{
+                name: {
+                    header: 'Variant name',
+                    cell: ({ row }) => {
+                        return (
+                            <Button asChild variant="ghost">
+                                <Link to={`../../product-variants/${row.original.id}`}>{row.original.name} </Link>
+                            </Button>
+                        );
+                    },
+                },
+            }}
+            page={page}
+            itemsPerPage={pageSize}
+            sorting={sorting}
+            columnFilters={filters}
+            onPageChange={(_, page, perPage) => {
+                setPage(page);
+                setPageSize(perPage);
+            }}
+            onSortChange={(_, sorting) => {
+                setSorting(sorting);
+            }}
+            onFilterChange={(_, filters) => {
+                setFilters(filters);
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: {
+                        contains: searchTerm,
+                    },
+                };
+            }}
+        />
+    );
+}

package/src/app/routes/_authenticated/_collections/components/collection-filters-selector.tsx

@@ -0,0 +1,91 @@
+import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { Separator } from '@/components/ui/separator.js';
+import { ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { Plus } from 'lucide-react';
+import { getCollectionFiltersQueryOptions } from '../collections.graphql.js';
+
+export interface CollectionFiltersSelectorProps {
+    value: ConfigurableOperationInputType[];
+    onChange: (filters: ConfigurableOperationInputType[]) => void;
+}
+
+export function CollectionFiltersSelector({ value, onChange }: CollectionFiltersSelectorProps) {
+    const { data: filtersData } = useQuery(getCollectionFiltersQueryOptions);
+
+    const filters = filtersData?.collectionFilters;
+
+    const onFilterSelected = (filter: ConfigurableOperationDefFragment) => {
+        const filterDef = filters?.find(f => f.code === filter.code);
+        if (!filterDef) {
+            return;
+        }
+        onChange([
+            ...value,
+            {
+                code: filter.code,
+                arguments: filterDef.args.map(arg => ({
+                    name: arg.name,
+                    value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                })),
+            },
+        ]);
+    };
+
+    const onOperationValueChange = (
+        filter: ConfigurableOperationInputType,
+        newVal: ConfigurableOperationInputType,
+    ) => {
+        onChange(value.map(f => (f.code === filter.code ? newVal : f)));
+    };
+
+    const onOperationRemove = (index: number) => {
+        onChange(value.filter((_, i) => i !== index));
+    };
+
+    return (
+        <div className="flex flex-col gap-2 mt-4">
+            {(value ?? []).map((filter, index) => {
+                const filterDef = filters?.find(f => f.code === filter.code);
+                if (!filterDef) {
+                    return null;
+                }
+                return (
+                    <div key={index} className="flex flex-col gap-2">
+                        <ConfigurableOperationInput
+                            operationDefinition={filterDef}
+                            value={filter}
+                            onChange={value => onOperationValueChange(filter, value)}
+                            onRemove={() => onOperationRemove(index)}
+                        />
+                        <Separator className="my-2" />
+                    </div>
+                );
+            })}
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline">
+                        <Plus />
+                        <Trans context="Add new collection filter">Add condition</Trans>
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-96">
+                    {filters?.map(filter => (
+                        <DropdownMenuItem key={filter.code} onClick={() => onFilterSelected(filter)}>
+                            {filter.description}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_countries/countries.graphql.ts

@@ -0,0 +1,69 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const countryItemFragment = graphql(`
+    fragment CountryItem on Country {
+        id
+        name
+        code
+        enabled
+        customFields
+    }
+`);
+
+export const countriesListQuery = graphql(
+    `
+        query CountriesList($options: CountryListOptions) {
+            countries(options: $options) {
+                items {
+                    ...CountryItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [countryItemFragment],
+);
+
+export const countryDetailQuery = graphql(`
+    query CountryDetail($id: ID!) {
+        country(id: $id) {
+            id
+            name
+            code
+            enabled
+            translations {
+                id
+                createdAt
+                updatedAt
+                languageCode
+                name
+            }
+            customFields
+        }
+    }
+`);
+
+export const createCountryDocument = graphql(`
+    mutation CreateCountry($input: CreateCountryInput!) {
+        createCountry(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateCountryDocument = graphql(`
+    mutation UpdateCountry($input: UpdateCountryInput!) {
+        updateCountry(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteCountryDocument = graphql(`
+    mutation DeleteCountry($id: ID!) {
+        deleteCountry(id: $id) {
+            result
+            message
+        }
+    }
+`);