@vendure/dashboard 3.2.0 → 3.2.2

package/src/lib/framework/nav-menu/nav-menu-extensions.ts

@@ -1,66 +1,66 @@
-import type { LucideIcon } from 'lucide-react';
-
-import { globalRegistry } from '../registry/global-registry.js';
-
-// Define the placement options for navigation sections
-export type NavMenuSectionPlacement = 'top' | 'bottom';
-
-interface NavMenuBaseItem {
-    id: string;
-    title: string;
-    icon?: LucideIcon;
-    placement?: NavMenuSectionPlacement;
-}
-
-export interface NavMenuItem extends NavMenuBaseItem {
-    url: string;
-}
-
-export interface NavMenuSection extends NavMenuBaseItem {
-    defaultOpen?: boolean;
-    items?: NavMenuItem[];
-}
-
-export interface NavMenuConfig {
-    sections: Array<NavMenuSection | NavMenuItem>;
-}
-
-globalRegistry.register('navMenuConfig', { sections: [] });
-
-export function getNavMenuConfig() {
-    return globalRegistry.get('navMenuConfig');
-}
-
-export function setNavMenuConfig(config: NavMenuConfig) {
-    globalRegistry.set('navMenuConfig', oldValue => {
-        return Object.assign({}, oldValue, config);
-    });
-}
-
-export function addNavMenuItem(item: NavMenuItem, sectionId: string) {
-    const navMenuConfig = getNavMenuConfig();
-    navMenuConfig.sections = [...navMenuConfig.sections];
-    const sectionIndex = navMenuConfig.sections.findIndex(
-        (s: NavMenuSection | NavMenuItem) => s.id === sectionId,
-    );
-    if (sectionIndex !== -1) {
-        const sectionFromConfig = navMenuConfig.sections[sectionIndex];
-
-        if ('items' in sectionFromConfig) {
-            const section = {
-                ...sectionFromConfig,
-                items: [...(sectionFromConfig.items ?? [])],
-            };
-            const itemIndex = section.items.findIndex((i: NavMenuItem) => i.id === item.id);
-            if (itemIndex === -1) {
-                section.items.push(item);
-                navMenuConfig.sections.splice(sectionIndex, 1, section);
-            } else {
-                section.items.splice(itemIndex, 1, item);
-                navMenuConfig.sections.splice(sectionIndex, 1, section);
-            }
-        } else {
-            navMenuConfig.sections.splice(sectionIndex, 1, item);
-        }
-    }
-}
+import type { LucideIcon } from 'lucide-react';
+
+import { globalRegistry } from '../registry/global-registry.js';
+
+// Define the placement options for navigation sections
+export type NavMenuSectionPlacement = 'top' | 'bottom';
+
+interface NavMenuBaseItem {
+    id: string;
+    title: string;
+    icon?: LucideIcon;
+    placement?: NavMenuSectionPlacement;
+}
+
+export interface NavMenuItem extends NavMenuBaseItem {
+    url: string;
+}
+
+export interface NavMenuSection extends NavMenuBaseItem {
+    defaultOpen?: boolean;
+    items?: NavMenuItem[];
+}
+
+export interface NavMenuConfig {
+    sections: Array<NavMenuSection | NavMenuItem>;
+}
+
+globalRegistry.register('navMenuConfig', { sections: [] });
+
+export function getNavMenuConfig() {
+    return globalRegistry.get('navMenuConfig');
+}
+
+export function setNavMenuConfig(config: NavMenuConfig) {
+    globalRegistry.set('navMenuConfig', oldValue => {
+        return Object.assign({}, oldValue, config);
+    });
+}
+
+export function addNavMenuItem(item: NavMenuItem, sectionId: string) {
+    const navMenuConfig = getNavMenuConfig();
+    navMenuConfig.sections = [...navMenuConfig.sections];
+    const sectionIndex = navMenuConfig.sections.findIndex(
+        (s: NavMenuSection | NavMenuItem) => s.id === sectionId,
+    );
+    if (sectionIndex !== -1) {
+        const sectionFromConfig = navMenuConfig.sections[sectionIndex];
+
+        if ('items' in sectionFromConfig) {
+            const section = {
+                ...sectionFromConfig,
+                items: [...(sectionFromConfig.items ?? [])],
+            };
+            const itemIndex = section.items.findIndex((i: NavMenuItem) => i.id === item.id);
+            if (itemIndex === -1) {
+                section.items.push(item);
+                navMenuConfig.sections.splice(sectionIndex, 1, section);
+            } else {
+                section.items.splice(itemIndex, 1, item);
+                navMenuConfig.sections.splice(sectionIndex, 1, section);
+            }
+        } else {
+            navMenuConfig.sections.splice(sectionIndex, 1, item);
+        }
+    }
+}

