Proyectos de Subversion LeadersLinked - Backend

Rev

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

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