Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 10561 | Rev 10569 | 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 
                                            &&
10567 stevensc 186 
                                            competencies.map((competency) => (
10558 stevensc 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 
                                                            &&
10567 stevensc 195 
                                                            competency.behaviors.map((behavior) => (
196 
                                                            	<table key={behavior.uuid} className="table table-hover">
10558 stevensc 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
10567 stevensc 209 
                                                            						name={`${behavior.competency_uuid}_${behavior.uuid}-name`}
10558 stevensc 210 
                                                            						cols="30"
211 
                                                            						rows="3"
10567 stevensc 212 
                                                            						ref={register}
213 
                                                            						className='form-control w100'
10558 stevensc 214 
                                                            					/>
215 
                                                            				</td>
216 
                                                            				<td style={{ width: '20%' }}>
10567 stevensc 217 
                                                            					<select className='form-control' name={`${behavior.competency_uuid}_${behavior.uuid}-points`} ref={register}>
10558 stevensc 218 
                                                            						{
219 
                                                            							pointsOptions.map(({ label, value }) => (
220 
                                                            								<option selected={behavior.points === value} key={value} value={value}>{label}</option>
221 
                                                            							))
222 
                                                            						}
223 
                                                            					</select>
224 
                                                            				</td>
225 
                                                            			</tr>
226 
                                                            		</tbody>
227 
                                                            	</table>
10532 stevensc 228 
                                                            ))
10558 stevensc 229 
                                            			}
230 
                                            		</div>
231 
                                            	</div>
10540 stevensc 232 
                                            ))
10558 stevensc 233 
										}
234 
									</div>
235 
									<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
236 
										<div className="form-group">
237 
											<label>Comentario</label>
238 
											<input type="text" name="comment" className="form-control" ref={register} />
239 
										</div>
240 
										<div className="form-group">
241 
											<label>Evaluación</label>
242 
											<select className='form-control' name='points' ref={register}>
243 
												{
244 
													pointsOptions.map(({ label, value }) => (
245 
														<option selected={watch('points') === value} key={value} value={value}>{label}</option>
246 
													))
247 
												}
248 
											</select>
249 
										</div>
250 
										<div className="form-group">
251 
											<label>Estatus</label>
252 
											<select className='form-control' name='status' ref={register}>
253 
												{
254 
													statusOptions.map(({ label, value }) => (
255 
														<option selected={watch('status') === value} key={value} value={value}>{label}</option>
256 
													))
257 
												}
258 
											</select>
259 
										</div>
260 
									</div>
261 
								</div>
262 
								<div className="form-group">
263 
									<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
10439 stevensc 264 
                                        Guardar
10558 stevensc 265 
									</button>
266 
									<button
267 
										type="button"
268 
										className="btn btn-secondary btn-edit-cancel"
269 
										onClick={() => history.goBack()}
270 
									>
10439 stevensc 271 
                                        Cancelar
10558 stevensc 272 
									</button>
273 
								</div>
274 
							</div>
275 
						</div>
276 
					</div>
277 
				</div>
278 
			</div>
279 
		</section >
280 
	)
10436 stevensc 281 
}
282 
export default FormView