110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
import React, {useEffect} from 'react'
|
|
import {SubmitHandler, useForm} from 'react-hook-form'
|
|
import {Modal} from '../../mollecules'
|
|
import type {Indicator, Scenario} from '../../../generated/ManagingApi'
|
|
import type {IScenarioFormInput} from '../../../global/type'
|
|
|
|
interface ScenarioModalProps {
|
|
showModal: boolean
|
|
onClose: () => void
|
|
onSubmit: (data: IScenarioFormInput) => Promise<void>
|
|
indicators: Indicator[]
|
|
scenario?: Scenario | null // For update mode
|
|
isUpdate?: boolean
|
|
}
|
|
|
|
const ScenarioModal: React.FC<ScenarioModalProps> = ({
|
|
showModal,
|
|
onClose,
|
|
onSubmit,
|
|
indicators,
|
|
scenario = null,
|
|
isUpdate = false
|
|
}) => {
|
|
const { register, handleSubmit, reset, setValue } = useForm<IScenarioFormInput>()
|
|
|
|
// Reset form when modal opens/closes or scenario changes
|
|
useEffect(() => {
|
|
if (showModal) {
|
|
if (isUpdate && scenario) {
|
|
// Pre-populate form for update
|
|
setValue('name', scenario.name || '')
|
|
setValue('loopbackPeriod', scenario.loopbackPeriod || 0)
|
|
setValue('indicators', scenario.indicators?.map(s => s.name || '') || [])
|
|
} else {
|
|
// Reset form for create
|
|
reset()
|
|
}
|
|
}
|
|
}, [showModal, isUpdate, scenario, setValue, reset])
|
|
|
|
const handleFormSubmit: SubmitHandler<IScenarioFormInput> = async (data) => {
|
|
onClose()
|
|
await onSubmit(data)
|
|
}
|
|
|
|
const titleHeader = isUpdate ? 'Update Scenario' : 'Scenario Builder'
|
|
const submitButtonText = isUpdate ? 'Update' : 'Build'
|
|
|
|
return (
|
|
<Modal
|
|
onClose={onClose}
|
|
onSubmit={handleSubmit(handleFormSubmit)}
|
|
showModal={showModal}
|
|
titleHeader={titleHeader}
|
|
>
|
|
<div className="form-control mb-5">
|
|
<div className="input-group">
|
|
<label htmlFor="name" className="label mr-6">
|
|
Name
|
|
</label>
|
|
<input
|
|
className="bg-inherit w-full max-w-xs"
|
|
{...register('name')}
|
|
disabled={isUpdate} // Disable name editing in update mode
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="form-control">
|
|
<div className="input-group">
|
|
<label htmlFor="indicators" className="label mr-6">
|
|
Indicators
|
|
</label>
|
|
<select
|
|
multiple
|
|
className="select select-bordered h-28 w-full max-w-xs"
|
|
{...register('indicators')}
|
|
>
|
|
{indicators?.map((item) => (
|
|
<option key={item.name} value={item.name || ''}>
|
|
{item.signalType} - {item.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="form-control mb-5">
|
|
<div className="input-group">
|
|
<label htmlFor="loopbackPeriod" className="label mr-6">
|
|
Loopback period
|
|
</label>
|
|
<input
|
|
type="number"
|
|
className="bg-inherit w-full max-w-xs"
|
|
{...register('loopbackPeriod', { valueAsNumber: true })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="modal-action">
|
|
<button type="submit" className="btn">
|
|
{submitButtonText}
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default ScenarioModal
|