@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/routes/_authenticated/_system/job-queue.tsx

@@ -1,161 +1,161 @@
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
-import { createFileRoute } from '@tanstack/react-router';
-import { jobListDocument, jobQueueListDocument } from './job-queue.graphql.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import { PayloadDialog } from './components/payload-dialog.js';
-import { differenceInMilliseconds, formatDuration, formatRelative } from 'date-fns';
-import { Ban, CircleXIcon, ClockIcon, LoaderIcon, RotateCcw } from 'lucide-react';
-import { CheckCircle2Icon } from 'lucide-react';
-import { api } from '@/graphql/api.js';
-
-export const Route = createFileRoute('/_authenticated/_system/job-queue')({
-    component: JobQueuePage,
-    loader: () => ({ breadcrumb: () => <Trans>Job Queue</Trans> }),
-});
-
-const STATES = [
-    {
-        label: 'Pending',
-        value: 'PENDING',
-        icon: ClockIcon,
-    },
-    {
-        label: 'Completed',
-        value: 'COMPLETED',
-        icon: CheckCircle2Icon,
-    },
-    {
-        label: 'Running',
-        value: 'RUNNING',
-        icon: LoaderIcon,
-    },
-    {
-        label: 'Failed',
-        value: 'FAILED',
-        icon: CircleXIcon,
-    },
-    {
-        label: 'Retrying',
-        value: 'RETRYING',
-        icon: RotateCcw,
-    },
-    {
-        label: 'Cancelled',
-        value: 'CANCELLED',
-        icon: Ban,
-    },
-];
-
-function JobQueuePage() {
-    return (
-        <ListPage
-            pageId="job-queue-list"
-            title="Job Queue"
-            listQuery={jobListDocument}
-            route={Route}
-            customizeColumns={{
-                createdAt: {
-                    header: 'Created At',
-                    cell: ({ row }) => formatRelative(row.original.createdAt, new Date()),
-                },
-                data: {
-                    header: 'Data',
-                    cell: ({ row }) => (
-                        <PayloadDialog
-                            payload={row.original.data}
-                            title={<Trans>View job data</Trans>}
-                            description={<Trans>The data that has been passed to the job</Trans>}
-                            trigger={
-                                <Button size="sm" variant="secondary">
-                                    View data
-                                </Button>
-                            }
-                        />
-                    ),
-                },
-                queueName: {
-                    header: 'Queue',
-                    cell: ({ row }) => <span className="font-mono">{row.original.queueName}</span>,
-                },
-                result: {
-                    header: 'Result',
-                    cell: ({ row }) => {
-                        return row.original.result ? (
-                            <PayloadDialog
-                                payload={row.original.result}
-                                title={<Trans>View job result</Trans>}
-                                description={<Trans>The result of the job</Trans>}
-                                trigger={
-                                    <Button size="sm" variant="secondary">
-                                        View result
-                                    </Button>
-                                }
-                            />
-                        ) : (
-                            <div className="text-muted-foreground">
-                                <Trans>No result yet</Trans>
-                            </div>
-                        );
-                    },
-                },
-                state: {
-                    header: 'State',
-                    cell: ({ row }) => {
-                        const state = STATES.find(s => s.value === row.original.state);
-
-                        return (
-                            <Badge
-                                variant={
-                                    row.original.state === 'PENDING'
-                                        ? 'secondary'
-                                        : row.original.state === 'COMPLETED'
-                                          ? 'success'
-                                          : row.original.state === 'FAILED'
-                                            ? 'destructive'
-                                            : 'outline'
-                                }
-                            >
-                                {state && <state.icon />}
-                                {row.original.state}
-                            </Badge>
-                        );
-                    },
-                },
-                duration: {
-                    header: 'Duration',
-                    cell: ({ row }) => {
-                        return row.original.duration ? `${row.original.duration}ms` : null;
-                    },
-                },
-            }}
-            defaultVisibility={{
-                isSettled: false,
-                settledAt: false,
-                progress: false,
-                retries: false,
-                attempts: false,
-                error: false,
-                startedAt: false,
-            }}
-            facetedFilters={{
-                queueName: {
-                    title: 'Queue',
-                    optionsFn: async () => {
-                        return api.query(jobQueueListDocument).then(r => {
-                            return r.jobQueues.map(queue => ({
-                                label: queue.name,
-                                value: queue.name,
-                            }));
-                        });
-                    },
-                },
-                state: {
-                    title: 'State',
-                    options: STATES,
-                },
-            }}
-        ></ListPage>
-    );
-}
+import { ListPage } from '@/framework/page/list-page.js';
+import { Trans } from '@/lib/trans.js';
+import { createFileRoute } from '@tanstack/react-router';
+import { jobListDocument, jobQueueListDocument } from './job-queue.graphql.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import { PayloadDialog } from './components/payload-dialog.js';
+import { differenceInMilliseconds, formatDuration, formatRelative } from 'date-fns';
+import { Ban, CircleXIcon, ClockIcon, LoaderIcon, RotateCcw } from 'lucide-react';
+import { CheckCircle2Icon } from 'lucide-react';
+import { api } from '@/graphql/api.js';
+
+export const Route = createFileRoute('/_authenticated/_system/job-queue')({
+    component: JobQueuePage,
+    loader: () => ({ breadcrumb: () => <Trans>Job Queue</Trans> }),
+});
+
+const STATES = [
+    {
+        label: 'Pending',
+        value: 'PENDING',
+        icon: ClockIcon,
+    },
+    {
+        label: 'Completed',
+        value: 'COMPLETED',
+        icon: CheckCircle2Icon,
+    },
+    {
+        label: 'Running',
+        value: 'RUNNING',
+        icon: LoaderIcon,
+    },
+    {
+        label: 'Failed',
+        value: 'FAILED',
+        icon: CircleXIcon,
+    },
+    {
+        label: 'Retrying',
+        value: 'RETRYING',
+        icon: RotateCcw,
+    },
+    {
+        label: 'Cancelled',
+        value: 'CANCELLED',
+        icon: Ban,
+    },
+];
+
+function JobQueuePage() {
+    return (
+        <ListPage
+            pageId="job-queue-list"
+            title="Job Queue"
+            listQuery={jobListDocument}
+            route={Route}
+            customizeColumns={{
+                createdAt: {
+                    header: 'Created At',
+                    cell: ({ row }) => formatRelative(row.original.createdAt, new Date()),
+                },
+                data: {
+                    header: 'Data',
+                    cell: ({ row }) => (
+                        <PayloadDialog
+                            payload={row.original.data}
+                            title={<Trans>View job data</Trans>}
+                            description={<Trans>The data that has been passed to the job</Trans>}
+                            trigger={
+                                <Button size="sm" variant="secondary">
+                                    View data
+                                </Button>
+                            }
+                        />
+                    ),
+                },
+                queueName: {
+                    header: 'Queue',
+                    cell: ({ row }) => <span className="font-mono">{row.original.queueName}</span>,
+                },
+                result: {
+                    header: 'Result',
+                    cell: ({ row }) => {
+                        return row.original.result ? (
+                            <PayloadDialog
+                                payload={row.original.result}
+                                title={<Trans>View job result</Trans>}
+                                description={<Trans>The result of the job</Trans>}
+                                trigger={
+                                    <Button size="sm" variant="secondary">
+                                        View result
+                                    </Button>
+                                }
+                            />
+                        ) : (
+                            <div className="text-muted-foreground">
+                                <Trans>No result yet</Trans>
+                            </div>
+                        );
+                    },
+                },
+                state: {
+                    header: 'State',
+                    cell: ({ row }) => {
+                        const state = STATES.find(s => s.value === row.original.state);
+
+                        return (
+                            <Badge
+                                variant={
+                                    row.original.state === 'PENDING'
+                                        ? 'secondary'
+                                        : row.original.state === 'COMPLETED'
+                                          ? 'success'
+                                          : row.original.state === 'FAILED'
+                                            ? 'destructive'
+                                            : 'outline'
+                                }
+                            >
+                                {state && <state.icon />}
+                                {row.original.state}
+                            </Badge>
+                        );
+                    },
+                },
+                duration: {
+                    header: 'Duration',
+                    cell: ({ row }) => {
+                        return row.original.duration ? `${row.original.duration}ms` : null;
+                    },
+                },
+            }}
+            defaultVisibility={{
+                isSettled: false,
+                settledAt: false,
+                progress: false,
+                retries: false,
+                attempts: false,
+                error: false,
+                startedAt: false,
+            }}
+            facetedFilters={{
+                queueName: {
+                    title: 'Queue',
+                    optionsFn: async () => {
+                        return api.query(jobQueueListDocument).then(r => {
+                            return r.jobQueues.map(queue => ({
+                                label: queue.name,
+                                value: queue.name,
+                            }));
+                        });
+                    },
+                },
+                state: {
+                    title: 'State',
+                    options: STATES,
+                },
+            }}
+        ></ListPage>
+    );
+}

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

