Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15097 | Rev 15322 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 15097 Rev 15321
Línea 181... Línea 181...
181 
 
 181 
 
182 
	return (
 182 
	return (
183 
		<section className="content">
 183 
		<section className="content">
184 
			<div className="container-fluid">
 184 
			<div className="container-fluid">
185 
				<div className="row">
 - 
 
186 
					<div className="col-12">
 185 
				<div className="row">
187 
						<form onSubmit={handleSubmit(onSubmit)}>
 186 
					<form onSubmit={handleSubmit(onSubmit)}>
188 
							<div className='card'>
 187 
						<div className='card'>
189 
								<div className="card-header">
 188 
							<div className="card-header">
190 
									<ul className="nav nav-tabs" id="myTab" role="tablist">
 189 
								<ul className="nav nav-tabs" id="myTab" role="tablist">
191 
										<li className="nav-item" role="presentation">
 190 
									<li className="nav-item" role="presentation">
192 
											<button
 191 
										<button
193 
												className="nav-link active"
 192 
											className="nav-link active"
194 
												id="home-tab"
 193 
											id="home-tab"
195 
												data-toggle="tab"
 194 
											data-toggle="tab"
196 
												data-target="#home"
 195 
											data-target="#home"
197 
												type="button"
 196 
											type="button"
198 
												role="tab"
 197 
											role="tab"
199 
												aria-controls="home"
 198 
											aria-controls="home"
200 
												aria-selected="true"
 199 
											aria-selected="true"
201 
											>
 200 
										>
202 
												General
 201 
											General
203 
											</button>
 202 
										</button>
204 
										</li>
 203 
									</li>
205 
										<li className="nav-item" role="presentation">
 204 
									<li className="nav-item" role="presentation">
206 
											<button
 205 
										<button
207 
												className="nav-link"
 206 
											className="nav-link"
208 
												id="profile-tab"
 207 
											id="profile-tab"
209 
												data-toggle="tab"
 208 
											data-toggle="tab"
210 
												data-target="#profile"
 209 
											data-target="#profile"
211 
												type="button"
 210 
											type="button"
212 
												role="tab"
 211 
											role="tab"
213 
												aria-controls="profile"
 212 
											aria-controls="profile"
214 
												aria-selected="false"
 213 
											aria-selected="false"
215 
											>
 214 
										>
216 
												Competencias
 215 
											Competencias
217 
											</button>
 216 
										</button>
218 
										</li>
 217 
									</li>
219 
										<li className="nav-item" role="presentation">
 218 
									<li className="nav-item" role="presentation">
220 
											<button
 219 
										<button
221 
												className="nav-link"
 220 
											className="nav-link"
222 
												id="contact-tab"
 221 
											id="contact-tab"
223 
												data-toggle="tab"
 222 
											data-toggle="tab"
224 
												data-target="#contact"
 223 
											data-target="#contact"
225 
												type="button"
 224 
											type="button"
226 
												role="tab"
 225 
											role="tab"
227 
												aria-controls="contact"
 226 
											aria-controls="contact"
228 
												aria-selected="false"
 227 
											aria-selected="false"
229 
											>
 228 
										>
230 
												Dependientes
 229 
											Dependientes
231 
											</button>
 230 
										</button>
232 
										</li>
 231 
									</li>
233 
									</ul>
 232 
								</ul>
234 
								</div>
 233 
							</div>
235 
								<div className="card-body">
 234 
							<div className="card-body">
236 
									<div className="tab-content" id="myTabContent">
 235 
								<div className="tab-content" id="myTabContent">
237 
										<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
 236 
									<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
238 
											<div className="card p-2">
 237 
										<div className="card p-2">
239 
												<div className="d-flex">
 238 
											<div className="row">
240 
													<div className="col-4">
 239 
												<div className="col-md-4">
241 
														<div className="form-group">
 240 
													<div className="form-group">
242 
															<label>Nombre</label>
 241 
														<label>Nombre</label>
243 
															<input className='form-control' type="text" name='name' ref={register} />
 - 
 
244 
														</div>
 - 
 
245 
													</div>
 - 
 
246 
													<div className="col-4">
 - 
 
247 
														<div className="form-group">
 - 
 
248 
															<label>Superior</label>
 - 
 
249 
															<select className='form-control' name="job_description_id_boss" ref={register}>
 - 
 
250 
																<option value="">No aplica</option>
 - 
 
251 
																{
 - 
 
252 
																	jobsDescription.map((description) =>
 - 
 
253 
																		<option
 - 
 
254 
																			key={description.job_description_id}
 - 
 
255 
																			value={description.job_description_id}
 - 
 
256 
																		>
 - 
 
257 
																			{description.name}
 - 
 
258 
																		</option>
 - 
 
259 
																	)
 - 
 
260 
																}
 - 
 
261 
															</select>
 - 
 
262 
														</div>
 - 
 
263 
													</div>
 - 
 
264 
													<div className="col-4">
 - 
 
265 
														<div className="form-group">
 - 
 
266 
															<label>Estatus</label>
 - 
 
267 
															<ToggleComponent
 - 
 
268 
																setValue={(e) => setValue('status', e)}
 - 
 
269 
																currentValue={isActive}
 - 
 
270 
															/>
 - 
 
271 
														</div>
 - 
 
272 
													</div>
 - 
 
273 
												</div>
 - 
 
274 
												<div className="d-flex">
 - 
 
275 
													<div className="form-group w-100">
 - 
 
276 
														<label>Objetivo</label>
 - 
 
277 
														{
 - 
 
278 
															(initObjectives)
 - 
 
279 
															&&
 - 
 
280 
															<CKEditor
 - 
 
281 
																onChange={(e) => setValue('objectives', e.editor.getData())}
 - 
 
282 
																onInstanceReady={(e) => e.editor.setData(initObjectives)}
 - 
 
283 
																config={config}
 - 
 
284 
																name="objectives"
 - 
 
285 
															/>
 - 
 
286 
														}
 - 
 
287 
													</div>
 - 
 
288 
												</div>
 - 
 
289 
												<div className="d-flex">
 - 
 
290 
													<div className="form-group w-100">
 - 
 
291 
														<label>Funciones</label>
 - 
 
292 
														{
 - 
 
293 
															initFunctions
 - 
 
294 
															&&
 - 
 
295 
															<CKEditor
 - 
 
296 
																onChange={(e) => setValue('functions', e.editor.getData())}
 - 
 
297 
																onInstanceReady={(e) => e.editor.setData(initFunctions)}
 - 
 
298 
																config={config}
 - 
 
299 
																name="functions"
 - 
 
300 
															/>
 - 
 
301 
														}
 242 
														<input className='form-control' type="text" name='name' ref={register} />
302 
													</div>
 243 
													</div>
303 
												</div>
 - 
 
304 
											</div>
 - 
 
305 
										</div>
 - 
 
306 
										<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
 244 
												</div>
307 
											<div className="card p-2">
 245 
												<div className="col-md-4">
308 
												<div className="d-flex justify-content-around">
 246 
													<div className="form-group">
309 
													<div className="col-9">
 247 
														<label>Superior</label>
310 
														<select className='form-control' ref={selectInput}>
 248 
														<select className='form-control' name="job_description_id_boss" ref={register}>
311 
															<option value="">Seleccione</option>
 249 
															<option value="">No aplica</option>
312 
															{
 - 
 
313 
																competencyOptions.map((competency) => {
 - 
 
314 
																	const competency_type = competencyTypeOptions.find(type => type.competency_type_id === competency.competency_type_id)
 - 
 
315 
 
 - 
 
316 
																	return (
 - 
 
317 
																		<option
 - 
 
318 
																			key={competency.competency_id}
 - 
 
319 
																			value={competency.competency_id}>
 - 
 
320 
																			{`${competency_type?.name} - ${competency.name}`}
 - 
 
321 
																		</option>
 - 
 
322 
																	)
 - 
 
323 
																})
 - 
 
324 
															}
 - 
 
325 
														</select>
 - 
 
326 
													</div>
 - 
 
327 
													<div className='col-3'>
 - 
 
328 
														<button
 - 
 
329 
															type='button'
 - 
 
330 
															className='btn btn-primary'
 - 
 
331 
															onClick={addCompetencies}
 - 
 
332 
														>
 - 
 
333 
															Agregar Competencia
 - 
 
334 
														</button>
 - 
 
335 
													</div>
 - 
 
336 
												</div>
 - 
 
337 
												{
 - 
 
338 
													competenciesSelected.map(competency_selected => {
 - 
 
339 
														const competency_type = competencyTypeOptions.find(type => type.competency_type_id === competency_selected.competency_type_id)
 - 
 
340 
 
 - 
 
341 
														return (
 - 
 
342 
															<div key={competency_selected.competency_type_id}>
 - 
 
343 
																<h3 className='my-2'>{`${competency_type.name} - ${competency_selected.name}`}</h3>
 - 
 
344 
																<table className='table table-bordered'>
 - 
 
345 
																	<thead>
 - 
 
346 
																		<tr>
 - 
 
347 
																			<th>Elemento</th>
 - 
 
348 
																			<th>Título</th>
 - 
 
349 
																			<th>Nivel</th>
 - 
 
350 
																			<th>Acciones</th>
 - 
 
351 
																		</tr>
 - 
 
352 
																	</thead>
 - 
 
353 
																	<tbody>
 - 
 
354 
																		<tr>
 - 
 
355 
																			<td>Competencia</td>
 - 
 
356 
																			<td>{competency_selected.name}</td>
 - 
 
357 
																			<td></td>
 - 
 
358 
																			<td>
 - 
 
359 
																				<button
 - 
 
360 
																					type='button'
 - 
 
361 
																					className='btn btn-primary'
 - 
 
362 
																					onClick={() => deleteCompetency(competency_selected.competency_id)}
 - 
 
363 
																				>
 - 
 
364 
																					<i className='fa fa-ban mr-1' />
 - 
 
365 
																					Borrar Competencia
 - 
 
366 
																				</button>
 - 
 
367 
																			</td>
 - 
 
368 
																		</tr>
 - 
 
369 
																		{
 - 
 
370 
																			competency_selected.behaviors?.map(behavior => (
 - 
 
371 
																				<tr key={behavior.behavior_id}>
 - 
 
372 
																					<td>- Conducta Observable</td>
 - 
 
373 
																					<td>{behavior.description}</td>
 - 
 
374 
																					<td>{CONDUCTS_OPTIONS[behavior.level]}</td>
 - 
 
375 
																					<td>
 - 
 
376 
																						<button
 - 
 
377 
																							type='button'
 - 
 
378 
																							className='btn btn-primary'
 - 
 
379 
																							onClick={() => displayModal(behavior)}
 - 
 
380 
																						>
 - 
 
381 
																							<i className='fa fa-edit mr-1' />
 - 
 
382 
																							Editar Perfil
 - 
 
383 
																						</button>
 - 
 
384 
																					</td>
 - 
 
385 
																				</tr>
 - 
 
386 
																			))
 - 
 
387 
																		}
 - 
 
388 
																	</tbody>
 - 
 
389 
																</table>
 - 
 
390 
															</div>
 - 
 
391 
														)
 - 
 
392 
													})
 - 
 
393 
												}
 - 
 
394 
											</div>
 - 
 
395 
											<ConductModal
 - 
 
396 
												isShow={isShowModal}
 - 
 
397 
												onSubmit={(val) => editLevel(val)}
 - 
 
398 
												closeModal={() => setIsShowModal(false)}
 - 
 
399 
											/>
 - 
 
400 
										</div>
 - 
 
401 
										<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
 - 
 
402 
											<div className="card p-2">
 - 
 
403 
												<div className="d-flex justify-content-around">
 - 
 
404 
													<div className="col-9">
 - 
 
405 
														<select className='form-control' ref={selectInput2}>
 - 
 
406 
															<option value="">Seleccione</option>
 - 
 
407 
															{
 250 
															{
408 
																jobsDescription.map((subordinate) =>
 251 
																jobsDescription.map((description) =>
409 
																	<option
 252 
																	<option
410 
																		key={subordinate.job_description_id}
 253 
																		key={description.job_description_id}
411 
																		value={subordinate.job_description_id}
 254 
																		value={description.job_description_id}
412 
																	>
 255 
																	>
413 
																		{subordinate.name}
 256 
																		{description.name}
414 
																	</option>
 257 
																	</option>
415 
																)
 258 
																)
416 
															}
 259 
															}
417 
														</select>
 260 
														</select>
418 
													</div>
 - 
 
419 
													<div className='col-3'>
 261 
													</div>
420 
														<button
 262 
												</div>
421 
															type='button'
 263 
												<div className="col-md-4">
422 
															className='btn btn-primary'
 264 
													<div className="form-group">
423 
															onClick={addSubordinates}
 265 
														<label>Estatus</label>
- 
 
 266 
														<ToggleComponent
424 
														>
 267 
															setValue={(e) => setValue('status', e)}
425 
															Agregar
 268 
															currentValue={isActive}
426 
														</button>
 269 
														/>
427 
													</div>
 270 
													</div>
- 
 
 271 
												</div>
- 
 
 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">
428 
												</div>
 303 
											<div className="d-flex justify-content-around">
- 
 
 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}>
429 
												<div className="d-block p-2">
 337 
															<h3 className='my-2'>{`${competency_type.name} - ${competency_selected.name}`}</h3>
430 
													<table className='table table-bordered'>
 338 
															<table className='table table-bordered'>
431 
														<thead>
 339 
																<thead>
- 
 
 340 
																	<tr>
- 
 
 341 
																		<th>Elemento</th>
432 
															<tr>
 342 
																		<th>Título</th>
433 
																<th>Nombre</th>
 343 
																		<th>Nivel</th>
434 
																<th>Acciones</th>
 344 
																		<th>Acciones</th>
435 
															</tr>
 345 
																	</tr>
436 
														</thead>
 346 
																</thead>
437 
														<tbody>
 347 
																<tbody>
438 
															{
 348 
																	<tr>
439 
																subordinatesSelected.map(subordinate =>
 349 
																		<td>Competencia</td>
440 
																	<tr key={subordinate.job_description_id}>
 350 
																		<td>{competency_selected.name}</td>
441 
																		<td>{subordinate.name}</td>
 351 
																		<td></td>
442 
																		<td>
 352 
																		<td>
443 
																			<button
 353 
																			<button
444 
																				type='button'
 354 
																				type='button'
445 
																				className='btn btn-primary'
 355 
																				className='btn btn-primary'
446 
																				onClick={() => deleteSubordinate(subordinate.job_description_id)}
 356 
																				onClick={() => deleteCompetency(competency_selected.competency_id)}
447 
																			>
 357 
																			>
448 
																				<i className='fa fa-ban mr-1' />
 358 
																				<i className='fa fa-ban mr-1' />
449 
																				Borrar
 359 
																				Borrar Competencia
450 
																			</button>
 360 
																			</button>
451 
																		</td>
 361 
																		</td>
452 
																	</tr>
 362 
																	</tr>
- 
 
 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>
453 
																)
 380 
																		))
