Rev 15511 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { CKEditor } from 'ckeditor4-react'
import { Modal, Button } from 'react-bootstrap'
import { axios, CKEDITOR_OPTIONS } from '../../../utils'
import ToggleComponent from '../../../shared/ToggleComponent'
const EditModal = ({
title = 'Indusrias',
url = '',
isOpen = false,
currentItem = null,
onClose = function () { },
onComplete = function () { }
}) => {
const [isActive, setIsActive] = useState(currentItem?.status === 'a' ? true : false)
const { register, handleSubmit, getValues, setValue, clearErrors, formState: { errors } } = useForm({
defaultValues: {
description: '',
}
})
const onSubmit = (data) => {
const formData = new FormData()
Object.entries(data).forEach(([key, value]) => formData.append(key, value))
formData.append('status', isActive === true ? 'a' : 'i')
axios.post(url, formData)
.then(({ data: response }) => {
if (response.success) {
onComplete()
onClose()
}
})
.catch((err) => console.log(err))
}
useEffect(() => {
register('description', {
required: { value: 'true' },
})
}, [currentItem])
useEffect(() => {
if (currentItem?.status === 'a') {
setIsActive(true)
}
}, [currentItem])
return (
<Modal show={isOpen} onHide={onClose}>
<Modal.Header closeButton>
<Modal.Title>{title} - {currentItem ? 'Editar' : 'Agregar'}</Modal.Title>
</Modal.Header>
<form onSubmit={handleSubmit(onSubmit)}>
<Modal.Body>
<div className="form-group">
<label>Nombre</label>
<input
className='form-control'
name='name'
ref={register}
defaultValue={currentItem ? currentItem.name : ''}
/>
{errors.name && <p>Este campo es requerido</p>}
</div>
<CKEditor
onChange={(e) => {
const text = e.editor.getData()
setValue('description', text)
if (errors.description && getValues('description')) {
clearErrors('description')
}
}}
onInstanceReady={(e) => currentItem && e.editor.setData(currentItem.name)}
config={CKEDITOR_OPTIONS}
/>
{errors.description && <p>Este campo es requerido</p>}
<ToggleComponent currentValue={isActive} setValue={(value) => setIsActive(value)} />
</Modal.Body>
<Modal.Footer>
<Button variant="primary" type="submit">
Enviar
</Button>
<Button variant="danger" onClick={onClose}>
Cancelar
</Button>
</Modal.Footer>
</form>
</Modal >
)
}
export default EditModal