Proyectos de Subversion LeadersLinked - Backend

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 EditView = ({ actionLink }) => {

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

	const { currentJobDescription, setCurretJobDescription } = useState('')

	const { jobDescriptionOptions, setJobDescriptionOptions } = 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 }])

			})

	}, [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 htmlFor="form-name">Nombre</label>

							<input type="text" name="name" 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 select2-hidden-accessible">

								{

									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">

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

											<div className="panel-heading">

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

													<a className="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#panel-46d0f805-03ad-4c06-93c2-2a4ec87f6b97" href="#collapse-46d0f805-03ad-4c06-93c2-2a4ec87f6b97">

														<span className="competency-name46d0f805-03ad-4c06-93c2-2a4ec87f6b97">

															Competencias Transversales - Servicio

														</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>

																<tr>

																	<td className="text-left">

																		Enfocar sus acciones al logro de los resultados planteados.

																	</td>

																	<td>

																		Uno

																	</td>

																</tr>

															</tbody>

													</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>