package/src/lib/framework/page/detail-page-route-loader.tsx

@@ -1,48 +1,48 @@
-import { NEW_ENTITY_PATH } from '@/constants.js';
-
-import { PageBreadcrumb } from '@/components/layout/generated-breadcrumbs.js';
-import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { FileBaseRouteOptions } from '@tanstack/react-router';
-import { getQueryName, getQueryTypeFieldInfo } from '../document-introspection/get-document-structure.js';
-import { DetailEntity } from './page-types.js';
-import { getDetailQueryOptions } from './use-detail-page.js';
-import { addCustomFields } from '../document-introspection/add-custom-fields.js';
-export interface DetailPageRouteLoaderConfig<T extends TypedDocumentNode<any, any>> {
-    queryDocument: T;
-    breadcrumb: (isNew: boolean, entity: DetailEntity<T>) => Array<PageBreadcrumb | undefined>;
-}
-
-export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
-    queryDocument,
-    breadcrumb,
-}: DetailPageRouteLoaderConfig<T>) {
-    const loader: FileBaseRouteOptions<any, any>['loader'] = async ({
-        context,
-        params,
-    }: {
-        context: any;
-        params: any;
-    }) => {
-        if (!params.id) {
-            throw new Error('ID param is required');
-        }
-        const isNew = params.id === NEW_ENTITY_PATH;
-        const result = isNew
-            ? null
-            : await context.queryClient.ensureQueryData(
-                  getDetailQueryOptions(addCustomFields(queryDocument), { id: params.id }),
-                  { id: params.id },
-              );
-
-        const entityField = getQueryName(queryDocument);
-        const entityName = getQueryTypeFieldInfo(queryDocument)?.type;
-
-        if (!isNew && !result[entityField]) {
-            throw new Error(`${entityName} with the ID ${params.id} was not found`);
-        }
-        return {
-            breadcrumb: breadcrumb(isNew, result?.[entityField]),
-        };
-    };
-    return loader;
-}
+import { NEW_ENTITY_PATH } from '@/constants.js';
+
+import { PageBreadcrumb } from '@/components/layout/generated-breadcrumbs.js';
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FileBaseRouteOptions } from '@tanstack/react-router';
+import { getQueryName, getQueryTypeFieldInfo } from '../document-introspection/get-document-structure.js';
+import { DetailEntity } from './page-types.js';
+import { getDetailQueryOptions } from './use-detail-page.js';
+import { addCustomFields } from '../document-introspection/add-custom-fields.js';
+export interface DetailPageRouteLoaderConfig<T extends TypedDocumentNode<any, any>> {
+    queryDocument: T;
+    breadcrumb: (isNew: boolean, entity: DetailEntity<T>) => Array<PageBreadcrumb | undefined>;
+}
+
+export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
+    queryDocument,
+    breadcrumb,
+}: DetailPageRouteLoaderConfig<T>) {
+    const loader: FileBaseRouteOptions<any, any>['loader'] = async ({
+        context,
+        params,
+    }: {
+        context: any;
+        params: any;
+    }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+        const isNew = params.id === NEW_ENTITY_PATH;
+        const result = isNew
+            ? null
+            : await context.queryClient.ensureQueryData(
+                  getDetailQueryOptions(addCustomFields(queryDocument), { id: params.id }),
+                  { id: params.id },
+              );
+
+        const entityField = getQueryName(queryDocument);
+        const entityName = getQueryTypeFieldInfo(queryDocument)?.type;
+
+        if (!isNew && !result[entityField]) {
+            throw new Error(`${entityName} with the ID ${params.id} was not found`);
+        }
+        return {
+            breadcrumb: breadcrumb(isNew, result?.[entityField]),
+        };
+    };
+    return loader;
+}

