mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 18:11:12 -05:00
feat: Implement comprehensive plan
This commit is contained in:
gpt-engineer-app[bot]
203
src/components/admin/RideModelForm.tsx
Normal file
203
src/components/admin/RideModelForm.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Layers, Save, X } from 'lucide-react';
|
||||
|
||||
const rideModelSchema = z.object({
|
||||
name: z.string().min(1, 'Name is required'),
|
||||
slug: z.string().min(1, 'Slug is required'),
|
||||
category: z.string().min(1, 'Category is required'),
|
||||
ride_type: z.string().min(1, 'Ride type is required'),
|
||||
description: z.string().optional(),
|
||||
technical_specs: z.string().optional()
|
||||
});
|
||||
|
||||
type RideModelFormData = z.infer<typeof rideModelSchema>;
|
||||
|
||||
interface RideModelFormProps {
|
||||
manufacturerName: string;
|
||||
manufacturerId?: string;
|
||||
onSubmit: (data: RideModelFormData) => void;
|
||||
onCancel: () => void;
|
||||
initialData?: Partial<RideModelFormData>;
|
||||
}
|
||||
|
||||
const categories = [
|
||||
'roller_coaster',
|
||||
'flat_ride',
|
||||
'water_ride',
|
||||
'dark_ride',
|
||||
'kiddie_ride',
|
||||
'transportation'
|
||||
];
|
||||
|
||||
export function RideModelForm({
|
||||
manufacturerName,
|
||||
manufacturerId,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
initialData
|
||||
}: RideModelFormProps) {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors }
|
||||
} = useForm<RideModelFormData>({
|
||||
resolver: zodResolver(rideModelSchema),
|
||||
defaultValues: {
|
||||
name: initialData?.name || '',
|
||||
slug: initialData?.slug || '',
|
||||
category: initialData?.category || '',
|
||||
ride_type: initialData?.ride_type || '',
|
||||
description: initialData?.description || '',
|
||||
technical_specs: initialData?.technical_specs || ''
|
||||
}
|
||||
});
|
||||
|
||||
const generateSlug = (name: string) => {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.trim();
|
||||
};
|
||||
|
||||
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const name = e.target.value;
|
||||
const slug = generateSlug(name);
|
||||
setValue('slug', slug);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Layers className="w-5 h-5" />
|
||||
{initialData ? 'Edit Ride Model' : 'Create New Ride Model'}
|
||||
</CardTitle>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-sm text-muted-foreground">For manufacturer:</span>
|
||||
<Badge variant="secondary">{manufacturerName}</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Basic Information */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Model Name *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
{...register('name')}
|
||||
onChange={(e) => {
|
||||
register('name').onChange(e);
|
||||
handleNameChange(e);
|
||||
}}
|
||||
placeholder="e.g. Mega Coaster, Sky Screamer"
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-sm text-destructive">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="slug">URL Slug *</Label>
|
||||
<Input
|
||||
id="slug"
|
||||
{...register('slug')}
|
||||
placeholder="model-slug"
|
||||
/>
|
||||
{errors.slug && (
|
||||
<p className="text-sm text-destructive">{errors.slug.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category and Type */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>Category *</Label>
|
||||
<Select
|
||||
onValueChange={(value) => setValue('category', value)}
|
||||
defaultValue={initialData?.category}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select category" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((category) => (
|
||||
<SelectItem key={category} value={category}>
|
||||
{category.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.category && (
|
||||
<p className="text-sm text-destructive">{errors.category.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="ride_type">Ride Type *</Label>
|
||||
<Input
|
||||
id="ride_type"
|
||||
{...register('ride_type')}
|
||||
placeholder="e.g. Inverted, Wing Coaster, Pendulum"
|
||||
/>
|
||||
{errors.ride_type && (
|
||||
<p className="text-sm text-destructive">{errors.ride_type.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
{...register('description')}
|
||||
placeholder="Describe the ride model features and characteristics..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Technical Specs */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="technical_specs">Technical Specifications</Label>
|
||||
<Textarea
|
||||
id="technical_specs"
|
||||
{...register('technical_specs')}
|
||||
placeholder="Enter technical specifications (e.g., track length, inversions, typical speed range)..."
|
||||
rows={3}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
General specifications for this model that apply to all installations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<Button type="button" variant="outline" onClick={onCancel}>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Save Model
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user