115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { Check, ChevronsUpDown } from 'lucide-react';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import {
|
||
|
|
Command,
|
||
|
|
CommandEmpty,
|
||
|
|
CommandGroup,
|
||
|
|
CommandInput,
|
||
|
|
CommandItem,
|
||
|
|
CommandList,
|
||
|
|
} from '@/components/ui/command';
|
||
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||
|
|
import { useDebounce } from '@/hooks/use-debounce';
|
||
|
|
import { apiFetch } from '@/lib/api/client';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface YachtOption {
|
||
|
|
id: string;
|
||
|
|
name: string;
|
||
|
|
hullNumber?: string | null;
|
||
|
|
registration?: string | null;
|
||
|
|
currentOwnerType?: 'client' | 'company';
|
||
|
|
currentOwnerId?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface YachtPickerProps {
|
||
|
|
value: string | null;
|
||
|
|
onChange: (yachtId: string | null) => void;
|
||
|
|
/** Optional filter to only show yachts owned by the given client or company. */
|
||
|
|
ownerFilter?: { type: 'client' | 'company'; id: string };
|
||
|
|
placeholder?: string;
|
||
|
|
disabled?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function YachtPicker({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
ownerFilter,
|
||
|
|
placeholder = 'Select yacht...',
|
||
|
|
disabled,
|
||
|
|
}: YachtPickerProps) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const [search, setSearch] = useState('');
|
||
|
|
const debounced = useDebounce(search, 300);
|
||
|
|
|
||
|
|
const { data } = useQuery<{ data: YachtOption[] }>({
|
||
|
|
queryKey: ['yacht-picker', debounced],
|
||
|
|
queryFn: () => apiFetch(`/api/v1/yachts/autocomplete?q=${encodeURIComponent(debounced)}`),
|
||
|
|
enabled: open,
|
||
|
|
});
|
||
|
|
|
||
|
|
const rawOptions = data?.data ?? [];
|
||
|
|
const options = ownerFilter
|
||
|
|
? rawOptions.filter(
|
||
|
|
(y) => y.currentOwnerType === ownerFilter.type && y.currentOwnerId === ownerFilter.id,
|
||
|
|
)
|
||
|
|
: rawOptions;
|
||
|
|
|
||
|
|
const selectedLabel = (() => {
|
||
|
|
if (!value) return placeholder;
|
||
|
|
const match = rawOptions.find((o) => o.id === value);
|
||
|
|
return match?.name ?? `Yacht ${value.slice(0, 8)}`;
|
||
|
|
})();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover open={open} onOpenChange={setOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
disabled={disabled}
|
||
|
|
className={cn('w-full justify-between', !value && 'text-muted-foreground')}
|
||
|
|
>
|
||
|
|
<span className="truncate">{selectedLabel}</span>
|
||
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-[320px] p-0" align="start">
|
||
|
|
<Command shouldFilter={false}>
|
||
|
|
<CommandInput placeholder="Search yachts…" value={search} onValueChange={setSearch} />
|
||
|
|
<CommandList>
|
||
|
|
<CommandEmpty>No yachts found.</CommandEmpty>
|
||
|
|
<CommandGroup>
|
||
|
|
{options.map((y) => (
|
||
|
|
<CommandItem
|
||
|
|
key={y.id}
|
||
|
|
value={y.id}
|
||
|
|
onSelect={() => {
|
||
|
|
onChange(y.id);
|
||
|
|
setOpen(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Check
|
||
|
|
className={cn('mr-2 h-4 w-4', value === y.id ? 'opacity-100' : 'opacity-0')}
|
||
|
|
/>
|
||
|
|
<span>
|
||
|
|
{y.name}
|
||
|
|
{y.hullNumber ? (
|
||
|
|
<span className="ml-2 text-xs opacity-60">{y.hullNumber}</span>
|
||
|
|
) : null}
|
||
|
|
</span>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
}
|