Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'

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

import parse from 'html-react-parser'

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

import { useDispatch } from 'react-redux'

import { useHistory } from 'react-router-dom'

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

	// Hooks

	const history = useHistory()

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

	const dispatch = useDispatch()

	// State

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

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

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

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

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

	const onSubmit = () => {

		axios.post(actionLink, {

			name: watch('name'),

			description: watch('description'),

			status: status,

			job_description_id: currentJobDescription

		})

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				dispatch(addNotification({

					style: 'success',

					msg: data.data

				}))

			})

	}

	const submitAndClose = () => {

		onSubmit()

		reset()

		history.goBack()

	}

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

					<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" className="form-control" onChange={(e) => setCurretJobDescription(e.target.value)}>

							{

								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={typeof watch('description') === 'string' ? parse(watch('description')) : ''}

							name='description'

							onChange={setValue}

						/>

					</div>

					<div className="form-group">

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

						<select name="form-status" className="form-control" onChange={(e) => setStatus(e.target.value)} value={status}>

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

									{

										competencyTypes.length > 0

										&&

										competenciesSelected.map((competency) => {

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

											return (

												<div key={competency.competency_id} className="panel panel-default" 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" data-parent={`#panel-${competency.competency_id}`} href={`#collapse-${competency.competency_id}`}>

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

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

																</span>

															</a>

														</h4>

													</div>

													<div id={`collapse-${competency.competency_id}`} 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" style={{ gap: '10px' }}>

						<button type="button" className="btn btn-info" onClick={onSubmit}>Guardar & Continuar</button>

						<button type="button" className="btn btn-primary" onClick={submitAndClose}>Guardar & Cerrar</button>

						<button type="button" className="btn btn-secondary" onClick={() => history.goBack()}>Cancelar</button>

					</div>

				</div>

			</div >

		</section >

	)

}

export default EditView