Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable no-mixed-spaces-and-tabs */
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import parse from 'html-react-parser'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'

const FormView = ({
        actionLink,
        type_link,
        vacancy_link,
        vacancies,
        add_link,
        setActionLink,
        action,
        setAction
}) => {

        // States
        const [loading, setLoading] = useState(false)
        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] = useState([
                { label: 'N/A', value: 0 },
                { label: '25%', value: 1 },
                { label: '50%', value: 2 },
                { label: '75%', value: 3 },
                { label: '100%', value: 4 }
        ])
        const [pointsGlobalOptions] = useState([
                { label: 'Sugerir otro cargo', value: 0 },
                { label: '25%', value: 1 },
                { label: '50%', value: 2 },
                { label: '75%', value: 3 },
                { label: '100%', value: 4 }
        ])
        const [statusOptions] = useState([
                { label: 'Aceptado', value: 'a' },
                { label: 'Rechazado', value: 'r' }
        ])

        // Hooks
        const { setValue, register, watch, handleSubmit } = useForm()
        const dispatch = useDispatch()

        const onSubmit = () => {
                setLoading(true)
                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(`select-${behavior.competency_uuid}-${behavior.uuid}`)
                        })
                }))

                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) {
                                        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('')
                                dispatch(addNotification({
                                        style: 'success',
                                        msg: `Registro ${action === 'edit' ? 'actualizado' : 'añadido'}`
                                }))
                        })
                        .finally(() => setLoading(true))
        }

        useEffect(() => {
                if (action === 'edit') {
                        axios.get(actionLink)
                                .then(({ data }) => {
                                        const resData = data.data

                                        if (!data.success) {
                                                return dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: 'Ha ocurrido un error'
                                                }))
                                        }

                                        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
                                        })
                                        setValue('comment', resData.interview.comment)
                                        setValue('points', resData.interview.points)
                                        setValue('status', resData.interview.status)
                                        resData.interview.content.forEach((obj) => {
                                                setValue(`select-${obj.competencyUuid}-${obj.behaviorUuid}`, obj.evaluation)
                                                setValue(`${obj.competencyUuid}-${obj.behaviorUuid}-comment`, obj.comment)
                                        })
                                })
                }
        }, [action])

        useEffect(() => {
                axios.get(typeOptions.url)
                        .then(({ data }) => {

                                if (!data.success) {
                                        return dispatch(addNotification({
                                                style: 'danger',
                                                msg: 'Ha ocurrido un error'
                                        }))
                                }

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

        }, [typeOptions.url])

        useEffect(() => {
                if (action == 'add') {
                        axios.get(vacancyUrl)
                                .then(({ data }) => {
                                        const resData = data.data

                                        if (!data.success) {
                                                return dispatch(addNotification({
                                                        style: 'danger',
                                                        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 className='mb-3'>{typeOptions.value}</h5>
                                                                                        <div className="card">
                                                                                                <div className="card-body">
                                                                                                        <h5>{generalOptions.name}</h5>
                                                                                                        <p className='mb-2'>{parse(generalOptions.description)}</p>
                                                                                                        <h6>Funciones</h6>
                                                                                                        <p className='mb-2'>{parse(generalOptions.functions)}</p>
                                                                                                        <h6>Objetivos</h6>
                                                                                                        <p className='mb-2'>{parse(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">
                                                                                                                <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
                                                                                                                                                                                type="text"
                                                                                                                                                                                name={`${behavior.competency_uuid}-${behavior.uuid}-comment`}
                                                                                                                                                                                maxLength="80"
                                                                                                                                                                                ref={register}
                                                                                                                                                                                className='form-control w100'
                                                                                                                                                                        />
                                                                                                                                                                </td>
                                                                                                                                                                <td style={{ width: '20%' }}>
                                                                                                                                                                        <select className='form-control' name={`select-${behavior.competency_uuid}-${behavior.uuid}`} ref={register}>
                                                                                                                                                                                {
                                                                                                                                                                                        pointsOptions.map(({ label, value }) => {
                                                                                                                                                                                                return <option selected={watch(`select-${behavior.competency_uuid}-${behavior.uuid}`) === value} key={value} value={value}>{label}</option>
                                                                                                                                                                                        })
                                                                                                                                                                                }
                                                                                                                                                                        </select>
                                                                                                                                                                </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}>
                                                                                                        {
                                                                                                                pointsGlobalOptions.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
                                                                                        className="btn btn-primary btn-form-save-close mr-2"
                                                                                        disabled={loading}
                                                                                        type="submit"
                                                                                >
                                                                                        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 FormView