@vendure/dashboard 3.2.0 → 3.2.2

package/src/lib/components/shared/permission-guard.tsx

@@ -1,21 +1,21 @@
-import { usePermissions } from "@/hooks/use-permissions.js";
-import { Permission } from "@vendure/common/lib/generated-types";
-
-export interface PermissionGuardProps {
-    requires: Permission | string | string[] | Permission[];
-    children: React.ReactNode;
-}
-
-/**
- * @description
- * This component is used to protect a route from unauthorized access.
- * It will render the children if the user has the required permissions.
- */
-export function PermissionGuard({ requires, children }: PermissionGuardProps ) {
-    const { hasPermissions } = usePermissions();
-    const permissions = Array.isArray(requires) ? requires : [requires];
-    if (!hasPermissions(permissions)) {
-        return null;
-    }
-    return children;
+import { usePermissions } from "@/hooks/use-permissions.js";
+import { Permission } from "@vendure/common/lib/generated-types";
+
+export interface PermissionGuardProps {
+    requires: Permission | string | string[] | Permission[];
+    children: React.ReactNode;
+}
+
+/**
+ * @description
+ * This component is used to protect a route from unauthorized access.
+ * It will render the children if the user has the required permissions.
+ */
+export function PermissionGuard({ requires, children }: PermissionGuardProps ) {
+    const { hasPermissions } = usePermissions();
+    const permissions = Array.isArray(requires) ? requires : [requires];
+    if (!hasPermissions(permissions)) {
+        return null;
+    }
+    return children;
 }

package/src/lib/components/shared/role-code-label.tsx

@@ -1,8 +1,8 @@
-import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/constants.js';
-import { Trans } from '@/lib/trans.js';
-
-export function RoleCodeLabel({ code }: { code: string } | { code: undefined }) {
-    return code === SUPER_ADMIN_ROLE_CODE ? <Trans>Super Admin</Trans> : 
-    code === CUSTOMER_ROLE_CODE ? <Trans>Customer</Trans> : code;
-}
-
+import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/constants.js';
+import { Trans } from '@/lib/trans.js';
+
+export function RoleCodeLabel({ code }: { code: string } | { code: undefined }) {
+    return code === SUPER_ADMIN_ROLE_CODE ? <Trans>Super Admin</Trans> : 
+    code === CUSTOMER_ROLE_CODE ? <Trans>Customer</Trans> : code;
+}
+

package/src/lib/components/shared/role-selector.tsx

@@ -1,56 +1,56 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useQuery } from '@tanstack/react-query';
-import { MultiSelect } from './multi-select.js';
-import { useLingui } from '@/lib/trans.js';
-
-const rolesDocument = graphql(`
-    query Roles($options: RoleListOptions) {
-        roles(options: $options) {
-            items {
-                id
-                code
-                description
-            }
-        }
-    }
-`);
-
-export interface RoleSelectorProps<T extends boolean> {
-    value: T extends true ? string[] : string;
-    onChange: (value: T extends true ? string[] : string) => void;
-    multiple?: T;
-}
-
-export function RoleSelector<T extends boolean>(props: RoleSelectorProps<T>) {
-    const { value, onChange, multiple } = props;
-    const { i18n } = useLingui();
-
-    const { data } = useQuery({
-        queryKey: ['roles'],
-        queryFn: () =>
-            api.query(rolesDocument, {
-                options: {
-                    take: 100,
-                },
-            }),
-        select: data => data.roles.items,
-    });
-
-    const items = (data ?? []).map(role => ({
-        value: role.id,
-        label: role.code,
-        display: role.description ? role.description : role.code
-    }));
-
-    return (
-        <MultiSelect
-            value={value}
-            onChange={onChange}
-            multiple={multiple}
-            items={items}
-            placeholder={i18n.t('Select a role')}
-            searchPlaceholder={i18n.t('Search roles...')}
-        />
-    );
-}
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+import { MultiSelect } from './multi-select.js';
+import { useLingui } from '@/lib/trans.js';
+
+const rolesDocument = graphql(`
+    query Roles($options: RoleListOptions) {
+        roles(options: $options) {
+            items {
+                id
+                code
+                description
+            }
+        }
+    }
+`);
+
+export interface RoleSelectorProps<T extends boolean> {
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+}
+
+export function RoleSelector<T extends boolean>(props: RoleSelectorProps<T>) {
+    const { value, onChange, multiple } = props;
+    const { i18n } = useLingui();
+
+    const { data } = useQuery({
+        queryKey: ['roles'],
+        queryFn: () =>
+            api.query(rolesDocument, {
+                options: {
+                    take: 100,
+                },
+            }),
+        select: data => data.roles.items,
+    });
+
+    const items = (data ?? []).map(role => ({
+        value: role.id,
+        label: role.code,
+        display: role.description ? role.description : role.code
+    }));
+
+    return (
+        <MultiSelect
+            value={value}
+            onChange={onChange}
+            multiple={multiple}
+            items={items}
+            placeholder={i18n.t('Select a role')}
+            searchPlaceholder={i18n.t('Search roles...')}
+        />
+    );
+}

