import { Head, Link, useForm } from '@inertiajs/react'; import { AddResourceLink } from '@/components/admin/add-resource-link'; import { Switch } from '@/components/ui/switch'; import { AdminLayout } from '@/layouts/admin-layout'; type Option = { id: number; name: string; }; type VehicleEngineData = { id: number; manufacturer_id: number | null; fuel_type_id: number; name: string | null; slug: string; code: string; displacement_cc: number | null; horsepower: number | null; torque_nm: number | null; cylinders: number | null; production_year_from: number | null; production_year_to: number | null; notes: string | null; is_active: boolean; sort_order: number; }; type VehicleEngineEditProps = { engine: VehicleEngineData; manufacturerOptions: Option[]; fuelTypeOptions: Option[]; }; type VehicleEngineForm = { manufacturer_id: string; fuel_type_id: string; name: string; slug: string; code: string; displacement_cc: string; horsepower: string; torque_nm: string; cylinders: string; production_year_from: string; production_year_to: string; notes: string; is_active: boolean; sort_order: string; }; export default function VehicleEngineEdit({ engine, manufacturerOptions, fuelTypeOptions, }: VehicleEngineEditProps) { const form = useForm({ manufacturer_id: engine.manufacturer_id ? String(engine.manufacturer_id) : '', fuel_type_id: String(engine.fuel_type_id), name: engine.name || '', slug: engine.slug, code: engine.code, displacement_cc: engine.displacement_cc !== null ? String(engine.displacement_cc) : '', horsepower: engine.horsepower !== null ? String(engine.horsepower) : '', torque_nm: engine.torque_nm !== null ? String(engine.torque_nm) : '', cylinders: engine.cylinders !== null ? String(engine.cylinders) : '', production_year_from: engine.production_year_from !== null ? String(engine.production_year_from) : '', production_year_to: engine.production_year_to !== null ? String(engine.production_year_to) : '', notes: engine.notes || '', is_active: engine.is_active, sort_order: String(engine.sort_order), }); const submit = (event: React.FormEvent) => { event.preventDefault(); form.transform((data) => ({ ...data, manufacturer_id: data.manufacturer_id === '' ? null : Number(data.manufacturer_id), fuel_type_id: data.fuel_type_id === '' ? null : Number(data.fuel_type_id), displacement_cc: data.displacement_cc === '' ? null : Number(data.displacement_cc), horsepower: data.horsepower === '' ? null : Number(data.horsepower), torque_nm: data.torque_nm === '' ? null : Number(data.torque_nm), cylinders: data.cylinders === '' ? null : Number(data.cylinders), production_year_from: data.production_year_from === '' ? null : Number(data.production_year_from), production_year_to: data.production_year_to === '' ? null : Number(data.production_year_to), notes: data.notes === '' ? null : data.notes, sort_order: data.sort_order === '' ? 0 : Number(data.sort_order), })); form.put(`/admin/vehicle-engines/${engine.id}`); }; return (

Edit Vehicle Engine

Back to list
Missing manufacturer? Missing fuel type? form.setData('name', event.target.value) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" placeholder="Optional" />
form.setData('slug', event.target.value) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" /> form.setData('code', event.target.value) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" />
form.setData( 'displacement_cc', event.target.value, ) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" /> form.setData( 'horsepower', event.target.value, ) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" /> form.setData( 'torque_nm', event.target.value, ) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" /> form.setData( 'cylinders', event.target.value, ) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" />
form.setData( 'production_year_from', event.target.value, ) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" /> form.setData( 'production_year_to', event.target.value, ) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" /> form.setData( 'sort_order', event.target.value, ) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" />