Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable no-mixed-spaces-and-tabs */

import axios from 'axios'

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

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

import { useDispatch } from 'react-redux'

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

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

const FormView = ({ actionLink, type_link }) => {

	// States

	const [typeOptions, setTypeOptions] = useState({

		url: type_link,

		value: ''

	})

	const [generalOptions, setGeneralOptions] = useState({

		uuid: '',

		name: '',

		description: '',

		functions: '',

		objectives: ''

	})

	const [pointsOptions, setPointsOptions] = useState([

		{ label: 'Evaluación', value: 0 },

		{ label: 'Sugerir otro cargo', value: 0 },

		{ label: '25%', value: 1 },

		{ label: '50%', value: 2 },

		{ label: '75%', value: 3 },

		{ label: '100%', value: 4 }

	])

	const [statusOptions, setStatusOptions] = useState([

		{ label: 'Estatus', value: '' },

		{ label: 'Aceptado', value: 'a' },

		{ label: 'Rechazado', value: 'r' }

	])

	const [vacancyOptions, setVacancyOptions] = useState([

		{ label: 'Estatus', value: '' },

		{ label: 'Aceptado', value: 'a' },

		{ label: 'Rechazado', value: 'r' }

	])

	const [candidatesOptions, setCandidatesOptions] = useState([

		{ label: 'Estatus', value: '' },

		{ label: 'Aceptado', value: 'a' },

		{ label: 'Rechazado', value: 'r' }

	])

	const [competencies, setCompetencies] = useState([])

	// Hooks

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

	const history = useHistory()

	const dispatch = useDispatch()

	const { action } = useParams()

	useEffect(() => {

		if (action === 'edit') {

			axios.get(actionLink)

				.then(({ data }) => {

					const resData = data.data

					if (!data.success) {

						dispatch(addNotification({

							style: 'error',

							msg: 'Ha ocurrido un error'

						}))

					}

					setValue('comment', resData.interview.comment)

					setValue('points', resData.interview.points)

					setValue('status', resData.interview.status)

					setCompetencies(resData.job_description.competencies)

					setCandidatesOptions({ label: `${resData.candidate.first_name} ${resData.candidate.last_name}`, value: resData.candidate.uuid })

					setVacancyOptions({ label: resData.vacancy.name, value: resData.vacancy.uuid })

					setTypeOptions({ ...typeOptions, value: resData.interview.type })

					setGeneralOptions({

						...generalOptions,

						name: resData.vacancy.name,

						uuid: resData.vacancy.uuid,

						description: resData.vacancy.description,

						functions: resData.job_description.functions,

						objectives: resData.job_description.objectives

					})

				})

		}

	}, [action])

	useEffect(() => {

		axios.get(typeOptions.url)

			.then(({ data }) => {

				if (!data.success) {

					dispatch(addNotification({

						style: 'error',

						msg: 'Ha ocurrido un error'

					}))

				}

				console.log(data.data)

			})

	}, [typeOptions.url])

	return (

		<section className="content">

			<div className="container-fluid">

				<div className="row">

					<div className="col-12">

						<div className='card'>

							<div className="card-header">

								<ul className="nav nav-tabs" id="myTab" role="tablist">

									<li className="nav-item" role="presentation">

										<button className="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">General</button>

									</li>

									<li className="nav-item" role="presentation">

										<button className="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Competencias</button>

									</li>

									<li className="nav-item" role="presentation">

										<button className="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Conclusiones</button>

									</li>

								</ul>

							</div>

							<div className="card-body">

								<div className="tab-content" id="myTabContent">

									<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">

										<div className="row p-3 justify-content-between">

											<div className="col-6">

												<div className="form-group">

													<label>Vacantes</label>

													<select className='form-control' name='points' ref={register} disabled={action === 'edit'}>

														{

															vacancyOptions.map(({ label, value }) => (

																<option selected={generalOptions.name === label} key={value} value={value}>{label}</option>

															))

														}

													</select>

												</div>

											</div>

											<div className="col-6">

												<div className="form-group">

													<label>Candidatos</label>

													<select className='form-control' name='points' ref={register} disabled={action === 'edit'} onChange={(e) => setTypeOptions(prev => ({ ...prev, url: type_link.replace('UUID_PLACEHOLDER', e.target.value) }))}>

														{

															candidatesOptions.map(({ label, value }) => (

																<option selected={watch('candidate') === value} key={value} value={value}>{label}</option>

															))

														}

													</select>

												</div>

											</div>

										</div>

										<div className="card">

											<h5>{typeOptions.value === 'r' ? 'Recursos Humanos' : 'Potencial superior'}</h5>

											<div className="card-body">

												<h5>{generalOptions.name}</h5>

												<p>{generalOptions.description}</p>

												<h6>Funciones</h6>

												<p>{generalOptions.functions}</p>

												<h6>Objetivos</h6>

												<p>{generalOptions.objectives}</p>

											</div>

										</div>

									</div>

									<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">

										{

											competencies.map((competency) => (

												<div className="card" key={competency.competency_uuid}>

													<div className="card-header">

														<h5>{competency.competency_name} - {competency.competency_type_name}</h5>

													</div>

													<div className="card-body">

														{

															competency.behaviors

															&&

															competency.behaviors.map((behavior) => (

																<table key={behavior.uuid} className="table table-hover">

																	<thead>

																		<tr>

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

																			<th style={{ width: '60%' }}>Comentario</th>

																			<th style={{ width: '20%' }}>Evaluación</th>

																		</tr>

																	</thead>

																	<tbody>

																		<tr>

																			<td style={{ width: '20%' }}>{behavior.description}</td>

																			<td style={{ width: '60%' }}>

																				<textarea

																					name={`${behavior.competency_uuid}_${behavior.uuid}-name`}

																					cols="30"

																					rows="3"

																					ref={register}

																					className='form-control w100'

																				/>

																			</td>

																			<td style={{ width: '20%' }}>

																				<select className='form-control' name={`${behavior.competency_uuid}_${behavior.uuid}-points`} ref={register}>

																					{

																						pointsOptions.map(({ label, value }) => (

																							<option selected={behavior.points === value} key={value} value={value}>{label}</option>

																						))

																					}

																				</select>

																			</td>

																		</tr>

																	</tbody>

																</table>

															))

														}

													</div>

												</div>

											))

										}

									</div>

									<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">

										<div className="form-group">

											<label>Comentario</label>

											<input type="text" name="comment" className="form-control" ref={register} />

										</div>

										<div className="form-group">

											<label>Evaluación</label>

											<select className='form-control' name='points' ref={register}>

												{

													pointsOptions.map(({ label, value }) => (

														<option selected={watch('points') === value} key={value} value={value}>{label}</option>

													))

												}

											</select>

										</div>

										<div className="form-group">

											<label>Estatus</label>

											<select className='form-control' name='status' ref={register}>

												{

													statusOptions.map(({ label, value }) => (

														<option selected={watch('status') === value} key={value} value={value}>{label}</option>

													))

												}

											</select>

										</div>

									</div>

								</div>

								<div className="form-group">

									<button type="submit" className="btn btn-primary btn-form-save-close mr-2">

										Guardar

									</button>

									<button

										type="button"

										className="btn btn-secondary btn-edit-cancel"

										onClick={() => history.goBack()}

									>

										Cancelar

									</button>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

		</section >

	)

}

export default FormView