256 lines
10 KiB
TypeScript
256 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { useRef, useState } from "react"
|
|
import { useFormContext, useController, type FieldValues, type FieldPath } from "react-hook-form"
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query"
|
|
import { Car, Loader2, PlusIcon } from "lucide-react"
|
|
import { useAuthApi } from "@/shared/useApi"
|
|
import { VEHICLE_ROUTES } from "@garage/api"
|
|
import { Field, FieldLabel, FieldError, FieldDescription } from "@/shared/components/ui/field"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
|
|
import { ScrollArea } from "@/shared/components/ui/scroll-area"
|
|
import {
|
|
Combobox,
|
|
ComboboxInput,
|
|
ComboboxContent,
|
|
ComboboxList,
|
|
ComboboxItem,
|
|
ComboboxEmpty,
|
|
} from "@/shared/components/ui/combobox"
|
|
import Image from "next/image"
|
|
import { VehicleForm } from "./vehicle-form"
|
|
|
|
// ── Vehicle option type (enriched for display) ──
|
|
|
|
type VehicleOption = {
|
|
value: string
|
|
label: string
|
|
make?: string
|
|
model?: string
|
|
year?: string
|
|
sub_model?: string
|
|
license_plate?: string
|
|
image_url?: string
|
|
mileage?: string
|
|
}
|
|
|
|
function buildVehicleOption(item: any): VehicleOption {
|
|
const label =
|
|
[item.year, item.make, item.model].filter(Boolean).join(" ") ||
|
|
`Vehicle #${item.id}`
|
|
return {
|
|
value: String(item.id),
|
|
label,
|
|
make: item.make,
|
|
model: item.model,
|
|
year: item.year,
|
|
sub_model: item.sub_model,
|
|
license_plate: item.license_plate,
|
|
image_url: item.image_url,
|
|
mileage: item.mileage,
|
|
}
|
|
}
|
|
|
|
function extractItems(response: unknown): any[] {
|
|
if (Array.isArray(response)) return response
|
|
const obj = response as any
|
|
if (Array.isArray(obj?.data?.data)) return obj.data.data
|
|
if (Array.isArray(obj?.data)) return obj.data
|
|
return []
|
|
}
|
|
|
|
// ── Props ──
|
|
|
|
export type RhfVehicleSelectFieldProps<
|
|
TValues extends FieldValues,
|
|
TName extends FieldPath<TValues>,
|
|
> = {
|
|
name: TName
|
|
label?: string
|
|
description?: string
|
|
required?: boolean
|
|
disabled?: boolean
|
|
placeholder?: string
|
|
}
|
|
|
|
// ── Component ──
|
|
|
|
export function RhfVehicleSelectField<
|
|
TValues extends FieldValues,
|
|
TName extends FieldPath<TValues>,
|
|
>({
|
|
name,
|
|
label = "Vehicle",
|
|
description,
|
|
required,
|
|
disabled,
|
|
placeholder = "Search by make, model, year, or plate...",
|
|
}: RhfVehicleSelectFieldProps<TValues, TName>) {
|
|
const api = useAuthApi()
|
|
const anchorRef = useRef<HTMLDivElement>(null)
|
|
const [inputValue, setInputValue] = useState("")
|
|
const [isCreateOpen, setIsCreateOpen] = useState(false)
|
|
const queryClient = useQueryClient()
|
|
|
|
const { control } = useFormContext<TValues>()
|
|
const {
|
|
field,
|
|
fieldState: { error },
|
|
} = useController({ name, control, disabled })
|
|
|
|
const { data: options = [], isLoading } = useQuery<VehicleOption[]>({
|
|
queryKey: [VEHICLE_ROUTES.INDEX, "vehicle-select"],
|
|
queryFn: async () => {
|
|
const res = await api.vehicles.list()
|
|
return extractItems(res).map(buildVehicleOption)
|
|
},
|
|
staleTime: 5 * 60 * 1000,
|
|
})
|
|
|
|
const filtered = inputValue
|
|
? options.filter((v) =>
|
|
[v.year, v.make, v.model, v.sub_model, v.license_plate]
|
|
.filter(Boolean)
|
|
.join(" ")
|
|
.toLowerCase()
|
|
.includes(inputValue.toLowerCase()),
|
|
)
|
|
: options
|
|
|
|
const handleCreateSuccess = (data?: any) => {
|
|
const item = data?.data ?? data
|
|
if (item?.id) {
|
|
field.onChange(buildVehicleOption(item))
|
|
}
|
|
queryClient.invalidateQueries({ queryKey: [VEHICLE_ROUTES.INDEX, "vehicle-select"] })
|
|
setIsCreateOpen(false)
|
|
}
|
|
|
|
const combobox = (
|
|
<div ref={anchorRef}>
|
|
<Combobox
|
|
value={field.value}
|
|
onValueChange={(val: VehicleOption | VehicleOption[] | null) => {
|
|
const single = Array.isArray(val) ? val[0] ?? null : val
|
|
// Store only { value, label } to stay compatible with relationFieldSchema
|
|
field.onChange(
|
|
single ? { value: single.value, label: single.label } : null,
|
|
)
|
|
}}
|
|
disabled={field.disabled}
|
|
onInputValueChange={(val: string, { reason }: { reason: string }) => {
|
|
if (reason === "input-change") setInputValue(val)
|
|
}}
|
|
// Compare by id string so the selected item highlights correctly
|
|
// even when the stored form value has fewer fields than VehicleOption
|
|
isItemEqualToValue={(item: VehicleOption, val: any) =>
|
|
item?.value === val?.value
|
|
}
|
|
>
|
|
<ComboboxInput
|
|
placeholder={placeholder}
|
|
showClear={!!field.value}
|
|
onBlur={field.onBlur}
|
|
aria-invalid={!!error || undefined}
|
|
/>
|
|
<ComboboxContent anchor={anchorRef}>
|
|
<ComboboxList>
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center py-6">
|
|
<Loader2 className="size-4 animate-spin text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
|
|
{!isLoading &&
|
|
filtered.map((opt) => (
|
|
<ComboboxItem key={opt.value} value={opt}>
|
|
<div className="flex items-center gap-3 py-0.5 w-full min-w-0">
|
|
{/* Thumbnail */}
|
|
{opt.image_url ? (
|
|
<Image
|
|
height={60}
|
|
width={60}
|
|
src={opt.image_url}
|
|
alt=""
|
|
className="size-9 shrink-0 rounded-md object-cover border border-border"
|
|
/>
|
|
) : (
|
|
<div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground border border-border">
|
|
<Car className="size-4" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Identity */}
|
|
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
|
|
<span className="truncate text-sm font-medium leading-none">
|
|
{[opt.year, opt.make, opt.model]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
{opt.sub_model && (
|
|
<span className="ml-1 font-normal text-muted-foreground">
|
|
{opt.sub_model}
|
|
</span>
|
|
)}
|
|
</span>
|
|
{opt.license_plate && (
|
|
<span className="font-mono text-xs text-muted-foreground">
|
|
{opt.license_plate}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</ComboboxItem>
|
|
))}
|
|
|
|
{!isLoading && filtered.length === 0 && (
|
|
<ComboboxEmpty>No vehicles found</ComboboxEmpty>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<Field data-invalid={!!error?.message || undefined}>
|
|
{label && (
|
|
<div className="flex items-center justify-between">
|
|
<FieldLabel>
|
|
{label}
|
|
{required && <span className="text-destructive ms-0.5">*</span>}
|
|
</FieldLabel>
|
|
<Button
|
|
type="button"
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-5 w-5"
|
|
onClick={() => setIsCreateOpen(true)}
|
|
title={`Add new ${label}`}
|
|
>
|
|
<PlusIcon className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
{combobox}
|
|
{description && <FieldDescription>{description}</FieldDescription>}
|
|
{error?.message && <FieldError>{error.message}</FieldError>}
|
|
|
|
<Dialog open={isCreateOpen} onOpenChange={(v) => { if (!v) setIsCreateOpen(false) }}>
|
|
<DialogContent className="min-w-xl">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl font-bold">
|
|
Add {label}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<ScrollArea className="max-h-[80vh] px-4">
|
|
<VehicleForm onSuccess={handleCreateSuccess} />
|
|
</ScrollArea>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Field>
|
|
)
|
|
}
|