Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios';

import React, { useState } from 'react'

import { Modal, Button } from 'react-bootstrap';

import { useForm } from "react-hook-form";

const EditModal = ({

    title = '',

    isEdit = false,

    isOpen = false,

    closeModal = function () { },

    currentItem,

    url,

    action

}) => {

    const {

        register,

        handleSubmit,

        formState: { errors }

    } = useForm();

    const [isActive, setIsActive] = useState(true);

    const onSubmit = (data) => {

        let newData = { ...data, status: data.status ? "a" : "i" }

        let formData = new URLSearchParams(newData).toString()

        axios.post(url, formData)

            .then(async ({ data }) => {

                if (data.success) {

                    try {

                        await action()

                        closeModal()

                    }

                    catch (err) { console.log(err) }

                }

            })

            .catch((err) => console.log(err))

    };

    return (

        <Modal

            size="lg"

            show={isOpen}

            onHide={closeModal}

            autoFocus={false}

        >

            <Modal.Header closeButton>

                <Modal.Title>{title} - {isEdit ? '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>

                    <div className="form-group">

                        <label>Mínimo</label>

                        <input

                            className="form-control"

                            name="minimum_no_of_employee"

                            ref={register}

                            required

                            defaultValue={currentItem ? currentItem.minimum_no_of_employee : ''}

                        />

                        {errors.minimum_no_of_employee && <p>Este campo es requerido</p>}

                    </div>

                    <div className="form-group">

                        <label>Máximo</label>

                        <input

                            className="form-control"

                            name="maximum_no_of_employee"

                            ref={register}

                            defaultValue={currentItem ? currentItem.maximum_no_of_employee : ''}

                        />

                        {errors.maximum_no_of_employee && <p>Este campo es requerido</p>}

                    </div>

                    <div

                        className={`toggle btn btn-primary ${!isActive && "off"}`}

                        data-toggle="toggle"

                        role="button"

                        onClick={() => setIsActive(!isActive)}

                    >

                        <input

                            type="checkbox"

                            name="status"

                            ref={register}

                            checked={isActive}

                        />

                        <div className="toggle-group">

                            <label for="status" className="btn btn-primary toggle-on">Activo</label>

                            <label for="status" className="btn btn-light toggle-off">Inactivo</label>

                            <span className="toggle-handle btn btn-light"></span>

                        </div>

                    </div>

                </Modal.Body>

                <Modal.Footer>

                    <Button

                        variant="primary"

                        type="submit"

                    >

                        Enviar

                    </Button>

                    <Button variant="danger" onClick={closeModal}>

                        Cancelar

                    </Button>

                </Modal.Footer>

            </form>

        </Modal >

    )

}

export default EditModal