feat: Implement form, moderation, and testing phases

This commit is contained in:
gpt-engineer-app[bot]
2025-10-21 13:34:16 +00:00
parent ce6c9d6866
commit 833408f5ae
8 changed files with 491 additions and 55 deletions

View File

@@ -1,8 +1,10 @@
import { useState } from 'react';
import { useState, useReducer } 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 { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
import { getErrorMessage } from '@/lib/errorHandler';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
@@ -60,7 +62,10 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
const { headquarters } = useCompanyHeadquarters();
const { user } = useAuth();
const navigate = useNavigate();
const [isSubmitting, setIsSubmitting] = useState(false);
const [submissionState, dispatch] = useReducer(submissionReducer, {
status: 'draft' as const,
data: initialData || {}
});
const {
register,
@@ -99,8 +104,16 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
return;
}
setIsSubmitting(true);
if (!canSubmit(submissionState)) {
toast.error('Cannot submit in current state');
return;
}
dispatch({ type: 'VALIDATE', payload: data });
try {
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
const formData = {
...data,
company_type: 'designer' as const,
@@ -109,18 +122,24 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
await onSubmit(formData);
dispatch({ type: 'SUBMISSION_COMPLETE' });
// Only show success toast and close if not editing through moderation queue
if (!initialData?.id) {
toast.success('Designer submitted for review');
onCancel();
}
} catch (error: unknown) {
const errorMessage = getErrorMessage(error);
if (errorMessage.includes('validation')) {
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
} else {
dispatch({ type: 'RESET' });
}
handleError(error, {
action: initialData?.id ? 'Update Designer' : 'Create Designer',
metadata: { companyName: data.name }
});
} finally {
setIsSubmitting(false);
}
})} className="space-y-6">
{/* Basic Information */}
@@ -240,13 +259,21 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
{/* Actions */}
<div className="flex gap-3 justify-end">
<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
>
<X className="w-4 h-4 mr-2" />
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
<Button
type="submit"
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
>
<Save className="w-4 h-4 mr-2" />
{isSubmitting ? 'Submitting...' : 'Save Designer'}
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Designer'}
</Button>
</div>
</form>

View File

@@ -1,8 +1,10 @@
import { useState } from 'react';
import { useState, useReducer } 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 { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
import { getErrorMessage } from '@/lib/errorHandler';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
@@ -61,7 +63,10 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
const { headquarters } = useCompanyHeadquarters();
const { user } = useAuth();
const navigate = useNavigate();
const [isSubmitting, setIsSubmitting] = useState(false);
const [submissionState, dispatch] = useReducer(submissionReducer, {
status: 'draft' as const,
data: initialData || {}
});
const {
register,
@@ -102,8 +107,16 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
return;
}
setIsSubmitting(true);
if (!canSubmit(submissionState)) {
toast.error('Cannot submit in current state');
return;
}
dispatch({ type: 'VALIDATE', payload: data });
try {
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
const formData = {
...data,
company_type: 'manufacturer' as const,
@@ -112,18 +125,24 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
await onSubmit(formData);
dispatch({ type: 'SUBMISSION_COMPLETE' });
// Only show success toast and close if not editing through moderation queue
if (!initialData?.id) {
toast.success('Manufacturer submitted for review');
onCancel();
}
} catch (error: unknown) {
const errorMessage = getErrorMessage(error);
if (errorMessage.includes('validation')) {
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
} else {
dispatch({ type: 'RESET' });
}
handleError(error, {
action: initialData?.id ? 'Update Manufacturer' : 'Create Manufacturer',
metadata: { companyName: data.name }
});
} finally {
setIsSubmitting(false);
}
})} className="space-y-6">
{/* Basic Information */}
@@ -241,13 +260,21 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
{/* Actions */}
<div className="flex gap-3 justify-end">
<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
>
<X className="w-4 h-4 mr-2" />
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
<Button
type="submit"
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
>
<Save className="w-4 h-4 mr-2" />
{isSubmitting ? 'Submitting...' : 'Save Manufacturer'}
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Manufacturer'}
</Button>
</div>
</form>

View File

