feat(ui): add owner-picker and yacht-picker components
Task 5.1 of the data-model refactor. Adds: - OwnerPicker: polymorphic combobox that toggles between client and company autocomplete via a type switch inside the popover. Uses /api/v1/clients/options (search=) and /api/v1/companies/autocomplete (q=). - YachtPicker: yacht autocomplete against /api/v1/yachts/autocomplete with optional ownerFilter prop to scope to a given client/company. Both components use TanStack Query with debounced (300ms) input via the existing use-debounce hook, and apiFetch which attaches X-Port-Id. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
164
src/components/shared/owner-picker.tsx
Normal file
164
src/components/shared/owner-picker.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, 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';
|
||||
|
||||
export type OwnerRef = { type: 'client' | 'company'; id: string };
|
||||
|
||||
interface OwnerOption {
|
||||
id: string;
|
||||
name?: string | null;
|
||||
fullName?: string | null;
|
||||
}
|
||||
|
||||
interface OwnerPickerProps {
|
||||
value: OwnerRef | null;
|
||||
onChange: (value: OwnerRef | null) => void;
|
||||
/** Optional placeholder when empty */
|
||||
placeholder?: string;
|
||||
/** Disable the component */
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function OwnerPicker({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Select owner...',
|
||||
disabled,
|
||||
}: OwnerPickerProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [type, setType] = useState<'client' | 'company'>(value?.type ?? 'client');
|
||||
const [search, setSearch] = useState('');
|
||||
const debounced = useDebounce(search, 300);
|
||||
|
||||
// Keep local `type` in sync if value.type changes externally.
|
||||
useEffect(() => {
|
||||
if (value?.type) setType(value.type);
|
||||
}, [value?.type]);
|
||||
|
||||
const endpoint =
|
||||
type === 'client'
|
||||
? `/api/v1/clients/options?search=${encodeURIComponent(debounced)}`
|
||||
: `/api/v1/companies/autocomplete?q=${encodeURIComponent(debounced)}`;
|
||||
|
||||
const { data } = useQuery<{ data: OwnerOption[] }>({
|
||||
queryKey: ['owner-picker', type, debounced],
|
||||
queryFn: () => apiFetch(endpoint),
|
||||
enabled: open,
|
||||
});
|
||||
|
||||
const options = data?.data ?? [];
|
||||
|
||||
// Selected display label — show entity's name from current options if
|
||||
// available, otherwise a truncated id fallback.
|
||||
const selectedLabel = (() => {
|
||||
if (!value) return placeholder;
|
||||
const match = options.find((o) => o.id === value.id);
|
||||
if (match) {
|
||||
return type === 'client'
|
||||
? (match.fullName ?? '(unnamed client)')
|
||||
: (match.name ?? '(unnamed company)');
|
||||
}
|
||||
return value.type === 'client'
|
||||
? `Client ${value.id.slice(0, 8)}`
|
||||
: `Company ${value.id.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">
|
||||
{value && (
|
||||
<span className="mr-2 text-xs opacity-60">
|
||||
{value.type === 'client' ? 'Client:' : 'Company:'}
|
||||
</span>
|
||||
)}
|
||||
{selectedLabel}
|
||||
</span>
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[320px] p-0" align="start">
|
||||
{/* Type toggle */}
|
||||
<div className="flex border-b">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setType('client');
|
||||
setSearch('');
|
||||
}}
|
||||
className={cn(
|
||||
'flex-1 px-3 py-2 text-xs',
|
||||
type === 'client' ? 'bg-accent font-medium' : 'hover:bg-accent/50',
|
||||
)}
|
||||
>
|
||||
Client
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setType('company');
|
||||
setSearch('');
|
||||
}}
|
||||
className={cn(
|
||||
'flex-1 px-3 py-2 text-xs',
|
||||
type === 'company' ? 'bg-accent font-medium' : 'hover:bg-accent/50',
|
||||
)}
|
||||
>
|
||||
Company
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Command shouldFilter={false}>
|
||||
<CommandInput placeholder={`Search ${type}s…`} value={search} onValueChange={setSearch} />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{options.map((opt) => {
|
||||
const label =
|
||||
type === 'client' ? (opt.fullName ?? '(unnamed)') : (opt.name ?? '(unnamed)');
|
||||
const isSelected = value?.id === opt.id && value?.type === type;
|
||||
return (
|
||||
<CommandItem
|
||||
key={opt.id}
|
||||
value={opt.id}
|
||||
onSelect={() => {
|
||||
onChange({ type, id: opt.id });
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn('mr-2 h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')}
|
||||
/>
|
||||
{label}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
114
src/components/yachts/yacht-picker.tsx
Normal file
114
src/components/yachts/yacht-picker.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user