@vendure/dashboard 3.2.0 → 3.2.1

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>
+    );
+}

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

@@ -1,93 +1,93 @@
-import { graphql } from '@/graphql/graphql.js';
-
-export const channelItemFragment = graphql(`
-    fragment ChannelItem on Channel {
-        id
-        createdAt
-        updatedAt
-        code
-        token
-        pricesIncludeTax
-        availableCurrencyCodes
-        availableLanguageCodes
-        defaultCurrencyCode
-        defaultLanguageCode
-        defaultShippingZone {
-            id
-            name
-        }
-        defaultTaxZone {
-            id
-            name
-        }
-        seller {
-            id
-            name
-        }
-    }
-`);
-
-export const channelListQuery = graphql(
-    `
-        query ChannelList($options: ChannelListOptions) {
-            channels(options: $options) {
-                items {
-                    ...ChannelItem
-                }
-                totalItems
-            }
-        }
-    `,
-    [channelItemFragment],
-);
-
-export const channelDetailDocument = graphql(
-    `
-        query ChannelDetail($id: ID!) {
-            channel(id: $id) {
-                ...ChannelItem
-                customFields
-            }
-        }
-    `,
-    [channelItemFragment],
-);
-
-export const createChannelDocument = graphql(`
-    mutation CreateChannel($input: CreateChannelInput!) {
-        createChannel(input: $input) {
-            __typename
-            ... on Channel {
-                id
-            }
-            ... on ErrorResult {
-                errorCode
-                message
-            }
-        }
-    }
-`);
-
-export const updateChannelDocument = graphql(`
-    mutation UpdateChannel($input: UpdateChannelInput!) {
-        updateChannel(input: $input) {
-            __typename
-            ... on Channel {
-                id
-            }
-            ... on ErrorResult {
-                errorCode
-                message
-            }
-        }
-    }
-`);
-
-export const deleteChannelDocument = graphql(`
-    mutation DeleteChannel($id: ID!) {
-        deleteChannel(id: $id) {
-            result
-            message
-        }
-    }
-`);
+import { graphql } from '@/graphql/graphql.js';
+
+export const channelItemFragment = graphql(`
+    fragment ChannelItem on Channel {
+        id
+        createdAt
+        updatedAt
+        code
+        token
+        pricesIncludeTax
+        availableCurrencyCodes
+        availableLanguageCodes
+        defaultCurrencyCode
+        defaultLanguageCode
+        defaultShippingZone {
+            id
+            name
+        }
+        defaultTaxZone {
+            id
+            name
+        }
+        seller {
+            id
+            name
+        }
+    }
+`);
+
+export const channelListQuery = graphql(
+    `
+        query ChannelList($options: ChannelListOptions) {
+            channels(options: $options) {
+                items {
+                    ...ChannelItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [channelItemFragment],
+);
+
+export const channelDetailDocument = graphql(
+    `
+        query ChannelDetail($id: ID!) {
+            channel(id: $id) {
+                ...ChannelItem
+                customFields
+            }
+        }
+    `,
+    [channelItemFragment],
+);
+
+export const createChannelDocument = graphql(`
+    mutation CreateChannel($input: CreateChannelInput!) {
+        createChannel(input: $input) {
+            __typename
+            ... on Channel {
+                id
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+export const updateChannelDocument = graphql(`
+    mutation UpdateChannel($input: UpdateChannelInput!) {
+        updateChannel(input: $input) {
+            __typename
+            ... on Channel {
+                id
+            }
+            ... on ErrorResult {
+                errorCode
+                message
+            }
+        }
+    }
+`);
+
+export const deleteChannelDocument = graphql(`
+    mutation DeleteChannel($id: ID!) {
+        deleteChannel(id: $id) {
+            result
+            message
+        }
+    }
+`);

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

@@ -1,60 +1,60 @@
-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 { createFileRoute, Link } from '@tanstack/react-router';
-import { PlusIcon } from 'lucide-react';
-import { channelListQuery, deleteChannelDocument } from './channels.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_channels/channels')({
-    component: ChannelListPage,
-    loader: () => ({ breadcrumb: () => <Trans>Channels</Trans> }),
-});
-
-function ChannelListPage() {
-    return (
-        <ListPage
-            pageId="channel-list"
-            title="Channels"
-            listQuery={channelListQuery}
-            deleteMutation={deleteChannelDocument}
-            route={Route}
-            defaultVisibility={{
-                code: true,
-                token: true,
-            }}
-            onSearchTermChange={searchTerm => {
-                return {
-                    code: { contains: searchTerm },
-                };
-            }}
-            customizeColumns={{
-                code: {
-                    header: 'Code',
-                    cell: ({ row }) => {
-                        return (
-                            <DetailPageButton
-                                id={row.original.id}
-                                label={<ChannelCodeLabel code={row.original.code} />}
-                            />
-                        );
-                    },
-                },
-            }}
-        >
-            <PageActionBarRight>
-                <PermissionGuard requires={['CreateChannel']}>
-                    <Button asChild>
-                        <Link to="./new">
-                            <PlusIcon className="mr-2 h-4 w-4" />
-                            New Channel
-                        </Link>
-                    </Button>
-                </PermissionGuard>
-            </PageActionBarRight>
-        </ListPage>
-    );
-}
+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 { createFileRoute, Link } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
+import { channelListQuery, deleteChannelDocument } from './channels.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_channels/channels')({
+    component: ChannelListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Channels</Trans> }),
+});
+
+function ChannelListPage() {
+    return (
+        <ListPage
+            pageId="channel-list"
+            title="Channels"
+            listQuery={channelListQuery}
+            deleteMutation={deleteChannelDocument}
+            route={Route}
+            defaultVisibility={{
+                code: true,
+                token: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                return {
+                    code: { contains: searchTerm },
+                };
+            }}
+            customizeColumns={{
+                code: {
+                    header: 'Code',
+                    cell: ({ row }) => {
+                        return (
+                            <DetailPageButton
+                                id={row.original.id}
+                                label={<ChannelCodeLabel code={row.original.code} />}
+                            />
+                        );
+                    },
+                },
+            }}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateChannel']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            New Channel
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}