@@ -1,8 +1,10 @@
import { useState } from 'react';
import { useState, useReducer } 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 { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
import { getErrorMessage } from '@/lib/errorHandler';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
@@ -60,7 +62,10 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
const { headquarters } = useCompanyHeadquarters();
const { user } = useAuth();
const navigate = useNavigate();
const [isSubmitting, setIsSubmitting] = useState(false);
const [submissionState, dispatch] = useReducer(submissionReducer, {
status: 'draft' as const,
data: initialData || {}
});
const {
register,
@@ -99,8 +104,16 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
return;
}
setIsSubmitting(true);
if (!canSubmit(submissionState)) {
toast.error('Cannot submit in current state');
return;
}
dispatch({ type: 'VALIDATE', payload: data });
try {
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
const formData = {
...data,
company_type: 'operator' as const,
@@ -109,18 +122,24 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
await onSubmit(formData);
dispatch({ type: 'SUBMISSION_COMPLETE' });
// Only show success toast and close if not editing through moderation queue
if (!initialData?.id) {
toast.success('Operator submitted for review');
onCancel();
}
} catch (error: unknown) {
const errorMessage = getErrorMessage(error);
if (errorMessage.includes('validation')) {
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
} else {
dispatch({ type: 'RESET' });
}
handleError(error, {
action: initialData?.id ? 'Update Operator' : 'Create Operator',
metadata: { companyName: data.name }
});
} finally {
setIsSubmitting(false);
}
})} className="space-y-6">
{/* Basic Information */}
@@ -240,13 +259,21 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
{/* Actions */}
<div className="flex gap-3 justify-end">
<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
>
<X className="w-4 h-4 mr-2" />
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
<Button
type="submit"
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
>
<Save className="w-4 h-4 mr-2" />
{isSubmitting ? 'Submitting...' : 'Save Operator'}
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Operator'}
</Button>
</div>
</form>

View File

