Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
11483 stevensc 1 
import React, { useState, useEffect } from 'react'
2 
import { Button, Modal } from 'react-bootstrap'
3 
import axios from 'axios'
4 
import { useForm } from 'react-hook-form'
5 
import { useDispatch } from 'react-redux'
6 
import { addNotification } from '../../../redux/notification/notification.actions'
11467 stevensc 7 
 
11483 stevensc 8 
const EditAndAddModal = ({ action_link, closeModal, type }) => {
9 
 
10 
	//Hooks
11 
	const { register, handleSubmit, errors, setValue, clearErrors } = useForm()
12 
	const [isActive, setIsActive] = useState(false)
13 
	const dispatch = useDispatch()
14 
 
15 
	const onSubmit = (data) => {
16 
		const submitData = new FormData()
17 
 
18 
		Object.entries({
19 
			...data,
20 
			status: isActive ? 'a' : 'i'
21 
		}).map(([key, value]) => {
22 
			submitData.append(key, value)
23 
		})
24 
 
25 
		axios.post(action_link, submitData)
26 
			.then(({ data }) => {
27 
				if (!data.success) {
28 
					return dispatch(addNotification({
29 
						style: 'danger',
30 
						msg: 'Ha ocurrido un error'
31 
					}))
32 
				}
33 
 
34 
				clearErrors()
35 
				closeModal()
36 
				dispatch(addNotification({
37 
					style: 'success',
38 
					msg: 'Usuario registrado'
39 
				}))
40 
			})
41 
	}
42 
 
43 
	useEffect(() => {
44 
		if (type === 'edit') {
45 
			axios.get(action_link)
46 
				.then(({ data }) => {
47 
					if (!data.success) {
48 
						return dispatch(addNotification({
49 
							style: 'danger',
50 
							msg: 'Ha ocurrido un error'
51 
						}))
52 
					}
53 
 
54 
					Object.entries(data.data).map(([key, value]) => {
55 
						if (key === 'status') {
56 
							return setIsActive(value === 'a' ? true : false)
57 
						}
58 
						setValue(key, value)
59 
					})
60 
				})
61 
		}
62 
	}, [type])
63 
 
11467 stevensc 64 
	return (
11483 stevensc 65 
		<Modal size="md" onHide={closeModal} show={type === 'add' || type === ('edit')}>
66 
			<Modal.Header closeButton>
67 
				<Modal.Title>
68 
					{
69 
						type === 'add'
70 
							? 'Agregar Objetivo'
71 
							: 'Editar Objetivo'
72 
					}
73 
				</Modal.Title>
74 
			</Modal.Header>
75 
			<form onSubmit={handleSubmit(onSubmit)}>
76 
				<Modal.Body>
77 
					<div className="d-flex" style={{ gap: '10px' }}>
78 
						<div className='form-group'>
79 
							<label className="form-label">Título</label>
80 
							<input type="text" name='title' className='form-control' ref={register({ required: true })} />
81 
							{errors.title && <p>{errors.title.message}</p>}
82 
						</div>
83 
						<div className='form-group'>
84 
							<label className="form-label">Estatus</label>
85 
							<div
86 
								className={`toggle d-block btn btn-primary ${!isActive && 'off'}`}
87 
								data-toggle="toggle"
88 
								role="button"
89 
								style={{ width: '130px' }}
90 
								onClick={() => setIsActive(!isActive)}
91 
							>
92 
								<input
93 
									type="checkbox"
94 
									checked={isActive}
95 
								/>
96 
								<div className="toggle-group">
97 
									<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
98 
									<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
99 
									<span className="toggle-handle btn btn-light"></span>
100 
								</div>
101 
							</div>
102 
						</div>
103 
					</div>
104 
					<div className='form-group'>
105 
						<label className="form-label">Descripción</label>
106 
						<textarea type="text" name='description' className='form-control' rows='3' ref={register({ required: true })} />
107 
						{errors.description && <p>{errors.description.message}</p>}
108 
					</div>
109 
				</Modal.Body>
110 
				<Modal.Footer>
111 
					<Button variant="primary" type='submit'>
112 
						Enviar
113 
					</Button>
114 
					<Button variant="danger" onClick={closeModal}>
115 
						Cancelar
116 
					</Button>
117 
				</Modal.Footer>
118 
			</form>
119 
		</Modal >
11467 stevensc 120 
	)
121 
}
122 
 
123 
export default EditAndAddModal