@vendure/dashboard 3.3.6-master-202507050232 → 3.4.0-minor-202506250934

package/src/app/routes/_authenticated/_collections/collections.tsx

@@ -1,28 +1,20 @@
-import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
-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 { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { FetchQueryOptions, useQueries } from '@tanstack/react-query';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Button } from '@/components/ui/button.js';
+import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { api } from '@/graphql/api.js';
+import { Trans } from '@/lib/trans.js';
+import { useQueries } from '@tanstack/react-query';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ExpandedState, getExpandedRowModel } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 import { ResultOf } from 'gql.tada';
-import { Folder, FolderOpen, FolderTreeIcon, PlusIcon } from 'lucide-react';
+import { Folder, FolderOpen, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
 import { collectionListDocument, deleteCollectionDocument } from './collections.graphql.js';
-import {
-    AssignCollectionsToChannelBulkAction,
-    DeleteCollectionsBulkAction,
-    DuplicateCollectionsBulkAction,
-    MoveCollectionsBulkAction,
-    RemoveCollectionsFromChannelBulkAction,
-} from './components/collection-bulk-actions.js';
 import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
-import { useMoveSingleCollection } from './components/move-single-collection.js';
 
 export const Route = createFileRoute('/_authenticated/_collections/collections')({
     component: CollectionListPage,
@@ -33,7 +25,6 @@ type Collection = ResultOf<typeof collectionListDocument>['collections']['items'
 
 function CollectionListPage() {
     const [expanded, setExpanded] = useState<ExpandedState>({});
-    const { handleMoveClick, MoveDialog } = useMoveSingleCollection();
     const childrenQueries = useQueries({
         queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
             return {
@@ -47,7 +38,7 @@ function CollectionListPage() {
                         },
                     }),
                 staleTime: 1000 * 60 * 5,
-            } satisfies FetchQueryOptions;
+            };
         }),
     });
     const childCollectionsByParentId = childrenQueries.reduce(
@@ -80,160 +71,125 @@ function CollectionListPage() {
     };
 
     return (
-        <>
-            <ListPage
-                pageId="collection-list"
-                title="Collections"
-                listQuery={collectionListDocument}
-                transformVariables={input => {
-                    const filterTerm = input.options?.filter?.name?.contains;
-                    const isFiltering = !!filterTerm;
-                    return {
-                        options: {
-                            ...input.options,
-                            topLevelOnly: !isFiltering,
-                        },
-                    };
-                }}
-                deleteMutation={deleteCollectionDocument}
-                customizeColumns={{
-                    name: {
-                        header: 'Collection Name',
-                        cell: ({ row }) => {
-                            const isExpanded = row.getIsExpanded();
-                            const hasChildren = !!row.original.children?.length;
-                            return (
-                                <div
-                                    style={{ marginLeft: (row.original.breadcrumbs.length - 2) * 20 + 'px' }}
-                                    className="flex gap-2 items-center"
-                                >
-                                    <Button
-                                        size="icon"
-                                        variant="secondary"
-                                        onClick={row.getToggleExpandedHandler()}
-                                        disabled={!hasChildren}
-                                        className={!hasChildren ? 'opacity-20' : ''}
-                                    >
-                                        {isExpanded ? <FolderOpen /> : <Folder />}
-                                    </Button>
-                                    <DetailPageButton id={row.original.id} label={row.original.name} />
-                                </div>
-                            );
-                        },
-                    },
-                    breadcrumbs: {
-                        cell: ({ cell }) => {
-                            const value = cell.getValue();
-                            if (!Array.isArray(value)) {
-                                return null;
-                            }
-                            return (
-                                <div>
-                                    {value
-                                        .slice(1)
-                                        .map(breadcrumb => breadcrumb.name)
-                                        .join(' / ')}
-                                </div>
-                            );
-                        },
+        <ListPage
+            pageId="collection-list"
+            title="Collections"
+            listQuery={collectionListDocument}
+            transformVariables={input => {
+                const filterTerm = input.options?.filter?.name?.contains;
+                const isFiltering = !!filterTerm;
+                return {
+                    options: {
+                        ...input.options,
+                        topLevelOnly: !isFiltering,
                     },
-                    productVariants: {
-                        header: 'Contents',
-                        cell: ({ row }) => {
-                            return (
-                                <CollectionContentsSheet
-                                    collectionId={row.original.id}
-                                    collectionName={row.original.name}
+                };
+            }}
+            deleteMutation={deleteCollectionDocument}
+            customizeColumns={{
+                name: {
+                    header: 'Collection Name',
+                    cell: ({ row }) => {
+                        const isExpanded = row.getIsExpanded();
+                        const hasChildren = !!row.original.children?.length;
+                        return (
+                            <div
+                                style={{ marginLeft: (row.original.breadcrumbs.length - 2) * 20 + 'px' }}
+                                className="flex gap-2 items-center"
+                            >
+                                <Button
+                                    size="icon"
+                                    variant="secondary"
+                                    onClick={row.getToggleExpandedHandler()}
+                                    disabled={!hasChildren}
+                                    className={!hasChildren ? 'opacity-20' : ''}
                                 >
-                                    <Trans>{row.original.productVariants.totalItems} variants</Trans>
-                                </CollectionContentsSheet>
-                            );
-                        },
-                    },
-                }}
-                defaultColumnOrder={[
-                    'featuredAsset',
-                    'children',
-                    'name',
-                    'slug',
-                    'breadcrumbs',
-                    'productVariants',
-                ]}
-                transformData={data => {
-                    return addSubCollections(data);
-                }}
-                setTableOptions={(options: TableOptions<any>) => {
-                    options.state = {
-                        ...options.state,
-                        expanded: expanded,
-                    };
-                    options.onExpandedChange = setExpanded;
-                    options.getExpandedRowModel = getExpandedRowModel();
-                    options.getRowCanExpand = () => true;
-                    options.getRowId = row => {
-                        return row.id;
-                    };
-                    return options;
-                }}
-                defaultVisibility={{
-                    id: false,
-                    createdAt: false,
-                    updatedAt: false,
-                    position: false,
-                    parentId: false,
-                    children: false,
-                }}
-                onSearchTermChange={searchTerm => {
-                    return {
-                        name: { contains: searchTerm },
-                    };
-                }}
-                route={Route}
-                rowActions={[
-                    {
-                        label: (
-                            <div className="flex items-center gap-2">
-                                <FolderTreeIcon className="w-4 h-4" /> <Trans>Move</Trans>
+                                    {isExpanded ? <FolderOpen /> : <Folder />}
+                                </Button>
+                                <DetailPageButton id={row.original.id} label={row.original.name} />
                             </div>
-                        ),
-                        onClick: row => handleMoveClick(row.original),
-                    },
-                ]}
-                bulkActions={[
-                    {
-                        component: AssignCollectionsToChannelBulkAction,
-                        order: 100,
+                        );
                     },
-                    {
-                        component: RemoveCollectionsFromChannelBulkAction,
-                        order: 200,
-                    },
-                    {
-                        component: DuplicateCollectionsBulkAction,
-                        order: 300,
-                    },
-                    {
-                        component: MoveCollectionsBulkAction,
-                        order: 400,
+                },
+                breadcrumbs: {
+                    cell: ({ cell }) => {
+                        const value = cell.getValue();
+                        if (!Array.isArray(value)) {
+                            return null;
+                        }
+                        return (
+                            <div>
+                                {value
+                                    .slice(1)
+                                    .map(breadcrumb => breadcrumb.name)
+                                    .join(' / ')}
+                            </div>
+                        );
                     },
-                    {
-                        component: DeleteCollectionsBulkAction,
-                        order: 500,
+                },
+                productVariants: {
+                    header: 'Contents',
+                    cell: ({ row }) => {
+                        return (
+                            <CollectionContentsSheet
+                                collectionId={row.original.id}
+                                collectionName={row.original.name}
+                            >
+                                <Trans>{row.original.productVariants.totalItems} variants</Trans>
+                            </CollectionContentsSheet>
+                        );
                     },
-                ]}
-            >
-                <PageActionBarRight>
-                    <PermissionGuard requires={['CreateCollection', 'CreateCatalog']}>
-                        <Button asChild>
-                            <Link to="./new">
-                                <PlusIcon className="mr-2 h-4 w-4" />
-                                <Trans>New Collection</Trans>
-                            </Link>
-                        </Button>
-                    </PermissionGuard>
-                </PageActionBarRight>
-            </ListPage>
-            <MoveDialog />
-        </>
+                },
+            }}
+            defaultColumnOrder={[
+                'featuredAsset',
+                'children',
+                'name',
+                'slug',
+                'breadcrumbs',
+                'productVariants',
+            ]}
+            transformData={data => {
+                return addSubCollections(data);
+            }}
+            setTableOptions={(options: TableOptions<any>) => {
+                options.state = {
+                    ...options.state,
+                    expanded: expanded,
+                };
+                options.onExpandedChange = setExpanded;
+                options.getExpandedRowModel = getExpandedRowModel();
+                options.getRowCanExpand = () => true;
+                options.getRowId = row => {
+                    return row.id;
+                };
+                return options;
+            }}
+            defaultVisibility={{
+                id: false,
+                createdAt: false,
+                updatedAt: false,
+                position: false,
+                parentId: false,
+                children: false,
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            route={Route}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateCollection', 'CreateCatalog']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            <Trans>New Collection</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
     );
 }

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

@@ -1,14 +1,14 @@
-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 { 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,
@@ -18,10 +18,10 @@ import {
     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 '@/vdb/lib/trans.js';
+} 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 {
@@ -33,12 +33,9 @@ import { CollectionContentsPreviewTable } from './components/collection-contents
 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: 'Collections' },
@@ -55,7 +52,6 @@ function CollectionDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        pageId,
         queryDocument: collectionDetailDocument,
         createDocument: createCollectionDocument,
         transformCreateInput: values => {
@@ -109,7 +105,7 @@ function CollectionDetailPage() {
     const currentInheritFiltersValue = form.watch('inheritFilters');
 
     return (
-        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId="collection-detail" form={form} submitHandler={submitHandler}>
             <PageTitle>{creatingNewEntity ? <Trans>New collection</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -1,8 +1,8 @@
-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 { 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';
@@ -65,8 +65,9 @@ export function CollectionContentsPreviewTable({
                 <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.
+                    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>
 

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

@@ -1,15 +1,15 @@
-import { Button } from '@/vdb/components/ui/button.js';
 import {
     Sheet,
     SheetContent,
     SheetDescription,
     SheetHeader,
     SheetTitle,
-    SheetTrigger,
-} from '@/vdb/components/ui/sheet.js';
-import { Trans } from '@/vdb/lib/trans.js';
+    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;
@@ -17,11 +17,7 @@ export interface CollectionContentsSheetProps {
     children?: React.ReactNode;
 }
 
-export function CollectionContentsSheet({
-    collectionId,
-    collectionName,
-    children,
-}: CollectionContentsSheetProps) {
+export function CollectionContentsSheet({ collectionId, collectionName, children }: CollectionContentsSheetProps) {
     return (
         <Sheet>
             <SheetTrigger asChild>

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

@@ -1,7 +1,7 @@
-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 { 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';
@@ -24,20 +24,21 @@ export const collectionContentsDocument = graphql(`
     }
 `);
 
+
 export interface CollectionContentsTableProps {
     collectionId?: string;
 }
 
-export function CollectionContentsTable({ collectionId }: Readonly<CollectionContentsTableProps>) {
+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 => {
+            transformVariables={(variables) => {
                 return {
                     ...variables,
                     collectionId: collectionId,
@@ -49,9 +50,7 @@ export function CollectionContentsTable({ collectionId }: Readonly<CollectionCon
                     cell: ({ row }) => {
                         return (
                             <Button asChild variant="ghost">
-                                <Link to={`../../product-variants/${row.original.id}`}>
-                                    {row.original.name}{' '}
-                                </Link>
+                                <Link to={`../../product-variants/${row.original.id}`}>{row.original.name} </Link>
                             </Button>
                         );
                     },

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

@@ -1,14 +1,14 @@
-import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
-import { Button } from '@/vdb/components/ui/button.js';
+import { ConfigurableOperationInput } from '@/components/shared/configurable-operation-input.js';
+import { Button } from '@/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { Separator } from '@/vdb/components/ui/separator.js';
-import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
-import { Trans } from '@/vdb/lib/trans.js';
+} 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';
@@ -19,7 +19,7 @@ export interface CollectionFiltersSelectorProps {
     onChange: (filters: ConfigurableOperationInputType[]) => void;
 }
 
-export function CollectionFiltersSelector({ value, onChange }: Readonly<CollectionFiltersSelectorProps>) {
+export function CollectionFiltersSelector({ value, onChange }: CollectionFiltersSelectorProps) {
     const { data: filtersData } = useQuery(getCollectionFiltersQueryOptions);
 
     const filters = filtersData?.collectionFilters;

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

@@ -1,4 +1,4 @@
-import { graphql } from '@/vdb/graphql/graphql.js';
+import { graphql } from '@/graphql/graphql.js';
 
 export const countryItemFragment = graphql(`
     fragment CountryItem on Country {
@@ -24,7 +24,7 @@ export const countriesListQuery = graphql(
     [countryItemFragment],
 );
 
-export const countryDetailDocument = graphql(`
+export const countryDetailQuery = graphql(`
     query CountryDetail($id: ID!) {
         country(id: $id) {
             id
@@ -67,12 +67,3 @@ export const deleteCountryDocument = graphql(`
         }
     }
 `);
-
-export const deleteCountriesDocument = graphql(`
-    mutation DeleteCountries($ids: [ID!]!) {
-        deleteCountries(ids: $ids) {
-            result
-            message
-        }
-    }
-`);

package/src/app/routes/_authenticated/_countries/countries.tsx

@@ -1,12 +1,11 @@
-import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
-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 { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { Button } from '@/components/ui/button.js';
+import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { Trans } from '@/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
-import { DeleteCountriesBulkAction } from './components/country-bulk-actions.js';
 import { countriesListQuery, deleteCountryDocument } from './countries.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries')({
@@ -52,12 +51,6 @@ function CountryListPage() {
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
             }}
-            bulkActions={[
-                {
-                    component: DeleteCountriesBulkAction,
-                    order: 500,
-                },
-            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateCountry']}>