Proyectos de Subversion LeadersLinked - Backend

Rev

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