@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/routes/_authenticated/_administrators/administrators_.$id.tsx

@@ -1,155 +1,155 @@
-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 { RoleSelector } from '@/components/shared/role-selector.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
-import {
-    CustomFieldsPageBlock,
-    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 {
-    administratorDetailDocument,
-    createAdministratorDocument,
-    updateAdministratorDocument,
-} from './administrators.graphql.js';
-import { RolePermissionsDisplay } from './components/role-permissions-display.js';
-
-export const Route = createFileRoute('/_authenticated/_administrators/administrators_/$id')({
-    component: AdministratorDetailPage,
-    loader: detailPageRouteLoader({
-        queryDocument: administratorDetailDocument,
-        breadcrumb: (isNew, entity) => {
-            const name = `${entity?.firstName} ${entity?.lastName}`;
-            return [
-                { path: '/administrators', label: 'Administrators' },
-                isNew ? <Trans>New administrator</Trans> : name,
-            ];
-        },
-    }),
-    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
-});
-
-function AdministratorDetailPage() {
-    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: administratorDetailDocument,
-        createDocument: createAdministratorDocument,
-        updateDocument: updateAdministratorDocument,
-        setValuesForUpdate: entity => {
-            return {
-                id: entity.id,
-                firstName: entity.firstName,
-                lastName: entity.lastName,
-                emailAddress: entity.emailAddress,
-                password: '',
-                customFields: entity.customFields,
-                roleIds: entity.user.roles.map(role => role.id),
-            };
-        },
-        transformUpdateInput: input => {
-            return {
-                ...input,
-                password: input.password || undefined,
-            };
-        },
-        params: { id: params.id },
-        onSuccess: async data => {
-            toast(i18n.t('Successfully updated administrator'), {
-                position: 'top-right',
-            });
-            resetForm();
-            if (creatingNewEntity) {
-                await navigate({ to: `../$id`, params: { id: data.id } });
-            }
-        },
-        onError: err => {
-            toast(i18n.t('Failed to update administrator'), {
-                position: 'top-right',
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
-        },
-    });
-
-    const name = `${entity?.firstName} ${entity?.lastName}`;
-    const roleIds = form.watch('roleIds');
-
-    return (
-        <Page pageId="administrator-detail" form={form} submitHandler={submitHandler}>
-            <PageTitle>{creatingNewEntity ? <Trans>New administrator</Trans> : name}</PageTitle>
-
-            <PageActionBar>
-                <PageActionBarRight>
-                    <PermissionGuard requires={['UpdateAdministrator']}>
-                        <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">
-                    <div className="md:grid md:grid-cols-2 gap-4">
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="firstName"
-                            label={<Trans>First name</Trans>}
-                            render={({ field }) => <Input placeholder="" {...field} />}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="lastName"
-                            label={<Trans>Last name</Trans>}
-                            render={({ field }) => <Input placeholder="" {...field} />}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="emailAddress"
-                            label={<Trans>Email Address or identifier</Trans>}
-                            render={({ field }) => <Input placeholder="" {...field} />}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="password"
-                            label={<Trans>Password</Trans>}
-                            render={({ field }) => <Input placeholder="" type="password" {...field} />}
-                        />
-                    </div>
-                </PageBlock>
-                <CustomFieldsPageBlock column="main" entityType="Administrator" control={form.control} />
-                <PageBlock column="main" blockId="roles" title={<Trans>Roles</Trans>}>
-                    <FormFieldWrapper
-                        control={form.control}
-                        name="roleIds"
-                        render={({ field }) => (
-                            <RoleSelector
-                                value={field.value ?? []}
-                                onChange={field.onChange}
-                                multiple={true}
-                            />
-                        )}
-                    />
-                    <RolePermissionsDisplay value={roleIds ?? []} />
-                </PageBlock>
-            </PageLayout>
-        </Page>
-    );
-}
+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 { RoleSelector } from '@/components/shared/role-selector.js';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
+import {
+    CustomFieldsPageBlock,
+    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 {
+    administratorDetailDocument,
+    createAdministratorDocument,
+    updateAdministratorDocument,
+} from './administrators.graphql.js';
+import { RolePermissionsDisplay } from './components/role-permissions-display.js';
+
+export const Route = createFileRoute('/_authenticated/_administrators/administrators_/$id')({
+    component: AdministratorDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: administratorDetailDocument,
+        breadcrumb: (isNew, entity) => {
+            const name = `${entity?.firstName} ${entity?.lastName}`;
+            return [
+                { path: '/administrators', label: 'Administrators' },
+                isNew ? <Trans>New administrator</Trans> : name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function AdministratorDetailPage() {
+    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: administratorDetailDocument,
+        createDocument: createAdministratorDocument,
+        updateDocument: updateAdministratorDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                firstName: entity.firstName,
+                lastName: entity.lastName,
+                emailAddress: entity.emailAddress,
+                password: '',
+                customFields: entity.customFields,
+                roleIds: entity.user.roles.map(role => role.id),
+            };
+        },
+        transformUpdateInput: input => {
+            return {
+                ...input,
+                password: input.password || undefined,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(i18n.t('Successfully updated administrator'), {
+                position: 'top-right',
+            });
+            resetForm();
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update administrator'), {
+                position: 'top-right',
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    const name = `${entity?.firstName} ${entity?.lastName}`;
+    const roleIds = form.watch('roleIds');
+
+    return (
+        <Page pageId="administrator-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>{creatingNewEntity ? <Trans>New administrator</Trans> : name}</PageTitle>
+
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateAdministrator']}>
+                        <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">
+                    <div className="md:grid md:grid-cols-2 gap-4">
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="firstName"
+                            label={<Trans>First name</Trans>}
+                            render={({ field }) => <Input placeholder="" {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="lastName"
+                            label={<Trans>Last name</Trans>}
+                            render={({ field }) => <Input placeholder="" {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="emailAddress"
+                            label={<Trans>Email Address or identifier</Trans>}
+                            render={({ field }) => <Input placeholder="" {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="password"
+                            label={<Trans>Password</Trans>}
+                            render={({ field }) => <Input placeholder="" type="password" {...field} />}
+                        />
+                    </div>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="Administrator" control={form.control} />
+                <PageBlock column="main" blockId="roles" title={<Trans>Roles</Trans>}>
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="roleIds"
+                        render={({ field }) => (
+                            <RoleSelector
+                                value={field.value ?? []}
+                                onChange={field.onChange}
+                                multiple={true}
+                            />
+                        )}
+                    />
+                    <RolePermissionsDisplay value={roleIds ?? []} />
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_administrators/components/role-permissions-display.tsx

@@ -1,133 +1,133 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useGroupedPermissions } from '@/hooks/use-grouped-permissions.js';
-import { useLingui } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-
-const rolesByIdDocument = graphql(`
-    query RolesById($options: RoleListOptions) {
-        roles(options: $options) {
-            items {
-                id
-                code
-                permissions
-                channels {
-                    id
-                    code
-                }
-            }
-        }
-    }
-`);
-
-interface RolePermissionsDisplayProps {
-    value: string[];
-}
-
-export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayProps) {
-    const { i18n } = useLingui();
-    const groupedPermissions = useGroupedPermissions();
-
-    const { data } = useQuery({
-        queryKey: ['rolesById', value],
-        queryFn: () =>
-            api.query(rolesByIdDocument, {
-                options: {
-                    filter: {
-                        id: { in: value },
-                    },
-                },
-            }),
-    });
-
-    const roles = data?.roles.items ?? [];
-
-    const allChannels = roles.flatMap(role => role.channels).filter((channel, index, self) =>
-        index === self.findIndex((t) => t.code === channel.code),
-    );
-
-    const isPermissionEnabled = (permissionName: string, channelCode: string) => {
-        // Check if any role has this permission for this channel
-        return roles.some(role => {
-            const hasPermission = role.permissions.includes(permissionName as any);
-            const isChannelSpecificRole = role.channels.length > 0;
-
-            if (!hasPermission) return false;
-
-            if (!isChannelSpecificRole) {
-                // If role is not channel-specific, permission applies to all channels
-                return true;
-            }
-
-            // Check if the role applies to this specific channel
-            return role.channels.some(channel => channel.code === channelCode);
-        });
-    };
-
-    if (!allChannels.length) return null;
-
-    return (
-        <Tabs defaultValue={allChannels[0].code} className="w-full mt-4">
-            <TabsList>
-                {allChannels.map(channel => (
-                    <TabsTrigger key={channel.code} value={channel.code}>
-                        <ChannelCodeLabel code={channel.code} />
-                    </TabsTrigger>
-                ))}
-            </TabsList>
-            {allChannels.map(channel => (
-                <TabsContent key={channel.code} value={channel.code} className="mt-0">
-                    <div className="rounded-md border">
-                        <table className="w-full">
-                            <tbody>
-                                {groupedPermissions.map((group, idx) => (
-                                    <tr
-                                        key={group.label}
-                                        className={idx !== groupedPermissions.length - 1 ? 'border-b' : undefined}
-                                    >
-                                        <td className="p-4">
-                                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                                                {group.permissions.map(permission => (
-                                                    <div
-                                                        key={permission.name}
-                                                        className="flex items-center space-x-2"
-                                                    >
-                                                        <Checkbox
-                                                            checked={isPermissionEnabled(
-                                                                permission.name,
-                                                                channel.code,
-                                                            )}
-                                                            disabled={true}
-                                                        />
-                                                        <TooltipProvider>
-                                                            <Tooltip>
-                                                                <TooltipTrigger asChild>
-                                                                    <label
-                                                                        className="text-sm cursor-default"
-                                                                    >
-                                                                        {i18n.t(permission.name)}
-                                                                    </label>
-                                                                </TooltipTrigger>
-                                                                <TooltipContent>
-                                                                    <p>{i18n.t(permission.description)}</p>
-                                                                </TooltipContent>
-                                                            </Tooltip>
-                                                        </TooltipProvider>
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </div>
-                </TabsContent>
-            ))}
-        </Tabs>
-    );
-}
+import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useGroupedPermissions } from '@/hooks/use-grouped-permissions.js';
+import { useLingui } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+
+const rolesByIdDocument = graphql(`
+    query RolesById($options: RoleListOptions) {
+        roles(options: $options) {
+            items {
+                id
+                code
+                permissions
+                channels {
+                    id
+                    code
+                }
+            }
+        }
+    }
+`);
+
+interface RolePermissionsDisplayProps {
+    value: string[];
+}
+
+export function RolePermissionsDisplay({ value = [] }: RolePermissionsDisplayProps) {
+    const { i18n } = useLingui();
+    const groupedPermissions = useGroupedPermissions();
+
+    const { data } = useQuery({
+        queryKey: ['rolesById', value],
+        queryFn: () =>
+            api.query(rolesByIdDocument, {
+                options: {
+                    filter: {
+                        id: { in: value },
+                    },
+                },
+            }),
+    });
+
+    const roles = data?.roles.items ?? [];
+
+    const allChannels = roles.flatMap(role => role.channels).filter((channel, index, self) =>
+        index === self.findIndex((t) => t.code === channel.code),
+    );
+
+    const isPermissionEnabled = (permissionName: string, channelCode: string) => {
+        // Check if any role has this permission for this channel
+        return roles.some(role => {
+            const hasPermission = role.permissions.includes(permissionName as any);
+            const isChannelSpecificRole = role.channels.length > 0;
+
+            if (!hasPermission) return false;
+
+            if (!isChannelSpecificRole) {
+                // If role is not channel-specific, permission applies to all channels
+                return true;
+            }
+
+            // Check if the role applies to this specific channel
+            return role.channels.some(channel => channel.code === channelCode);
+        });
+    };
+
+    if (!allChannels.length) return null;
+
+    return (
+        <Tabs defaultValue={allChannels[0].code} className="w-full mt-4">
+            <TabsList>
+                {allChannels.map(channel => (
+                    <TabsTrigger key={channel.code} value={channel.code}>
+                        <ChannelCodeLabel code={channel.code} />
+                    </TabsTrigger>
+                ))}
+            </TabsList>
+            {allChannels.map(channel => (
+                <TabsContent key={channel.code} value={channel.code} className="mt-0">
+                    <div className="rounded-md border">
+                        <table className="w-full">
+                            <tbody>
+                                {groupedPermissions.map((group, idx) => (
+                                    <tr
+                                        key={group.label}
+                                        className={idx !== groupedPermissions.length - 1 ? 'border-b' : undefined}
+                                    >
+                                        <td className="p-4">
+                                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                                                {group.permissions.map(permission => (
+                                                    <div
+                                                        key={permission.name}
+                                                        className="flex items-center space-x-2"
+                                                    >
+                                                        <Checkbox
+                                                            checked={isPermissionEnabled(
+                                                                permission.name,
+                                                                channel.code,
+                                                            )}
+                                                            disabled={true}
+                                                        />
+                                                        <TooltipProvider>
+                                                            <Tooltip>
+                                                                <TooltipTrigger asChild>
+                                                                    <label
+                                                                        className="text-sm cursor-default"
+                                                                    >
+                                                                        {i18n.t(permission.name)}
+                                                                    </label>
+                                                                </TooltipTrigger>
+                                                                <TooltipContent>
+                                                                    <p>{i18n.t(permission.description)}</p>
+                                                                </TooltipContent>
+                                                            </Tooltip>
+                                                        </TooltipProvider>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </TabsContent>
+            ))}
+        </Tabs>
+    );
+}

package/src/app/routes/_authenticated/_assets/assets.tsx

@@ -1,19 +1,19 @@
-import { AssetGallery } from '@/components/shared/asset-gallery.js';
-import { Page, PageTitle, PageActionBar } from '@/framework/layout-engine/page-layout.js';
-import { Trans } from '@/lib/trans.js';
-import { createFileRoute } from '@tanstack/react-router';
-
-export const Route = createFileRoute('/_authenticated/_assets/assets')({
-    component: RouteComponent,
-});
-
-function RouteComponent() {
-    return (
-        <Page pageId="asset-list">
-            <PageTitle>
-                <Trans>Assets</Trans>
-            </PageTitle>
-            <AssetGallery selectable={false} />
-        </Page>
-    );
-}
+import { AssetGallery } from '@/components/shared/asset-gallery.js';
+import { Page, PageTitle, PageActionBar } from '@/framework/layout-engine/page-layout.js';
+import { Trans } from '@/lib/trans.js';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_authenticated/_assets/assets')({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return (
+        <Page pageId="asset-list">
+            <PageTitle>
+                <Trans>Assets</Trans>
+            </PageTitle>
+            <AssetGallery selectable={false} />
+        </Page>
+    );
+}