Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 5512 | Rev 15513 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
14885 stevensc 1 
import axios from 'axios'
5453 stevensc 2 
import React, { useState } from 'react'
14885 stevensc 3 
import { Modal, Button } from 'react-bootstrap'
4 
import { useForm } from 'react-hook-form'
5453 stevensc 5 
 
6 
const EditModal = ({
14885 stevensc 7 
	title = '',
8 
	isEdit = false,
9 
	isOpen = false,
10 
	closeModal = function () { },
11 
	currentItem,
12 
	url,
13 
	action
5453 stevensc 14 
}) => {
15 
 
14885 stevensc 16 
	const {
17 
		register,
18 
		handleSubmit,
19 
		formState: { errors }
20 
	} = useForm()
21 
	const [isActive, setIsActive] = useState(true)
5453 stevensc 22 
 
14885 stevensc 23 
	const onSubmit = (data) => {
24 
		let newData = { ...data, status: isActive ? 'a' : 'i' }
25 
		let formData = new URLSearchParams(newData).toString()
26 
		axios.post(url, formData)
27 
			.then(async ({ data }) => {
28 
				if (data.success) {
29 
					try {
30 
						await action()
31 
						closeModal()
32 
					}
33 
					catch (err) { console.log(err) }
34 
				}
35 
			})
36 
			.catch((err) => console.log(err))
37 
	}
5453 stevensc 38 
 
14885 stevensc 39 
	return (
40 
		<Modal
41 
			size="lg"
42 
			show={isOpen}
43 
			onHide={closeModal}
44 
			autoFocus={false}
45 
		>
46 
			<Modal.Header closeButton>
47 
				<Modal.Title>{title} - {isEdit ? 'Editar' : 'Agregar'}</Modal.Title>
48 
			</Modal.Header>
49 
			<form onSubmit={handleSubmit(onSubmit)}>
50 
				<Modal.Body>
51 
					<div className="form-group">
52 
						<label>Nombre</label>
53 
						<input
54 
							className='form-control'
55 
							name='name'
56 
							ref={register}
57 
							defaultValue={currentItem ? currentItem.name : ''}
58 
						/>
59 
						{errors.name && <p>Este campo es requerido</p>}
60 
					</div>
61 
					<div className="form-group">
62 
						<label>Mínimo</label>
63 
						<input
64 
							className="form-control"
65 
							name="minimum_no_of_employee"
66 
							ref={register}
67 
							required
68 
							defaultValue={currentItem ? currentItem.minimum_no_of_employee : ''}
69 
						/>
70 
						{errors.minimum_no_of_employee && <p>Este campo es requerido</p>}
71 
					</div>
72 
					<div className="form-group">
73 
						<label>Máximo</label>
74 
						<input
75 
							className="form-control"
76 
							name="maximum_no_of_employee"
77 
							ref={register}
78 
							defaultValue={currentItem ? currentItem.maximum_no_of_employee : ''}
79 
						/>
80 
						{errors.maximum_no_of_employee && <p>Este campo es requerido</p>}
81 
					</div>
82 
					<div
83 
						className={`toggle btn btn-primary ${!isActive && 'off'}`}
84 
						data-toggle="toggle"
85 
						role="button"
86 
						onClick={() => setIsActive(!isActive)}
87 
						style={{ width: '130px' }}
88 
					>
89 
						<input
90 
							type="checkbox"
91 
							name="status"
92 
							ref={register}
93 
							checked={isActive}
94 
						/>
95 
						<div className="toggle-group">
96 
							<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
97 
							<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
98 
							<span className="toggle-handle btn btn-light"></span>
99 
						</div>
100 
					</div>
101 
				</Modal.Body>
102 
				<Modal.Footer>
103 
					<Button
104 
						variant="primary"
105 
						type="submit"
106 
					>
5453 stevensc 107 
                        Enviar
14885 stevensc 108 
					</Button>
109 
					<Button variant="danger" onClick={closeModal}>
5453 stevensc 110 
                        Cancelar
14885 stevensc 111 
					</Button>
112 
				</Modal.Footer>
113 
			</form>
114 
		</Modal >
115 
	)
5453 stevensc 116 
}
117 
 
118 
export default EditModal