Rev 15377 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
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: true, 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 selected={status === 'i'} value="i">Inactivo</option>
<option selected={status === 'a'} 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