Proyectos de Subversion LeadersLinked - Backend

Rev

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