@vendure/dashboard 3.2.0

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

@@ -0,0 +1,248 @@
+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 {
+    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 { channelDetailDocument, createChannelDocument, updateChannelDocument } from './channels.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_channels/channels_/$id')({
+    component: ChannelDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: channelDetailDocument,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/channels', label: 'Channels' },
+                isNew ? <Trans>New channel</Trans> : <ChannelCodeLabel code={entity?.code ?? ''} />,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function ChannelDetailPage() {
+    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: channelDetailDocument,
+        createDocument: createChannelDocument,
+        updateDocument: updateChannelDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                token: entity.token,
+                pricesIncludeTax: entity.pricesIncludeTax,
+                availableCurrencyCodes: entity.availableCurrencyCodes,
+                availableLanguageCodes: entity.availableLanguageCodes,
+                defaultCurrencyCode: entity.defaultCurrencyCode,
+                defaultLanguageCode: entity.defaultLanguageCode,
+                defaultShippingZoneId: entity.defaultShippingZone?.id,
+                defaultTaxZoneId: entity.defaultTaxZone?.id,
+                sellerId: entity.seller?.id,
+                customFields: entity.customFields,
+            };
+        },
+        transformCreateInput: input => {
+            return {
+                ...input,
+                currencyCode: undefined,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            if (data.__typename === 'Channel') {
+                toast(i18n.t('Successfully updated channel'), {
+                    position: 'top-right',
+                });
+                resetForm();
+                if (creatingNewEntity) {
+                    await navigate({ to: `../$id`, params: { id: data.id } });
+                }
+            } else {
+                toast(i18n.t('Failed to update channel'), {
+                    position: 'top-right',
+                    description: data.message,
+                });
+            }
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update channel'), {
+                position: 'top-right',
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    const availableCurrencyCodes = form.watch('availableCurrencyCodes');
+    const availableLanguageCodes = form.watch('availableLanguageCodes');
+
+    const codeIsDefault = entity?.code === DEFAULT_CHANNEL_CODE;
+
+    return (
+        <Page pageId="channel-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>
+                {creatingNewEntity ? (
+                    <Trans>New channel</Trans>
+                ) : (
+                    <ChannelCodeLabel code={entity?.code ?? ''} />
+                )}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateChannel']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => (
+                                <Input placeholder="" {...field} disabled={codeIsDefault} />
+                            )}
+                        />
+                        <div></div>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="token"
+                            label={<Trans>Token</Trans>}
+                            description={
+                                <Trans>
+                                    The token is used to specify the channel when making API requests.
+                                </Trans>
+                            }
+                            render={({ field }) => <Input placeholder="" {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="sellerId"
+                            label={<Trans>Seller</Trans>}
+                            render={({ field }) => (
+                                <SellerSelector value={field.value ?? ''} onChange={field.onChange} />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="availableLanguageCodes"
+                            label={<Trans>Available languages</Trans>}
+                            render={({ field }) => (
+                                <LanguageSelector
+                                    value={field.value ?? []}
+                                    onChange={field.onChange}
+                                    multiple={true}
+                                />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="availableCurrencyCodes"
+                            label={<Trans>Available currencies</Trans>}
+                            render={({ field }) => (
+                                <CurrencySelector
+                                    value={field.value ?? []}
+                                    onChange={field.onChange}
+                                    multiple={true}
+                                />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <PageBlock column="main" blockId="channel-defaults" title={<Trans>Channel defaults</Trans>}>
+                    <DetailFormGrid>
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="defaultLanguageCode"
+                            label={<Trans>Default language</Trans>}
+                            render={({ field }) => (
+                                <LanguageSelector
+                                    value={field.value ?? ''}
+                                    onChange={field.onChange}
+                                    multiple={false}
+                                    availableLanguageCodes={availableLanguageCodes ?? []}
+                                />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="defaultCurrencyCode"
+                            label={<Trans>Default currency</Trans>}
+                            render={({ field }) => (
+                                <CurrencySelector
+                                    value={field.value ?? ''}
+                                    onChange={field.onChange}
+                                    multiple={false}
+                                    availableCurrencyCodes={availableCurrencyCodes ?? []}
+                                />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="defaultTaxZoneId"
+                            label={<Trans>Default tax zone</Trans>}
+                            render={({ field }) => (
+                                <ZoneSelector value={field.value ?? ''} onChange={field.onChange} />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="defaultShippingZoneId"
+                            label={<Trans>Default shipping zone</Trans>}
+                            render={({ field }) => (
+                                <ZoneSelector value={field.value ?? ''} onChange={field.onChange} />
+                            )}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="pricesIncludeTax"
+                            label={<Trans>Prices include tax for default tax zone</Trans>}
+                            description={
+                                <Trans>
+                                    When this is enabled, the prices entered in the product catalog will be
+                                    included in the tax for the default tax zone.
+                                </Trans>
+                            }
+                            render={({ field }) => (
+                                <Switch checked={field.value ?? false} onCheckedChange={field.onChange} />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Channel" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

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

@@ -0,0 +1,133 @@
+import { api } from '@/graphql/api.js';
+import {
+    assetFragment,
+    configurableOperationDefFragment,
+    configurableOperationFragment,
+} from '@/graphql/fragments.js';
+import { graphql, ResultOf } from '@/graphql/graphql.js';
+import { DefinedInitialDataOptions, queryOptions } from '@tanstack/react-query';
+
+export const collectionListDocument = graphql(
+    `
+        query CollectionList($options: CollectionListOptions) {
+            collections(options: $options) {
+                items {
+                    id
+                    createdAt
+                    updatedAt
+                    featuredAsset {
+                        ...Asset
+                    }
+                    name
+                    slug
+                    breadcrumbs {
+                        id
+                        name
+                        slug
+                    }
+                    children {
+                        id
+                    }
+                    position
+                    isPrivate
+                    parentId
+                    productVariants {
+                        totalItems
+                    }
+                }
+                totalItems
+            }
+        }
+    `,
+    [assetFragment],
+);
+
+export const collectionDetailDocument = graphql(
+    `
+        query CollectionDetail($id: ID!) {
+            collection(id: $id) {
+                id
+                createdAt
+                updatedAt
+                name
+                slug
+                description
+                isPrivate
+                languageCode
+                breadcrumbs {
+                    id
+                    name
+                    slug
+                }
+                featuredAsset {
+                    ...Asset
+                }
+                assets {
+                    ...Asset
+                }
+                inheritFilters
+                filters {
+                    ...ConfigurableOperation
+                }
+                translations {
+                    id
+                    languageCode
+                    name
+                    slug
+                    description
+                }
+                parent {
+                    id
+                    name
+                }
+                children {
+                    id
+                    name
+                }
+                customFields
+            }
+        }
+    `,
+    [assetFragment, configurableOperationFragment],
+);
+
+export const createCollectionDocument = graphql(`
+    mutation CreateCollection($input: CreateCollectionInput!) {
+        createCollection(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateCollectionDocument = graphql(`
+    mutation UpdateCollection($input: UpdateCollectionInput!) {
+        updateCollection(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteCollectionDocument = graphql(`
+    mutation DeleteCollection($id: ID!) {
+        deleteCollection(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+export const getCollectionFiltersDocument = graphql(
+    `
+        query GetCollectionFilters {
+            collectionFilters {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+export const getCollectionFiltersQueryOptions = queryOptions({
+    queryKey: ['getCollectionFilters'],
+    queryFn: () => api.query(getCollectionFiltersDocument),
+}) as DefinedInitialDataOptions<ResultOf<typeof getCollectionFiltersDocument>>;

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

@@ -0,0 +1,195 @@
+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, PlusIcon } from 'lucide-react';
+import { useState } from 'react';
+
+import { collectionListDocument, deleteCollectionDocument } from './collections.graphql.js';
+import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
+
+export const Route = createFileRoute('/_authenticated/_collections/collections')({
+    component: CollectionListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Collections</Trans> }),
+});
+
+type Collection = ResultOf<typeof collectionListDocument>['collections']['items'][number];
+
+function CollectionListPage() {
+    const [expanded, setExpanded] = useState<ExpandedState>({});
+    const childrenQueries = useQueries({
+        queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
+            return {
+                queryKey: ['childCollections', collectionId],
+                queryFn: () =>
+                    api.query(collectionListDocument, {
+                        options: {
+                            filter: {
+                                parentId: { eq: collectionId },
+                            },
+                        },
+                    }),
+                staleTime: 1000 * 60 * 5,
+            };
+        }),
+    });
+    const childCollectionsByParentId = childrenQueries.reduce(
+        (acc, query, index) => {
+            const collectionId = Object.keys(expanded)[index];
+            if (query.data) {
+                acc[collectionId] = query.data.collections.items;
+            }
+            return acc;
+        },
+        {} as Record<string, any[]>,
+    );
+
+    const addSubCollections = (data: Collection[]) => {
+        const allRows = [] as Collection[];
+        const addSubRows = (row: Collection) => {
+            const subRows = childCollectionsByParentId[row.id] || [];
+            if (subRows.length) {
+                for (const subRow of subRows) {
+                    allRows.push(subRow);
+                    addSubRows(subRow);
+                }
+            }
+        };
+        data.forEach(row => {
+            allRows.push(row);
+            addSubRows(row);
+        });
+        return allRows;
+    };
+
+    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>
+                        );
+                    },
+                },
+                productVariants: {
+                    header: 'Contents',
+                    cell: ({ row }) => {
+                        return (
+                            <CollectionContentsSheet
+                                collectionId={row.original.id}
+                                collectionName={row.original.name}
+                            >
+                                <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}
+        >
+            <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>
+    );
+}