Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'

import React, { useEffect, useState } from 'react'

import { useForm } from 'react-hook-form'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../../redux/notification/notification.actions'

import DescriptionInput from '../../../shared/DescriptionInput'

const levelOptions = {

	'1': 'Uno',

	'2': 'Dos',

	'3': 'Tres',

	'4': 'Cuatro',

	'5': 'Cinco'

}

const EditView = ({ actionLink }) => {

	const { register, handleSubmit, setValue, watch } = useForm()

	const [currentJobDescription, setCurretJobDescription] = useState('')

	const [jobDescriptionOptions, setJobDescriptionOptions] = useState([])

	const [competencyTypes, setCompetencyTypes] = useState([])

	const [competenciesSelected, setCompetenciesSelected] = useState([])

	const [status, setStatus] = useState('a')

	const dispatch = useDispatch()

	useEffect(() => {

		register('description')

	}, [])

	useEffect(() => {

		axios.get(actionLink)

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				setValue('name', data.data.name)

				setValue('description', data.data.description)

				setCurretJobDescription(data.data.job_description_id)

				setStatus(data.data.status)

			})

	}, [actionLink])

	useEffect(() => {

		axios.get(`/settings/jobs-description/edit/${currentJobDescription}`)

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				setJobDescriptionOptions([...data.data.jobs_description, { job_description_id: data.data.uuid, name: data.data.name }])

				setCompetenciesSelected(data.data.competencies_selected)

				setCompetencyTypes(data.data.competency_types)

			})

	}, [currentJobDescription])

	return (

		<section className="content">

			<div className="row" style={{ padding: 16 }}>

				<div className="col-xs-12 col-md-12">

					<form onSubmit={handleSubmit}>

						<div className="form-group">

							<label>Nombre</label>

							<input type="text" name="name" className='form-control' ref={register({ required: true, maxLength: 50 })} />

						</div>

						<div className="form-group">

							<label>Cargo a evaluar</label>

							<select name="job_description_id" ref={register({ required: true })} className="form-control">

								{

									jobDescriptionOptions.map(({ name, job_description_id }) => (

										<option selected={job_description_id === currentJobDescription} key={job_description_id} value={job_description_id}>{name}</option>

									))

								}

							</select>

						</div>

						<div className="form-group">

							<label htmlFor="form-description">Descripción</label>

							<DescriptionInput

								defaultValue={watch('description')}

								name='description'

								onChange={setValue}

							/>

						</div>

						<div className="form-group">

							<label htmlFor="form-status">Estatus</label>

							<select name="form-status" className="form-control">

								<option selected={status === 'i'} value="i">Inactivo</option>

								<option selected={status === 'a'} value="a">Activo</option>

							</select>

						</div>

						<br />

						<div className="row">

							<div className="col-xs-12 col-md-12">

								<div className="panel-group" id="rows" />

							</div>

						</div>

						<div className="form-group" id="competencies-to-job" style={{}}>

							<div className="row">

								<div className="col-xs-12 col-md-12">

									<hr />

									<h4 style={{ fontSize: 18, fontWeight: 'bold' }}>Competencias asociadas al cargo:</h4>

									<br />

									<div className="panel-group" id="rows-job-competencies" >

										{

											competenciesSelected.map((competency) => {

												const type = competencyTypes.find((type) => type.competency_type_id === competency.competency_type_id)

												return (

													<div className="panel panel-default" key={competency.competency_id} id={`panel-${competency.competency_id}`}>

														<div className="panel-heading">

															<h4 className="panel-title" style={{ fontSize: 18 }}>

																<a className="accordion-toggle" data-toggle="collapse" aria-expanded="true" href={`collapse-${competency.competency_id}`}>

																	<span className={`competency-name-${competency.competency_id}`}>

																		{`${type.name} - ${competency.name}`}

																	</span>

																</a>

															</h4>

														</div>

														<div id="collapse-46d0f805-03ad-4c06-93c2-2a4ec87f6b97" className="panel-collapse in collapse show">

															<div className="panel-body">

																<div className="table-responsive">

																	<table className="table table-bordered">

																		<thead>

																			<tr>

																				<th style={{ width: '80%' }}>Conducta Observable</th>

																				<th style={{ width: '20%' }}>Nivel</th>

																			</tr>

																		</thead>

																		<tbody>

																			{

																				competency.behaviors?.map(({ behavior_id, description, level }) => (

																					<tr key={behavior_id}>

																						<td className="text-left">

																							{description}

																						</td>

																						<td>

																							{levelOptions[level]}

																						</td>

																					</tr>

																				))

																			}

																		</tbody>

																	</table>

																</div>

															</div>

														</div>

													</div>

												)

											})

										}

									</div>

								</div>

							</div>

						</div>

						<div className="form-group">

							<button type="button" form="form-main" className="btn btn-info">Guardar & Continuar</button>

							<button type="button" className="btn btn-primary">Guardar & Cerrar</button>

							<button type="button" className="btn btn-secondary">Cancelar</button>

						</div>

					</form>

				</div>

			</div >

		</section >

	)

}

export default EditView