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, vacancy_link, vacancies, add_link, setActionLink }) => {

	// States

	const [vacancyOptions, setVacancyOptions] = useState(vacancies)

	const [vacancyUrl, setVacancyUrl] = useState(vacancy_link.replace('UUID_PLACEHOLDER', vacancies[0].uuid))

	const [typeOptions, setTypeOptions] = useState({

		url: type_link,

		value: ''

	})

	const [generalOptions, setGeneralOptions] = useState({

		uuid: '',

		name: '',

		description: '',

		functions: '',

		objectives: ''

	})

	const [candidatesOptions, setCandidatesOptions] = useState([])

	const [competencies, setCompetencies] = useState([{

		competency_uuid: '',

		competency_name: '',

		competency_type_uuid: '',

		competency_type_name: '',

		behaviors: []

	}])

	const [pointsOptions, setPointsOptions] = useState([

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

		{ 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' }

	])

	// Hooks

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

	const history = useHistory()

	const dispatch = useDispatch()

	const { action } = useParams()

	const onSubmit = () => {

		const content = []

		competencies.forEach(competency => competency.behaviors.forEach(behavior => {

			content.push({

				competencyUuid: behavior.competency_uuid,

				behaviorUuid: behavior.uuid,

				comment: watch(`${behavior.competency_uuid}_${behavior.uuid}-comment`),

				evaluation: watch(`${behavior.competency_uuid}_${behavior.uuid}-points`)

			})

		}))

		const submitData = new FormData()

		submitData.append('content', JSON.stringify(content))

		submitData.append('candidate_uuid', watch('candidate'))

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

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

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

		axios.post(actionLink, submitData)

			.then(({ data }) => {

				if (!data.success) {

					dispatch(addNotification({

						style: 'error',

						msg: 'Ha ocurrido un error'

					}))

				}

				dispatch(addNotification({

					style: 'success',

					msg: `Registro ${action === 'edit' ? 'actualizado' : 'añadido'}`

				}))

			})

	}

	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([resData.candidate])

					setVacancyOptions([{ name: resData.vacancy.name, uuid: resData.vacancy.uuid }])

					setTypeOptions({ ...typeOptions, value: resData.interview.type === 'r' ? 'Entrevista por Recursos Humanos' : 'Entrevista por Potencial superior' })

					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'

					}))

				}

				setTypeOptions({ ...typeOptions, value: data.data })

			})

	}, [typeOptions.url])

	useEffect(() => {

		axios.get(vacancyUrl)

			.then(({ data }) => {

				const resData = data.data

				if (!data.success) {

					dispatch(addNotification({

						style: 'error',

						msg: 'Ha ocurrido un error'

					}))

				}

				setCandidatesOptions(resData.candidates)

				setCompetencies(resData.job_description.competencies)

				setTypeOptions({ ...typeOptions, value: resData.interview.type === 'r' ? 'Entrevista por Recursos Humanos' : 'Entrevista por Potencial superior' })

				setGeneralOptions({

					...generalOptions,

					name: resData.vacancy.name,

					uuid: resData.vacancy.uuid,

					description: resData.vacancy.description,

					functions: resData.job_description.functions,

					objectives: resData.job_description.objectives

				})

			})

	}, [vacancyUrl])

	return (

		<section className="content">

			<div className="container-fluid">

				<div className="row">

					<div className="col-12">

						<form onSubmit={handleSubmit(onSubmit)}>

							<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='vacancy' ref={register}

															disabled={action === 'edit'}

															onChange={(e) => {

																setVacancyUrl(vacancy_link.replace('UUID_PLACEHOLDER', e.target.value))

																setActionLink(add_link.replace('UUID_PLACEHOLDER', e.target.value))

															}}>

															{

																vacancyOptions.map(({ name, uuid }) => (

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

																))

															}

														</select>

													</div>

												</div>

												<div className="col-6">

													<div className="form-group">

														<label>Candidatos</label>

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

															{

																candidatesOptions.map(({ first_name, last_name, uuid }) => (

																	<option selected={watch('candidate') === uuid} key={uuid} value={uuid}>{`${first_name} ${last_name}`}</option>

																))

															}

														</select>

													</div>

												</div>

											</div>

											<h5>{typeOptions.value}</h5>

											<div className="card">

												<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}-comment`}

																						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} defaultValue={pointsOptions[0].value}>

													{

														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} defaultValue={statusOptions[0].value}>

													{

														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>

						</form>

					</div>

				</div>

			</div>

		</section >

	)

}

export default FormView