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><inputclassName='form-control'name='name'ref={register}defaultValue={currentItem ? currentItem.name : ''}/>{errors.name && <p>Este campo es requerido</p>}</div><CKEditoronChange={(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