@@ -1,63 +1,63 @@
-import { graphql } from '@/graphql/graphql.js';
-
-export const taxCategoryItemFragment = graphql(`
-    fragment TaxCategoryItem on TaxCategory {
-        id
-        createdAt
-        updatedAt
-        name
-        isDefault
-    }
-`);
-
-export const taxCategoryListQuery = graphql(
-    `
-        query TaxCategoryList {
-            taxCategories {
-                items {
-                    ...TaxCategoryItem
-                }
-                totalItems
-            }
-        }
-    `,
-    [taxCategoryItemFragment],
-);
-
-export const taxCategoryDetailQuery = graphql(`
-    query TaxCategoryDetail($id: ID!) {
-        taxCategory(id: $id) {
-            id
-            createdAt
-            updatedAt
-            name
-            isDefault
-            customFields
-        }
-    }
-`);
-
-export const createTaxCategoryDocument = graphql(`
-    mutation CreateTaxCategory($input: CreateTaxCategoryInput!) {
-        createTaxCategory(input: $input) {
-            id
-        }
-    }
-`);
-
-export const updateTaxCategoryDocument = graphql(`
-    mutation UpdateTaxCategory($input: UpdateTaxCategoryInput!) {
-        updateTaxCategory(input: $input) {
-            id
-        }
-    }
-`);
-
-export const deleteTaxCategoryDocument = graphql(`
-    mutation DeleteTaxCategory($id: ID!) {
-        deleteTaxCategory(id: $id) {
-            result
-            message
-        }
-    }
-`);
+import { graphql } from '@/graphql/graphql.js';
+
+export const taxCategoryItemFragment = graphql(`
+    fragment TaxCategoryItem on TaxCategory {
+        id
+        createdAt
+        updatedAt
+        name
+        isDefault
+    }
+`);
+
+export const taxCategoryListQuery = graphql(
+    `
+        query TaxCategoryList {
+            taxCategories {
+                items {
+                    ...TaxCategoryItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [taxCategoryItemFragment],
+);
+
+export const taxCategoryDetailQuery = graphql(`
+    query TaxCategoryDetail($id: ID!) {
+        taxCategory(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            isDefault
+            customFields
+        }
+    }
+`);
+
+export const createTaxCategoryDocument = graphql(`
+    mutation CreateTaxCategory($input: CreateTaxCategoryInput!) {
+        createTaxCategory(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateTaxCategoryDocument = graphql(`
+    mutation UpdateTaxCategory($input: UpdateTaxCategoryInput!) {
+        updateTaxCategory(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteTaxCategoryDocument = graphql(`
+    mutation DeleteTaxCategory($id: ID!) {
+        deleteTaxCategory(id: $id) {
+            result
+            message
+        }
+    }
+`);

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

@@ -1,65 +1,65 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.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 { deleteTaxCategoryDocument, taxCategoryListQuery } from './tax-categories.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories')({
-    component: TaxCategoryListPage,
-    loader: () => ({ breadcrumb: () => <Trans>Tax Categories</Trans> }),
-});
-
-function TaxCategoryListPage() {
-    return (
-        <ListPage
-            pageId="tax-category-list"
-            listQuery={taxCategoryListQuery}
-            deleteMutation={deleteTaxCategoryDocument}
-            route={Route}
-            title="Tax Categories"
-            defaultVisibility={{
-                name: true,
-                isDefault: true,
-            }}
-            onSearchTermChange={searchTerm => {
-                if (searchTerm === '') {
-                    return {};
-                }
-
-                return {
-                    name: { contains: searchTerm },
-                };
-            }}
-            customizeColumns={{
-                name: {
-                    header: 'Name',
-                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
-                },
-                isDefault: {
-                    header: 'Default',
-                    cell: ({ row }) => (
-                        <Badge variant={row.original.isDefault ? 'success' : 'destructive'}>
-                            <Trans>{row.original.isDefault ? 'Yes' : 'No'}</Trans>
-                        </Badge>
-                    ),
-                },
-            }}
-        >
-            <PageActionBarRight>
-                <PermissionGuard requires={['CreateTaxCategory']}>
-                    <Button asChild>
-                        <Link to="./new">
-                            <PlusIcon />
-                            <Trans>New Tax Category</Trans>
-                        </Link>
-                    </Button>
-                </PermissionGuard>
-            </PageActionBarRight>
-        </ListPage>
-    );
-}
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.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 { deleteTaxCategoryDocument, taxCategoryListQuery } from './tax-categories.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories')({
+    component: TaxCategoryListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Tax Categories</Trans> }),
+});
+
+function TaxCategoryListPage() {
+    return (
+        <ListPage
+            pageId="tax-category-list"
+            listQuery={taxCategoryListQuery}
+            deleteMutation={deleteTaxCategoryDocument}
+            route={Route}
+            title="Tax Categories"
+            defaultVisibility={{
+                name: true,
+                isDefault: true,
+            }}
+            onSearchTermChange={searchTerm => {
+                if (searchTerm === '') {
+                    return {};
+                }
+
+                return {
+                    name: { contains: searchTerm },
+                };
+            }}
+            customizeColumns={{
+                name: {
+                    header: 'Name',
+                    cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+                },
+                isDefault: {
+                    header: 'Default',
+                    cell: ({ row }) => (
+                        <Badge variant={row.original.isDefault ? 'success' : 'destructive'}>
+                            <Trans>{row.original.isDefault ? 'Yes' : 'No'}</Trans>
+                        </Badge>
+                    ),
+                },
+            }}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateTaxCategory']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon />
+                            <Trans>New Tax Category</Trans>
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}