Rev 5647 | Rev 15511 | Ir a la última revisión | 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(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}name="description"/>{errors.description && <p>Este campo es requerido</p>}<ToggleComponent 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