Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
10513 stevensc 1 
import axios from 'axios'
10518 stevensc 2 
import React, { useState, useEffect } from 'react'
10513 stevensc 3 
import { useForm } from 'react-hook-form'
4 
import { useDispatch } from 'react-redux'
10450 stevensc 5 
import { useHistory, useParams } from 'react-router-dom'
10513 stevensc 6 
import { addNotification } from '../../../redux/notification/notification.actions'
10436 stevensc 7 
 
10439 stevensc 8 
 
10513 stevensc 9 
const FormView = ({ actionLink }) => {
10 
 
10516 stevensc 11 
	// States
10524 stevensc 12 
	const [generalOptions, setGeneralOptions] = useState({
13 
		uuid: '',
14 
		name: '',
15 
		description: '',
16 
		functions: '',
17 
		objectives: ''
18 
	})
10518 stevensc 19 
	const [pointsOptions, setPointsOptions] = useState([
10516 stevensc 20 
		{ label: 'Evaluación', value: 0 },
21 
		{ label: 'Sugerir otro cargo', value: 0 },
22 
		{ label: '25%', value: 1 },
23 
		{ label: '50%', value: 2 },
24 
		{ label: '75%', value: 3 },
25 
		{ label: '100%', value: 4 }
10518 stevensc 26 
	])
27 
	const [statusOptions, setStatusOptions] = useState([
10516 stevensc 28 
		{ label: 'Estatus', value: '' },
29 
		{ label: 'Aceptado', value: 'a' },
30 
		{ label: 'Rechazado', value: 'r' }
10518 stevensc 31 
	])
10524 stevensc 32 
	const [vacancyOptions, setVacancyOptions] = useState([
33 
		{ label: 'Estatus', value: '' },
34 
		{ label: 'Aceptado', value: 'a' },
35 
		{ label: 'Rechazado', value: 'r' }
36 
	])
37 
	const [candidatesOptions, setCandidatesOptions] = useState([
38 
		{ label: 'Estatus', value: '' },
39 
		{ label: 'Aceptado', value: 'a' },
40 
		{ label: 'Rechazado', value: 'r' }
41 
	])
10516 stevensc 42 
 
43 
	// Hooks
10522 stevensc 44 
	const { setValue, register, watch } = useForm()
10447 stevensc 45 
	const history = useHistory()
10513 stevensc 46 
	const dispatch = useDispatch()
10450 stevensc 47 
	const { action } = useParams()
10439 stevensc 48 
 
10450 stevensc 49 
	useEffect(() => {
10513 stevensc 50 
 
10516 stevensc 51 
		// Get current item data
52 
		if (action === 'edit') {
53 
			axios.get(actionLink)
54 
				.then(({ data }) => {
55 
					const resData = data.data
10513 stevensc 56 
 
10516 stevensc 57 
					if (!data.success) {
58 
						dispatch(addNotification({
59 
							style: 'error',
60 
							msg: 'Ha ocurrido un error'
61 
						}))
62 
					}
10513 stevensc 63 
 
10516 stevensc 64 
					setValue('comment', resData.interview.comment)
10522 stevensc 65 
					setValue('points', resData.interview.points)
66 
					setValue('status', resData.interview.status)
10524 stevensc 67 
					setGeneralOptions({
68 
						...generalOptions,
69 
						name: resData.vacancy.name,
70 
						uuid: resData.vacancy.uuid,
71 
						description: resData.vacancy.description,
72 
						functions: dataExaple.job_description.functions,
73 
						objectives: dataExaple.job_description.objectives
74 
					})
10516 stevensc 75 
				})
76 
		}
77 
	}, [action])
78 
 
10513 stevensc 79 
	const dataExaple = {
80 
		'job_description': {
81 
			'uuid': '8ff86a9a-651c-4dd0-86c1-b9c0716d09e0',
82 
			'name': 'Programador Junior',
83 
			'functions': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Tortor posuere ac ut consequat semper viverra nam. Ultricies leo integer malesuada nunc.</p>',
84 
			'objectives': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Tortor posuere ac ut consequat semper viverra nam. Ultricies leo integer malesuada nunc.</p>',
85 
			'competencies': [
86 
				{
87 
					'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',
88 
					'competency_name': 'Flexibilidad',
89 
					'competency_type_uuid': 'ae45b2e5-73a9-4a0b-ad04-29a07524ccd6',
90 
					'competency_type_name': 'Competencias Horizontales',
91 
					'behaviors': [
92 
						{
93 
							'uuid': '4cee9594-051d-4a52-82f0-58d4accc5583',
94 
							'description': 'Enfocar sus acciones al logro de los resultados planteados.',
95 
							'points': 0,
96 
							'comment': '',
97 
							'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b'
98 
						}
99 
					]
100 
				}
101 
			]
102 
		},
103 
		'interview': {
104 
			'id': 'd1cb9f3d-a6d0-43c1-a698-645b0156d99d',
105 
			'status': 'a',
106 
			'content': [
107 
				{
108 
					'competencyUuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',
109 
					'behaviorUuid': '4cee9594-051d-4a52-82f0-58d4accc5583',
110 
					'comment': '',
111 
					'evaluation': '0'
112 
				}
113 
			],
114 
			'type': 'b',
115 
			'points': '3',
116 
			'comment': null
117 
		}
118 
	}
119 
 
120 
	useEffect(() => {
10450 stevensc 121 
		console.log(action)
122 
	}, [])
123 
 
10447 stevensc 124 
	return (
125 
		<section className="content">
126 
			<div className="container-fluid">
127 
				<div className="row">
128 
					<div className="col-12">
129 
						<div className='card'>
130 
							<div className="card-header">
131 
								<ul className="nav nav-tabs" id="myTab" role="tablist">
132 
									<li className="nav-item" role="presentation">
10524 stevensc 133 
										<button className="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">General</button>
10447 stevensc 134 
									</li>
135 
									<li className="nav-item" role="presentation">
10524 stevensc 136 
										<button className="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Competencias</button>
10447 stevensc 137 
									</li>
138 
									<li className="nav-item" role="presentation">
10524 stevensc 139 
										<button className="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Conclusiones</button>
10447 stevensc 140 
									</li>
141 
								</ul>
142 
							</div>
143 
							<div className="card-body">
144 
								<div className="tab-content" id="myTabContent">
10523 stevensc 145 
									<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
146 
										<div className="row p-3 justify-content-between">
147 
											<div className="form-group">
148 
												<label>Vacantes</label>
10524 stevensc 149 
												<select className='form-control' name='points' ref={register}>
150 
													{
151 
														vacancyOptions.map(({ label, value }) => (
152 
															<option selected={generalOptions.name === label} key={value} value={value}>{label}</option>
153 
														))
154 
													}
10523 stevensc 155 
												</select>
156 
											</div>
157 
											<div className="form-group">
158 
												<label>Candidatos</label>
10524 stevensc 159 
												<select className='form-control' name='points' ref={register}>
160 
													{
161 
														candidatesOptions.map(({ label, value }) => (
162 
															<option selected={watch('candidate') === value} key={value} value={value}>{label}</option>
163 
														))
164 
													}
10523 stevensc 165 
												</select>
166 
											</div>
167 
										</div>
168 
										<div className="card">
169 
											<div className="card-body">
10532 stevensc 170 
												<h5>{generalOptions.name}</h5>
10524 stevensc 171 
												<p>{generalOptions.description}</p>
10532 stevensc 172 
												<h6>Funciones</h6>
10524 stevensc 173 
												<p>{generalOptions.functions}</p>
10532 stevensc 174 
												<h6>Objetivos</h6>
10524 stevensc 175 
												<p>{generalOptions.objectives}</p>
10523 stevensc 176 
											</div>
177 
										</div>
178 
									</div>
10532 stevensc 179 
									<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
180 
										{
181 
											competencies.map((competency) => (
182 
												<div className="card" key={competency.competency_uuid}>
183 
													<div className="card-header">
184 
														<h5>{competency.competency_name} - {competency.competency_type_name}</h5>
185 
													</div>
186 
													<div className="card-body">
187 
														{
188 
															competency.behaviors
189 
                                                            &&
190 
                                                            competency.behaviors.map((behavior) => (
191 
                                                            	<table key={behavior.uuid}>
192 
                                                            		<thead>
193 
                                                            			<tr>
194 
                                                            				<th>Conducta Observable</th>
195 
                                                            				<th>Comentario</th>
196 
                                                            				<th>Evaluación</th>
197 
                                                            			</tr>
198 
                                                            		</thead>
199 
                                                            		<tbody>
200 
                                                            			<tr>
201 
                                                            				<td>{behavior.description}</td>
202 
                                                            				<td>
203 
                                                            					<textarea
204 
                                                            						name="behavior-comment"
205 
                                                            						cols="30"
206 
                                                            						rows="10"
207 
                                                            						onChange={(e) => setCompetencies(prev => {
208 
                                                            							[...prev, behaviors.map(bh => bh.uuid === behavior.uuid ? behavior.comment = e.target.value : behavior)]
209 
                                                            						})}
210 
                                                            					/>
211 
                                                            				</td>
212 
                                                            				<td>
213 
                                                            					<select className='form-control' name='behavior-points' >
214 
                                                            						{
215 
                                                            							pointsOptions.map(({ label, value }) => (
216 
                                                            								<option selected={behavior.points === value} key={value} value={value}>{label}</option>
217 
                                                            							))
218 
                                                            						}
219 
                                                            					</select>
220 
                                                            				</td>
221 
                                                            			</tr>
222 
                                                            		</tbody>
223 
                                                            	</table>
224 
                                                            ))
225 
														}
226 
													</div>
227 
												</div>
228 
											))
229 
										}
230 
									</div>
10447 stevensc 231 
									<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
232 
										<div className="form-group">
10513 stevensc 233 
											<label>Comentario</label>
10522 stevensc 234 
											<input type="text" name="comment" className="form-control" ref={register} />
10447 stevensc 235 
										</div>
10513 stevensc 236 
										<div className="form-group">
237 
											<label>Evaluación</label>
10524 stevensc 238 
											<select className='form-control' name='points' ref={register}>
10513 stevensc 239 
												{
10519 stevensc 240 
													pointsOptions.map(({ label, value }) => (
10522 stevensc 241 
														<option selected={watch('points') === value} key={value} value={value}>{label}</option>
10519 stevensc 242 
													))
10513 stevensc 243 
												}
244 
											</select>
245 
										</div>
246 
										<div className="form-group">
247 
											<label>Estatus</label>
10524 stevensc 248 
											<select className='form-control' name='status' ref={register}>
10513 stevensc 249 
												{
10519 stevensc 250 
													statusOptions.map(({ label, value }) => (
10522 stevensc 251 
														<option selected={watch('status') === value} key={value} value={value}>{label}</option>
10519 stevensc 252 
													))
10513 stevensc 253 
												}
254 
											</select>
255 
										</div>
10447 stevensc 256 
									</div>
257 
								</div>
258 
								<div className="form-group">
10513 stevensc 259 
									<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
10439 stevensc 260 
                                        Guardar
10447 stevensc 261 
									</button>
262 
									<button
263 
										type="button"
264 
										className="btn btn-secondary btn-edit-cancel"
265 
										onClick={() => history.goBack()}
266 
									>
10439 stevensc 267 
                                        Cancelar
10447 stevensc 268 
									</button>
269 
								</div>
270 
							</div>
271 
						</div>
272 
					</div>
273 
				</div>
274 
			</div>
10522 stevensc 275 
		</section >
10447 stevensc 276 
	)
10436 stevensc 277 
}
278 
export default FormView