Proyectos de Subversion LeadersLinked - Backend

Rev

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