@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/main.tsx

@@ -1,97 +1,97 @@
-import { Toaster } from '@/components/ui/sonner.js';
-import { setCustomFieldsMap } from '@/framework/document-introspection/add-custom-fields.js';
-import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
-import { useExtendedRouter } from '@/framework/page/use-extended-router.js';
-import { useAuth } from '@/hooks/use-auth.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { defaultLocale, dynamicActivate } from '@/providers/i18n-provider.js';
-import { createRouter, RouterProvider } from '@tanstack/react-router';
-import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom/client';
-import { registerDefaults } from '@/framework/defaults.js';
-import { executeDashboardExtensionCallbacks } from '@/framework/extension-api/define-dashboard-extension.js';
-
-import { AppProviders, queryClient } from './app-providers.js';
-import { routeTree } from './routeTree.gen.js';
-import './styles.css';
-
-// Register things for typesafety
-declare module '@tanstack/react-router' {
-    interface Register {
-        router: typeof router;
-    }
-}
-
-export const router = createRouter({
-    routeTree,
-    defaultPreload: 'intent',
-    scrollRestoration: true,
-    context: {
-        /* eslint-disable @typescript-eslint/no-non-null-assertion */
-        auth: undefined!, // This will be set after we wrap the app in an AuthProvider
-        queryClient,
-    },
-    defaultErrorComponent: ({ error }: { error: Error }) => <div>Uh Oh!!! {error.message}</div>,
-});
-
-function InnerApp() {
-    const auth = useAuth();
-    const extendedRouter = useExtendedRouter(router);
-    const serverConfig = useServerConfig();
-    const [hasSetCustomFieldsMap, setHasSetCustomFieldsMap] = React.useState(false);
-
-    useEffect(() => {
-        if (!serverConfig) {
-            return;
-        }
-        setCustomFieldsMap(serverConfig.entityCustomFields);
-        setHasSetCustomFieldsMap(true);
-    }, [serverConfig?.entityCustomFields]);
-
-    return (
-        <>
-            {hasSetCustomFieldsMap && (
-                <RouterProvider router={extendedRouter} context={{ auth, queryClient }} />
-            )}
-        </>
-    );
-}
-
-function App() {
-    const [i18nLoaded, setI18nLoaded] = React.useState(false);
-    const { extensionsLoaded } = useDashboardExtensions();
-    useEffect(() => {
-        // With this method we dynamically load the catalogs
-        dynamicActivate(defaultLocale, () => {
-            setI18nLoaded(true);
-        });
-        registerDefaults();
-    }, []);
-
-    useEffect(() => {
-        if (extensionsLoaded) {
-            executeDashboardExtensionCallbacks();
-        }
-    }, [extensionsLoaded]);
-
-    return (
-        i18nLoaded &&
-        extensionsLoaded && (
-            <AppProviders>
-                <InnerApp />
-                <Toaster />
-            </AppProviders>
-        )
-    );
-}
-
-const rootElement = document.getElementById('app')!;
-
-if (!rootElement.innerHTML) {
-    const root = ReactDOM.createRoot(rootElement);
-    root.render(
-        <React.StrictMode>
-            <App />
-        </React.StrictMode>,
-    );
-}
+import { Toaster } from '@/components/ui/sonner.js';
+import { setCustomFieldsMap } from '@/framework/document-introspection/add-custom-fields.js';
+import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
+import { useExtendedRouter } from '@/framework/page/use-extended-router.js';
+import { useAuth } from '@/hooks/use-auth.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
+import { defaultLocale, dynamicActivate } from '@/providers/i18n-provider.js';
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { registerDefaults } from '@/framework/defaults.js';
+import { executeDashboardExtensionCallbacks } from '@/framework/extension-api/define-dashboard-extension.js';
+
+import { AppProviders, queryClient } from './app-providers.js';
+import { routeTree } from './routeTree.gen.js';
+import './styles.css';
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+    interface Register {
+        router: typeof router;
+    }
+}
+
+export const router = createRouter({
+    routeTree,
+    defaultPreload: 'intent',
+    scrollRestoration: true,
+    context: {
+        /* eslint-disable @typescript-eslint/no-non-null-assertion */
+        auth: undefined!, // This will be set after we wrap the app in an AuthProvider
+        queryClient,
+    },
+    defaultErrorComponent: ({ error }: { error: Error }) => <div>Uh Oh!!! {error.message}</div>,
+});
+
+function InnerApp() {
+    const auth = useAuth();
+    const extendedRouter = useExtendedRouter(router);
+    const serverConfig = useServerConfig();
+    const [hasSetCustomFieldsMap, setHasSetCustomFieldsMap] = React.useState(false);
+
+    useEffect(() => {
+        if (!serverConfig) {
+            return;
+        }
+        setCustomFieldsMap(serverConfig.entityCustomFields);
+        setHasSetCustomFieldsMap(true);
+    }, [serverConfig?.entityCustomFields]);
+
+    return (
+        <>
+            {hasSetCustomFieldsMap && (
+                <RouterProvider router={extendedRouter} context={{ auth, queryClient }} />
+            )}
+        </>
+    );
+}
+
+function App() {
+    const [i18nLoaded, setI18nLoaded] = React.useState(false);
+    const { extensionsLoaded } = useDashboardExtensions();
+    useEffect(() => {
+        // With this method we dynamically load the catalogs
+        dynamicActivate(defaultLocale, () => {
+            setI18nLoaded(true);
+        });
+        registerDefaults();
+    }, []);
+
+    useEffect(() => {
+        if (extensionsLoaded) {
+            executeDashboardExtensionCallbacks();
+        }
+    }, [extensionsLoaded]);
+
+    return (
+        i18nLoaded &&
+        extensionsLoaded && (
+            <AppProviders>
+                <InnerApp />
+                <Toaster />
+            </AppProviders>
+        )
+    );
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+    const root = ReactDOM.createRoot(rootElement);
+    root.render(
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>,
+    );
+}

