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

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

                // Get current item data
                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)
                                        setGeneralOptions({
                                                ...generalOptions,
                                                name: resData.vacancy.name,
                                                uuid: resData.vacancy.uuid,
                                                description: resData.vacancy.description,
                                                functions: dataExaple.job_description.functions,
                                                objectives: dataExaple.job_description.objectives
                                        })
                                })
                }
        }, [action])

        const dataExaple = {
                'job_description': {
                        'uuid': '8ff86a9a-651c-4dd0-86c1-b9c0716d09e0',
                        'name': 'Programador Junior',
                        'functions': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Tortor posuere ac ut consequat semper viverra nam. Ultricies leo integer malesuada nunc.</p>',
                        'objectives': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Tortor posuere ac ut consequat semper viverra nam. Ultricies leo integer malesuada nunc.</p>',
                        'competencies': [
                                {
                                        'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',
                                        'competency_name': 'Flexibilidad',
                                        'competency_type_uuid': 'ae45b2e5-73a9-4a0b-ad04-29a07524ccd6',
                                        'competency_type_name': 'Competencias Horizontales',
                                        'behaviors': [
                                                {
                                                        'uuid': '4cee9594-051d-4a52-82f0-58d4accc5583',
                                                        'description': 'Enfocar sus acciones al logro de los resultados planteados.',
                                                        'points': 0,
                                                        'comment': '',
                                                        'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b'
                                                }
                                        ]
                                }
                        ]
                },
                'interview': {
                        'id': 'd1cb9f3d-a6d0-43c1-a698-645b0156d99d',
                        'status': 'a',
                        'content': [
                                {
                                        'competencyUuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',
                                        'behaviorUuid': '4cee9594-051d-4a52-82f0-58d4accc5583',
                                        'comment': '',
                                        'evaluation': '0'
                                }
                        ],
                        'type': 'b',
                        'points': '3',
                        'comment': null
                }
        }

        useEffect(() => {
                console.log(action)
        }, [])

        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}>
                                                                                                                {
                                                                                                                        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}>
                                                                                                                {
                                                                                                                        candidatesOptions.map(({ label, value }) => (
                                                                                                                                <option selected={watch('candidate') === value} key={value} value={value}>{label}</option>
                                                                                                                        ))
                                                                                                                }
                                                                                                        </select>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                                <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.length
                                            &&
                                            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