111 lines
4.4 KiB
TypeScript
111 lines
4.4 KiB
TypeScript
import { useState } from 'react'
|
|
import { ExperimentForm } from './ExperimentForm'
|
|
import { experimentManagement } from '../lib/supabase'
|
|
import type { Experiment, CreateExperimentRequest, UpdateExperimentRequest } from '../lib/supabase'
|
|
|
|
interface ExperimentModalProps {
|
|
experiment?: Experiment
|
|
onClose: () => void
|
|
onExperimentSaved: (experiment: Experiment) => void
|
|
}
|
|
|
|
export function ExperimentModal({ experiment, onClose, onExperimentSaved }: ExperimentModalProps) {
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const isEditing = !!experiment
|
|
|
|
const handleSubmit = async (data: CreateExperimentRequest | UpdateExperimentRequest) => {
|
|
setError(null)
|
|
setLoading(true)
|
|
|
|
try {
|
|
let savedExperiment: Experiment
|
|
|
|
if (isEditing && experiment) {
|
|
// Check if experiment number is unique (excluding current experiment)
|
|
if ('experiment_number' in data && data.experiment_number !== undefined && data.experiment_number !== experiment.experiment_number) {
|
|
const isUnique = await experimentManagement.isExperimentNumberUnique(data.experiment_number, experiment.id)
|
|
if (!isUnique) {
|
|
setError('Experiment number already exists. Please choose a different number.')
|
|
return
|
|
}
|
|
}
|
|
|
|
savedExperiment = await experimentManagement.updateExperiment(experiment.id, data)
|
|
} else {
|
|
// Check if experiment number is unique for new experiments
|
|
const createData = data as CreateExperimentRequest
|
|
const isUnique = await experimentManagement.isExperimentNumberUnique(createData.experiment_number)
|
|
if (!isUnique) {
|
|
setError('Experiment number already exists. Please choose a different number.')
|
|
return
|
|
}
|
|
|
|
savedExperiment = await experimentManagement.createExperiment(createData)
|
|
}
|
|
|
|
onExperimentSaved(savedExperiment)
|
|
onClose()
|
|
} catch (err: any) {
|
|
setError(err.message || `Failed to ${isEditing ? 'update' : 'create'} experiment`)
|
|
console.error('Experiment save error:', err)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-25 overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
|
|
<div className="relative bg-white rounded-xl shadow-2xl w-full max-w-4xl mx-auto max-h-[90vh] overflow-y-auto">
|
|
{/* Header */}
|
|
<div className="sticky top-0 bg-white flex items-center justify-between p-6 border-b border-gray-200 rounded-t-xl">
|
|
<h3 className="text-xl font-semibold text-gray-900">
|
|
{isEditing ? `Edit Experiment #${experiment.experiment_number}` : 'Create New Experiment'}
|
|
</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg p-2 transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="mb-6 rounded-md bg-red-50 p-4">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div className="ml-3">
|
|
<h3 className="text-sm font-medium text-red-800">Error</h3>
|
|
<div className="mt-2 text-sm text-red-700">{error}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Form */}
|
|
<ExperimentForm
|
|
initialData={experiment}
|
|
onSubmit={handleSubmit}
|
|
onCancel={handleCancel}
|
|
isEditing={isEditing}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|