package/src/app/routes/__root.tsx

@@ -1,24 +1,24 @@
-import { AuthContext } from '@/providers/auth.js';
-import { QueryClient } from '@tanstack/react-query';
-import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
-import { TanStackRouterDevtools } from '@tanstack/router-devtools';
-
-export interface MyRouterContext {
-    auth: AuthContext;
-    queryClient: QueryClient;
-}
-
-export const Route = createRootRouteWithContext<MyRouterContext>()({
-    component: RootComponent,
-    search: {
-        // middlewares: [retainSearchParams(['page', 'perPage', 'sort'] as any)],
-    },
-});
-
-function RootComponent() {
-    return (
-        <>
-            <Outlet />
-        </>
-    );
-}
+import { AuthContext } from '@/providers/auth.js';
+import { QueryClient } from '@tanstack/react-query';
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
+import { TanStackRouterDevtools } from '@tanstack/router-devtools';
+
+export interface MyRouterContext {
+    auth: AuthContext;
+    queryClient: QueryClient;
+}
+
+export const Route = createRootRouteWithContext<MyRouterContext>()({
+    component: RootComponent,
+    search: {
+        // middlewares: [retainSearchParams(['page', 'perPage', 'sort'] as any)],
+    },
+});
+
+function RootComponent() {
+    return (
+        <>
+            <Outlet />
+        </>
+    );
+}

package/src/app/routes/_authenticated/_administrators/administrators.graphql.ts

