Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15507 | 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(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}
                                                name="description"
                                        />
                                        {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