@wilshop/dashboard 3.5.2

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

@@ -0,0 +1,236 @@
+import { SlugInput } from '@/vdb/components/data-input/index.js';
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
+import { EntityAssets } from '@/vdb/components/shared/entity-assets.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 { FormControl, FormDescription, FormItem, FormLabel, 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';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+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';
+
+const pageId = 'collection-detail';
+
+export const Route = createFileRoute('/_authenticated/_collections/collections_/$id')({
+    component: CollectionDetailPage,
+    loader: detailPageRouteLoader({
+        pageId,
+        queryDocument: collectionDetailDocument,
+        breadcrumb: (isNew, entity) => [
+            { path: '/collections', label: <Trans>Collections</Trans> },
+            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 { t } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        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(
+                creatingNewEntity ? t`Successfully created collection` : t`Successfully updated collection`,
+            );
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast(creatingNewEntity ? t`Failed to create collection` : t`Failed to update collection`, {
+                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={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <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}
+                        >
+                            {creatingNewEntity ? <Trans>Create</Trans> : <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 }) => (
+                                <SlugInput
+                                    fieldName="slug"
+                                    watchFieldName="name"
+                                    entityName="Collection"
+                                    entityId={entity?.id}
+                                    {...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>Contents</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-bulk-actions.tsx

@@ -0,0 +1,130 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { FolderTree } from 'lucide-react';
+import { useState } from 'react';
+
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@lingui/react/macro';
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
+import {
+    assignCollectionToChannelDocument,
+    deleteCollectionsDocument,
+    removeCollectionFromChannelDocument,
+} from '../collections.graphql.js';
+import { MoveCollectionsDialog } from './move-collections-dialog.js';
+
+export const AssignCollectionsToChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const queryClient = useQueryClient();
+
+    return (
+        <AssignToChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="collections"
+            mutationFn={api.mutate(assignCollectionToChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
+            buildInput={(channelId: string) => ({
+                collectionIds: selection.map(s => s.id),
+                channelId,
+            })}
+            onSuccess={() => {
+                queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+            }}
+        />
+    );
+};
+
+export const RemoveCollectionsFromChannelBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const { activeChannel } = useChannel();
+    const queryClient = useQueryClient();
+
+    return (
+        <RemoveFromChannelBulkAction
+            selection={selection}
+            table={table}
+            entityType="collections"
+            mutationFn={api.mutate(removeCollectionFromChannelDocument)}
+            requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
+            buildInput={() => ({
+                collectionIds: selection.map(s => s.id),
+                channelId: activeChannel?.id,
+            })}
+            onSuccess={() => {
+                queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+            }}
+        />
+    );
+};
+
+export const DuplicateCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const queryClient = useQueryClient();
+    return (
+        <DuplicateBulkAction
+            entityType="Collection"
+            duplicatorCode="collection-duplicator"
+            requiredPermissions={['UpdateCatalog', 'UpdateCollection']}
+            entityName="Collection"
+            selection={selection}
+            table={table}
+            onSuccess={() => {
+                queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+            }}
+        />
+    );
+};
+
+export const DeleteCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteCollectionsDocument}
+            entityName="collections"
+            requiredPermissions={['DeleteCatalog', 'DeleteCollection']}
+            invalidateQueries={['childCollections']}
+            selection={selection}
+            table={table}
+        />
+    );
+};
+
+export const MoveCollectionsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const queryClient = useQueryClient();
+    const { refetchPaginatedList } = usePaginatedList();
+
+    const handleSuccess = () => {
+        queryClient.invalidateQueries({ queryKey: ['childCollections'] });
+        refetchPaginatedList();
+        table.resetRowSelection();
+    };
+
+    const handleResetExpanded = () => {
+        const resetExpanded = (table.options.meta as { resetExpanded: () => void })?.resetExpanded;
+        if (resetExpanded) {
+            resetExpanded();
+        }
+    };
+
+    return (
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={['UpdateCatalog', 'UpdateCollection']}
+                onClick={() => setDialogOpen(true)}
+                label={<Trans>Move</Trans>}
+                icon={FolderTree}
+            />
+            <MoveCollectionsDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                collectionsToMove={selection}
+                onSuccess={handleSuccess}
+                onResetExpanded={handleResetExpanded}
+            />
+        </>
+    );
+};

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

@@ -0,0 +1,153 @@
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Alert, AlertDescription, AlertTitle } from '@/vdb/components/ui/alert.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 '@lingui/react/macro';
+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;
+            let isValidValue = true;
+            if (arg.list) {
+                try {
+                    JSON.parse(argValue);
+                } catch (e) {
+                    isValidValue = false;
+                }
+            }
+            if (!isValidValue || (arg.required && argValue == null)) {
+                return false;
+            }
+        }
+        return true;
+    });
+
+    return (
+        <div>
+            {effectiveFilters.length === 0 ? (
+                <Alert className="mb-4">
+                    <Eye className="h-4 w-4" />
+                    <AlertTitle>
+                        <Trans>Preview</Trans>
+                    </AlertTitle>
+                    <AlertDescription>
+                        <Trans>Add filters to preview the collection contents.</Trans>
+                    </AlertDescription>
+                </Alert>
+            ) : (
+                <>
+                    <Alert className="mb-4">
+                        <Eye className="h-4 w-4" />
+                        <AlertTitle>
+                            <Trans>Preview</Trans>
+                        </AlertTitle>
+                        <AlertDescription>
+                            <Trans>
+                                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.
+                            </Trans>
+                        </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,50 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from '@/vdb/components/ui/sheet.js';
+import { Trans } from '@lingui/react/macro';
+import { PanelLeftOpen } from 'lucide-react';
+import { CollectionContentsTable } from './collection-contents-table.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,83 @@
+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 { 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 }: Readonly<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,24 @@
+import { ConfigurableOperationMultiSelector } from '@/vdb/components/shared/configurable-operation-multi-selector.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { getCollectionFiltersQueryOptions } from '../collections.graphql.js';
+
+export interface CollectionFiltersSelectorProps {
+    value: ConfigurableOperationInputType[];
+    onChange: (filters: ConfigurableOperationInputType[]) => void;
+}
+
+export function CollectionFiltersSelector({ value, onChange }: Readonly<CollectionFiltersSelectorProps>) {
+    return (
+        <div className="mt-4">
+            <ConfigurableOperationMultiSelector
+                value={value}
+                onChange={onChange}
+                queryOptions={getCollectionFiltersQueryOptions}
+                queryKey="getCollectionFilters"
+                dataPath="collectionFilters"
+                buttonText="Add collection filter"
+                showEnhancedDropdown={false}
+            />
+        </div>
+    );
+}