@@ -1,9 +1,11 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useReducer } 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 { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
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';
@@ -129,7 +131,10 @@ const STATUS_DB_TO_DISPLAY: Record<string, string> = {
export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }: ParkFormProps) {
const { isModerator } = useUserRole();
const [submitting, setSubmitting] = useState(false);
const [submissionState, dispatch] = useReducer(submissionReducer, {
status: 'draft' as const,
data: initialData || {}
});
// Validate that onSubmit uses submission helpers (dev mode only)
useEffect(() => {
@@ -180,8 +185,20 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
const handleFormSubmit = async (data: ParkFormData) => {
setSubmitting(true);
if (!canSubmit(submissionState)) {
toast({
title: 'Cannot submit',
description: 'Please wait for the current operation to complete',
variant: 'destructive',
});
return;
}
dispatch({ type: 'VALIDATE', payload: data });
try {
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
// Build composite submission if new entities were created
const submissionContent: any = {
park: data,
@@ -206,6 +223,8 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
_compositeSubmission: (tempNewOperator || tempNewPropertyOwner) ? submissionContent : undefined
});
dispatch({ type: 'SUBMISSION_COMPLETE' });
toast({
title: isEditing ? "Park Updated" : "Park Created",
description: isEditing
@@ -213,6 +232,12 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
: "The new park has been created successfully."
});
} catch (error: unknown) {
const errorMessage = getErrorMessage(error);
if (errorMessage.includes('validation') || errorMessage.includes('required')) {
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
} else {
dispatch({ type: 'RESET' });
}
handleError(error, {
action: isEditing ? 'Update Park' : 'Create Park',
userId: user?.id,
@@ -223,8 +248,6 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
hasNewOwner: !!tempNewPropertyOwner
}
});
} finally {
setSubmitting(false);
}
};
@@ -511,9 +534,13 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
{/* Form Actions */}
<div className="flex gap-4 pt-6">
<Button type="submit" disabled={submitting} className="flex-1">
<Button
type="submit"
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
className="flex-1"
>
<Save className="w-4 h-4 mr-2" />
{submitting ? 'Saving...' : (isEditing ? 'Update Park' : 'Create Park')}
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : (isEditing ? 'Update Park' : 'Create Park')}
</Button>
{onCancel && (

View File

@@ -1,8 +1,10 @@
import { useState } from 'react';
import { useState, useReducer } 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 { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
import { getErrorMessage } from '@/lib/errorHandler';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
@@ -60,7 +62,10 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
const { headquarters } = useCompanyHeadquarters();
const { user } = useAuth();
const navigate = useNavigate();
const [isSubmitting, setIsSubmitting] = useState(false);
const [submissionState, dispatch] = useReducer(submissionReducer, {
status: 'draft' as const,
data: initialData || {}
});
const {
register,
@@ -99,8 +104,16 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
return;
}
setIsSubmitting(true);
if (!canSubmit(submissionState)) {
toast.error('Cannot submit in current state');
return;
}
dispatch({ type: 'VALIDATE', payload: data });
try {
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
const formData = {
...data,
company_type: 'property_owner' as const,
@@ -109,18 +122,24 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
await onSubmit(formData);
dispatch({ type: 'SUBMISSION_COMPLETE' });
// Only show success toast and close if not editing through moderation queue
if (!initialData?.id) {
toast.success('Property owner submitted for review');
onCancel();
}
} catch (error: unknown) {
const errorMessage = getErrorMessage(error);
if (errorMessage.includes('validation')) {
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
} else {
dispatch({ type: 'RESET' });
}
handleError(error, {
action: initialData?.id ? 'Update Property Owner' : 'Create Property Owner',
metadata: { companyName: data.name }
});
} finally {
setIsSubmitting(false);
}
})} className="space-y-6">
{/* Basic Information */}
@@ -240,13 +259,21 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
{/* Actions */}
<div className="flex gap-3 justify-end">
<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
>
<X className="w-4 h-4 mr-2" />
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
<Button
type="submit"
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
>
<Save className="w-4 h-4 mr-2" />
{isSubmitting ? 'Submitting...' : 'Save Property Owner'}
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Property Owner'}
</Button>
</div>
</form>

View File

@@ -1,8 +1,10 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useReducer } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { validateSubmissionHandler } from '@/lib/entityFormValidation';
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
import { getErrorMessage } from '@/lib/errorHandler';
import type { RideTechnicalSpec, RideCoasterStat, RideNameHistory } from '@/types/database';
import type { TempCompanyData, TempRideModelData } from '@/types/company';
import { entitySchemas } from '@/lib/entityValidationSchemas';
@@ -119,7 +121,10 @@ const STATUS_DB_TO_DISPLAY: Record<string, string> = {
export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }: RideFormProps) {
const { isModerator } = useUserRole();
const [submitting, setSubmitting] = useState(false);
const [submissionState, dispatch] = useReducer(submissionReducer, {
status: 'draft' as const,
data: initialData || {}
});
const { preferences } = useUnitPreferences();
const measurementSystem = preferences.measurement_system;
@@ -221,8 +226,20 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
const handleFormSubmit = async (data: RideFormData) => {
setSubmitting(true);
if (!canSubmit(submissionState)) {
toast({
title: 'Cannot submit',
description: 'Please wait for the current operation to complete',
variant: 'destructive',
});
return;
}
dispatch({ type: 'VALIDATE', payload: data });
try {
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
// Convert form values back to metric for storage
const metricData = {
...data,
@@ -253,6 +270,8 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
// Pass clean data to parent with extended fields
await onSubmit(metricData);
dispatch({ type: 'SUBMISSION_COMPLETE' });
toast({
title: isEditing ? "Ride Updated" : "Submission Sent",
description: isEditing
@@ -262,6 +281,12 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
: "Ride submitted for review"
});
} catch (error: unknown) {
const errorMessage = getErrorMessage(error);
if (errorMessage.includes('validation') || errorMessage.includes('required')) {
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
} else {
dispatch({ type: 'RESET' });
}
handleError(error, {
action: isEditing ? 'Update Ride' : 'Create Ride',
metadata: {
@@ -270,8 +295,6 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
hasNewModel: !!tempNewRideModel
}
});
} finally {
setSubmitting(false);
}
};
@@ -782,9 +805,13 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
{/* Form Actions */}
<div className="flex gap-4 pt-6">
<Button type="submit" disabled={submitting} className="flex-1">
<Button
type="submit"
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
className="flex-1"
>
<Save className="w-4 h-4 mr-2" />
{submitting ? 'Saving...' : (isEditing ? 'Update Ride' : 'Create Ride')}
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : (isEditing ? 'Update Ride' : 'Create Ride')}
</Button>
{onCancel && (

View File

@@ -1,9 +1,11 @@
import { useState } from 'react';
import { useState, useReducer } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import type { RideModelTechnicalSpec } from '@/types/database';
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
import { getErrorMessage } from '@/lib/errorHandler';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
@@ -75,6 +77,10 @@ export function RideModelForm({
unit?: string;
display_order: number;
}[]>([]);
const [submissionState, dispatch] = useReducer(submissionReducer, {
status: 'draft' as const,
data: initialData || {}
});
const {
register,
@@ -96,11 +102,30 @@ export function RideModelForm({
const handleFormSubmit = (data: RideModelFormData) => {
// Include relational technical specs with extended type
onSubmit({
...data,
_technical_specifications: technicalSpecs
});
if (!canSubmit(submissionState)) {
return;
}
dispatch({ type: 'VALIDATE', payload: data });
try {
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
// Include relational technical specs with extended type
onSubmit({
...data,
_technical_specifications: technicalSpecs
});
dispatch({ type: 'SUBMISSION_COMPLETE' });
} catch (error: unknown) {
const errorMessage = getErrorMessage(error);
if (errorMessage.includes('validation')) {
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
} else {
dispatch({ type: 'RESET' });
}
}
};
return (
@@ -219,13 +244,21 @@ export function RideModelForm({
{/* Actions */}
<div className="flex gap-3 justify-end">
<Button type="button" variant="outline" onClick={onCancel}>
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
>
<X className="w-4 h-4 mr-2" />
Cancel
</Button>
<Button type="submit">
<Button
type="submit"
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
>
<Save className="w-4 h-4 mr-2" />
Save Model
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : 'Save Model'}
</Button>
</div>
</form>