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 { addNotification } from '../../../redux/notification/notification.actions'

import parse from 'html-react-parser'

const EvaluationView = ({ actionLink, setActionLink, action, setAction }) => {

	// Hooks

	const dispatch = useDispatch()

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

	//States

	const [jobDescription, setJobDescription] = useState({})

	const onSubmit = () => {

		const content = []

		jobDescription.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(`select-${behavior.competency_uuid}-${behavior.uuid}`)

			})

		}))

		const submitData = new FormData()

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

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

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

		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

				}

				setAction('')

				setActionLink('')

				dispatch(addNotification({

					style: 'success',

					msg: 'Registro actualizado'

				}))

			})

	}

	useEffect(() => {

		axios.get(actionLink)

			.then(({ data }) => {

				const resData = data.data

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				setJobDescription(resData.job_description)

				if (action === 'both') {

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

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

				}

				if (action === 'self') {

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

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

				}

				if (action === 'superviser') {

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

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

				}

				resData.jobDescription.competencies.behaviors.forEach((obj) => {

					setValue(`select-${obj.competency_uuid}-${obj.uuid}`, obj.evaluation)

					setValue(`${obj.competency_uuid}-${obj.uuid}-comment`, obj.comment)

				})

			})

	}, [action])

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

												<div className="card-body">

													<h5 className='mb-3 bold'>{jobDescription.name}</h5>

													<h6>Funciones</h6>

													<p>{parse(jobDescription.functions || '')}</p>

													<h6>Objetivos</h6>

													<p>{parse(jobDescription.objectives || '')}</p>

												</div>

											</div>

										</div>

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

											{

												jobDescription.competencies?.length > 0

												&&

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

															<div className="table-responsive">

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

																						<input

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

																							ref={register}

																							className='form-control w-100' />

																					</td>

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

																						<input

																							type="number"

																							max={100}

																							className='form-control'

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

																							ref={register} />

																					</td>

																				</tr>

																			</tbody>

																		</table>

																	))

																}

															</div>

														</div>

													</div>

												))

											}

										</div>

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

											<div className="form-group">

												<label>Comentario</label>

												<textarea type="text" name="comment" className="form-control" rows="5" cols="50" ref={register} />

											</div>

											<div className="form-group">

												<label>Evaluación</label>

												<select

													className='form-control'

													name='points'

													ref={register}

												>

													<option value={0}>0%</option>

													<option value={1}>25%</option>

													<option value={2}>50%</option>

													<option value={3}>75%</option>

													<option value={4}>100%</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={() => setAction('')}

										>

											Cancelar

										</button>

									</div>

								</div>

							</div>

						</form>

					</div>

				</div>

			</div>

		</section >

	)

}

export default EvaluationView