package/src/lib/components/shared/seller-selector.tsx

@@ -1,107 +1,107 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-import { Plus, Search } from 'lucide-react';
-import { useState } from 'react';
-
-const sellerListDocument = graphql(`
-    query SellerList($options: SellerListOptions) {
-        sellers(options: $options) {
-            items {
-                id
-                name
-            }
-            totalItems
-        }
-    }
-`);
-
-export interface Seller {
-    id: string;
-    name: string;
-}
-
-export interface SellerSelectorProps {
-    value?: string | null;
-    onChange: (value: string) => void;
-    label?: string | React.ReactNode;
-    readOnly?: boolean;
-}
-
-export function SellerSelector(props: SellerSelectorProps) {
-    const [open, setOpen] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-
-    const { data, isLoading } = useQuery({
-        queryKey: ['sellerList', searchTerm],
-        queryFn: () =>
-            api.query(sellerListDocument, {
-                options: {
-                    sort: { name: 'ASC' },
-                    filter: searchTerm ? {
-                        name: { contains: searchTerm },
-                    } : undefined,  
-                },
-            }),
-        staleTime: 1000 * 60, // 1 minute
-    });
-
-    const handleSearch = (value: string) => {
-        setSearchTerm(value);
-    };
-
-    const selectedSeller = data?.sellers.items.find(seller => seller.id === props.value);
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
-                    {selectedSeller ? (
-                        <span className="flex-1 text-left">{selectedSeller.name}</span>
-                    ) : (
-                        <>
-                            <Plus className="h-4 w-4" />
-                            {props.label ?? <Trans>Select seller</Trans>}
-                        </>
-                    )}
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0 w-[350px]" align="start">
-                <Command shouldFilter={false}>
-                    <div className="flex items-center border-b px-3">
-                        <CommandInput 
-                            placeholder="Search sellers..." 
-                            onValueChange={handleSearch}
-                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
-                        />
-                    </div>
-                    <CommandList>
-                        <CommandEmpty>
-                            {isLoading ? (
-                                <Trans>Loading...</Trans>
-                            ) : (
-                                <Trans>No sellers found</Trans>
-                            )}
-                        </CommandEmpty>
-                        {data?.sellers.items.map(seller => (
-                            <CommandItem
-                                key={seller.id}
-                                onSelect={() => {
-                                    props.onChange(seller.id);
-                                    setOpen(false);
-                                }}
-                                className="flex flex-col items-start"
-                            >
-                                <div className="font-medium">{seller.name}</div>
-                            </CommandItem>
-                        ))}
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}
+import { Button } from '@/components/ui/button.js';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { Plus, Search } from 'lucide-react';
+import { useState } from 'react';
+
+const sellerListDocument = graphql(`
+    query SellerList($options: SellerListOptions) {
+        sellers(options: $options) {
+            items {
+                id
+                name
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface Seller {
+    id: string;
+    name: string;
+}
+
+export interface SellerSelectorProps {
+    value?: string | null;
+    onChange: (value: string) => void;
+    label?: string | React.ReactNode;
+    readOnly?: boolean;
+}
+
+export function SellerSelector(props: SellerSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const { data, isLoading } = useQuery({
+        queryKey: ['sellerList', searchTerm],
+        queryFn: () =>
+            api.query(sellerListDocument, {
+                options: {
+                    sort: { name: 'ASC' },
+                    filter: searchTerm ? {
+                        name: { contains: searchTerm },
+                    } : undefined,  
+                },
+            }),
+        staleTime: 1000 * 60, // 1 minute
+    });
+
+    const handleSearch = (value: string) => {
+        setSearchTerm(value);
+    };
+
+    const selectedSeller = data?.sellers.items.find(seller => seller.id === props.value);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    {selectedSeller ? (
+                        <span className="flex-1 text-left">{selectedSeller.name}</span>
+                    ) : (
+                        <>
+                            <Plus className="h-4 w-4" />
+                            {props.label ?? <Trans>Select seller</Trans>}
+                        </>
+                    )}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[350px]" align="start">
+                <Command shouldFilter={false}>
+                    <div className="flex items-center border-b px-3">
+                        <CommandInput 
+                            placeholder="Search sellers..." 
+                            onValueChange={handleSearch}
+                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+                        />
+                    </div>
+                    <CommandList>
+                        <CommandEmpty>
+                            {isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <Trans>No sellers found</Trans>
+                            )}
+                        </CommandEmpty>
+                        {data?.sellers.items.map(seller => (
+                            <CommandItem
+                                key={seller.id}
+                                onSelect={() => {
+                                    props.onChange(seller.id);
+                                    setOpen(false);
+                                }}
+                                className="flex flex-col items-start"
+                            >
+                                <div className="font-medium">{seller.name}</div>
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/tax-category-selector.tsx

@@ -1,65 +1,65 @@
-import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-import { Skeleton } from '../ui/skeleton.js';
-
-const taxCategoriesDocument = graphql(`
-    query TaxCategories($options: TaxCategoryListOptions) {
-        taxCategories(options: $options) {
-            items {
-                id
-                name
-                isDefault
-            }
-        }
-    }
-`);
-
-export interface TaxCategorySelectorProps {
-    value: string | undefined;
-    onChange: (value: string) => void;
-}
-
-export function TaxCategorySelector({ value, onChange }: TaxCategorySelectorProps) {
-    const { data, isLoading, isPending, status } = useQuery({
-        queryKey: ['taxCategories'],
-        staleTime: 1000 * 60 * 5,
-        queryFn: () =>
-            api.query(taxCategoriesDocument, {
-                options: {
-                    take: 100,
-                },
-            }),
-    });
-    if (isLoading || isPending) {
-        return <Skeleton className="h-10 w-full" />;
-    }
-
-    return (
-        <Select value={value} onValueChange={value => value && onChange(value)}>
-            <SelectTrigger>
-                <SelectValue placeholder={<Trans>Select a tax category</Trans>} />
-            </SelectTrigger>
-            <SelectContent>
-                {data && (
-                    <SelectGroup>
-                        {data?.taxCategories.items.map(taxCategory => (
-                            <SelectItem key={taxCategory.id} value={taxCategory.id}>
-                                {taxCategory.name}
-                            </SelectItem>
-                        ))}
-                    </SelectGroup>
-                )}
-            </SelectContent>
-        </Select>
-    );
-}
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { Skeleton } from '../ui/skeleton.js';
+
+const taxCategoriesDocument = graphql(`
+    query TaxCategories($options: TaxCategoryListOptions) {
+        taxCategories(options: $options) {
+            items {
+                id
+                name
+                isDefault
+            }
+        }
+    }
+`);
+
+export interface TaxCategorySelectorProps {
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+
+export function TaxCategorySelector({ value, onChange }: TaxCategorySelectorProps) {
+    const { data, isLoading, isPending, status } = useQuery({
+        queryKey: ['taxCategories'],
+        staleTime: 1000 * 60 * 5,
+        queryFn: () =>
+            api.query(taxCategoriesDocument, {
+                options: {
+                    take: 100,
+                },
+            }),
+    });
+    if (isLoading || isPending) {
+        return <Skeleton className="h-10 w-full" />;
+    }
+
+    return (
+        <Select value={value} onValueChange={value => value && onChange(value)}>
+            <SelectTrigger>
+                <SelectValue placeholder={<Trans>Select a tax category</Trans>} />
+            </SelectTrigger>
+            <SelectContent>
+                {data && (
+                    <SelectGroup>
+                        {data?.taxCategories.items.map(taxCategory => (
+                            <SelectItem key={taxCategory.id} value={taxCategory.id}>
+                                {taxCategory.name}
+                            </SelectItem>
+                        ))}
+                    </SelectGroup>
+                )}
+            </SelectContent>
+        </Select>
+    );
+}