@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/routes/_authenticated/_tax-categories/tax-categories_.$id.tsx

@@ -1,115 +1,115 @@
-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 { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { 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 {
-    createTaxCategoryDocument,
-    taxCategoryDetailQuery,
-    updateTaxCategoryDocument,
-} from './tax-categories.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories_/$id')({
-    component: TaxCategoryDetailPage,
-    loader: detailPageRouteLoader({
-        queryDocument: taxCategoryDetailQuery,
-        breadcrumb(isNew, entity) {
-            return [
-                { path: '/tax-categories', label: 'Tax categories' },
-                isNew ? <Trans>New tax category</Trans> : entity?.name,
-            ];
-        },
-    }),
-    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
-});
-
-function TaxCategoryDetailPage() {
-    const params = Route.useParams();
-    const navigate = useNavigate();
-    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
-
-    const { form, submitHandler, entity, isPending } = useDetailPage({
-        queryDocument: taxCategoryDetailQuery,
-        createDocument: createTaxCategoryDocument,
-        updateDocument: updateTaxCategoryDocument,
-        setValuesForUpdate: entity => {
-            return {
-                id: entity.id,
-                name: entity.name,
-                customFields: entity.customFields,
-            };
-        },
-        params: { id: params.id },
-        onSuccess: async data => {
-            toast.success(i18n.t('Successfully updated tax category'));
-            form.reset(form.getValues());
-            if (creatingNewEntity) {
-                await navigate({ to: `../$id`, params: { id: data.id } });
-            }
-        },
-        onError: err => {
-            toast.error(i18n.t('Failed to update tax category'), {
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
-        },
-    });
-
-    return (
-        <Page pageId="tax-category-detail" form={form} submitHandler={submitHandler}>
-            <PageTitle>
-                {creatingNewEntity ? <Trans>New tax category</Trans> : (entity?.name ?? '')}
-            </PageTitle>
-            <PageActionBar>
-                <PageActionBarRight>
-                    <PermissionGuard requires={['UpdateTaxCategory']}>
-                        <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="name"
-                            label={<Trans>Name</Trans>}
-                            render={({ field }) => <Input {...field} />}
-                        />
-                        <FormFieldWrapper
-                            control={form.control}
-                            name="isDefault"
-                            label={<Trans>Is default tax category</Trans>}
-                            render={({ field }) => (
-                                <Switch checked={field.value} onCheckedChange={field.onChange} />
-                            )}
-                        />
-                    </DetailFormGrid>
-                </PageBlock>
-                <CustomFieldsPageBlock column="main" entityType="TaxCategory" control={form.control} />
-            </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 { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Switch } from '@/components/ui/switch.js';
+import { 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 {
+    createTaxCategoryDocument,
+    taxCategoryDetailQuery,
+    updateTaxCategoryDocument,
+} from './tax-categories.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories_/$id')({
+    component: TaxCategoryDetailPage,
+    loader: detailPageRouteLoader({
+        queryDocument: taxCategoryDetailQuery,
+        breadcrumb(isNew, entity) {
+            return [
+                { path: '/tax-categories', label: 'Tax categories' },
+                isNew ? <Trans>New tax category</Trans> : entity?.name,
+            ];
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function TaxCategoryDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending } = useDetailPage({
+        queryDocument: taxCategoryDetailQuery,
+        createDocument: createTaxCategoryDocument,
+        updateDocument: updateTaxCategoryDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                name: entity.name,
+                customFields: entity.customFields,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast.success(i18n.t('Successfully updated tax category'));
+            form.reset(form.getValues());
+            if (creatingNewEntity) {
+                await navigate({ to: `../$id`, params: { id: data.id } });
+            }
+        },
+        onError: err => {
+            toast.error(i18n.t('Failed to update tax category'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId="tax-category-detail" form={form} submitHandler={submitHandler}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New tax category</Trans> : (entity?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateTaxCategory']}>
+                        <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="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="isDefault"
+                            label={<Trans>Is default tax category</Trans>}
+                            render={({ field }) => (
+                                <Switch checked={field.value} onCheckedChange={field.onChange} />
+                            )}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="TaxCategory" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_tax-rates/tax-rates.graphql.ts

@@ -1,75 +1,75 @@
-import { graphql } from '@/graphql/graphql.js';
-
-export const taxRateItemFragment = graphql(`
-    fragment TaxRateItem on TaxRate {
-        id
-        createdAt
-        updatedAt
-        name
-        enabled
-        value
-        category {
-            id
-            name
-        }
-        zone {
-            id
-            name
-        }
-        customerGroup {
-            id
-            name
-        }
-    }
-`);
-
-export const taxRateListQuery = graphql(
-    `
-        query TaxRateList($options: TaxRateListOptions) {
-            taxRates(options: $options) {
-                items {
-                    ...TaxRateItem
-                }
-                totalItems
-            }
-        }
-    `,
-    [taxRateItemFragment],
-);
-
-export const taxRateDetailQuery = graphql(
-    `
-        query TaxRateDetail($id: ID!) {
-            taxRate(id: $id) {
-                ...TaxRateItem
-                customFields
-            }
-        }
-    `,
-    [taxRateItemFragment],
-);
-
-export const createTaxRateDocument = graphql(`
-    mutation CreateTaxRate($input: CreateTaxRateInput!) {
-        createTaxRate(input: $input) {
-            id
-        }
-    }
-`);
-
-export const updateTaxRateDocument = graphql(`
-    mutation UpdateTaxRate($input: UpdateTaxRateInput!) {
-        updateTaxRate(input: $input) {
-            id
-        }
-    }
-`);
-
-export const deleteTaxRateDocument = graphql(`
-    mutation DeleteTaxRate($id: ID!) {
-        deleteTaxRate(id: $id) {
-            result
-            message
-        }
-    }
-`);
+import { graphql } from '@/graphql/graphql.js';
+
+export const taxRateItemFragment = graphql(`
+    fragment TaxRateItem on TaxRate {
+        id
+        createdAt
+        updatedAt
+        name
+        enabled
+        value
+        category {
+            id
+            name
+        }
+        zone {
+            id
+            name
+        }
+        customerGroup {
+            id
+            name
+        }
+    }
+`);
+
+export const taxRateListQuery = graphql(
+    `
+        query TaxRateList($options: TaxRateListOptions) {
+            taxRates(options: $options) {
+                items {
+                    ...TaxRateItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [taxRateItemFragment],
+);
+
+export const taxRateDetailQuery = graphql(
+    `
+        query TaxRateDetail($id: ID!) {
+            taxRate(id: $id) {
+                ...TaxRateItem
+                customFields
+            }
+        }
+    `,
+    [taxRateItemFragment],
+);
+
+export const createTaxRateDocument = graphql(`
+    mutation CreateTaxRate($input: CreateTaxRateInput!) {
+        createTaxRate(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateTaxRateDocument = graphql(`
+    mutation UpdateTaxRate($input: UpdateTaxRateInput!) {
+        updateTaxRate(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteTaxRateDocument = graphql(`
+    mutation DeleteTaxRate($id: ID!) {
+        deleteTaxRate(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_tax-rates/tax-rates.tsx

@@ -1,108 +1,108 @@
-import { BooleanDisplayBadge } from '@/components/data-display/boolean.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 { api } from '@/graphql/api.js';
-import { Trans } from '@/lib/trans.js';
-import { createFileRoute, Link } from '@tanstack/react-router';
-import { PlusIcon } from 'lucide-react';
-import { taxCategoryListQuery } from '../_tax-categories/tax-categories.graphql.js';
-import { zoneListQuery } from '../_zones/zones.graphql.js';
-import { deleteTaxRateDocument, taxRateListQuery } from './tax-rates.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
-    component: TaxRateListPage,
-    loader: () => ({ breadcrumb: () => <Trans>Tax Rates</Trans> }),
-});
-
-function TaxRateListPage() {
-    return (
-        <ListPage
-            pageId="tax-rate-list"
-            listQuery={taxRateListQuery}
-            deleteMutation={deleteTaxRateDocument}
-            route={Route}
-            title="Tax Rates"
-            defaultVisibility={{
-                name: true,
-                enabled: true,
-                category: true,
-                zone: true,
-                value: true,
-            }}
-            onSearchTermChange={searchTerm => {
-                if (searchTerm === '') {
-                    return {};
-                }
-
-                return {
-                    name: { contains: searchTerm },
-                };
-            }}
-            facetedFilters={{
-                enabled: {
-                    title: 'Enabled',
-                    options: [
-                        { label: 'Enabled', value: true },
-                        { label: 'Disabled', value: false },
-                    ],
-                },
-                category: {
-                    title: 'Category',
-                    optionsFn: async () => {
-                        const { taxCategories } = await api.query(taxCategoryListQuery);
-                        return taxCategories.items.map(category => ({
-                            label: category.name,
-                            value: category.id,
-                        }));
-                    },
-                },
-                zone: {
-                    title: 'Zone',
-                    optionsFn: async () => {
-                        const { zones } = await api.query(zoneListQuery);
-                        return zones.items.map(zone => ({
-                            label: zone.name,
-                            value: zone.id,
-                        }));
-                    },
-                },
-            }}
-            customizeColumns={{
-                name: {
-                    header: 'Name',
-                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
-                },
-                enabled: {
-                    header: 'Enabled',
-                    cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
-                },
-                category: {
-                    header: 'Category',
-                    cell: ({ row }) => row.original.category?.name,
-                },
-                zone: {
-                    header: 'Zone',
-                    cell: ({ row }) => row.original.zone?.name,
-                },
-                value: {
-                    header: 'Value',
-                    cell: ({ row }) => `${row.original.value}%`,
-                },
-            }}
-        >
-            <PageActionBarRight>
-                <PermissionGuard requires={['CreateTaxRate']}>
-                    <Button asChild>
-                        <Link to="./new">
-                            <PlusIcon />
-                            <Trans>New Tax Rate</Trans>
-                        </Link>
-                    </Button>
-                </PermissionGuard>
-            </PageActionBarRight>
-        </ListPage>
-    );
-}
+import { BooleanDisplayBadge } from '@/components/data-display/boolean.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 { api } from '@/graphql/api.js';
+import { Trans } from '@/lib/trans.js';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { PlusIcon } from 'lucide-react';
+import { taxCategoryListQuery } from '../_tax-categories/tax-categories.graphql.js';
+import { zoneListQuery } from '../_zones/zones.graphql.js';
+import { deleteTaxRateDocument, taxRateListQuery } from './tax-rates.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
+    component: TaxRateListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Tax Rates</Trans> }),
+});
+
+function TaxRateListPage() {
+    return (
+        <ListPage
+            pageId="tax-rate-list"
+            listQuery={taxRateListQuery}
+            deleteMutation={deleteTaxRateDocument}
+            route={Route}
+            title="Tax Rates"
+            defaultVisibility={{
+                name: true,
+                enabled: true,
+                category: true,
+                zone: true,
+                value: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                if (searchTerm === '') {
+                    return {};
+                }
+
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            facetedFilters={{
+                enabled: {
+                    title: 'Enabled',
+                    options: [
+                        { label: 'Enabled', value: true },
+                        { label: 'Disabled', value: false },
+                    ],
+                },
+                category: {
+                    title: 'Category',
+                    optionsFn: async () => {
+                        const { taxCategories } = await api.query(taxCategoryListQuery);
+                        return taxCategories.items.map(category => ({
+                            label: category.name,
+                            value: category.id,
+                        }));
+                    },
+                },
+                zone: {
+                    title: 'Zone',
+                    optionsFn: async () => {
+                        const { zones } = await api.query(zoneListQuery);
+                        return zones.items.map(zone => ({
+                            label: zone.name,
+                            value: zone.id,
+                        }));
+                    },
+                },
+            }}
+            customizeColumns={{
+                name: {
+                    header: 'Name',
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                enabled: {
+                    header: 'Enabled',
+                    cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
+                },
+                category: {
+                    header: 'Category',
+                    cell: ({ row }) => row.original.category?.name,
+                },
+                zone: {
+                    header: 'Zone',
+                    cell: ({ row }) => row.original.zone?.name,
+                },
+                value: {
+                    header: 'Value',
+                    cell: ({ row }) => `${row.original.value}%`,
+                },
+            }}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateTaxRate']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon />
+                            <Trans>New Tax Rate</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}