@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/app/routes/_authenticated/_assets/assets_.$id.tsx

@@ -1,31 +1,42 @@
-import { AssetPreview } from '@/components/shared/asset/asset-preview.js'
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { createFileRoute } from '@tanstack/react-router'
-import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { toast } from 'sonner';
-import { Page, PageTitle, PageActionBar, PageActionBarRight, PageBlock, PageLayout, CustomFieldsPageBlock } from '@/framework/layout-engine/page-layout.js'
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { useState, useRef } from 'react';
-import { PreviewPreset } from '@/components/shared/asset/asset-preview.js';
-import { AssetPreviewSelector } from '@/components/shared/asset/asset-preview-selector.js';
-import { AssetProperties } from '@/components/shared/asset/asset-properties.js';
-import { AssetFocalPointEditor } from '@/components/shared/asset/asset-focal-point-editor.js';
+import { AssetFocalPointEditor } from '@/vdb/components/shared/asset/asset-focal-point-editor.js';
+import { AssetPreviewSelector } from '@/vdb/components/shared/asset/asset-preview-selector.js';
+import { PreviewPreset } from '@/vdb/components/shared/asset/asset-preview.js';
+import { AssetProperties } from '@/vdb/components/shared/asset/asset-properties.js';
+import { Point } from '@/vdb/components/shared/asset/focal-point-control.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Label } from '@/vdb/components/ui/label.js';
+import {
+    CustomFieldsPageBlock,
+    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 '@/vdb/lib/trans.js';
+import { createFileRoute } from '@tanstack/react-router';
 import { FocusIcon } from 'lucide-react';
-import { Point } from '@/components/shared/asset/focal-point-control.js';
-import { Label } from '@/components/ui/label.js';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { assetDetailDocument, assetUpdateDocument } from './assets.graphql.js';
+
+const pageId = 'asset-detail';
+
 export const Route = createFileRoute('/_authenticated/_assets/assets_/$id')({
     component: AssetDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: assetDetailDocument,
         breadcrumb(isNew, entity) {
             return [
                 { path: '/assets', label: 'Assets' },
-                isNew ? <Trans>New asset</Trans> : entity?.name ?? '',
+                isNew ? <Trans>New asset</Trans> : (entity?.name ?? ''),
             ];
         },
     }),
@@ -42,7 +53,8 @@ function AssetDetailPage() {
     const [height, setHeight] = useState(0);
     const [focalPoint, setFocalPoint] = useState<Point | undefined>(undefined);
     const [settingFocalPoint, setSettingFocalPoint] = useState(false);
-    const { form, submitHandler, entity, isPending } = useDetailPage({
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: assetDetailDocument,
         updateDocument: assetUpdateDocument,
         setValuesForUpdate: entity => {
@@ -79,17 +91,14 @@ function AssetDetailPage() {
         return null;
     }
     return (
-        <Page pageId="asset-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 <Trans>Edit asset</Trans>
             </PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
                     <PermissionGuard requires={['UpdateChannel']}>
-                        <Button
-                            type="submit"
-                            disabled={!form.formState.isDirty || isPending}
-                        >
+                        <Button type="submit" disabled={!form.formState.isDirty || isPending}>
                             <Trans>Update</Trans>
                         </Button>
                     </PermissionGuard>
@@ -103,7 +112,7 @@ function AssetDetailPage() {
                             height={height}
                             settingFocalPoint={settingFocalPoint}
                             focalPoint={form.getValues().focalPoint ?? { x: 0.5, y: 0.5 }}
-                            onFocalPointChange={(point) => {
+                            onFocalPointChange={point => {
                                 form.setValue('focalPoint.x', point.x, { shouldDirty: true });
                                 form.setValue('focalPoint.y', point.y, { shouldDirty: true });
                                 setSettingFocalPoint(false);
@@ -124,11 +133,7 @@ function AssetDetailPage() {
                         </AssetFocalPointEditor>
                     </div>
                 </PageBlock>
-                <CustomFieldsPageBlock
-                    column="main"
-                    entityType={'Asset'}
-                    control={form.control}
-                />
+                <CustomFieldsPageBlock column="main" entityType={'Asset'} control={form.control} />
                 <PageBlock column="side" blockId="asset-properties">
                     <AssetProperties asset={entity} />
                 </PageBlock>
@@ -136,15 +141,24 @@ function AssetDetailPage() {
                     <div className="flex flex-col gap-2">
                         <AssetPreviewSelector size={size} setSize={setSize} width={width} height={height} />
                         <div className="flex items-center gap-2">
-                            <Button type='button' variant="outline" size="icon" onClick={() => setSettingFocalPoint(true)}>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                onClick={() => setSettingFocalPoint(true)}
+                            >
                                 <FocusIcon className="h-4 w-4" />
                             </Button>
                             <div className="text-sm text-muted-foreground">
-                                <Label><Trans>Focal Point</Trans></Label>
+                                <Label>
+                                    <Trans>Focal Point</Trans>
+                                </Label>
                                 <div className="text-sm text-muted-foreground">
-                                    {form.getValues().focalPoint?.x && form.getValues().focalPoint?.y
-                                        ? `${form.getValues().focalPoint?.x.toFixed(2)}, ${form.getValues().focalPoint?.y.toFixed(2)}`
-                                        : <Trans>Not set</Trans>}
+                                    {form.getValues().focalPoint?.x && form.getValues().focalPoint?.y ? (
+                                        `${form.getValues().focalPoint?.x.toFixed(2)}, ${form.getValues().focalPoint?.y.toFixed(2)}`
+                                    ) : (
+                                        <Trans>Not set</Trans>
+                                    )}
                                 </div>
                             </div>
                         </div>
@@ -152,5 +166,5 @@ function AssetDetailPage() {
                 </PageBlock>
             </PageLayout>
         </Page>
-    )
+    );
 }

package/src/app/routes/_authenticated/_assets/components/asset-bulk-actions.tsx

@@ -0,0 +1,45 @@
+import { useMutation } from '@tanstack/react-query';
+import { TrashIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { api } from '@/vdb/graphql/api.js';
+import { AssetFragment } from '@/vdb/graphql/fragments.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { deleteAssetsDocument } from '../assets.graphql.js';
+
+export const DeleteAssetsBulkAction = ({
+    selection,
+    refetch,
+}: {
+    selection: AssetFragment[];
+    refetch: () => void;
+}) => {
+    const { i18n } = useLingui();
+    const { mutate } = useMutation({
+        mutationFn: api.mutate(deleteAssetsDocument),
+        onSuccess: (result: ResultOf<typeof deleteAssetsDocument>) => {
+            if (result.deleteAssets.result === 'DELETED') {
+                toast.success(i18n.t(`Deleted ${selection.length} assets`));
+            } else {
+                toast.error(i18n.t(`Failed to delete assets: ${result.deleteAssets.message}`));
+            }
+            refetch();
+        },
+        onError: () => {
+            toast.error(`Failed to delete ${selection.length} assets`);
+        },
+    });
+
+    return (
+        <DataTableBulkActionItem
+            requiresPermission={['DeleteCatalog', 'DeleteAsset']}
+            onClick={() => mutate({ input: { assetIds: selection.map(s => s.id) } })}
+            label={<Trans>Delete</Trans>}
+            confirmationText={<Trans>Are you sure you want to delete {selection.length} assets?</Trans>}
+            icon={TrashIcon}
+            className="text-destructive"
+        />
+    );
+};

package/src/app/routes/_authenticated/_channels/channels.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const channelItemFragment = graphql(`
     fragment ChannelItem on Channel {
@@ -91,3 +91,12 @@ export const deleteChannelDocument = graphql(`
         }
     }
 `);
+
+export const deleteChannelsDocument = graphql(`
+    mutation DeleteChannels($ids: [ID!]!) {
+        deleteChannels(ids: $ids) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_channels/channels.tsx

@@ -1,14 +1,15 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.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 { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+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 { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { channelListQuery, deleteChannelDocument } from './channels.graphql.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { DeleteChannelsBulkAction } from './components/channel-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_channels/channels')({
     component: ChannelListPage,
@@ -53,15 +54,21 @@ function ChannelListPage() {
                     header: 'Seller',
                     cell: ({ row }) => {
                         return row.original.seller?.name;
-                    }
+                    },
                 },
                 defaultLanguageCode: {
                     header: 'Default Language',
                     cell: ({ row }) => {
                         return formatLanguageName(row.original.defaultLanguageCode);
-                    }
+                    },
                 },
             }}
+            bulkActions={[
+                {
+                    component: DeleteChannelsBulkAction,
+                    order: 500,
+                },
+            ]}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateChannel']}>

package/src/app/routes/_authenticated/_channels/channels_.$id.tsx

@@ -1,15 +1,15 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { CurrencySelector } from '@/components/shared/currency-selector.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { LanguageSelector } from '@/components/shared/language-selector.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { SellerSelector } from '@/components/shared/seller-selector.js';
-import { ZoneSelector } from '@/components/shared/zone-selector.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { DEFAULT_CHANNEL_CODE, NEW_ENTITY_PATH } from '@/constants.js';
+import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
+import { CurrencySelector } from '@/vdb/components/shared/currency-selector.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { LanguageSelector } from '@/vdb/components/shared/language-selector.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { SellerSelector } from '@/vdb/components/shared/seller-selector.js';
+import { ZoneSelector } from '@/vdb/components/shared/zone-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { DEFAULT_CHANNEL_CODE, NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -19,17 +19,20 @@ import {
     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';
+} 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';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { channelDetailDocument, createChannelDocument, updateChannelDocument } from './channels.graphql.js';
 
+const pageId = 'channel-detail';
+
 export const Route = createFileRoute('/_authenticated/_channels/channels_/$id')({
     component: ChannelDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: channelDetailDocument,
         breadcrumb(isNew, entity) {
             return [
@@ -48,6 +51,7 @@ function ChannelDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: channelDetailDocument,
         createDocument: createChannelDocument,
         updateDocument: updateChannelDocument,
@@ -100,7 +104,7 @@ function ChannelDetailPage() {
     const codeIsDefault = entity?.code === DEFAULT_CHANNEL_CODE;
 
     return (
-        <Page pageId="channel-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 {creatingNewEntity ? (
                     <Trans>New channel</Trans>

package/src/app/routes/_authenticated/_channels/components/channel-bulk-actions.tsx

@@ -0,0 +1,15 @@
+import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
+import { deleteChannelsDocument } from '../channels.graphql.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
+
+export const DeleteChannelsBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+    return (
+        <DeleteBulkAction
+            mutationDocument={deleteChannelsDocument}
+            entityName="channels"
+            requiredPermissions={['DeleteChannel']}
+            selection={selection}
+            table={table}
+        />
+    );
+};

package/src/app/routes/_authenticated/_collections/collections.graphql.ts

@@ -1,10 +1,10 @@
-import { api } from '@/graphql/api.js';
+import { api } from '@/vdb/graphql/api.js';
 import {
     assetFragment,
     configurableOperationDefFragment,
     configurableOperationFragment,
-} from '@/graphql/fragments.js';
-import { graphql, ResultOf } from '@/graphql/graphql.js';
+} from '@/vdb/graphql/fragments.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
 import { DefinedInitialDataOptions, queryOptions } from '@tanstack/react-query';
 
 export const collectionListDocument = graphql(
@@ -131,3 +131,60 @@ export const getCollectionFiltersQueryOptions = queryOptions({
     queryKey: ['getCollectionFilters'],
     queryFn: () => api.query(getCollectionFiltersDocument),
 }) as DefinedInitialDataOptions<ResultOf<typeof getCollectionFiltersDocument>>;
+
+export const assignCollectionToChannelDocument = graphql(`
+    mutation AssignCollectionsToChannel($input: AssignCollectionsToChannelInput!) {
+        assignCollectionsToChannel(input: $input) {
+            id
+        }
+    }
+`);
+
+export const removeCollectionFromChannelDocument = graphql(`
+    mutation RemoveCollectionsFromChannel($input: RemoveCollectionsFromChannelInput!) {
+        removeCollectionsFromChannel(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteCollectionsDocument = graphql(`
+    mutation DeleteCollections($ids: [ID!]!) {
+        deleteCollections(ids: $ids) {
+            result
+            message
+        }
+    }
+`);
+
+export const moveCollectionDocument = graphql(`
+    mutation MoveCollection($input: MoveCollectionInput!) {
+        moveCollection(input: $input) {
+            id
+        }
+    }
+`);
+
+export const collectionListForMoveDocument = graphql(`
+    query CollectionListForMove($options: CollectionListOptions) {
+        collections(options: $options) {
+            items {
+                id
+                name
+                slug
+                breadcrumbs {
+                    id
+                    name
+                    slug
+                }
+                children {
+                    id
+                }
+                position
+                isPrivate
+                parentId
+            }
+            totalItems
+        }
+    }
+`);