Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
11049 stevensc 1 
import { Button, Modal } from 'react-bootstrap'
11046 stevensc 2 
import axios from 'axios'
3 
import React from 'react'
4 
import { useState } from 'react'
5 
import { useForm } from 'react-hook-form'
6 
import { useDispatch } from 'react-redux'
7 
import { addNotification } from '../../../redux/notification/notification.actions'
8 
import DescriptionInput from '../../../shared/DescriptionInput'
9 
 
15060 stevensc 10 
const AddModal = ({ closeModal, email_link, isOpen, add_link, onComplete }) => {
11046 stevensc 11 
 
12 
	//Hooks
15060 stevensc 13 
	const { register, handleSubmit, watch, setError, errors, setValue, clearErrors } = useForm()
11046 stevensc 14 
	const dispatch = useDispatch()
15 
 
16 
	//States
17 
	const [isShowSecondPage, setIsShowSecondPage] = useState(false)
18 
	const [pointsOptions] = useState([
11065 stevensc 19 
		{ label: 'Evaluación', value: 0 },
11046 stevensc 20 
		{ label: 'Sugerir otro cargo', value: 0 },
21 
		{ label: '25%', value: 1 },
22 
		{ label: '50%', value: 2 },
23 
		{ label: '75%', value: 3 },
24 
		{ label: '100%', value: 4 }
25 
	])
26 
	const [statusOptions] = useState([
27 
		{ label: 'Estatus', value: '' },
28 
		{ label: 'Aceptado', value: 'a' },
29 
		{ label: 'Rechazado', value: 'r' }
30 
	])
31 
 
32 
	const onSubmit = (data) => {
33 
 
34 
		const submitData = new FormData()
35 
		Object.entries(data).map(([key, value]) => {
36 
			submitData.append(key, value)
37 
		})
38 
 
39 
		axios.post(add_link, submitData)
40 
			.then(({ data }) => {
41 
				if (!data.success) {
14738 stevensc 42 
					typeof data.data === 'string'
43 
						?
44 
						dispatch(addNotification({
45 
							style: 'danger',
46 
							msg: data.data
47 
						}))
48 
						: Object.entries(data.data).map(([key, value]) =>
49 
							value.map(err =>
50 
								dispatch(addNotification({
51 
									style: 'danger',
52 
									msg: `${key}: ${err}`
53 
								}))
54 
							)
55 
						)
56 
					return
11046 stevensc 57 
				}
58 
 
11051 stevensc 59 
				clearErrors()
60 
				closeModal()
11061 stevensc 61 
				setIsShowSecondPage(false)
15059 stevensc 62 
				onComplete()
11046 stevensc 63 
				dispatch(addNotification({
64 
					style: 'success',
65 
					msg: 'Usuario registrado'
66 
				}))
67 
			})
68 
	}
69 
 
70 
	const showSecondPage = () => {
71 
		if (watch('first_name') && watch('last_name') && watch('email')) {
72 
			return setIsShowSecondPage(true)
73 
		}
74 
 
75 
		setError('first_name', { message: 'Este campo es requerido' })
76 
		setError('last_name', { message: 'Este campo es requerido' })
77 
		setError('email', { message: 'Este campo es requerido' })
78 
	}
79 
 
80 
	const checkEmail = () => {
81 
		axios.get(email_link, { params: { email: watch('email') } })
82 
			.then(({ data }) => {
83 
				if (!data.success) {
84 
					dispatch(addNotification({
11051 stevensc 85 
						style: 'danger',
14892 stevensc 86 
						msg: data.data
11046 stevensc 87 
					}))
88 
				}
89 
 
90 
				setValue('user_id', data.data.user_id)
11051 stevensc 91 
				setValue('first_name', data.data.first_name)
92 
				setValue('last_name', data.data.last_name)
93 
				clearErrors()
11046 stevensc 94 
			})
95 
	}
96 
 
97 
	return (
11056 stevensc 98 
		<Modal size="md" onHide={closeModal} show={isOpen}>
11046 stevensc 99 
			<Modal.Header closeButton>
100 
				<Modal.Title>Nuevo candidato</Modal.Title>
101 
			</Modal.Header>
102 
			<form onSubmit={handleSubmit(onSubmit)}>
11053 stevensc 103 
				<Modal.Body>
11059 stevensc 104 
					<div style={isShowSecondPage ? { display: 'none' } : { display: 'block' }}>
11057 stevensc 105 
						<div className='form-group'>
106 
							<label className="form-label">Correo electrónico</label>
107 
							<input type="email" name='email' className='form-control' ref={register({ required: true })} />
108 
							{errors.email && <p>{errors.email.message}</p>}
109 
						</div>
110 
						<button
111 
							type="button"
112 
							className="btn btn-primary"
113 
							onClick={checkEmail}
114 
						>
115 
							Verificar Email
116 
						</button>
117 
						<div className='form-group'>
118 
							<label className="form-label">Nombre</label>
119 
							<input type="text" name='first_name' className='form-control' ref={register({ required: true })} />
120 
							{errors.first_name && <p>{errors.first_name.message}</p>}
121 
						</div>
122 
						<div className='form-group'>
123 
							<label className="form-label">Apellido</label>
124 
							<input type="text" name='last_name' className='form-control' ref={register({ required: true })} />
125 
							{errors.last_name && <p>{errors.last_name.message}</p>}
126 
						</div>
11055 stevensc 127 
					</div>
11059 stevensc 128 
					<div style={isShowSecondPage ? { display: 'block' } : { display: 'none' }}>
11057 stevensc 129 
						<div className='form-group'>
130 
							<label className="form-label">Comentario</label>
131 
							<DescriptionInput
11065 stevensc 132 
								name='coment'
11166 stevensc 133 
								onChange={setValue}
11057 stevensc 134 
							/>
11065 stevensc 135 
							{errors.coment && <p>{errors.coment.message}</p>}
11057 stevensc 136 
						</div>
137 
						<div className='form-group'>
138 
							<label className="form-label">Evaluación</label>
11070 stevensc 139 
							<select className='form-control' name='evaluation' ref={register({ required: true })}>
11057 stevensc 140 
								{
141 
									pointsOptions.map(({ label, value }) => {
142 
										return <option key={value} value={value}>{label}</option>
143 
									})
144 
								}
145 
							</select>
11237 stevensc 146 
							{errors.evaluation && <p>Este campo es requerido</p>}
11057 stevensc 147 
						</div>
148 
						<div className='form-group'>
149 
							<label className="form-label">Resumen Curricular</label>
150 
							<input
151 
								className="form-control p-0"
152 
								type="file"
153 
								name="file"
154 
								accept='pdf/docx'
155 
								ref={register}
156 
								style={{ height: '2rem' }}
157 
							/>
158 
						</div>
159 
						<div className='form-group'>
160 
							<label className="form-label">Estatus</label>
11070 stevensc 161 
							<select className='form-control' name='status' ref={register({ required: true })}>
11057 stevensc 162 
								{
163 
									statusOptions.map(({ label, value }) => {
164 
										return <option key={value} value={value}>{label}</option>
165 
									})
166 
								}
167 
							</select>
11237 stevensc 168 
							{errors.status && <p>Este campo es requerido</p>}
11057 stevensc 169 
						</div>
11055 stevensc 170 
					</div>
11053 stevensc 171 
				</Modal.Body>
172 
				<Modal.Footer>
11060 stevensc 173 
					<Button variant="primary" style={isShowSecondPage ? { display: 'none' } : { display: 'block' }} onClick={showSecondPage}>
11057 stevensc 174 
						Siguiente
175 
					</Button>
11059 stevensc 176 
					<Button variant="primary" type='submit' style={isShowSecondPage ? { display: 'block' } : { display: 'none' }}>
11057 stevensc 177 
						Enviar
178 
					</Button>
11059 stevensc 179 
					<Button variant="danger" onClick={() => setIsShowSecondPage(false)} style={isShowSecondPage ? { display: 'block' } : { display: 'none' }}>
11056 stevensc 180 
						Cancelar
181 
					</Button>
11053 stevensc 182 
				</Modal.Footer>
11046 stevensc 183 
			</form>
184 
		</Modal >
185 
	)
186 
}
187 
 
188 
export default AddModal