454 
															}
 381 
																	}
455 
														</tbody>
 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">
- 
 
 397 
											<div className="d-flex justify-content-around">
- 
 
 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>
- 
 
 412 
												</div>
- 
 
 413 
												<div className='col-md-3'>
- 
 
 414 
													<button
- 
 
 415 
														type='button'
- 
 
 416 
														className='btn btn-primary'
- 
 
 417 
														onClick={addSubordinates}
- 
 
 418 
													>
- 
 
 419 
														Agregar
456 
													</table>
 420 
													</button>
457 
												</div>
 421 
												</div>
- 
 
 422 
											</div>
- 
 
 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>
458 
											</div>
 451 
											</div>
459 
										</div>
 452 
										</div>
- 
 
 453 
									</div>
460 
									</div>
 454 
								</div>
461 
									<div className="form-group">
 455 
								<div className="form-group">
462 
										<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
 456 
									<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
463 
											Guardar & Cerrar
 457 
										Guardar & Cerrar
464 
										</button>
 458 
									</button>
465 
										<button
 459 
									<button
466 
											type="button"
 460 
										type="button"
467 
											className="btn btn-secondary btn-edit-cancel"
 461 
										className="btn btn-secondary btn-edit-cancel"
468 
											onClick={() => setAction('')}
 462 
										onClick={() => setAction('')}
469 
										>
 463 
									>
470 
											Cancelar
 464 
										Cancelar
471 
										</button>
 - 
 
472 
									</div>
 465 
									</button>
473 
								</div>
 466 
								</div>
474 
							</div>
 467 
							</div>
475 
						</form>
 468 
						</div>
476 
					</div>
 469 
					</form>
477 
				</div>
 470 
				</div>
478 
			</div >
 471 
			</div>
479 
		</section >
 472 
		</section >
480 
	)
 473 
	)
Línea 481... Línea 474...
481 
}
 474 
}
482 
 
 475