make and models
This commit is contained in:
@@ -0,0 +1,284 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
@@ -17,6 +17,7 @@ import { BodyTypeInlineForm } from "./inline-forms/body-type-inline-form"
|
||||
import { FuelTypeInlineForm } from "./inline-forms/fuel-type-inline-form"
|
||||
import { TransmissionInlineForm } from "./inline-forms/transmission-inline-form"
|
||||
import { ColorInlineForm } from "./inline-forms/color-inline-form"
|
||||
import { RhfVehicleIdentityField } from "./rhf-vehicle-identity-field"
|
||||
import { toast } from "sonner"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { useResourceForm } from "@/shared/hooks/use-resource-form"
|
||||
@@ -156,14 +157,8 @@ export function VehicleForm({ resourceId, initialData, onSuccess }: VehicleFormP
|
||||
)}
|
||||
|
||||
<FieldGroup>
|
||||
{/* Vehicle identity */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<RhfTextField name="make" label="Make" placeholder="e.g. Toyota" required />
|
||||
<RhfTextField name="model" label="Model" placeholder="e.g. Camry" required />
|
||||
<RhfTextField name="year" label="Year" placeholder="e.g. 2024" required />
|
||||
</div>
|
||||
|
||||
<RhfTextField name="sub_model" label="Sub Model" placeholder="e.g. LE" />
|
||||
{/* Vehicle identity — cascading make/model/year/sub_model autocomplete */}
|
||||
<RhfVehicleIdentityField />
|
||||
|
||||
{/* Associations */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
|
||||
Reference in New Issue
Block a user