mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 17:51:14 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
740
src-old/components/admin/ParkForm.tsx
Normal file
740
src-old/components/admin/ParkForm.tsx
Normal file
@@ -0,0 +1,740 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { entitySchemas, validateRequiredFields } 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, AlertCircle } from 'lucide-react';
|
||||
import { toDateOnly, parseDateOnly, toDateWithPrecision } 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().transform(val => val || undefined),
|
||||
opening_date_precision: z.enum(['day', 'month', 'year']).optional(),
|
||||
closing_date: z.string().optional().transform(val => val || undefined),
|
||||
closing_date_precision: z.enum(['day', 'month', 'year']).optional(),
|
||||
location: z.object({
|
||||
name: z.string(),
|
||||
street_address: z.string().optional(),
|
||||
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.instanceof(File).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 = [
|
||||
{ value: 'theme_park', label: 'Theme Park' },
|
||||
{ value: 'amusement_park', label: 'Amusement Park' },
|
||||
{ value: 'water_park', label: 'Water Park' },
|
||||
{ value: 'family_entertainment', label: 'Family Entertainment Center' },
|
||||
{ value: 'adventure_park', label: 'Adventure Park' },
|
||||
{ value: 'safari_park', label: 'Safari Park' },
|
||||
{ value: 'carnival', label: 'Carnival' },
|
||||
{ value: 'fair', label: '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();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// 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,
|
||||
trigger,
|
||||
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 || undefined,
|
||||
closing_date: initialData?.closing_date || undefined,
|
||||
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) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
// Pre-submission validation for required fields
|
||||
const { valid, errors: validationErrors } = validateRequiredFields('park', data);
|
||||
if (!valid) {
|
||||
validationErrors.forEach(error => {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Missing Required Fields',
|
||||
description: error
|
||||
});
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// Debug: Log what's being submitted
|
||||
const submissionData = {
|
||||
...data,
|
||||
operator_id: finalOperatorId,
|
||||
property_owner_id: finalPropertyOwnerId,
|
||||
_compositeSubmission: (tempNewOperator || tempNewPropertyOwner) ? submissionContent : undefined
|
||||
};
|
||||
|
||||
console.info('[ParkForm] Submitting park data:', {
|
||||
hasLocation: !!submissionData.location,
|
||||
hasLocationId: !!submissionData.location_id,
|
||||
locationData: submissionData.location,
|
||||
parkName: submissionData.name,
|
||||
isEditing
|
||||
});
|
||||
|
||||
await onSubmit(submissionData);
|
||||
|
||||
// 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;
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
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} value={type.value}>
|
||||
{type.label}
|
||||
</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 ? toDateWithPrecision(date, precision) : 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 ? toDateWithPrecision(date, precision) : 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 className="flex items-center gap-1">
|
||||
Location
|
||||
<span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<LocationSearch
|
||||
onLocationSelect={(location) => {
|
||||
console.info('[ParkForm] Location selected:', location);
|
||||
setValue('location', location);
|
||||
console.info('[ParkForm] Location set in form:', watch('location'));
|
||||
// Manually trigger validation for the location field
|
||||
trigger('location');
|
||||
}}
|
||||
initialLocationId={watch('location_id')}
|
||||
/>
|
||||
{errors.location && (
|
||||
<p className="text-sm text-destructive flex items-center gap-1">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
{errors.location.message}
|
||||
</p>
|
||||
)}
|
||||
{!errors.location && (
|
||||
<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"
|
||||
loading={isSubmitting}
|
||||
loadingText="Saving..."
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{isEditing ? 'Update Park' : 'Create Park'}
|
||||
</Button>
|
||||
|
||||
{onCancel && (
|
||||
<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user