Proyectos de Subversion LeadersLinked - Backend

Rev

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