@@ -1,79 +1,79 @@
-import { graphql } from '@/graphql/graphql.js';
-
-export const administratorItemFragment = graphql(`
-    fragment AdministratorItem on Administrator {
-        id
-        createdAt
-        updatedAt
-        firstName
-        lastName
-        emailAddress
-        user {
-            id
-            identifier
-            lastLogin
-            roles {
-                id
-                createdAt
-                updatedAt
-                code
-                description
-                channels {
-                    id
-                    code
-                }
-            }
-        }
-    }
-`);
-
-export const administratorListDocument = graphql(
-    `
-        query AdministratorList {
-            administrators {
-                items {
-                    ...AdministratorItem
-                }
-                totalItems
-            }
-        }
-    `,
-    [administratorItemFragment],
-);
-
-export const administratorDetailDocument = graphql(
-    `
-        query AdministratorDetail($id: ID!) {
-            administrator(id: $id) {
-                ...AdministratorItem
-                customFields
-            }
-        }
-    `,
-    [administratorItemFragment],
-);
-
-export const createAdministratorDocument = graphql(`
-    mutation CreateAdministrator($input: CreateAdministratorInput!) {
-        createAdministrator(input: $input) {
-            id
-        }
-    }
-`);
-
-export const updateAdministratorDocument = graphql(`
-    mutation UpdateAdministrator($input: UpdateAdministratorInput!) {
-        updateAdministrator(input: $input) {
-            id
-        }
-    }
-`);
-
-export const deleteAdministratorDocument = graphql(`
-    mutation DeleteAdministrator($id: ID!) {
-        deleteAdministrator(id: $id) {
-            result
-            message
-        }
-    }
-`);
+import { graphql } from '@/graphql/graphql.js';
+
+export const administratorItemFragment = graphql(`
+    fragment AdministratorItem on Administrator {
+        id
+        createdAt
+        updatedAt
+        firstName
+        lastName
+        emailAddress
+        user {
+            id
+            identifier
+            lastLogin
+            roles {
+                id
+                createdAt
+                updatedAt
+                code
+                description
+                channels {
+                    id
+                    code
+                }
+            }
+        }
+    }
+`);
+
+export const administratorListDocument = graphql(
+    `
+        query AdministratorList {
+            administrators {
+                items {
+                    ...AdministratorItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [administratorItemFragment],
+);
+
+export const administratorDetailDocument = graphql(
+    `
+        query AdministratorDetail($id: ID!) {
+            administrator(id: $id) {
+                ...AdministratorItem
+                customFields
+            }
+        }
+    `,
+    [administratorItemFragment],
+);
+
+export const createAdministratorDocument = graphql(`
+    mutation CreateAdministrator($input: CreateAdministratorInput!) {
+        createAdministrator(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateAdministratorDocument = graphql(`
+    mutation UpdateAdministrator($input: UpdateAdministratorInput!) {
+        updateAdministrator(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteAdministratorDocument = graphql(`
+    mutation DeleteAdministrator($id: ID!) {
+        deleteAdministrator(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_administrators/administrators.tsx

@@ -1,86 +1,86 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { RoleCodeLabel } from '@/components/shared/role-code-label.js';
-import { Badge } from '@/components/ui/badge.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 { administratorListDocument, deleteAdministratorDocument } from './administrators.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_administrators/administrators')({
-    component: AdministratorListPage,
-    loader: () => ({ breadcrumb: () => <Trans>Administrators</Trans> }),
-});
-
-function AdministratorListPage() {
-    return (
-        <ListPage
-            pageId="administrator-list"
-            title="Administrators"
-            listQuery={administratorListDocument}
-            deleteMutation={deleteAdministratorDocument}
-            route={Route}
-            onSearchTermChange={searchTerm => {
-                return {
-                    firstName: { contains: searchTerm },
-                    lastName: { contains: searchTerm },
-                    emailAddress: { contains: searchTerm },
-                };
-            }}
-            additionalColumns={{
-                name: {
-                    header: 'Name',
-                    cell: ({ row }) => (
-                        <DetailPageButton
-                            id={row.original.id}
-                            label={`${row.original.firstName} ${row.original.lastName}`}
-                        />
-                    ),
-                },
-                roles: {
-                    header: 'Roles',
-                    cell: ({ row }) => {
-                        return (
-                            <div className="flex flex-wrap gap-2">
-                                {row.original.user.roles.map(role => {
-                                    return (
-                                        <Badge variant="secondary" key={role.id}>
-                                            <RoleCodeLabel code={role.code} />
-                                        </Badge>
-                                    );
-                                })}
-                            </div>
-                        );
-                    },
-                },
-            }}
-            customizeColumns={{
-                emailAddress: {
-                    id: 'Identifier',
-                    header: () => <Trans>Identifier</Trans>,
-                    cell: ({ row }) => {
-                        return <div>{row.original.emailAddress}</div>;
-                    },
-                },
-            }}
-            defaultVisibility={{
-                emailAddress: true,
-            }}
-            defaultColumnOrder={['name', 'emailAddress', 'roles']}
-        >
-            <PageActionBarRight>
-                <PermissionGuard requires={['CreateAdministrator']}>
-                    <Button asChild>
-                        <Link to="./new">
-                            <PlusIcon />
-                            New Administrator
-                        </Link>
-                    </Button>
-                </PermissionGuard>
-            </PageActionBarRight>
-        </ListPage>
-    );
-}
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { RoleCodeLabel } from '@/components/shared/role-code-label.js';
+import { Badge } from '@/components/ui/badge.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 { administratorListDocument, deleteAdministratorDocument } from './administrators.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_administrators/administrators')({
+    component: AdministratorListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Administrators</Trans> }),
+});
+
+function AdministratorListPage() {
+    return (
+        <ListPage
+            pageId="administrator-list"
+            title="Administrators"
+            listQuery={administratorListDocument}
+            deleteMutation={deleteAdministratorDocument}
+            route={Route}
+            onSearchTermChange={searchTerm => {
+                return {
+                    firstName: { contains: searchTerm },
+                    lastName: { contains: searchTerm },
+                    emailAddress: { contains: searchTerm },
+                };
+            }}
+            additionalColumns={{
+                name: {
+                    header: 'Name',
+                    cell: ({ row }) => (
+                        <DetailPageButton
+                            id={row.original.id}
+                            label={`${row.original.firstName} ${row.original.lastName}`}
+                        />
+                    ),
+                },
+                roles: {
+                    header: 'Roles',
+                    cell: ({ row }) => {
+                        return (
+                            <div className="flex flex-wrap gap-2">
+                                {row.original.user.roles.map(role => {
+                                    return (
+                                        <Badge variant="secondary" key={role.id}>
+                                            <RoleCodeLabel code={role.code} />
+                                        </Badge>
+                                    );
+                                })}
+                            </div>
+                        );
+                    },
+                },
+            }}
+            customizeColumns={{
+                emailAddress: {
+                    id: 'Identifier',
+                    header: () => <Trans>Identifier</Trans>,
+                    cell: ({ row }) => {
+                        return <div>{row.original.emailAddress}</div>;
+                    },
+                },
+            }}
+            defaultVisibility={{
+                emailAddress: true,
+            }}
+            defaultColumnOrder={['name', 'emailAddress', 'roles']}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateAdministrator']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon />
+                            New Administrator
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}