Proyectos de Subversion LeadersLinked - Backend

Rev

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