Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 10540 | Rev 10550 | 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 
 
10516 stevensc 12 
	// States
10524 stevensc 13 
	const [generalOptions, setGeneralOptions] = useState({
14 
		uuid: '',
15 
		name: '',
16 
		description: '',
17 
		functions: '',
18 
		objectives: ''
19 
	})
10518 stevensc 20 
	const [pointsOptions, setPointsOptions] = useState([
10516 stevensc 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 }
10518 stevensc 27 
	])
28 
	const [statusOptions, setStatusOptions] = useState([
10516 stevensc 29 
		{ label: 'Estatus', value: '' },
30 
		{ label: 'Aceptado', value: 'a' },
31 
		{ label: 'Rechazado', value: 'r' }
10518 stevensc 32 
	])
10524 stevensc 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 
	])
10540 stevensc 43 
	const [competencies, setCompetencies] = useState([])
10516 stevensc 44 
 
45 
	// Hooks
10522 stevensc 46 
	const { setValue, register, watch } = useForm()
10447 stevensc 47 
	const history = useHistory()
10513 stevensc 48 
	const dispatch = useDispatch()
10450 stevensc 49 
	const { action } = useParams()
10439 stevensc 50 
 
10450 stevensc 51 
	useEffect(() => {
10513 stevensc 52 
 
10516 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 
 
10516 stevensc 59 
					if (!data.success) {
60 
						dispatch(addNotification({
61 
							style: 'error',
62 
							msg: 'Ha ocurrido un error'
63 
						}))
64 
					}
10513 stevensc 65 
 
10516 stevensc 66 
					setValue('comment', resData.interview.comment)
10522 stevensc 67 
					setValue('points', resData.interview.points)
68 
					setValue('status', resData.interview.status)
10540 stevensc 69 
					setCompetencies(resData.job_description.competencies)
10524 stevensc 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 
					})
10516 stevensc 78 
				})
79 
		}
80 
	}, [action])
81 
 
10513 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 
	}
122 
 
123 
	useEffect(() => {
10450 stevensc 124 
		console.log(action)
125 
	}, [])
126 
 
10447 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">
10524 stevensc 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>
10447 stevensc 137 
									</li>
138 
									<li className="nav-item" role="presentation">
10524 stevensc 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>
10447 stevensc 140 
									</li>
141 
									<li className="nav-item" role="presentation">
10524 stevensc 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>
10447 stevensc 143 
									</li>
144 
								</ul>
145 
							</div>
146 
							<div className="card-body">
147 
								<div className="tab-content" id="myTabContent">
10523 stevensc 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>
10524 stevensc 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 
													}
10523 stevensc 158 
												</select>
159 
											</div>
160 
											<div className="form-group">
161 
												<label>Candidatos</label>
10524 stevensc 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 
													}
10523 stevensc 168 
												</select>
169 
											</div>
170 
										</div>
171 
										<div className="card">
172 
											<div className="card-body">
10532 stevensc 173 
												<h5>{generalOptions.name}</h5>
10524 stevensc 174 
												<p>{generalOptions.description}</p>
10532 stevensc 175 
												<h6>Funciones</h6>
10524 stevensc 176 
												<p>{generalOptions.functions}</p>
10532 stevensc 177 
												<h6>Objetivos</h6>
10524 stevensc 178 
												<p>{generalOptions.objectives}</p>
10523 stevensc 179 
											</div>
180 
										</div>
181 
									</div>
10532 stevensc 182 
									<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
183 
										{
10540 stevensc 184 
											competencies.length
185 
                                            &&
186 
                                            competencies.map((competency) => (
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 
                                                            &&
195 
                                                            competency.behaviors.map((behavior) => (
196 
                                                            	<table key={behavior.uuid}>
197 
                                                            		<thead>
198 
                                                            			<tr>
10545 stevensc 199 
                                                            				<th style={{ width: '20%' }}>Conducta Observable</th>
200 
                                                            				<th style={{ width: '60%' }}>Comentario</th>
201 
                                                            				<th style={{ width: '20%' }}>Evaluación</th>
10532 stevensc 202 
                                                            			</tr>
203 
                                                            		</thead>
204 
                                                            		<tbody>
205 
                                                            			<tr>
10545 stevensc 206 
                                                            				<td style={{ width: '20%' }}>{behavior.description}</td>
207 
                                                            				<td style={{ width: '60%' }}>
10532 stevensc 208 
                                                            					<textarea
209 
                                                            						name="behavior-comment"
210 
                                                            						cols="30"
10545 stevensc 211 
                                                            						rows="3"
10532 stevensc 212 
                                                            						onChange={(e) => setCompetencies(prev => {
10545 stevensc 213 
                                                            							[...prev, prev.behaviors.map(bh => bh.uuid === behavior.uuid ? behavior.comment = e.target.value : behavior)]
10532 stevensc 214 
                                                            						})}
215 
                                                            					/>
216 
                                                            				</td>
10545 stevensc 217 
                                                            				<td style={{ width: '20%' }}>
10532 stevensc 218 
                                                            					<select className='form-control' name='behavior-points' >
219 
                                                            						{
220 
                                                            							pointsOptions.map(({ label, value }) => (
221 
                                                            								<option selected={behavior.points === value} key={value} value={value}>{label}</option>
222 
                                                            							))
223 
                                                            						}
224 
                                                            					</select>
225 
                                                            				</td>
226 
                                                            			</tr>
227 
                                                            		</tbody>
228 
                                                            	</table>
229 
                                                            ))
10540 stevensc 230 
                                            			}
231 
                                            		</div>
232 
                                            	</div>
233 
                                            ))
10532 stevensc 234 
										}
235 
									</div>
10447 stevensc 236 
									<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
237 
										<div className="form-group">
10513 stevensc 238 
											<label>Comentario</label>
10522 stevensc 239 
											<input type="text" name="comment" className="form-control" ref={register} />
10447 stevensc 240 
										</div>
10513 stevensc 241 
										<div className="form-group">
242 
											<label>Evaluación</label>
10524 stevensc 243 
											<select className='form-control' name='points' ref={register}>
10513 stevensc 244 
												{
10519 stevensc 245 
													pointsOptions.map(({ label, value }) => (
10522 stevensc 246 
														<option selected={watch('points') === value} key={value} value={value}>{label}</option>
10519 stevensc 247 
													))
10513 stevensc 248 
												}
249 
											</select>
250 
										</div>
251 
										<div className="form-group">
252 
											<label>Estatus</label>
10524 stevensc 253 
											<select className='form-control' name='status' ref={register}>
10513 stevensc 254 
												{
10519 stevensc 255 
													statusOptions.map(({ label, value }) => (
10522 stevensc 256 
														<option selected={watch('status') === value} key={value} value={value}>{label}</option>
10519 stevensc 257 
													))
10513 stevensc 258 
												}
259 
											</select>
260 
										</div>
10447 stevensc 261 
									</div>
262 
								</div>
263 
								<div className="form-group">
10513 stevensc 264 
									<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
10439 stevensc 265 
                                        Guardar
10447 stevensc 266 
									</button>
267 
									<button
268 
										type="button"
269 
										className="btn btn-secondary btn-edit-cancel"
270 
										onClick={() => history.goBack()}
271 
									>
10439 stevensc 272 
                                        Cancelar
10447 stevensc 273 
									</button>
274 
								</div>
275 
							</div>
276 
						</div>
277 
					</div>
278 
				</div>
279 
			</div>
10522 stevensc 280 
		</section >
10447 stevensc 281 
	)
10436 stevensc 282 
}
283 
export default FormView