Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11483 | Rev 11486 | 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 
 
11484 stevensc 8 
const EditAndAddModal = ({ action_link, closeModal, type, onComplete }) => {
11483 stevensc 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()
11484 stevensc 36 
				onComplete()
11483 stevensc 37 
				dispatch(addNotification({
38 
					style: 'success',
39 
					msg: 'Usuario registrado'
40 
				}))
41 
			})
42 
	}
43 
 
44 
	useEffect(() => {
45 
		if (type === 'edit') {
46 
			axios.get(action_link)
47 
				.then(({ data }) => {
48 
					if (!data.success) {
49 
						return dispatch(addNotification({
50 
							style: 'danger',
51 
							msg: 'Ha ocurrido un error'
52 
						}))
53 
					}
54 
 
55 
					Object.entries(data.data).map(([key, value]) => {
56 
						if (key === 'status') {
57 
							return setIsActive(value === 'a' ? true : false)
58 
						}
59 
						setValue(key, value)
60 
					})
61 
				})
62 
		}
63 
	}, [type])
64 
 
11467 stevensc 65 
	return (
11483 stevensc 66 
		<Modal size="md" onHide={closeModal} show={type === 'add' || type === ('edit')}>
67 
			<Modal.Header closeButton>
68 
				<Modal.Title>
69 
					{
70 
						type === 'add'
71 
							? 'Agregar Objetivo'
72 
							: 'Editar Objetivo'
73 
					}
74 
				</Modal.Title>
75 
			</Modal.Header>
76 
			<form onSubmit={handleSubmit(onSubmit)}>
77 
				<Modal.Body>
78 
					<div className="d-flex" style={{ gap: '10px' }}>
79 
						<div className='form-group'>
80 
							<label className="form-label">Título</label>
81 
							<input type="text" name='title' className='form-control' ref={register({ required: true })} />
82 
							{errors.title && <p>{errors.title.message}</p>}
83 
						</div>
84 
						<div className='form-group'>
85 
							<label className="form-label">Estatus</label>
86 
							<div
87 
								className={`toggle d-block btn btn-primary ${!isActive && 'off'}`}
88 
								data-toggle="toggle"
89 
								role="button"
90 
								style={{ width: '130px' }}
91 
								onClick={() => setIsActive(!isActive)}
92 
							>
93 
								<input
94 
									type="checkbox"
95 
									checked={isActive}
96 
								/>
97 
								<div className="toggle-group">
98 
									<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
99 
									<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
100 
									<span className="toggle-handle btn btn-light"></span>
101 
								</div>
102 
							</div>
103 
						</div>
104 
					</div>
105 
					<div className='form-group'>
106 
						<label className="form-label">Descripción</label>
107 
						<textarea type="text" name='description' className='form-control' rows='3' ref={register({ required: true })} />
108 
						{errors.description && <p>{errors.description.message}</p>}
109 
					</div>
110 
				</Modal.Body>
111 
				<Modal.Footer>
112 
					<Button variant="primary" type='submit'>
113 
						Enviar
114 
					</Button>
115 
					<Button variant="danger" onClick={closeModal}>
116 
						Cancelar
117 
					</Button>
118 
				</Modal.Footer>
119 
			</form>
120 
		</Modal >
11467 stevensc 121 
	)
122 
}
123 
 
124 
export default EditAndAddModal