Proyectos de Subversion LeadersLinked - Backend

Rev

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