@wilshop/dashboard 3.5.2

package/src/lib/components/shared/facet-value-selector.tsx

@@ -0,0 +1,458 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { ChevronRight, Loader2, Plus } from 'lucide-react';
+import React, { useState } from 'react';
+
+export interface FacetValue {
+    id: string;
+    name: string;
+    code: string;
+    facet: Facet;
+}
+
+export interface Facet {
+    id: string;
+    name: string;
+    code: string;
+}
+
+/**
+ * @description
+ * A component for selecting facet values.
+ *
+ * @docsCategory components
+ * @docsPage FacetValueSelector
+ * @since 3.4.0
+ */
+interface FacetValueSelectorProps {
+    /**
+     * @description
+     * The function to call when a facet value is selected.
+     *
+     * The `value` will have the following structure:
+     *
+     * ```ts
+     * {
+     *     id: string;
+     *     name: string;
+     *     code: string;
+     *     facet: {
+     *         id: string;
+     *         name: string;
+     *         code: string;
+     *     };
+     * }
+     * ```
+     */
+    onValueSelect: (value: FacetValue) => void;
+    /**
+     * @description
+     * Whether the selector is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * @description
+     * The placeholder text for the selector.
+     */
+    placeholder?: string;
+    /**
+     * @description
+     * The number of facet values to display per page.
+     *
+     * @default 4
+     */
+    pageSize?: number;
+}
+
+const getFacetValueListDocument = graphql(`
+    query GetFacetValueList($options: FacetValueListOptions) {
+        facetValues(options: $options) {
+            items {
+                id
+                name
+                code
+                facet {
+                    id
+                    name
+                    code
+                }
+            }
+            totalItems
+        }
+    }
+`);
+
+const getFacetListDocument = graphql(`
+    query GetFacetList($options: FacetListOptions) {
+        facets(options: $options) {
+            items {
+                id
+                name
+                code
+            }
+            totalItems
+        }
+    }
+`);
+
+const getFacetValuesForFacetDocument = graphql(`
+    query GetFacetValuesForFacet($options: FacetValueListOptions) {
+        facetValues(options: $options) {
+            items {
+                id
+                name
+                code
+                facet {
+                    id
+                    name
+                    code
+                }
+            }
+            totalItems
+        }
+    }
+`);
+
+/**
+ * @description
+ * A component for selecting facet values.
+ *
+ * @example
+ * ```tsx
+ * <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={disabled} />
+ * ```
+ *
+ * @docsCategory components
+ * @docsPage FacetValueSelector
+ * @docsWeight 0
+ * @since 3.4.0
+ */
+export function FacetValueSelector({
+    onValueSelect,
+    disabled,
+    placeholder,
+    pageSize = 10,
+}: FacetValueSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [expandedFacetId, setExpandedFacetId] = useState<string | null>(null);
+    const [browseMode, setBrowseMode] = useState(false);
+    const debouncedSearch = useDebounce(searchTerm, 200);
+    const { t } = useLingui();
+    const minSearchLength = 1;
+
+    // Query for facet values based on search
+    const { data: facetValueData, isLoading: isLoadingFacetValues } = useQuery({
+        queryKey: ['facetValues', debouncedSearch],
+        queryFn: () => {
+            if (debouncedSearch.length < minSearchLength) {
+                return { facetValues: { items: [], totalItems: 0 } };
+            }
+            return api.query(getFacetValueListDocument, {
+                options: {
+                    filter: {
+                        name: { contains: debouncedSearch },
+                    },
+                    take: 100,
+                },
+            });
+        },
+        enabled: debouncedSearch.length >= minSearchLength && !expandedFacetId,
+    });
+
+    // Query for facets based on search (use regular query for search, infinite for browse)
+    const { data: facetSearchData, isLoading: isLoadingFacetSearch } = useQuery({
+        queryKey: ['facets', debouncedSearch],
+        queryFn: () => {
+            if (debouncedSearch.length < minSearchLength) {
+                return { facets: { items: [], totalItems: 0 } };
+            }
+            return api.query(getFacetListDocument, {
+                options: {
+                    filter: {
+                        name: { contains: debouncedSearch },
+                    },
+                    take: 100,
+                },
+            });
+        },
+        enabled: !browseMode && debouncedSearch.length >= minSearchLength && !expandedFacetId,
+    });
+
+    // Infinite query for browse mode
+    const {
+        data: facetBrowseData,
+        isLoading: isLoadingFacetBrowse,
+        fetchNextPage: fetchNextFacetsPage,
+        hasNextPage: hasNextFacetsPage,
+        isFetchingNextPage: isFetchingNextFacetsPage,
+    } = useInfiniteQuery({
+        queryKey: ['facets', 'browse'],
+        queryFn: async ({ pageParam = 0 }) => {
+            const response = await api.query(getFacetListDocument, {
+                options: {
+                    filter: {},
+                    sort: { name: 'ASC' },
+                    skip: pageParam * pageSize,
+                    take: pageSize,
+                },
+            });
+            return response.facets;
+        },
+        getNextPageParam: (lastPage, allPages) => {
+            if (!lastPage) return undefined;
+            const totalFetched = allPages.length * pageSize;
+            return totalFetched < lastPage.totalItems ? allPages.length : undefined;
+        },
+        enabled: browseMode && !expandedFacetId,
+        initialPageParam: 0,
+    });
+
+    // Query for paginated values of a specific facet when expanded
+    const {
+        data: expandedFacetData,
+        isLoading: isLoadingExpandedFacet,
+        fetchNextPage,
+        hasNextPage,
+        isFetchingNextPage,
+    } = useInfiniteQuery({
+        queryKey: ['facetValues', expandedFacetId, 'infinite'],
+        queryFn: async ({ pageParam = 0 }) => {
+            if (!expandedFacetId) return null;
+            const response = await api.query(getFacetValuesForFacetDocument, {
+                options: {
+                    filter: { facetId: { eq: expandedFacetId } },
+                    sort: { code: 'ASC' },
+                    skip: pageParam * pageSize,
+                    take: pageSize,
+                },
+            });
+            return response.facetValues;
+        },
+        getNextPageParam: (lastPage, allPages) => {
+            if (!lastPage) return undefined;
+            const totalFetched = allPages.length * pageSize;
+            return totalFetched < lastPage.totalItems ? allPages.length : undefined;
+        },
+        enabled: !!expandedFacetId,
+        initialPageParam: 0,
+    });
+
+    const facetValues = facetValueData?.facetValues.items ?? [];
+    const facets = browseMode
+        ? (facetBrowseData?.pages.flatMap(page => page?.items ?? []) ?? [])
+        : (facetSearchData?.facets.items ?? []);
+    const expandedFacetValues = expandedFacetData?.pages.flatMap(page => page?.items ?? []) ?? [];
+    const expandedFacetName = expandedFacetValues[0]?.facet.name;
+
+    // Group facet values by facet
+    const facetGroups = facetValues.reduce<Record<string, FacetValue[]>>(
+        (groups: Record<string, FacetValue[]>, facetValue: FacetValue) => {
+            const facetId = facetValue.facet.id;
+            if (!groups[facetId]) {
+                groups[facetId] = [];
+            }
+            groups[facetId].push(facetValue);
+            return groups;
+        },
+        {},
+    );
+
+    const isLoading =
+        isLoadingFacetValues || isLoadingFacetSearch || isLoadingFacetBrowse || isLoadingExpandedFacet;
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        const target = e.currentTarget;
+        const scrolledToBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1;
+
+        if (scrolledToBottom && !isFetchingNextPage) {
+            // For expanded facet values
+            if (expandedFacetId && hasNextPage) {
+                void fetchNextPage();
+            }
+            // For browse mode facets
+            if (browseMode && !expandedFacetId && hasNextFacetsPage) {
+                void fetchNextFacetsPage();
+            }
+        }
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={disabled} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    <Trans>Add facet values</Trans>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[400px]" align="start">
+                <Command shouldFilter={false}>
+                    <CommandInput
+                        placeholder={placeholder ?? t`Search facet values...`}
+                        value={searchTerm}
+                        onValueChange={value => {
+                            setSearchTerm(value);
+                            setExpandedFacetId(null);
+                            setBrowseMode(false);
+                        }}
+                        onKeyDown={e => {
+                            if (
+                                e.key === 'ArrowDown' &&
+                                !browseMode &&
+                                debouncedSearch.length < minSearchLength
+                            ) {
+                                e.preventDefault();
+                                setBrowseMode(true);
+                            }
+                        }}
+                        disabled={disabled}
+                    />
+                    <CommandList className="h-[200px] overflow-y-auto" onScroll={handleScroll}>
+                        <CommandEmpty>
+                            {debouncedSearch.length < 2 && !browseMode ? (
+                                <div className="flex flex-col items-center gap-2 py-4">
+                                    <div className="text-sm text-muted-foreground">
+                                        <Trans>Type at least 2 characters to search...</Trans>
+                                    </div>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => setBrowseMode(true)}
+                                        type="button"
+                                    >
+                                        <Trans>Browse facets</Trans>
+                                    </Button>
+                                </div>
+                            ) : isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <div className="flex flex-col items-center gap-2 py-4">
+                                    <div className="text-sm text-muted-foreground">
+                                        <Trans>No results found</Trans>
+                                    </div>
+                                    {!browseMode && (
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => setBrowseMode(true)}
+                                            type="button"
+                                        >
+                                            <Trans>Browse facets</Trans>
+                                        </Button>
+                                    )}
+                                </div>
+                            )}
+                        </CommandEmpty>
+
+                        {expandedFacetId ? (
+                            <>
+                                <CommandGroup>
+                                    <CommandItem
+                                        onSelect={() => {
+                                            setExpandedFacetId(null);
+                                            setBrowseMode(false);
+                                        }}
+                                        className="cursor-pointer"
+                                    >
+                                        ← <Trans>Back to search</Trans>
+                                    </CommandItem>
+                                </CommandGroup>
+                                <CommandGroup heading={expandedFacetName}>
+                                    {expandedFacetValues.map(facetValue => (
+                                        <CommandItem
+                                            key={facetValue.id}
+                                            value={facetValue.id}
+                                            onSelect={() => {
+                                                onValueSelect(facetValue);
+                                                setSearchTerm('');
+                                                setExpandedFacetId(null);
+                                                setBrowseMode(false);
+                                                setOpen(false);
+                                            }}
+                                        >
+                                            {facetValue.name}
+                                        </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                                {(isFetchingNextPage || isLoadingExpandedFacet) && (
+                                    <div className="flex items-center justify-center py-2">
+                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                    </div>
+                                )}
+                                {!hasNextPage && expandedFacetValues.length > 0 && (
+                                    <div className="text-center py-2 text-sm text-muted-foreground">
+                                        <Trans>No more items</Trans>
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {facets.length > 0 && (
+                                    <>
+                                        <CommandGroup heading={<Trans>Facets</Trans>}>
+                                            {facets.map(facet => (
+                                                <CommandItem
+                                                    key={facet.id}
+                                                    value={`facet-${facet.id}`}
+                                                    onSelect={() => setExpandedFacetId(facet.id)}
+                                                    className="cursor-pointer"
+                                                >
+                                                    <span className="flex-1">{facet.name}</span>
+                                                    <ChevronRight className="h-4 w-4" />
+                                                </CommandItem>
+                                            ))}
+                                        </CommandGroup>
+                                        {browseMode && isFetchingNextFacetsPage && (
+                                            <div className="flex items-center justify-center py-2">
+                                                <Loader2 className="h-4 w-4 animate-spin" />
+                                            </div>
+                                        )}
+                                        {browseMode && !hasNextFacetsPage && facets.length > 0 && (
+                                            <div className="text-center py-2 text-sm text-muted-foreground">
+                                                <Trans>No more facets</Trans>
+                                            </div>
+                                        )}
+                                    </>
+                                )}
+
+                                {Object.entries(facetGroups).map(
+                                    ([facetId, values]: [string, FacetValue[]]) => (
+                                        <CommandGroup key={facetId} heading={values[0]?.facet.name}>
+                                            {values.map((facetValue: FacetValue) => (
+                                                <CommandItem
+                                                    key={facetValue.id}
+                                                    value={facetValue.id}
+                                                    onSelect={() => {
+                                                        onValueSelect(facetValue);
+                                                        setSearchTerm('');
+                                                        setBrowseMode(false);
+                                                        setOpen(false);
+                                                    }}
+                                                >
+                                                    {facetValue.name}
+                                                </CommandItem>
+                                            ))}
+                                        </CommandGroup>
+                                    ),
+                                )}
+                            </>
+                        )}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/form-field-wrapper.tsx

@@ -0,0 +1,111 @@
+import { OverriddenFormComponent } from '@/vdb/framework/form-engine/overridden-form-component.js';
+import { LocationWrapper } from '@/vdb/framework/layout-engine/location-wrapper.js';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form.js';
+
+/**
+ * @description
+ * The props for the FormFieldWrapper component.
+ *
+ * @docsCategory form-components
+ * @docsPage FormFieldWrapper
+ * @since 3.4.0
+ */
+export type FormFieldWrapperProps<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = React.ComponentProps<typeof FormField<TFieldValues, TName>> & {
+    /**
+     * @description
+     * The label for the form field.
+     */
+    label?: React.ReactNode;
+    /**
+     * @description
+     * The description for the form field.
+     */
+    description?: React.ReactNode;
+    /**
+     * @description
+     * Whether to render the form control.
+     * If false, the form control will not be rendered.
+     * This is useful when you want to render the form control in a custom way, e.g. for <Select/> components,
+     * where the FormControl needs to nested in the root component.
+     *
+     * @default true
+     */
+    renderFormControl?: boolean;
+};
+
+/**
+ * @description
+ * This is a wrapper that can be used in all forms to wrap the actual form control, and provide a label, description and error message.
+ * 
+ * Use this instead of the default Shadcn FormField (etc.) components, as it also supports
+ * overridden form components.
+ * 
+ * @example
+ * ```tsx
+ * <PageBlock column="main" blockId="main-form">
+ *     <DetailFormGrid>
+ *         <FormFieldWrapper
+ *             control={form.control}
+ *             name="description"
+ *             label={<Trans>Description</Trans>}
+ *             render={({ field }) => <Input {...field} />}
+ *         />
+ *         <FormFieldWrapper
+ *             control={form.control}
+ *             name="code"
+ *             label={<Trans>Code</Trans>}
+ *             render={({ field }) => <Input {...field} />}
+ *         />
+ *     </DetailFormGrid>
+ * </PageBlock>
+ * ```
+ * 
+ * If you are dealing with translatable fields, use the {@link TranslatableFormFieldWrapper} component instead.
+ *
+ * @docsCategory form-components
+ * @docsPage FormFieldWrapper
+ * @docsWeight 0
+ * @since 3.4.0
+ */
+export function FormFieldWrapper<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+    control,
+    name,
+    render,
+    label,
+    description,
+    renderFormControl = true,
+}: FormFieldWrapperProps<TFieldValues, TName>) {
+    return (
+        <LocationWrapper identifier={name}>
+            <FormField
+                control={control}
+                name={name}
+                render={renderArgs => (
+                    <FormItem>
+                        {label && <FormLabel>{label}</FormLabel>}
+                        {renderFormControl ? (
+                            <FormControl>
+                                <OverriddenFormComponent field={renderArgs.field} fieldName={name}>
+                                    {render(renderArgs)}
+                                </OverriddenFormComponent>
+                            </FormControl>
+                        ) : (
+                            <OverriddenFormComponent field={renderArgs.field} fieldName={name}>
+                                {render(renderArgs)}
+                            </OverriddenFormComponent>
+                        )}
+                        {description && <FormDescription>{description}</FormDescription>}
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+        </LocationWrapper>
+    );
+}

package/src/lib/components/shared/history-timeline/history-entry-date.tsx

@@ -0,0 +1,37 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+
+interface HistoryEntryDateProps {
+    date: string;
+    className?: string;
+}
+
+export function HistoryEntryDate({ date, className }: Readonly<HistoryEntryDateProps>) {
+    const { formatRelativeDate, formatDate } = useLocalFormat();
+
+    const formatFullDateTime = (dateString: string) => {
+        return formatDate(dateString, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+        });
+    };
+
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <div className={className}>
+                        {formatRelativeDate(date)}
+                    </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{formatFullDateTime(date)}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}

package/src/lib/components/shared/history-timeline/history-note-checkbox.tsx

@@ -0,0 +1,28 @@
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Trans } from '@lingui/react/macro';
+
+interface HistoryNoteCheckboxProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+
+export function HistoryNoteCheckbox({ value, onChange }: Readonly<HistoryNoteCheckboxProps>) {
+    return (
+        <div className="flex items-center space-x-2">
+            <Checkbox
+                id="note-private"
+                checked={value}
+                onCheckedChange={checked => onChange(checked as boolean)}
+            />
+            <label
+                htmlFor="note-private"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+                <Trans>Note is private</Trans>
+            </label>
+            <span className={value ? 'text-gray-500 text-xs' : 'text-green-600 text-xs'}>
+                {value ? <Trans>Visible to admins only</Trans> : <Trans>Visible to customer</Trans>}
+            </span>
+        </div>
+    );
+}

package/src/lib/components/shared/history-timeline/history-note-editor.tsx

@@ -0,0 +1,60 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+import { HistoryNoteCheckbox } from './history-note-checkbox.js';
+
+interface NoteEditorProps {
+    note: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onNoteChange: (noteId: string, note: string, isPrivate: boolean) => void;
+    noteId: string;
+    isPrivate: boolean;
+}
+
+export function HistoryNoteEditor({
+    open,
+    onOpenChange,
+    note,
+    onNoteChange,
+    noteId,
+    isPrivate,
+}: NoteEditorProps) {
+    const [value, setValue] = useState(note);
+    const [noteIsPrivate, setNoteIsPrivate] = useState(isPrivate);
+    const handleSave = () => {
+        onNoteChange(noteId, value, noteIsPrivate);
+        onOpenChange(false);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Edit Note</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>Update the note content or visibility</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <Textarea value={value} onChange={e => setValue(e.target.value)} />
+                <HistoryNoteCheckbox value={noteIsPrivate} onChange={setNoteIsPrivate} />
+                <DialogFooter>
+                    <Button onClick={() => handleSave()}>
+                        <Trans>Save</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}