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

	'0': 'Cero',

	'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 = () => {

		const submitData = new FormData()

		submitData.append('name', watch('name'))

		submitData.append('description', watch('description'))

		submitData.append('status', status)

		submitData.append('job_description_id', currentJobDescription)

		submitData.append('content', '[]')

		axios.post(actionLink, submitData)

			.then(({ data }) => {

				if (!data.success) {

					typeof data.data === 'string'

						?

						dispatch(addNotification({

							style: 'danger',

							msg: data.data

						}))

						: Object.entries(data.data).map(([key, value]) =>

							value.map(err =>

								dispatch(addNotification({

									style: 'danger',

									msg: `${key}: ${err}`

								}))

							)

						)

					return

				}

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

						</div>

					</div>

					<div className="d-flex" style={{ gap: '5px' }}>

						<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