Proyectos de Subversion LeadersLinked - Backend

Rev

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