Proyectos de Subversion LeadersLinked - Backend

Rev

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