package/src/lib/framework/page/detail-page.tsx

@@ -1,131 +1,131 @@
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { Input } from '@/components/ui/input.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans } from '@/lib/trans.js';
-import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { AnyRoute } from '@tanstack/react-router';
-import { ResultOf, VariablesOf } from 'gql.tada';
-
-import { DateTimeInput } from '@/components/data-input/datetime-input.js';
-import { Button } from '@/components/ui/button.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { toast } from 'sonner';
-import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
-import {
-    DetailFormGrid,
-    Page,
-    PageActionBar,
-    PageActionBarLeft,
-    PageActionBarRight,
-    PageBlock,
-    PageLayout,
-    PageTitle,
-} from '../layout-engine/page-layout.js';
-import { DetailEntityPath } from './page-types.js';
-
-export interface DetailPageProps<
-    T extends TypedDocumentNode<any, any>,
-    C extends TypedDocumentNode<any, any>,
-    U extends TypedDocumentNode<any, any>,
-    EntityField extends keyof ResultOf<T> = DetailEntityPath<T>,
-> {
-    pageId: string;
-    route: AnyRoute;
-    title: (entity: ResultOf<T>[EntityField]) => string;
-    queryDocument: T;
-    createDocument?: C;
-    updateDocument: U;
-    setValuesForUpdate: (entity: ResultOf<T>[EntityField]) => VariablesOf<U>['input'];
-}
-
-export function DetailPage<
-    T extends TypedDocumentNode<any, any>,
-    C extends TypedDocumentNode<any, any>,
-    U extends TypedDocumentNode<any, any>,
->({
-    pageId,
-    route,
-    queryDocument,
-    createDocument,
-    updateDocument,
-    setValuesForUpdate,
-    title,
-}: DetailPageProps<T, C, U>) {
-    const params = route.useParams();
-
-    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage<any, any, any>({
-        queryDocument,
-        updateDocument,
-        createDocument,
-        params: { id: params.id },
-        setValuesForUpdate,
-        onSuccess: () => {
-            toast.success('Updated successfully');
-            resetForm();
-        },
-        onError: error => {
-            toast.error('Failed to update', {
-                description: error instanceof Error ? error.message : 'Unknown error',
-            });
-        },
-    });
-
-    const updateFields = getOperationVariablesFields(updateDocument);
-
-    return (
-        <Page pageId={pageId} form={form} submitHandler={submitHandler}>
-            <PageActionBar>
-                <PageActionBarLeft>
-                    <PageTitle>{title(entity)}</PageTitle>
-                </PageActionBarLeft>
-                <PageActionBarRight>
-                    <Button
-                        type="submit"
-                        disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
-                    >
-                        <Trans>Update</Trans>
-                    </Button>
-                </PageActionBarRight>
-            </PageActionBar>
-            <PageLayout>
-                <PageBlock column="main" blockId="main-form">
-                    <DetailFormGrid>
-                        {updateFields.map(fieldInfo => {
-                            if (fieldInfo.name === 'id' && fieldInfo.type === 'ID') {
-                                return null;
-                            }
-                            return (
-                                <FormFieldWrapper
-                                    key={fieldInfo.name}
-                                    control={form.control}
-                                    name={fieldInfo.name as never}
-                                    label={fieldInfo.name}
-                                    render={({ field }) => {
-                                        switch (fieldInfo.type) {
-                                            case 'Int':
-                                            case 'Float':
-                                                return (
-                                                    <Input
-                                                        type="number"
-                                                        value={field.value}
-                                                        onChange={e => field.onChange(e.target.valueAsNumber)}
-                                                    />
-                                                );
-                                            case 'DateTime':
-                                                return <DateTimeInput {...field} />;
-                                            case 'Boolean':
-                                                return <Checkbox {...field} />;
-                                            case 'String':
-                                            default:
-                                                return <Input {...field} />;
-                                        }
-                                    }}
-                                />
-                            );
-                        })}
-                    </DetailFormGrid>
-                </PageBlock>
-            </PageLayout>
-        </Page>
-    );
-}
+import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { Input } from '@/components/ui/input.js';
+import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { Trans } from '@/lib/trans.js';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { AnyRoute } from '@tanstack/react-router';
+import { ResultOf, VariablesOf } from 'gql.tada';
+
+import { DateTimeInput } from '@/components/data-input/datetime-input.js';
+import { Button } from '@/components/ui/button.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { toast } from 'sonner';
+import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
+import {
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarLeft,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '../layout-engine/page-layout.js';
+import { DetailEntityPath } from './page-types.js';
+
+export interface DetailPageProps<
+    T extends TypedDocumentNode<any, any>,
+    C extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+    EntityField extends keyof ResultOf<T> = DetailEntityPath<T>,
+> {
+    pageId: string;
+    route: AnyRoute;
+    title: (entity: ResultOf<T>[EntityField]) => string;
+    queryDocument: T;
+    createDocument?: C;
+    updateDocument: U;
+    setValuesForUpdate: (entity: ResultOf<T>[EntityField]) => VariablesOf<U>['input'];
+}
+
+export function DetailPage<
+    T extends TypedDocumentNode<any, any>,
+    C extends TypedDocumentNode<any, any>,
+    U extends TypedDocumentNode<any, any>,
+>({
+    pageId,
+    route,
+    queryDocument,
+    createDocument,
+    updateDocument,
+    setValuesForUpdate,
+    title,
+}: DetailPageProps<T, C, U>) {
+    const params = route.useParams();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage<any, any, any>({
+        queryDocument,
+        updateDocument,
+        createDocument,
+        params: { id: params.id },
+        setValuesForUpdate,
+        onSuccess: () => {
+            toast.success('Updated successfully');
+            resetForm();
+        },
+        onError: error => {
+            toast.error('Failed to update', {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        },
+    });
+
+    const updateFields = getOperationVariablesFields(updateDocument);
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler}>
+            <PageActionBar>
+                <PageActionBarLeft>
+                    <PageTitle>{title(entity)}</PageTitle>
+                </PageActionBarLeft>
+                <PageActionBarRight>
+                    <Button
+                        type="submit"
+                        disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                    >
+                        <Trans>Update</Trans>
+                    </Button>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        {updateFields.map(fieldInfo => {
+                            if (fieldInfo.name === 'id' && fieldInfo.type === 'ID') {
+                                return null;
+                            }
+                            return (
+                                <FormFieldWrapper
+                                    key={fieldInfo.name}
+                                    control={form.control}
+                                    name={fieldInfo.name as never}
+                                    label={fieldInfo.name}
+                                    render={({ field }) => {
+                                        switch (fieldInfo.type) {
+                                            case 'Int':
+                                            case 'Float':
+                                                return (
+                                                    <Input
+                                                        type="number"
+                                                        value={field.value}
+                                                        onChange={e => field.onChange(e.target.valueAsNumber)}
+                                                    />
+                                                );
+                                            case 'DateTime':
+                                                return <DateTimeInput {...field} />;
+                                            case 'Boolean':
+                                                return <Checkbox {...field} />;
+                                            case 'String':
+                                            default:
+                                                return <Input {...field} />;
+                                        }
+                                    }}
+                                />
+                            );
+                        })}
+                    </DetailFormGrid>
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}