Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
14197 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
2 
import axios from 'axios'
14231 stevensc 3 
import { CKEditor } from 'ckeditor4-react'
14197 stevensc 4 
import React, { useEffect, useState } from 'react'
14237 stevensc 5 
import { useRef } from 'react'
14197 stevensc 6 
import { useForm } from 'react-hook-form'
7 
import { useDispatch } from 'react-redux'
8 
import { useHistory, useParams } from 'react-router-dom'
9 
import { addNotification } from '../../redux/notification/notification.actions'
14231 stevensc 10 
import { config } from '../../shared/helpers/ckeditor_config'
14230 stevensc 11 
import ToggleComponent from '../../shared/ToggleComponent'
14197 stevensc 12 
 
14255 stevensc 13 
const CONDUCTS_OPTIONS = {
14 
	0: 'No aplica',
15 
	1: 'Uno',
16 
	2: 'Dos',
17 
	3: 'Tres',
18 
	4: 'Cuatro'
19 
}
20 
 
14197 stevensc 21 
const FormView = ({
22 
	actionLink = '',
23 
	setActionLink = function () { }
24 
}) => {
25 
 
26 
	// Hooks
27 
	const dispatch = useDispatch()
28 
	const history = useHistory()
14237 stevensc 29 
	const selectInput = useRef(null)
14246 stevensc 30 
	const selectInput2 = useRef(null)
14197 stevensc 31 
	const { action } = useParams()
14234 stevensc 32 
	const {
33 
		setValue,
34 
		register,
14236 stevensc 35 
		handleSubmit
14234 stevensc 36 
	} = useForm()
14197 stevensc 37 
 
38 
	//States
14234 stevensc 39 
	const [initObjectives, setInitObjectives] = useState('')
40 
	const [initFunctions, setInitFunctions] = useState('')
14237 stevensc 41 
	const [competencyOptions, setCompetencyOptions] = useState([])
42 
	const [competenciesSelected, setCompetenciesSelected] = useState([])
43 
	const [competencyTypeOptions, setCompetencyTypeOptions] = useState([])
14246 stevensc 44 
	const [jobsDescription, setJobsDescription] = useState([])
45 
	const [subordinatesSelected, setSubordinatesSelected] = useState([])
14197 stevensc 46 
 
14251 stevensc 47 
	const onSubmit = (data) => {
14197 stevensc 48 
 
14206 stevensc 49 
		const submitData = new FormData()
14252 stevensc 50 
		submitData.append('subordinates_selected', JSON.stringify(subordinatesSelected))
51 
		submitData.append('competencies_selected', JSON.stringify(competenciesSelected))
14251 stevensc 52 
		submitData.append('name', data.name)
53 
		submitData.append('job_description_id_boss', data.job_description_id_boss)
54 
		submitData.append('status', data.status ? 'a' : 'i')
55 
		submitData.append('objectives', data.objectives)
56 
		submitData.append('functions', data.functions)
14197 stevensc 57 
 
58 
		axios.post(actionLink, submitData)
59 
			.then(({ data }) => {
60 
				if (!data.success) {
61 
					return dispatch(addNotification({
62 
						style: 'danger',
63 
						msg: typeof data.data === 'string'
64 
							? data.data
65 
							: 'Ha ocurrido un error'
66 
					}))
67 
				}
68 
 
69 
				history.goBack()
70 
				setActionLink('')
71 
				dispatch(addNotification({
72 
					style: 'success',
73 
					msg: `Registro ${action === 'edit' ? 'actualizado' : 'añadido'}`
74 
				}))
75 
			})
76 
	}
77 
 
14246 stevensc 78 
	const addCompetencies = () => {
14237 stevensc 79 
		const current_competency = competencyOptions.find(competency => competency.competency_id === selectInput.current.value)
14246 stevensc 80 
		const filterCompetencies = new Set([current_competency, ...competenciesSelected])
81 
		setCompetenciesSelected([...filterCompetencies])
14237 stevensc 82 
	}
83 
 
14246 stevensc 84 
	const addSubordinates = () => {
85 
		const current_subordinate = jobsDescription.find(subordinate => subordinate.job_description_id === selectInput2.current.value)
86 
		const filterSubordinate = new Set([current_subordinate, ...subordinatesSelected])
14248 stevensc 87 
		console.log(filterSubordinate)
88 
		setSubordinatesSelected([...filterSubordinate])
14246 stevensc 89 
	}
90 
 
14241 stevensc 91 
	const deleteCompetency = (id) => {
14251 stevensc 92 
		setCompetenciesSelected(prev => prev.filter(competency => competency.competency_id !== id))
14241 stevensc 93 
	}
94 
 
14246 stevensc 95 
	const deleteSubordinate = (id) => {
14251 stevensc 96 
		setSubordinatesSelected(prev => prev.filter(subordinate => subordinate.job_description_id !== id))
14246 stevensc 97 
	}
98 
 
14197 stevensc 99 
	useEffect(() => {
14230 stevensc 100 
		register('status')
14231 stevensc 101 
		register('objectives')
102 
		register('functions')
14230 stevensc 103 
	}, [])
104 
 
105 
	useEffect(() => {
14197 stevensc 106 
		axios.get(actionLink)
107 
			.then(({ data }) => {
108 
				if (!data.success) {
109 
					return dispatch(addNotification({
110 
						style: 'danger',
111 
						msg: 'Ha ocurrido un error'
112 
					}))
113 
				}
114 
 
14237 stevensc 115 
				setCompetencyOptions(data.data['competencies'])
116 
				setCompetencyTypeOptions(data.data['competency_types'])
14256 stevensc 117 
				setJobsDescription(data.data['jobs_description'])
118 
				if (action === 'edit') {
119 
					setInitObjectives(data.data['objectives'])
120 
					setInitFunctions(data.data['functions'])
121 
					setCompetenciesSelected(data.data['competencies_selected'])
122 
					setSubordinatesSelected(data.data['subordinates_selected'])
123 
					setValue('name', data.data['name'])
124 
					setValue('status', data.data['status'])
125 
					setValue('job_description_id_boss', data.data['job_description_id_boss'])
126 
				}
14197 stevensc 127 
			})
128 
	}, [action])
129 
 
14254 stevensc 130 
	useEffect(() => {
131 
		if (action === 'add') {
132 
			setInitFunctions(' ')
133 
			setInitObjectives(' ')
134 
		}
135 
	}, [action])
136 
 
14197 stevensc 137 
	return (
138 
		<section className="content">
139 
			<div className="container-fluid">
140 
				<div className="row">
141 
					<div className="col-12">
142 
						<form onSubmit={handleSubmit(onSubmit)}>
14232 stevensc 143 
							<div className='card'>
14197 stevensc 144 
								<div className="card-header">
145 
									<ul className="nav nav-tabs" id="myTab" role="tablist">
146 
										<li className="nav-item" role="presentation">
14252 stevensc 147 
											<button
148 
												className="nav-link active"
149 
												id="home-tab"
150 
												data-toggle="tab"
151 
												data-target="#home"
152 
												type="button"
153 
												role="tab"
154 
												aria-controls="home"
155 
												aria-selected="true"
156 
											>
157 
												General
158 
											</button>
14197 stevensc 159 
										</li>
160 
										<li className="nav-item" role="presentation">
14252 stevensc 161 
											<button
162 
												className="nav-link"
163 
												id="profile-tab"
164 
												data-toggle="tab"
165 
												data-target="#profile"
166 
												type="button"
167 
												role="tab"
168 
												aria-controls="profile"
169 
												aria-selected="false"
170 
											>
171 
												Competencias
172 
											</button>
14197 stevensc 173 
										</li>
174 
										<li className="nav-item" role="presentation">
14252 stevensc 175 
											<button
176 
												className="nav-link"
177 
												id="contact-tab"
178 
												data-toggle="tab"
179 
												data-target="#contact"
180 
												type="button"
181 
												role="tab"
182 
												aria-controls="contact"
183 
												aria-selected="false"
184 
											>
185 
												Dependientes
186 
											</button>
14197 stevensc 187 
										</li>
188 
									</ul>
189 
								</div>
190 
								<div className="card-body">
191 
									<div className="tab-content" id="myTabContent">
192 
										<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
14237 stevensc 193 
											<div className="card p-2">
14232 stevensc 194 
												<div className="d-flex">
14205 stevensc 195 
													<div className="col-4">
196 
														<div className="form-group">
197 
															<label>Nombre</label>
14228 stevensc 198 
															<input className='form-control' type="text" name='name' ref={register} />
14197 stevensc 199 
														</div>
14205 stevensc 200 
													</div>
201 
													<div className="col-4">
202 
														<div className="form-group">
203 
															<label>Nombre</label>
14206 stevensc 204 
															<select className='form-control' name="job_description_id_boss" ref={register}>
14205 stevensc 205 
																<option value="">No aplica</option>
14197 stevensc 206 
																{
14257 stevensc 207 
																	jobsDescription.map((description) =>
208 
																		<option
209 
																			key={description.job_description_id}
210 
																			value={description.job_description_id}
211 
																		>
212 
																			{description.name}
213 
																		</option>
14205 stevensc 214 
																	)
14197 stevensc 215 
																}
14205 stevensc 216 
															</select>
14197 stevensc 217 
														</div>
218 
													</div>
14228 stevensc 219 
													<div className="col-4">
220 
														<div className="form-group">
14231 stevensc 221 
															<label>Estatus</label>
14230 stevensc 222 
															<ToggleComponent
223 
																setValue={(e) => setValue('status', e)}
224 
															/>
14228 stevensc 225 
														</div>
226 
													</div>
14205 stevensc 227 
												</div>
14232 stevensc 228 
												<div className="d-flex">
229 
													<div className="form-group w-100">
14231 stevensc 230 
														<label>Objetivo</label>
14237 stevensc 231 
														{
14254 stevensc 232 
															(initObjectives)
14237 stevensc 233 
															&&
234 
															<CKEditor
235 
																onChange={(e) => setValue('objectives', e.editor.getData())}
14238 stevensc 236 
																onInstanceReady={(e) => e.editor.setData(initObjectives)}
14237 stevensc 237 
																config={config}
238 
																name="objectives"
239 
															/>
240 
														}
14231 stevensc 241 
													</div>
242 
												</div>
14232 stevensc 243 
												<div className="d-flex">
244 
													<div className="form-group w-100">
14231 stevensc 245 
														<label>Funciones</label>
14237 stevensc 246 
														{
247 
															initFunctions
248 
															&&
249 
															<CKEditor
250 
																onChange={(e) => setValue('functions', e.editor.getData())}
14240 stevensc 251 
																onInstanceReady={(e) => e.editor.setData(initFunctions)}
14237 stevensc 252 
																config={config}
253 
																name="functions"
254 
															/>
255 
														}
14231 stevensc 256 
													</div>
257 
												</div>
14205 stevensc 258 
											</div>
14197 stevensc 259 
										</div>
14205 stevensc 260 
										<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
14237 stevensc 261 
											<div className="card p-2">
262 
												<div className="d-flex justify-content-around">
14238 stevensc 263 
													<div className="col-9">
14251 stevensc 264 
														<select className='form-control' ref={selectInput}>
14238 stevensc 265 
															<option value="">Seleccione</option>
266 
															{
267 
																competencyOptions.map((competency) => {
268 
																	const competency_type = competencyTypeOptions.find(type => type.competency_type_id === competency.competency_type_id)
14206 stevensc 269 
 
14238 stevensc 270 
																	return (
271 
																		<option
272 
																			key={competency.competency_id}
273 
																			value={competency.competency_id}>
14239 stevensc 274 
																			{`${competency_type?.name} - ${competency.name}`}
14238 stevensc 275 
																		</option>
276 
																	)
277 
																})
278 
															}
279 
														</select>
280 
													</div>
281 
													<div className='col-3'>
282 
														<button
14240 stevensc 283 
															type='button'
14238 stevensc 284 
															className='btn btn-primary'
14246 stevensc 285 
															onClick={addCompetencies}
14238 stevensc 286 
														>
287 
															Agregar Competencia
288 
														</button>
289 
													</div>
14237 stevensc 290 
												</div>
14241 stevensc 291 
												{
292 
													competenciesSelected.map(competency_selected => {
293 
														const competency_type = competencyTypeOptions.find(type => type.competency_type_id === competency_selected.competency_type_id)
294 
 
295 
														return (
296 
															<div key={competency_selected.competency_type_id}>
14244 stevensc 297 
																<h3 className='my-2'>{`${competency_type.name} - ${competency_selected.name}`}</h3>
14242 stevensc 298 
																<table className='table table-bordered'>
14241 stevensc 299 
																	<thead>
300 
																		<tr>
301 
																			<th>Elemento</th>
302 
																			<th>Título</th>
303 
																			<th>Nivel</th>
304 
																			<th>Acciones</th>
305 
																		</tr>
306 
																	</thead>
307 
																	<tbody>
308 
																		<tr>
309 
																			<td>Competencia</td>
310 
																			<td>{competency_selected.name}</td>
311 
																			<td></td>
312 
																			<td>
313 
																				<button
314 
																					type='button'
315 
																					className='btn btn-primary'
14242 stevensc 316 
																					onClick={() => deleteCompetency(competency_selected.competency_id)}
14241 stevensc 317 
																				>
14245 stevensc 318 
																					<i className='fa fa-ban mr-1' />
14241 stevensc 319 
																					Borrar Competencia
320 
																				</button>
321 
																			</td>
322 
																		</tr>
14243 stevensc 323 
																		{
324 
																			competency_selected.behaviors?.map(behavior => (
325 
																				<tr key={behavior.behavior_id}>
14244 stevensc 326 
																					<td>- Conducta Observable</td>
14243 stevensc 327 
																					<td>{behavior.description}</td>
14255 stevensc 328 
																					<td>{CONDUCTS_OPTIONS[behavior.level]}</td>
14243 stevensc 329 
																					<td>
330 
																						<button
331 
																							type='button'
332 
																							className='btn btn-primary'
14246 stevensc 333 
																							onClick={() => deleteSubordinate(competency_selected.competency_id)}
14243 stevensc 334 
																						>
14245 stevensc 335 
																							<i className='fa fa-edit mr-1' />
14243 stevensc 336 
																							Editar Perfil
337 
																						</button>
338 
																					</td>
339 
																				</tr>
340 
																			))
341 
																		}
14241 stevensc 342 
																	</tbody>
343 
																</table>
344 
															</div>
345 
														)
346 
													})
347 
												}
14237 stevensc 348 
											</div>
14205 stevensc 349 
										</div>
14197 stevensc 350 
										<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
14245 stevensc 351 
											<div className="card p-2">
352 
												<div className="d-flex justify-content-around">
353 
													<div className="col-9">
14251 stevensc 354 
														<select className='form-control' ref={selectInput2}>
14245 stevensc 355 
															<option value="">Seleccione</option>
356 
															{
14247 stevensc 357 
																jobsDescription.map((subordinate) =>
358 
																	<option
359 
																		key={subordinate.job_description_id}
360 
																		value={subordinate.job_description_id}
361 
																	>
362 
																		{subordinate.name}
363 
																	</option>
14246 stevensc 364 
																)
14245 stevensc 365 
															}
366 
														</select>
367 
													</div>
368 
													<div className='col-3'>
369 
														<button
370 
															type='button'
371 
															className='btn btn-primary'
14246 stevensc 372 
															onClick={addSubordinates}
14245 stevensc 373 
														>
14246 stevensc 374 
															Agregar
14245 stevensc 375 
														</button>
376 
													</div>
377 
												</div>
14250 stevensc 378 
												<div className="d-block p-2">
379 
													<table className='table table-bordered'>
380 
														<thead>
381 
															<tr>
382 
																<th>Nombre</th>
383 
																<th>Acciones</th>
384 
															</tr>
385 
														</thead>
386 
														<tbody>
387 
															{
388 
																subordinatesSelected.map(subordinate =>
389 
																	<tr key={subordinate.job_description_id}>
390 
																		<td>{subordinate.name}</td>
391 
																		<td>
392 
																			<button
393 
																				type='button'
394 
																				className='btn btn-primary'
395 
																				onClick={() => deleteSubordinate(subordinate.job_description_id)}
396 
																			>
397 
																				<i className='fa fa-ban mr-1' />
398 
																				Borrar
399 
																			</button>
400 
																		</td>
401 
																	</tr>
402 
																)
403 
															}
404 
														</tbody>
405 
													</table>
406 
												</div>
14245 stevensc 407 
											</div>
14197 stevensc 408 
										</div>
409 
									</div>
410 
									<div className="form-group">
411 
										<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
412 
											Guardar & Cerrar
413 
										</button>
414 
										<button
415 
											type="button"
416 
											className="btn btn-secondary btn-edit-cancel"
417 
											onClick={() => history.goBack()}
418 
										>
419 
											Cancelar
420 
										</button>
421 
									</div>
422 
								</div>
423 
							</div>
424 
						</form>
425 
					</div>
426 
				</div>
14241 stevensc 427 
			</div >
14197 stevensc 428 
		</section >
429 
	)
430 
}
431 
 
432 
export default FormView