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