@vendure/dashboard 3.2.0 → 3.2.2

package/src/lib/components/data-table/data-table.tsx

@@ -1,218 +1,218 @@
-'use client';
-
-import { DataTablePagination } from '@/components/data-table/data-table-pagination.js';
-import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Input } from '@/components/ui/input.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
-import {
-    ColumnDef,
-    ColumnFilter,
-    ColumnFiltersState,
-    flexRender,
-    getCoreRowModel,
-    getPaginationRowModel,
-    PaginationState,
-    SortingState,
-    Table as TableType,
-    useReactTable,
-    VisibilityState,
-} from '@tanstack/react-table';
-import { TableOptions } from '@tanstack/table-core';
-import { CircleX, Filter } from 'lucide-react';
-import React, { Suspense, useEffect } from 'react';
-import { DataTableFacetedFilter, DataTableFacetedFilterOption } from './data-table-faceted-filter.js';
-
-export interface FacetedFilter {
-    title: string;
-    icon?: React.ComponentType<{ className?: string }>;
-    optionsFn?: () => Promise<DataTableFacetedFilterOption[]>;
-    options?: DataTableFacetedFilterOption[];
-}
-
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
-    data: TData[];
-    totalItems: number;
-    page?: number;
-    itemsPerPage?: number;
-    sorting?: SortingState;
-    columnFilters?: ColumnFiltersState;
-    onPageChange?: (table: TableType<TData>, page: number, itemsPerPage: number) => void;
-    onSortChange?: (table: TableType<TData>, sorting: SortingState) => void;
-    onFilterChange?: (table: TableType<TData>, columnFilters: ColumnFilter[]) => void;
-    onSearchTermChange?: (searchTerm: string) => void;
-    defaultColumnVisibility?: VisibilityState;
-    facetedFilters?: { [key: string]: FacetedFilter | undefined };
-    disableViewOptions?: boolean;
-    /**
-     * This property allows full control over _all_ features of TanStack Table
-     * when needed.
-     */
-    setTableOptions?: (table: TableOptions<TData>) => TableOptions<TData>;
-}
-
-export function DataTable<TData, TValue>({
-    columns,
-    data,
-    totalItems,
-    page,
-    itemsPerPage,
-    sorting: sortingInitialState,
-    columnFilters: filtersInitialState,
-    onPageChange,
-    onSortChange,
-    onFilterChange,
-    onSearchTermChange,
-    defaultColumnVisibility,
-    facetedFilters,
-    disableViewOptions,
-    setTableOptions,
-}: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
-    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
-    const [pagination, setPagination] = React.useState<PaginationState>({
-        pageIndex: (page ?? 1) - 1,
-        pageSize: itemsPerPage ?? 10,
-    });
-    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(
-        defaultColumnVisibility ?? {},
-    );
-
-    let tableOptions: TableOptions<TData> = {
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        manualPagination: true,
-        manualSorting: true,
-        manualFiltering: true,
-        rowCount: totalItems,
-        onPaginationChange: setPagination,
-        onSortingChange: setSorting,
-        onColumnVisibilityChange: setColumnVisibility,
-        onColumnFiltersChange: setColumnFilters,
-        state: {
-            pagination,
-            sorting,
-            columnVisibility,
-            columnFilters,
-        },
-    };
-
-    if (typeof setTableOptions === 'function') {
-        tableOptions = setTableOptions(tableOptions);
-    }
-
-    const table = useReactTable(tableOptions);
-
-    useEffect(() => {
-        onPageChange?.(table, pagination.pageIndex + 1, pagination.pageSize);
-    }, [pagination]);
-
-    useEffect(() => {
-        onSortChange?.(table, sorting);
-    }, [sorting]);
-
-    useEffect(() => {
-        onFilterChange?.(table, columnFilters);
-    }, [columnFilters]);
-    return (
-        <>
-            <div className="flex justify-between items-start">
-                <div className="flex flex-col space-y-2">
-                    <div className="flex items-center justify-start gap-2">
-                        {onSearchTermChange && (
-                            <div className="flex items-center">
-                                <Input
-                                    placeholder="Filter..."
-                                    onChange={event => onSearchTermChange(event.target.value)}
-                                    className="max-w-sm w-md"
-                                />
-                            </div>
-                        )}
-                        <Suspense>
-                            {Object.entries(facetedFilters ?? {}).map(([key, filter]) => (
-                                <DataTableFacetedFilter
-                                    key={key}
-                                    column={table.getColumn(key)}
-                                    title={filter?.title}
-                                    options={filter?.options}
-                                    optionsFn={filter?.optionsFn}
-                                />
-                            ))}
-                        </Suspense>
-                    </div>
-                    <div className="flex gap-1">
-                        {columnFilters
-                            .filter(f => !facetedFilters?.[f.id])
-                            .map(f => {
-                                const [operator, value] = Object.entries(
-                                    f.value as Record<string, string>,
-                                )[0];
-                                return (
-                                    <Badge key={f.id} className="flex gap-1 items-center" variant="secondary">
-                                        <Filter size="12" className="opacity-50" />
-                                        <div>{f.id}</div>
-                                        <div>{operator}</div>
-                                        <div>{value}</div>
-                                        <button
-                                            className="cursor-pointer"
-                                            onClick={() =>
-                                                setColumnFilters(old => old.filter(x => x.id !== f.id))
-                                            }
-                                        >
-                                            <CircleX size="14" />
-                                        </button>
-                                    </Badge>
-                                );
-                            })}
-                    </div>
-                </div>
-                {!disableViewOptions && <DataTableViewOptions table={table} />}
-            </div>
-            <div className="rounded-md border my-2">
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map(headerGroup => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map(header => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map(row => (
-                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                                    {row.getVisibleCells().map(cell => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell colSpan={columns.length} className="h-24 text-center">
-                                    No results.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </div>
-            <DataTablePagination table={table} />
-        </>
-    );
-}
+'use client';
+
+import { DataTablePagination } from '@/components/data-table/data-table-pagination.js';
+import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Input } from '@/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
+import {
+    ColumnDef,
+    ColumnFilter,
+    ColumnFiltersState,
+    flexRender,
+    getCoreRowModel,
+    getPaginationRowModel,
+    PaginationState,
+    SortingState,
+    Table as TableType,
+    useReactTable,
+    VisibilityState,
+} from '@tanstack/react-table';
+import { TableOptions } from '@tanstack/table-core';
+import { CircleX, Filter } from 'lucide-react';
+import React, { Suspense, useEffect } from 'react';
+import { DataTableFacetedFilter, DataTableFacetedFilterOption } from './data-table-faceted-filter.js';
+
+export interface FacetedFilter {
+    title: string;
+    icon?: React.ComponentType<{ className?: string }>;
+    optionsFn?: () => Promise<DataTableFacetedFilterOption[]>;
+    options?: DataTableFacetedFilterOption[];
+}
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    totalItems: number;
+    page?: number;
+    itemsPerPage?: number;
+    sorting?: SortingState;
+    columnFilters?: ColumnFiltersState;
+    onPageChange?: (table: TableType<TData>, page: number, itemsPerPage: number) => void;
+    onSortChange?: (table: TableType<TData>, sorting: SortingState) => void;
+    onFilterChange?: (table: TableType<TData>, columnFilters: ColumnFilter[]) => void;
+    onSearchTermChange?: (searchTerm: string) => void;
+    defaultColumnVisibility?: VisibilityState;
+    facetedFilters?: { [key: string]: FacetedFilter | undefined };
+    disableViewOptions?: boolean;
+    /**
+     * This property allows full control over _all_ features of TanStack Table
+     * when needed.
+     */
+    setTableOptions?: (table: TableOptions<TData>) => TableOptions<TData>;
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    totalItems,
+    page,
+    itemsPerPage,
+    sorting: sortingInitialState,
+    columnFilters: filtersInitialState,
+    onPageChange,
+    onSortChange,
+    onFilterChange,
+    onSearchTermChange,
+    defaultColumnVisibility,
+    facetedFilters,
+    disableViewOptions,
+    setTableOptions,
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
+    const [pagination, setPagination] = React.useState<PaginationState>({
+        pageIndex: (page ?? 1) - 1,
+        pageSize: itemsPerPage ?? 10,
+    });
+    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(
+        defaultColumnVisibility ?? {},
+    );
+
+    let tableOptions: TableOptions<TData> = {
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        manualPagination: true,
+        manualSorting: true,
+        manualFiltering: true,
+        rowCount: totalItems,
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnFiltersChange: setColumnFilters,
+        state: {
+            pagination,
+            sorting,
+            columnVisibility,
+            columnFilters,
+        },
+    };
+
+    if (typeof setTableOptions === 'function') {
+        tableOptions = setTableOptions(tableOptions);
+    }
+
+    const table = useReactTable(tableOptions);
+
+    useEffect(() => {
+        onPageChange?.(table, pagination.pageIndex + 1, pagination.pageSize);
+    }, [pagination]);
+
+    useEffect(() => {
+        onSortChange?.(table, sorting);
+    }, [sorting]);
+
+    useEffect(() => {
+        onFilterChange?.(table, columnFilters);
+    }, [columnFilters]);
+    return (
+        <>
+            <div className="flex justify-between items-start">
+                <div className="flex flex-col space-y-2">
+                    <div className="flex items-center justify-start gap-2">
+                        {onSearchTermChange && (
+                            <div className="flex items-center">
+                                <Input
+                                    placeholder="Filter..."
+                                    onChange={event => onSearchTermChange(event.target.value)}
+                                    className="max-w-sm w-md"
+                                />
+                            </div>
+                        )}
+                        <Suspense>
+                            {Object.entries(facetedFilters ?? {}).map(([key, filter]) => (
+                                <DataTableFacetedFilter
+                                    key={key}
+                                    column={table.getColumn(key)}
+                                    title={filter?.title}
+                                    options={filter?.options}
+                                    optionsFn={filter?.optionsFn}
+                                />
+                            ))}
+                        </Suspense>
+                    </div>
+                    <div className="flex gap-1">
+                        {columnFilters
+                            .filter(f => !facetedFilters?.[f.id])
+                            .map(f => {
+                                const [operator, value] = Object.entries(
+                                    f.value as Record<string, string>,
+                                )[0];
+                                return (
+                                    <Badge key={f.id} className="flex gap-1 items-center" variant="secondary">
+                                        <Filter size="12" className="opacity-50" />
+                                        <div>{f.id}</div>
+                                        <div>{operator}</div>
+                                        <div>{value}</div>
+                                        <button
+                                            className="cursor-pointer"
+                                            onClick={() =>
+                                                setColumnFilters(old => old.filter(x => x.id !== f.id))
+                                            }
+                                        >
+                                            <CircleX size="14" />
+                                        </button>
+                                    </Badge>
+                                );
+                            })}
+                    </div>
+                </div>
+                {!disableViewOptions && <DataTableViewOptions table={table} />}
+            </div>
+            <div className="rounded-md border my-2">
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map(headerGroup => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map(header => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
+                                        </TableHead>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map(row => (
+                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                                    {row.getVisibleCells().map(cell => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <DataTablePagination table={table} />
+        </>
+    );
+}

package/src/lib/components/layout/app-layout.tsx

@@ -1,42 +1,42 @@
-import { AppSidebar } from '@/components/layout/app-sidebar.js';
-import { GeneratedBreadcrumbs } from '@/components/layout/generated-breadcrumbs.js';
-import { PrereleasePopup } from '@/components/layout/prerelease-popup.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Separator } from '@/components/ui/separator.js';
-import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
-import { Outlet } from '@tanstack/react-router';
-import { Alerts } from '../shared/alerts.js';
-
-export function AppLayout() {
-    const { settings } = useUserSettings();
-    return (
-        <SidebarProvider>
-            <AppSidebar />
-            <SidebarInset>
-                <div className="container mx-auto">
-                    <header className="border-b border-border flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-                        <div className="flex items-center justify-between gap-2 px-4 w-full">
-                            <div className="flex items-center justify-start gap-2">
-                                <SidebarTrigger className="-ml-1" />
-                                <Separator orientation="vertical" className="mr-2 h-4" />
-                                <GeneratedBreadcrumbs />
-                            </div>
-                            <div className="flex items-center justify-end gap-2">
-                                {settings.devMode && (
-                                    <Badge variant="destructive">
-                                        <Trans>Dev Mode</Trans>
-                                    </Badge>
-                                )}
-                                <Alerts />
-                            </div>
-                        </div>
-                    </header>
-                    <Outlet />
-                </div>
-            </SidebarInset>
-            <PrereleasePopup />
-        </SidebarProvider>
-    );
-}
+import { AppSidebar } from '@/components/layout/app-sidebar.js';
+import { GeneratedBreadcrumbs } from '@/components/layout/generated-breadcrumbs.js';
+import { PrereleasePopup } from '@/components/layout/prerelease-popup.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Separator } from '@/components/ui/separator.js';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Trans } from '@/lib/trans.js';
+import { Outlet } from '@tanstack/react-router';
+import { Alerts } from '../shared/alerts.js';
+
+export function AppLayout() {
+    const { settings } = useUserSettings();
+    return (
+        <SidebarProvider>
+            <AppSidebar />
+            <SidebarInset>
+                <div className="container mx-auto">
+                    <header className="border-b border-border flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+                        <div className="flex items-center justify-between gap-2 px-4 w-full">
+                            <div className="flex items-center justify-start gap-2">
+                                <SidebarTrigger className="-ml-1" />
+                                <Separator orientation="vertical" className="mr-2 h-4" />
+                                <GeneratedBreadcrumbs />
+                            </div>
+                            <div className="flex items-center justify-end gap-2">
+                                {settings.devMode && (
+                                    <Badge variant="destructive">
+                                        <Trans>Dev Mode</Trans>
+                                    </Badge>
+                                )}
+                                <Alerts />
+                            </div>
+                        </div>
+                    </header>
+                    <Outlet />
+                </div>
+            </SidebarInset>
+            <PrereleasePopup />
+        </SidebarProvider>
+    );
+}

package/src/lib/components/layout/app-sidebar.tsx

@@ -1,34 +1,34 @@
-import { NavMain } from '@/components/layout/nav-main.js';
-import { NavUser } from '@/components/layout/nav-user.js';
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarFooter,
-    SidebarHeader,
-    SidebarRail,
-} from '@/components/ui/sidebar.js';
-import { getNavMenuConfig } from '@/framework/nav-menu/nav-menu-extensions.js';
-import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
-import * as React from 'react';
-import { ChannelSwitcher } from './channel-switcher.js';
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-    const { extensionsLoaded } = useDashboardExtensions();
-    const { sections } = getNavMenuConfig();
-    return (
-        extensionsLoaded && (
-            <Sidebar collapsible="icon" {...props}>
-                <SidebarHeader>
-                    <ChannelSwitcher />
-                </SidebarHeader>
-                <SidebarContent className="flex flex-col h-full overflow-y-auto">
-                    <NavMain items={sections} />
-                </SidebarContent>
-                <SidebarFooter>
-                    <NavUser />
-                </SidebarFooter>
-                <SidebarRail />
-            </Sidebar>
-        )
-    );
-}
+import { NavMain } from '@/components/layout/nav-main.js';
+import { NavUser } from '@/components/layout/nav-user.js';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader,
+    SidebarRail,
+} from '@/components/ui/sidebar.js';
+import { getNavMenuConfig } from '@/framework/nav-menu/nav-menu-extensions.js';
+import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
+import * as React from 'react';
+import { ChannelSwitcher } from './channel-switcher.js';
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+    const { extensionsLoaded } = useDashboardExtensions();
+    const { sections } = getNavMenuConfig();
+    return (
+        extensionsLoaded && (
+            <Sidebar collapsible="icon" {...props}>
+                <SidebarHeader>
+                    <ChannelSwitcher />
+                </SidebarHeader>
+                <SidebarContent className="flex flex-col h-full overflow-y-auto">
+                    <NavMain items={sections} />
+                </SidebarContent>
+                <SidebarFooter>
+                    <NavUser />
+                </SidebarFooter>
+                <SidebarRail />
+            </Sidebar>
+        )
+    );
+}