285 lines
9.7 KiB
TypeScript
285 lines
9.7 KiB
TypeScript
"use client"
|
|
|
|
import { useRef, useState, useEffect } from "react"
|
|
import { useFormContext, useController, useWatch } from "react-hook-form"
|
|
import { useQuery } from "@tanstack/react-query"
|
|
import { Loader2 } from "lucide-react"
|
|
import { useAuthApi } from "@/shared/useApi"
|
|
import { Field, FieldLabel, FieldError } from "@/shared/components/ui/field"
|
|
import {
|
|
Combobox,
|
|
ComboboxInput,
|
|
ComboboxContent,
|
|
ComboboxList,
|
|
ComboboxItem,
|
|
ComboboxEmpty,
|
|
} from "@/shared/components/ui/combobox"
|
|
import type { VehicleFormValues } from "./vehicle.schema"
|
|
|
|
// ── Helpers ──
|
|
|
|
function unique(values: (string | undefined)[]): string[] {
|
|
return [...new Set(values.filter((v): v is string => !!v))].sort()
|
|
}
|
|
|
|
// ── Internal combobox for a single free-text + suggestion field ──
|
|
|
|
type VehicleComboboxProps = {
|
|
value: string
|
|
onChange: (value: string) => void
|
|
onBlur?: () => void
|
|
options: string[]
|
|
loading?: boolean
|
|
placeholder: string
|
|
label: string
|
|
error?: string
|
|
required?: boolean
|
|
disabled?: boolean
|
|
}
|
|
|
|
function VehicleCombobox({
|
|
value,
|
|
onChange,
|
|
onBlur,
|
|
options,
|
|
loading,
|
|
placeholder,
|
|
label,
|
|
error,
|
|
required,
|
|
disabled,
|
|
}: VehicleComboboxProps) {
|
|
const anchorRef = useRef<HTMLDivElement>(null)
|
|
|
|
// Local state keeps the input text in sync even when the form value
|
|
// is changed externally (e.g., cascade reset or edit-mode population).
|
|
const [inputText, setInputText] = useState(value ?? "")
|
|
|
|
useEffect(() => {
|
|
setInputText(value ?? "")
|
|
}, [value])
|
|
|
|
// Client-side filtering of suggestions based on what's been typed
|
|
const filtered = options.filter((opt) =>
|
|
!inputText || opt.toLowerCase().includes(inputText.toLowerCase()),
|
|
)
|
|
|
|
return (
|
|
<Field data-invalid={!!error || undefined}>
|
|
<FieldLabel>
|
|
{label}
|
|
{required && <span className="text-destructive ms-0.5">*</span>}
|
|
</FieldLabel>
|
|
<div ref={anchorRef}>
|
|
<Combobox
|
|
value={inputText || null}
|
|
onValueChange={(val) => {
|
|
const str = val !== null ? String(val) : ""
|
|
setInputText(str)
|
|
onChange(str)
|
|
}}
|
|
disabled={disabled}
|
|
onInputValueChange={(text, { reason }) => {
|
|
if (reason === "input-change") {
|
|
setInputText(text)
|
|
onChange(text)
|
|
}
|
|
}}
|
|
>
|
|
<ComboboxInput
|
|
placeholder={placeholder}
|
|
showClear={!!inputText}
|
|
onBlur={onBlur}
|
|
aria-invalid={!!error || undefined}
|
|
/>
|
|
<ComboboxContent anchor={anchorRef}>
|
|
<ComboboxList>
|
|
{loading && (
|
|
<div className="flex items-center justify-center py-4">
|
|
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
{!loading &&
|
|
filtered.map((opt) => (
|
|
<ComboboxItem key={opt} value={opt}>
|
|
{opt}
|
|
</ComboboxItem>
|
|
))}
|
|
{!loading && filtered.length === 0 && (
|
|
<ComboboxEmpty>
|
|
{inputText
|
|
? `No suggestions for "${inputText}"`
|
|
: "Start typing to see suggestions"}
|
|
</ComboboxEmpty>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
</div>
|
|
{error && <FieldError>{error}</FieldError>}
|
|
</Field>
|
|
)
|
|
}
|
|
|
|
// ── Main composite field ──
|
|
|
|
/**
|
|
* Manages the four vehicle identity fields (make, model, year, sub_model) as
|
|
* a single coordinated component. Each field shows autocomplete suggestions
|
|
* fetched from the make-and-models API, filtered by the values of the
|
|
* preceding fields. All four fields accept free-text — the user is never
|
|
* forced to pick from the suggestion list.
|
|
*
|
|
* Cascade behaviour: changing make resets model → year → sub_model;
|
|
* changing model resets year → sub_model; changing year resets sub_model.
|
|
*/
|
|
export function RhfVehicleIdentityField() {
|
|
const api = useAuthApi()
|
|
const { control, setValue } = useFormContext<VehicleFormValues>()
|
|
|
|
// Read shop_type to pass as shop_type_id filter to the API
|
|
const shopType = useWatch({ control, name: "shop_type" })
|
|
const shopTypeId = shopType?.value
|
|
|
|
const makeCtrl = useController({ name: "make", control })
|
|
const modelCtrl = useController({ name: "model", control })
|
|
const yearCtrl = useController({ name: "year", control })
|
|
const subModelCtrl = useController({ name: "sub_model", control })
|
|
|
|
const makeValue = makeCtrl.field.value ?? ""
|
|
const modelValue = modelCtrl.field.value ?? ""
|
|
const yearValue = yearCtrl.field.value ?? ""
|
|
|
|
// ── Fetch all records once (large per_page), then derive unique suggestion
|
|
// lists client-side so we don't invent API endpoints. ──
|
|
|
|
type MakeAndModelRecord = {
|
|
id?: number
|
|
shop_type_id?: number
|
|
make?: string
|
|
model?: string
|
|
year?: string
|
|
sub_model?: string
|
|
}
|
|
|
|
function extractRecords(response: unknown): MakeAndModelRecord[] {
|
|
const obj = response as any
|
|
if (Array.isArray(obj?.data)) return obj.data
|
|
if (Array.isArray(obj?.data?.data)) return obj.data.data
|
|
if (Array.isArray(obj)) return obj
|
|
return []
|
|
}
|
|
|
|
const { data: allRecords = [], isLoading: recordsLoading } = useQuery<MakeAndModelRecord[]>({
|
|
queryKey: ["make-and-models-all", shopTypeId],
|
|
queryFn: async () => {
|
|
const res = await api.makeAndModels.list({ per_page: 9999, ...(shopTypeId ? { shop_type_id: shopTypeId } : {}) })
|
|
return extractRecords(res)
|
|
},
|
|
staleTime: 5 * 60 * 1000,
|
|
})
|
|
|
|
// Derive unique sorted lists from the full record set, filtered by upstream selections.
|
|
const makes = unique(allRecords.map((r) => r.make))
|
|
|
|
const models = unique(
|
|
allRecords
|
|
.filter((r) => !makeValue || r.make === makeValue)
|
|
.map((r) => r.model),
|
|
)
|
|
|
|
const years = unique(
|
|
allRecords
|
|
.filter((r) => (!makeValue || r.make === makeValue) && (!modelValue || r.model === modelValue))
|
|
.map((r) => r.year),
|
|
)
|
|
|
|
const subModels = unique(
|
|
allRecords
|
|
.filter(
|
|
(r) =>
|
|
(!makeValue || r.make === makeValue) &&
|
|
(!modelValue || r.model === modelValue) &&
|
|
(!yearValue || r.year === yearValue),
|
|
)
|
|
.map((r) => r.sub_model),
|
|
)
|
|
|
|
const makesLoading = recordsLoading
|
|
const modelsLoading = false
|
|
const yearsLoading = false
|
|
const subModelsLoading = false
|
|
|
|
// ── Cascading onChange handlers ──
|
|
|
|
function handleMakeChange(val: string) {
|
|
makeCtrl.field.onChange(val)
|
|
// Reset all downstream fields whenever make changes
|
|
setValue("model", "")
|
|
setValue("year", "")
|
|
setValue("sub_model", "")
|
|
}
|
|
|
|
function handleModelChange(val: string) {
|
|
modelCtrl.field.onChange(val)
|
|
setValue("year", "")
|
|
setValue("sub_model", "")
|
|
}
|
|
|
|
function handleYearChange(val: string) {
|
|
yearCtrl.field.onChange(val)
|
|
setValue("sub_model", "")
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<VehicleCombobox
|
|
label="Make"
|
|
placeholder="e.g. Toyota"
|
|
required
|
|
value={makeValue}
|
|
onChange={handleMakeChange}
|
|
onBlur={makeCtrl.field.onBlur}
|
|
options={makes}
|
|
loading={makesLoading}
|
|
error={makeCtrl.fieldState.error?.message}
|
|
/>
|
|
<VehicleCombobox
|
|
label="Model"
|
|
placeholder="e.g. Camry"
|
|
required
|
|
value={modelValue}
|
|
onChange={handleModelChange}
|
|
onBlur={modelCtrl.field.onBlur}
|
|
options={models}
|
|
loading={modelsLoading}
|
|
error={modelCtrl.fieldState.error?.message}
|
|
/>
|
|
<VehicleCombobox
|
|
label="Year"
|
|
placeholder="e.g. 2024"
|
|
required
|
|
value={yearValue}
|
|
onChange={handleYearChange}
|
|
onBlur={yearCtrl.field.onBlur}
|
|
options={years}
|
|
loading={yearsLoading}
|
|
error={yearCtrl.fieldState.error?.message}
|
|
/>
|
|
</div>
|
|
|
|
<VehicleCombobox
|
|
label="Sub Model"
|
|
placeholder="e.g. LE"
|
|
value={subModelCtrl.field.value ?? ""}
|
|
onChange={(val) => subModelCtrl.field.onChange(val)}
|
|
onBlur={subModelCtrl.field.onBlur}
|
|
options={subModels}
|
|
loading={subModelsLoading}
|
|
error={subModelCtrl.fieldState.error?.message}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|