Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 10567 | Rev 10753 | 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">
10569 stevensc 150 
											<div className="col-6">
151 
												<div className="form-group">
152 
													<label>Vacantes</label>
153 
													<select className='form-control' name='points' ref={register}>
154 
														{
155 
															vacancyOptions.map(({ label, value }) => (
156 
																<option selected={generalOptions.name === label} key={value} value={value}>{label}</option>
157 
															))
158 
														}
159 
													</select>
160 
												</div>
10558 stevensc 161 
											</div>
10569 stevensc 162 
											<div className="col-6">
163 
												<div className="form-group">
164 
													<label>Candidatos</label>
165 
													<select className='form-control' name='points' ref={register}>
166 
														{
167 
															candidatesOptions.map(({ label, value }) => (
168 
																<option selected={watch('candidate') === value} key={value} value={value}>{label}</option>
169 
															))
170 
														}
171 
													</select>
172 
												</div>
10558 stevensc 173 
											</div>
174 
										</div>
175 
										<div className="card">
176 
											<div className="card-body">
177 
												<h5>{generalOptions.name}</h5>
178 
												<p>{generalOptions.description}</p>
179 
												<h6>Funciones</h6>
180 
												<p>{generalOptions.functions}</p>
181 
												<h6>Objetivos</h6>
182 
												<p>{generalOptions.objectives}</p>
183 
											</div>
184 
										</div>
185 
									</div>
186 
									<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
187 
										{
188 
											competencies.length
10540 stevensc 189 
                                            &&
10567 stevensc 190 
                                            competencies.map((competency) => (
10558 stevensc 191 
                                            	<div className="card" key={competency.competency_uuid}>
192 
                                            		<div className="card-header">
193 
                                            			<h5>{competency.competency_name} - {competency.competency_type_name}</h5>
194 
                                            		</div>
195 
                                            		<div className="card-body">
196 
                                            			{
197 
                                            				competency.behaviors
10532 stevensc 198 
                                                            &&
10567 stevensc 199 
                                                            competency.behaviors.map((behavior) => (
200 
                                                            	<table key={behavior.uuid} className="table table-hover">
10558 stevensc 201 
                                                            		<thead>
202 
                                                            			<tr>
203 
                                                            				<th style={{ width: '20%' }}>Conducta Observable</th>
204 
                                                            				<th style={{ width: '60%' }}>Comentario</th>
205 
                                                            				<th style={{ width: '20%' }}>Evaluación</th>
206 
                                                            			</tr>
207 
                                                            		</thead>
208 
                                                            		<tbody>
209 
                                                            			<tr>
210 
                                                            				<td style={{ width: '20%' }}>{behavior.description}</td>
211 
                                                            				<td style={{ width: '60%' }}>
212 
                                                            					<textarea
10567 stevensc 213 
                                                            						name={`${behavior.competency_uuid}_${behavior.uuid}-name`}
10558 stevensc 214 
                                                            						cols="30"
215 
                                                            						rows="3"
10567 stevensc 216 
                                                            						ref={register}
217 
                                                            						className='form-control w100'
10558 stevensc 218 
                                                            					/>
219 
                                                            				</td>
220 
                                                            				<td style={{ width: '20%' }}>
10567 stevensc 221 
                                                            					<select className='form-control' name={`${behavior.competency_uuid}_${behavior.uuid}-points`} ref={register}>
10558 stevensc 222 
                                                            						{
223 
                                                            							pointsOptions.map(({ label, value }) => (
224 
                                                            								<option selected={behavior.points === value} key={value} value={value}>{label}</option>
225 
                                                            							))
226 
                                                            						}
227 
                                                            					</select>
228 
                                                            				</td>
229 
                                                            			</tr>
230 
                                                            		</tbody>
231 
                                                            	</table>
10532 stevensc 232 
                                                            ))
10558 stevensc 233 
                                            			}
234 
                                            		</div>
235 
                                            	</div>
10540 stevensc 236 
                                            ))
10558 stevensc 237 
										}
238 
									</div>
239 
									<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
240 
										<div className="form-group">
241 
											<label>Comentario</label>
242 
											<input type="text" name="comment" className="form-control" ref={register} />
243 
										</div>
244 
										<div className="form-group">
245 
											<label>Evaluación</label>
246 
											<select className='form-control' name='points' ref={register}>
247 
												{
248 
													pointsOptions.map(({ label, value }) => (
249 
														<option selected={watch('points') === value} key={value} value={value}>{label}</option>
250 
													))
251 
												}
252 
											</select>
253 
										</div>
254 
										<div className="form-group">
255 
											<label>Estatus</label>
256 
											<select className='form-control' name='status' ref={register}>
257 
												{
258 
													statusOptions.map(({ label, value }) => (
259 
														<option selected={watch('status') === value} key={value} value={value}>{label}</option>
260 
													))
261 
												}
262 
											</select>
263 
										</div>
264 
									</div>
265 
								</div>
266 
								<div className="form-group">
267 
									<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
10439 stevensc 268 
                                        Guardar
10558 stevensc 269 
									</button>
270 
									<button
271 
										type="button"
272 
										className="btn btn-secondary btn-edit-cancel"
273 
										onClick={() => history.goBack()}
274 
									>
10439 stevensc 275 
                                        Cancelar
10558 stevensc 276 
									</button>
277 
								</div>
278 
							</div>
279 
						</div>
280 
					</div>
281 
				</div>
282 
			</div>
283 
		</section >
284 
	)
10436 stevensc 285 
}
286 
export default FormView