import { useState } from 'react' import api from '../../utils/api' import 'notyf/notyf.min.css' const EditFormFunction = props => { const [inputsArray, setInputsArray] = useState( props.functionInfo.utilizationForm || [] ) const addInput = () => { const newInputsArray = [...inputsArray] newInputsArray.push({ name: '', label: '', placeholder: '', type: 'text' }) setInputsArray(newInputsArray) } const addOption = event => { const newInputsArray = [...inputsArray] const index = event.target.id.split('-')[1] const inputObject = newInputsArray[index] inputObject.options.push({ name: '', value: '' }) setInputsArray(newInputsArray) } const handleChangeOption = (inputIndex, optionIndex, event) => { const newInputsArray = [...inputsArray] const inputObject = newInputsArray[inputIndex] const optionObject = inputObject.options[optionIndex] optionObject[event.target.name] = event.target.value setInputsArray(newInputsArray) } const handleChangeInput = event => { const newInputsArray = [...inputsArray] const index = event.target.id.split('-')[1] const inputObject = newInputsArray[index] inputObject[event.target.name] = event.target.value if (event.target.value === 'select') { inputObject.options = [] } setInputsArray(newInputsArray) } const handleSubmit = async event => { event.preventDefault() let Notyf if (typeof window !== 'undefined') { Notyf = require('notyf') } const notyf = new Notyf.Notyf({ duration: 5000 }) try { await api.put( `/admin/functions/form/${props.functionInfo.id}`, { form: inputsArray }, { headers: { Authorization: props.user.token } } ) notyf.success('Sauvegardé!') } catch (error) { notyf.error('Erreur!') } } const handleRemoveInput = event => { const newInputsArray = [...inputsArray] const index = event.target.id.split('-')[1] newInputsArray.splice(index, 1) setInputsArray(newInputsArray) } const handleRemoveOption = (inputIndex, optionIndex) => { const newInputsArray = [...inputsArray] const inputObject = newInputsArray[inputIndex] const optionsArray = inputObject.options optionsArray.splice(optionIndex, 1) setInputsArray(newInputsArray) } return (
{inputsArray.length > 0 && (
)} {inputsArray.map((input, index) => { return (


{input.type !== 'select' && ( <>
)} {input.type === 'select' && (
{input.options.map((option, optionIndex) => { return (
handleChangeOption(index, optionIndex, event)} value={option.name} id={`optionName-${optionIndex}-${index}`} name='name' type='text' className='form-control' placeholder="Nom de l'option" />
handleChangeOption(index, optionIndex, event)} value={option.value} id={`optionValue-${optionIndex}-${index}`} name='value' type='text' className='form-control' placeholder="Valeur de l'option" />
) })}
)}
) })}
) } export default EditFormFunction