mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 09:11:12 -05:00
692 lines
26 KiB
TypeScript
692 lines
26 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import * as z from 'zod';
|
|
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
|
import { validateSubmissionHandler } from '@/lib/entityFormValidation';
|
|
import { getErrorMessage } from '@/lib/errorHandler';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
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 { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { DatePicker } from '@/components/ui/date-picker';
|
|
import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
|
|
import { SlugField } from '@/components/ui/slug-field';
|
|
import { toast } from '@/hooks/use-toast';
|
|
import { handleError } from '@/lib/errorHandler';
|
|
import { MapPin, Save, X, Plus } from 'lucide-react';
|
|
import { toDateOnly, parseDateOnly } from '@/lib/dateUtils';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Combobox } from '@/components/ui/combobox';
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { useOperators, usePropertyOwners } from '@/hooks/useAutocompleteData';
|
|
import { useUserRole } from '@/hooks/useUserRole';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import type { TempCompanyData } from '@/types/company';
|
|
import { LocationSearch } from './LocationSearch';
|
|
import { OperatorForm } from './OperatorForm';
|
|
import { PropertyOwnerForm } from './PropertyOwnerForm';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
|
|
const parkSchema = z.object({
|
|
name: z.string().min(1, 'Park name is required'),
|
|
slug: z.string().min(1, 'Slug is required'), // Auto-generated, validated on submit
|
|
description: z.string().optional(),
|
|
park_type: z.string().min(1, 'Park type is required'),
|
|
status: z.string().min(1, 'Status is required'),
|
|
opening_date: z.string().optional(),
|
|
opening_date_precision: z.enum(['day', 'month', 'year']).optional(),
|
|
closing_date: z.string().optional(),
|
|
closing_date_precision: z.enum(['day', 'month', 'year']).optional(),
|
|
location: z.object({
|
|
name: z.string(),
|
|
city: z.string().optional(),
|
|
state_province: z.string().optional(),
|
|
country: z.string(),
|
|
postal_code: z.string().optional(),
|
|
latitude: z.number(),
|
|
longitude: z.number(),
|
|
timezone: z.string().optional(),
|
|
display_name: z.string(),
|
|
}).optional(),
|
|
location_id: z.string().uuid().optional(),
|
|
website_url: z.string().url().optional().or(z.literal('')),
|
|
phone: z.string().optional(),
|
|
email: z.string().email().optional().or(z.literal('')),
|
|
operator_id: z.string().uuid().optional().or(z.literal('')).transform(val => val || undefined),
|
|
property_owner_id: z.string().uuid().optional().or(z.literal('')).transform(val => val || undefined),
|
|
source_url: z.string().url().optional().or(z.literal('')),
|
|
submission_notes: z.string().max(1000).optional().or(z.literal('')),
|
|
images: z.object({
|
|
uploaded: z.array(z.object({
|
|
url: z.string(),
|
|
cloudflare_id: z.string().optional(),
|
|
file: z.any().optional(),
|
|
isLocal: z.boolean().optional(),
|
|
caption: z.string().optional(),
|
|
})),
|
|
banner_assignment: z.number().nullable().optional(),
|
|
card_assignment: z.number().nullable().optional(),
|
|
}).optional()
|
|
});
|
|
|
|
type ParkFormData = z.infer<typeof parkSchema>;
|
|
|
|
interface ParkFormProps {
|
|
onSubmit: (data: ParkFormData & {
|
|
operator_id?: string;
|
|
property_owner_id?: string;
|
|
_compositeSubmission?: import('@/types/composite-submission').ParkCompositeSubmission;
|
|
}) => Promise<void>;
|
|
onCancel?: () => void;
|
|
initialData?: Partial<ParkFormData & {
|
|
id?: string;
|
|
operator_id?: string;
|
|
property_owner_id?: string;
|
|
banner_image_url?: string;
|
|
card_image_url?: string;
|
|
}>;
|
|
isEditing?: boolean;
|
|
}
|
|
|
|
const parkTypes = [
|
|
'Theme Park',
|
|
'Amusement Park',
|
|
'Water Park',
|
|
'Family Entertainment Center',
|
|
'Adventure Park',
|
|
'Safari Park',
|
|
'Carnival',
|
|
'Fair'
|
|
];
|
|
|
|
const statusOptions = [
|
|
'Operating',
|
|
'Closed Temporarily',
|
|
'Closed Permanently',
|
|
'Under Construction',
|
|
'Planned',
|
|
'Abandoned'
|
|
];
|
|
|
|
// Status mappings
|
|
const STATUS_DISPLAY_TO_DB: Record<string, string> = {
|
|
'Operating': 'operating',
|
|
'Closed Temporarily': 'closed_temporarily',
|
|
'Closed Permanently': 'closed_permanently',
|
|
'Under Construction': 'under_construction',
|
|
'Planned': 'planned',
|
|
'Abandoned': 'abandoned'
|
|
};
|
|
|
|
const STATUS_DB_TO_DISPLAY: Record<string, string> = {
|
|
'operating': 'Operating',
|
|
'closed_temporarily': 'Closed Temporarily',
|
|
'closed_permanently': 'Closed Permanently',
|
|
'under_construction': 'Under Construction',
|
|
'planned': 'Planned',
|
|
'abandoned': 'Abandoned'
|
|
};
|
|
|
|
export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }: ParkFormProps) {
|
|
const { isModerator } = useUserRole();
|
|
|
|
// Validate that onSubmit uses submission helpers (dev mode only)
|
|
useEffect(() => {
|
|
validateSubmissionHandler(onSubmit, 'park');
|
|
}, [onSubmit]);
|
|
|
|
const { user } = useAuth();
|
|
|
|
// Operator state
|
|
const [selectedOperatorId, setSelectedOperatorId] = useState<string>(initialData?.operator_id || '');
|
|
const [tempNewOperator, setTempNewOperator] = useState<TempCompanyData | null>(null);
|
|
const [isOperatorModalOpen, setIsOperatorModalOpen] = useState(false);
|
|
|
|
// Property Owner state
|
|
const [selectedPropertyOwnerId, setSelectedPropertyOwnerId] = useState<string>(initialData?.property_owner_id || '');
|
|
const [tempNewPropertyOwner, setTempNewPropertyOwner] = useState<TempCompanyData | null>(null);
|
|
const [isPropertyOwnerModalOpen, setIsPropertyOwnerModalOpen] = useState(false);
|
|
|
|
// Operator is Owner checkbox state
|
|
const [operatorIsOwner, setOperatorIsOwner] = useState<boolean>(
|
|
!!(initialData?.operator_id && initialData?.property_owner_id &&
|
|
initialData?.operator_id === initialData?.property_owner_id)
|
|
);
|
|
|
|
// Fetch data
|
|
const { operators, loading: operatorsLoading } = useOperators();
|
|
const { propertyOwners, loading: ownersLoading } = usePropertyOwners();
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
formState: { errors }
|
|
} = useForm<ParkFormData>({
|
|
resolver: zodResolver(entitySchemas.park),
|
|
defaultValues: {
|
|
name: initialData?.name || '',
|
|
slug: initialData?.slug || '',
|
|
description: initialData?.description || '',
|
|
park_type: initialData?.park_type || '',
|
|
status: initialData?.status || 'operating' as const, // Store DB value
|
|
opening_date: initialData?.opening_date || '',
|
|
closing_date: initialData?.closing_date || '',
|
|
location_id: initialData?.location_id || undefined,
|
|
website_url: initialData?.website_url || '',
|
|
phone: initialData?.phone || '',
|
|
email: initialData?.email || '',
|
|
operator_id: initialData?.operator_id || undefined,
|
|
property_owner_id: initialData?.property_owner_id || undefined,
|
|
source_url: initialData?.source_url || '',
|
|
submission_notes: initialData?.submission_notes || '',
|
|
images: { uploaded: [] }
|
|
}
|
|
});
|
|
|
|
// Sync property owner with operator when checkbox is enabled
|
|
useEffect(() => {
|
|
if (operatorIsOwner && selectedOperatorId) {
|
|
setSelectedPropertyOwnerId(selectedOperatorId);
|
|
setValue('property_owner_id', selectedOperatorId);
|
|
}
|
|
}, [operatorIsOwner, selectedOperatorId, setValue]);
|
|
|
|
|
|
const handleFormSubmit = async (data: ParkFormData) => {
|
|
try {
|
|
// CRITICAL: Block new photo uploads on edits
|
|
if (isEditing && data.images?.uploaded) {
|
|
const hasNewPhotos = data.images.uploaded.some(img => img.isLocal);
|
|
if (hasNewPhotos) {
|
|
toast({
|
|
variant: 'destructive',
|
|
title: 'Validation Error',
|
|
description: 'New photos cannot be added during edits. Please remove new photos or use the photo gallery.'
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Build composite submission if new entities were created
|
|
const submissionContent: import('@/types/composite-submission').ParkCompositeSubmission = {
|
|
park: data,
|
|
};
|
|
|
|
// Add new operator if created
|
|
if (tempNewOperator) {
|
|
submissionContent.new_operator = tempNewOperator;
|
|
submissionContent.park.operator_id = null;
|
|
|
|
// If operator is also owner, use same entity for both
|
|
if (operatorIsOwner) {
|
|
submissionContent.new_property_owner = tempNewOperator;
|
|
submissionContent.park.property_owner_id = null;
|
|
}
|
|
}
|
|
|
|
// Add new property owner if created (and not already set above)
|
|
if (tempNewPropertyOwner && !operatorIsOwner) {
|
|
submissionContent.new_property_owner = tempNewPropertyOwner;
|
|
submissionContent.park.property_owner_id = null;
|
|
}
|
|
|
|
// Determine final IDs to pass
|
|
// When creating new entities via composite submission, IDs should be undefined
|
|
// When using existing entities, pass their IDs directly
|
|
let finalOperatorId: string | undefined;
|
|
let finalPropertyOwnerId: string | undefined;
|
|
|
|
if (tempNewOperator) {
|
|
// New operator being created via composite submission
|
|
finalOperatorId = undefined;
|
|
finalPropertyOwnerId = operatorIsOwner ? undefined :
|
|
(tempNewPropertyOwner ? undefined : selectedPropertyOwnerId);
|
|
} else {
|
|
// Using existing operator
|
|
finalOperatorId = selectedOperatorId || undefined;
|
|
finalPropertyOwnerId = operatorIsOwner ? finalOperatorId :
|
|
(tempNewPropertyOwner ? undefined : selectedPropertyOwnerId);
|
|
}
|
|
|
|
await onSubmit({
|
|
...data,
|
|
operator_id: finalOperatorId,
|
|
property_owner_id: finalPropertyOwnerId,
|
|
_compositeSubmission: (tempNewOperator || tempNewPropertyOwner) ? submissionContent : undefined
|
|
});
|
|
|
|
// Parent component handles success feedback
|
|
} catch (error: unknown) {
|
|
const errorMessage = getErrorMessage(error);
|
|
handleError(error, {
|
|
action: isEditing ? 'Update Park' : 'Create Park',
|
|
userId: user?.id,
|
|
metadata: {
|
|
parkName: data.name,
|
|
hasLocation: !!data.location_id,
|
|
hasNewOperator: !!tempNewOperator,
|
|
hasNewOwner: !!tempNewPropertyOwner
|
|
}
|
|
});
|
|
|
|
// Re-throw so parent can handle modal closing
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="w-full max-w-4xl mx-auto">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<MapPin className="w-5 h-5" />
|
|
{isEditing ? 'Edit Park' : 'Create New Park'}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit(handleFormSubmit)} 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">Park Name *</Label>
|
|
<Input
|
|
id="name"
|
|
{...register('name')}
|
|
placeholder="Enter park name"
|
|
/>
|
|
{errors.name && (
|
|
<p className="text-sm text-destructive">{errors.name.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<SlugField
|
|
name={watch('name')}
|
|
slug={watch('slug')}
|
|
onSlugChange={(slug) => setValue('slug', slug)}
|
|
isModerator={isModerator()}
|
|
/>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">Description</Label>
|
|
<Textarea
|
|
id="description"
|
|
{...register('description')}
|
|
placeholder="Describe the park..."
|
|
rows={4}
|
|
/>
|
|
</div>
|
|
|
|
{/* Park Type and Status */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label>Park Type *</Label>
|
|
<Select onValueChange={(value) => setValue('park_type', value)} defaultValue={initialData?.park_type}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select park type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{parkTypes.map((type) => (
|
|
<SelectItem key={type} value={type}>
|
|
{type}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.park_type && (
|
|
<p className="text-sm text-destructive">{errors.park_type.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>Status *</Label>
|
|
<Select
|
|
onValueChange={(value) => setValue('status', value)}
|
|
defaultValue={initialData?.status || 'operating'}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{statusOptions.map((displayStatus) => {
|
|
const dbValue = STATUS_DISPLAY_TO_DB[displayStatus];
|
|
return (
|
|
<SelectItem key={dbValue} value={dbValue}>
|
|
{displayStatus}
|
|
</SelectItem>
|
|
);
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.status && (
|
|
<p className="text-sm text-destructive">{errors.status.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dates */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<FlexibleDateInput
|
|
value={watch('opening_date') ? parseDateOnly(watch('opening_date')!) : undefined}
|
|
precision={(watch('opening_date_precision') as DatePrecision) || 'day'}
|
|
onChange={(date, precision) => {
|
|
setValue('opening_date', date ? toDateOnly(date) : undefined);
|
|
setValue('opening_date_precision', precision);
|
|
}}
|
|
label="Opening Date"
|
|
placeholder="Select opening date"
|
|
disableFuture={true}
|
|
fromYear={1800}
|
|
/>
|
|
|
|
<FlexibleDateInput
|
|
value={watch('closing_date') ? parseDateOnly(watch('closing_date')!) : undefined}
|
|
precision={(watch('closing_date_precision') as DatePrecision) || 'day'}
|
|
onChange={(date, precision) => {
|
|
setValue('closing_date', date ? toDateOnly(date) : undefined);
|
|
setValue('closing_date_precision', precision);
|
|
}}
|
|
label="Closing Date (if applicable)"
|
|
placeholder="Select closing date"
|
|
disablePast={false}
|
|
fromYear={1800}
|
|
/>
|
|
</div>
|
|
|
|
{/* Location */}
|
|
<div className="space-y-2">
|
|
<Label>Location</Label>
|
|
<LocationSearch
|
|
onLocationSelect={(location) => {
|
|
setValue('location', location);
|
|
}}
|
|
initialLocationId={watch('location_id')}
|
|
/>
|
|
<p className="text-sm text-muted-foreground">
|
|
Search for the park's location using OpenStreetMap. Location will be created when submission is approved.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Operator & Property Owner Selection */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold">Operator & Property Owner</h3>
|
|
|
|
<div className="flex items-center space-x-2 mb-4">
|
|
<Checkbox
|
|
id="operator-is-owner"
|
|
checked={operatorIsOwner}
|
|
onCheckedChange={(checked) => {
|
|
setOperatorIsOwner(checked as boolean);
|
|
if (checked && selectedOperatorId) {
|
|
setSelectedPropertyOwnerId(selectedOperatorId);
|
|
setValue('property_owner_id', selectedOperatorId);
|
|
setTempNewPropertyOwner(null);
|
|
}
|
|
}}
|
|
/>
|
|
<Label htmlFor="operator-is-owner" className="text-sm font-normal cursor-pointer">
|
|
Operator is also the property owner
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* Operator Column */}
|
|
<div className="space-y-2">
|
|
<Label>Park Operator</Label>
|
|
|
|
{tempNewOperator ? (
|
|
<div className="flex items-center gap-2 p-3 border rounded-md bg-blue-50 dark:bg-blue-950">
|
|
<Badge variant="secondary">New</Badge>
|
|
<span className="font-medium">{tempNewOperator.name}</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setTempNewOperator(null)}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Combobox
|
|
options={operators}
|
|
value={watch('operator_id') || ''}
|
|
onValueChange={(value) => {
|
|
const cleanValue = value || undefined;
|
|
setValue('operator_id', cleanValue);
|
|
setSelectedOperatorId(cleanValue || '');
|
|
}}
|
|
placeholder="Select operator"
|
|
searchPlaceholder="Search operators..."
|
|
emptyText="No operators found"
|
|
loading={operatorsLoading}
|
|
/>
|
|
)}
|
|
|
|
{!tempNewOperator && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full"
|
|
onClick={() => setIsOperatorModalOpen(true)}
|
|
>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Create New Operator
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Property Owner Column */}
|
|
{!operatorIsOwner && (
|
|
<div className="space-y-2">
|
|
<Label>Property Owner</Label>
|
|
|
|
{tempNewPropertyOwner ? (
|
|
<div className="flex items-center gap-2 p-3 border rounded-md bg-green-50 dark:bg-green-950">
|
|
<Badge variant="secondary">New</Badge>
|
|
<span className="font-medium">{tempNewPropertyOwner.name}</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setTempNewPropertyOwner(null)}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Combobox
|
|
options={propertyOwners}
|
|
value={watch('property_owner_id') || ''}
|
|
onValueChange={(value) => {
|
|
const cleanValue = value || undefined;
|
|
setValue('property_owner_id', cleanValue);
|
|
setSelectedPropertyOwnerId(cleanValue || '');
|
|
}}
|
|
placeholder="Select property owner"
|
|
searchPlaceholder="Search property owners..."
|
|
emptyText="No property owners found"
|
|
loading={ownersLoading}
|
|
/>
|
|
)}
|
|
|
|
{!tempNewPropertyOwner && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full"
|
|
onClick={() => setIsPropertyOwnerModalOpen(true)}
|
|
>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Create New Property Owner
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Information */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="website_url">Website URL</Label>
|
|
<Input
|
|
id="website_url"
|
|
type="url"
|
|
{...register('website_url')}
|
|
placeholder="https://..."
|
|
/>
|
|
{errors.website_url && (
|
|
<p className="text-sm text-destructive">{errors.website_url.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">Phone Number</Label>
|
|
<Input
|
|
id="phone"
|
|
{...register('phone')}
|
|
placeholder="+1 (555) 123-4567"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
{...register('email')}
|
|
placeholder="contact@park.com"
|
|
/>
|
|
{errors.email && (
|
|
<p className="text-sm text-destructive">{errors.email.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submission Context - For Reviewers */}
|
|
<div className="space-y-4 border-t pt-6">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Badge variant="secondary" className="text-xs">
|
|
For Moderator Review
|
|
</Badge>
|
|
<p className="text-xs text-muted-foreground">
|
|
Help reviewers verify your submission
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="source_url" className="flex items-center gap-2">
|
|
Source URL
|
|
<span className="text-xs text-muted-foreground font-normal">
|
|
(Optional)
|
|
</span>
|
|
</Label>
|
|
<Input
|
|
id="source_url"
|
|
type="url"
|
|
{...register('source_url')}
|
|
placeholder="https://example.com/article"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Where did you find this information? (e.g., official website, news article, press release)
|
|
</p>
|
|
{errors.source_url && (
|
|
<p className="text-sm text-destructive">{errors.source_url.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="submission_notes" className="flex items-center gap-2">
|
|
Notes for Reviewers
|
|
<span className="text-xs text-muted-foreground font-normal">
|
|
(Optional)
|
|
</span>
|
|
</Label>
|
|
<Textarea
|
|
id="submission_notes"
|
|
{...register('submission_notes')}
|
|
placeholder="Add any context to help moderators verify this information (e.g., 'Confirmed via phone call with park', 'Soft opening date not yet announced')"
|
|
rows={3}
|
|
maxLength={1000}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
{watch('submission_notes')?.length || 0}/1000 characters
|
|
</p>
|
|
{errors.submission_notes && (
|
|
<p className="text-sm text-destructive">{errors.submission_notes.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Images */}
|
|
<EntityMultiImageUploader
|
|
mode={isEditing ? 'edit' : 'create'}
|
|
value={watch('images') as ImageAssignments}
|
|
onChange={(images: ImageAssignments) => setValue('images', images)}
|
|
entityType="park"
|
|
entityId={isEditing ? initialData?.id : undefined}
|
|
currentBannerUrl={initialData?.banner_image_url}
|
|
currentCardUrl={initialData?.card_image_url}
|
|
/>
|
|
|
|
{/* Form Actions */}
|
|
<div className="flex gap-4 pt-6">
|
|
<Button
|
|
type="submit"
|
|
className="flex-1"
|
|
>
|
|
<Save className="w-4 h-4 mr-2" />
|
|
{isEditing ? 'Update Park' : 'Create Park'}
|
|
</Button>
|
|
|
|
{onCancel && (
|
|
<Button type="button" variant="outline" onClick={onCancel}>
|
|
<X className="w-4 h-4 mr-2" />
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
|
|
{/* Operator Modal */}
|
|
<Dialog open={isOperatorModalOpen} onOpenChange={setIsOperatorModalOpen}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
|
<OperatorForm
|
|
initialData={tempNewOperator || undefined}
|
|
onSubmit={(data) => {
|
|
setTempNewOperator(data);
|
|
setIsOperatorModalOpen(false);
|
|
setValue('operator_id', 'temp-operator');
|
|
}}
|
|
onCancel={() => setIsOperatorModalOpen(false)}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Property Owner Modal */}
|
|
<Dialog open={isPropertyOwnerModalOpen} onOpenChange={setIsPropertyOwnerModalOpen}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
|
<PropertyOwnerForm
|
|
initialData={tempNewPropertyOwner || undefined}
|
|
onSubmit={(data) => {
|
|
setTempNewPropertyOwner(data);
|
|
setIsPropertyOwnerModalOpen(false);
|
|
setValue('property_owner_id', 'temp-property-owner');
|
|
}}
|
|
onCancel={() => setIsPropertyOwnerModalOpen(false)}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |