Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'

const levelOptions = {
        '0': 'Cero',
        '1': 'Uno',
        '2': 'Dos',
        '3': 'Tres',
        '4': 'Cuatro',
        '5': 'Cinco'
}

const EditView = ({
        actionLink,
        jobsDescription,
        action,
        setAction }) => {

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

        // State
        const [currentJobDescription, setCurretJobDescription] = useState('')
        const [jobDescriptionOptions, setJobDescriptionOptions] = useState(jobsDescription)
        const [competencyTypes, setCompetencyTypes] = useState([])
        const [competenciesSelected, setCompetenciesSelected] = useState([])


        const onSubmit = (data) => {
                const submitData = new FormData()

                Object.entries(data).forEach(([key, value]) => submitData.append(key, value))
                submitData.append('job_description_id', currentJobDescription)
                submitData.append('content', '[]')

                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
                                }
                                dispatch(addNotification({ style: 'success', msg: data.data }))
                                reset()
                        })
                        .finally(() => setAction(''))
        }

        useEffect(() => {
                if (action === 'edit') {
                        axios.get(actionLink)
                                .then(({ data }) => {
                                        if (!data.success) {
                                                return dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: 'Ha ocurrido un error'
                                                }))
                                        }

                                        setValue('name', data.data.name)
                                        setValue('description', data.data.description)
                                        setValue('status', data.data.status)
                                        setCurretJobDescription(data.data.job_description_id)
                                        setValue('jobs_description', data.data.job_description_id)
                                })
                }
        }, [actionLink])

        useEffect(() => {
                if (currentJobDescription) {

                        axios.get(`/performance-evaluation/forms/job-decription?id=${currentJobDescription}`)
                                .then(({ data }) => {
                                        if (!data.success) {
                                                return dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: 'Ha ocurrido un error'
                                                }))
                                        }
                                        let options = data.data.jobs_description?.map(description => ({ uuid: description.job_description_id, name: description.name }))
                                        setJobDescriptionOptions([...options, { name: data.data.name, uuid: data.data.uuid }])
                                        setCompetenciesSelected(data.data.competencies_selected)
                                        setCompetencyTypes(data.data.competency_types)
                                })
                }
        }, [currentJobDescription])

        return (
                <section className="content">
                        <div className="row" style={{ padding: 16 }}>
                                <div className="col-xs-12 col-md-12">
                                        <form onSubmit={handleSubmit(onSubmit)}>
                                                <div className="form-group">
                                                        <label>Nombre</label>
                                                        <input
                                                                type="text"
                                                                name="name"
                                                                className='form-control'
                                                                ref={register({ required: 'Este campo es requerido', maxLength: 50 })}
                                                        />
                                                        {errors.name && <p>{errors.name.message}</p>}
                                                </div>
                                                <div className="form-group">
                                                        <label>Cargo a evaluar</label>
                                                        <select
                                                                name="job_description_id"
                                                                className="form-control"
                                                                onChange={(e) => setCurretJobDescription(e.target.value)}
                                                        >
                                                                <option value=''>Seleccione</option>
                                                                {jobDescriptionOptions.map(({ name, uuid }) =>
                                                                        <option selected={uuid === currentJobDescription} key={uuid} value={uuid}>{name}</option>
                                                                )}
                                                        </select>
                                                </div>
                                                <div className="form-group">
                                                        <label htmlFor="form-description">Descripción</label>
                                                        <textarea
                                                                type="text"
                                                                name="description"
                                                                rows="5"
                                                                cols="50"
                                                                className='form-control'
                                                                ref={register({ required: 'Este campo es requerido' })}
                                                        />
                                                        {errors.description && <p>{errors.description.message}</p>}
                                                </div>
                                                <div className="form-group">
                                                        <label htmlFor="status">Estatus</label>
                                                        <select
                                                                className="form-control"
                                                                name="status"
                                                                ref={register({ required: 'Este campo es requerido' })}
                                                        >
                                                                <option value="i">Inactivo</option>
                                                                <option value="a">Activo</option>
                                                        </select>
                                                        {errors.status && <p>{errors.status.message}</p>}
                                                </div>
                                                <br />
                                                <div className="row">
                                                        <div className="col-xs-12 col-md-12">
                                                                <div className="panel-group">
                                                                        <div className="form-group">
                                                                                <div className="row">
                                                                                        <div className="col-xs-12 col-md-12">
                                                                                                <hr />
                                                                                                <h4 style={{ fontSize: 18, fontWeight: 'bold' }}>Competencias asociadas al cargo:</h4>
                                                                                                <br />
                                                                                                <div className="panel-group" id="rows-job-competencies" >
                                                                                                        {!!competencyTypes.length &&
                                                                                                                competenciesSelected.map((competency) => {
                                                                                                                        const type = competencyTypes.find((type) => type.competency_type_id === competency.competency_type_id)

                                                                                                                        return (
                                                                                                                                <div
                                                                                                                                        className="panel panel-default"
                                                                                                                                        id={`panel-${competency.competency_id}`}
                                                                                                                                        key={competency.competency_id}
                                                                                                                                >
                                                                                                                                        <div className="panel-heading">
                                                                                                                                                <h4 className="panel-title" style={{ fontSize: 18 }}>
                                                                                                                                                        <a
                                                                                                                                                                aria-expanded="true"
                                                                                                                                                                className="accordion-toggle"
                                                                                                                                                                data-parent={`#panel-${competency.competency_id}`}
                                                                                                                                                                data-toggle="collapse"
                                                                                                                                                                href={`#collapse-${competency.competency_id}`}
                                                                                                                                                        >
                                                                                                                                                                <span className={`competency-name${competency.competency_id}`}>
                                                                                                                                                                        {`${type.name} - ${competency.name}`}
                                                                                                                                                                </span>
                                                                                                                                                        </a>
                                                                                                                                                </h4>
                                                                                                                                        </div>
                                                                                                                                        <div
                                                                                                                                                className="panel-collapse in collapse show"
                                                                                                                                                id={`collapse-${competency.competency_id}`}
                                                                                                                                        >
                                                                                                                                                <div className="panel-body">
                                                                                                                                                        <div className="table-responsive">
                                                                                                                                                                <table className="table table-bordered">
                                                                                                                                                                        <thead>
                                                                                                                                                                                <tr>
                                                                                                                                                                                        <th style={{ width: '80%' }}>Conducta Observable</th>
                                                                                                                                                                                        <th style={{ width: '20%' }}>Nivel</th>
                                                                                                                                                                                </tr>
                                                                                                                                                                        </thead>
                                                                                                                                                                        <tbody>
                                                                                                                                                                                {competency.behaviors?.map(({ behavior_id, description, level }) =>
                                                                                                                                                                                        <tr key={behavior_id}>
                                                                                                                                                                                                <td className="text-left">
                                                                                                                                                                                                        {description}
                                                                                                                                                                                                </td>
                                                                                                                                                                                                <td>
                                                                                                                                                                                                        {levelOptions[level]}
                                                                                                                                                                                                </td>
                                                                                                                                                                                        </tr>
                                                                                                                                                                                )}
                                                                                                                                                                        </tbody>
                                                                                                                                                                </table>
                                                                                                                                                        </div>
                                                                                                                                                </div>
                                                                                                                                        </div>
                                                                                                                                </div>
                                                                                                                        )
                                                                                                                })
                                                                                                        }
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                                <div className="d-flex" style={{ gap: '5px' }}>
                                                        <button type="submit" className="btn btn-primary">Guardar</button>
                                                        <button type="button" className="btn btn-secondary" onClick={() => setAction('')}>Cancelar</button>
                                                </div>
                                        </form>
                                </div>
                        </div >
                </section >

        )
}

export default EditView