| 14197 |
stevensc |
1 |
/* eslint-disable no-mixed-spaces-and-tabs */
|
|
|
2 |
import axios from 'axios'
|
|
|
3 |
import React, { useEffect, useState } from 'react'
|
|
|
4 |
import { useForm } from 'react-hook-form'
|
|
|
5 |
import { useDispatch } from 'react-redux'
|
|
|
6 |
import { useHistory, useParams } from 'react-router-dom'
|
|
|
7 |
import { addNotification } from '../../redux/notification/notification.actions'
|
|
|
8 |
|
|
|
9 |
const pointsOptions = [
|
|
|
10 |
{ label: 'Sugerir otro cargo', value: 0 },
|
|
|
11 |
{ label: '25%', value: 1 },
|
|
|
12 |
{ label: '50%', value: 2 },
|
|
|
13 |
{ label: '75%', value: 3 },
|
|
|
14 |
{ label: '100%', value: 4 }
|
|
|
15 |
]
|
|
|
16 |
|
|
|
17 |
const FormView = ({
|
|
|
18 |
actionLink = '',
|
|
|
19 |
setActionLink = function () { }
|
|
|
20 |
}) => {
|
|
|
21 |
|
|
|
22 |
// Hooks
|
|
|
23 |
const dispatch = useDispatch()
|
|
|
24 |
const history = useHistory()
|
|
|
25 |
const { action } = useParams()
|
|
|
26 |
const { setValue, register, watch, handleSubmit } = useForm()
|
|
|
27 |
|
|
|
28 |
//States
|
|
|
29 |
const [jobDescription, setJobDescription] = useState({})
|
|
|
30 |
|
|
|
31 |
const onSubmit = () => {
|
|
|
32 |
|
|
|
33 |
const content = []
|
|
|
34 |
jobDescription.competencies.forEach(competency => competency.behaviors.forEach(behavior => {
|
|
|
35 |
content.push({
|
|
|
36 |
competencyUuid: behavior.competency_uuid,
|
|
|
37 |
behaviorUuid: behavior.uuid,
|
|
|
38 |
comment: watch(`${behavior.competency_uuid}-${behavior.uuid}-comment`),
|
|
|
39 |
evaluation: watch(`select-${behavior.competency_uuid}-${behavior.uuid}`)
|
|
|
40 |
})
|
|
|
41 |
}))
|
|
|
42 |
|
|
|
43 |
const submitData = new FormData()
|
|
|
44 |
submitData.append('content', JSON.stringify(content))
|
|
|
45 |
submitData.append('points', watch('points'))
|
|
|
46 |
submitData.append('comment', watch('comment'))
|
|
|
47 |
|
|
|
48 |
axios.post(actionLink, submitData)
|
|
|
49 |
.then(({ data }) => {
|
|
|
50 |
if (!data.success) {
|
|
|
51 |
return dispatch(addNotification({
|
|
|
52 |
style: 'danger',
|
|
|
53 |
msg: typeof data.data === 'string'
|
|
|
54 |
? data.data
|
|
|
55 |
: 'Ha ocurrido un error'
|
|
|
56 |
}))
|
|
|
57 |
}
|
|
|
58 |
|
|
|
59 |
history.goBack()
|
|
|
60 |
setActionLink('')
|
|
|
61 |
dispatch(addNotification({
|
|
|
62 |
style: 'success',
|
|
|
63 |
msg: `Registro ${action === 'edit' ? 'actualizado' : 'añadido'}`
|
|
|
64 |
}))
|
|
|
65 |
})
|
|
|
66 |
}
|
|
|
67 |
|
|
|
68 |
useEffect(() => {
|
|
|
69 |
axios.get(actionLink)
|
|
|
70 |
.then(({ data }) => {
|
|
|
71 |
const resData = data.data
|
|
|
72 |
|
|
|
73 |
if (!data.success) {
|
|
|
74 |
return dispatch(addNotification({
|
|
|
75 |
style: 'danger',
|
|
|
76 |
msg: 'Ha ocurrido un error'
|
|
|
77 |
}))
|
|
|
78 |
}
|
|
|
79 |
|
|
|
80 |
setJobDescription(resData.job_description)
|
|
|
81 |
|
|
|
82 |
if (action === 'both') {
|
|
|
83 |
setValue('comment', resData.both.comment)
|
|
|
84 |
setValue('points', resData.both.points)
|
|
|
85 |
}
|
|
|
86 |
|
|
|
87 |
if (action === 'self') {
|
|
|
88 |
setValue('comment', resData.self.comment)
|
|
|
89 |
setValue('points', resData.self.points)
|
|
|
90 |
}
|
|
|
91 |
|
|
|
92 |
if (action === 'superviser') {
|
|
|
93 |
setValue('comment', resData.superviser.comment)
|
|
|
94 |
setValue('points', resData.superviser.points)
|
|
|
95 |
}
|
|
|
96 |
|
|
|
97 |
resData.jobDescription.competencies.behaviors.forEach((obj) => {
|
|
|
98 |
setValue(`select-${obj.competency_uuid}-${obj.uuid}`, obj.evaluation)
|
|
|
99 |
setValue(`${obj.competency_uuid}-${obj.uuid}-comment`, obj.comment)
|
|
|
100 |
})
|
|
|
101 |
})
|
|
|
102 |
}, [action])
|
|
|
103 |
|
|
|
104 |
return (
|
|
|
105 |
<section className="content">
|
|
|
106 |
<div className="container-fluid">
|
|
|
107 |
<div className="row">
|
|
|
108 |
<div className="col-12">
|
|
|
109 |
<form onSubmit={handleSubmit(onSubmit)}>
|
|
|
110 |
<div className='card'>
|
|
|
111 |
<div className="card-header">
|
|
|
112 |
<ul className="nav nav-tabs" id="myTab" role="tablist">
|
|
|
113 |
<li className="nav-item" role="presentation">
|
|
|
114 |
<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>
|
|
|
115 |
</li>
|
|
|
116 |
<li className="nav-item" role="presentation">
|
|
|
117 |
<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>
|
|
|
118 |
</li>
|
|
|
119 |
<li className="nav-item" role="presentation">
|
|
|
120 |
<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>
|
|
|
121 |
</li>
|
|
|
122 |
</ul>
|
|
|
123 |
</div>
|
|
|
124 |
<div className="card-body">
|
|
|
125 |
<div className="tab-content" id="myTabContent">
|
|
|
126 |
<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
|
|
127 |
<div className="card">
|
|
|
128 |
<div className="card-body">
|
|
|
129 |
<h5>{jobDescription.name}</h5>
|
|
|
130 |
<h6>Funciones</h6>
|
|
|
131 |
<p>{jobDescription.functions}</p>
|
|
|
132 |
<h6>Objetivos</h6>
|
|
|
133 |
<p>{jobDescription.objectives}</p>
|
|
|
134 |
</div>
|
|
|
135 |
</div>
|
|
|
136 |
</div>
|
|
|
137 |
<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
|
|
138 |
{
|
|
|
139 |
jobDescription.competencies?.length > 0
|
|
|
140 |
&&
|
|
|
141 |
jobDescription.competencies.map((competency) => (
|
|
|
142 |
<div className="card" key={competency.competency_uuid}>
|
|
|
143 |
<div className="card-header">
|
|
|
144 |
<h5>{competency.competency_name} - {competency.competency_type_name}</h5>
|
|
|
145 |
</div>
|
|
|
146 |
<div className="card-body">
|
|
|
147 |
<div className="table-responsive">
|
|
|
148 |
{
|
|
|
149 |
competency.behaviors
|
|
|
150 |
&&
|
|
|
151 |
competency.behaviors.map((behavior) => (
|
|
|
152 |
<table key={behavior.uuid} className="table table-hover">
|
|
|
153 |
<thead>
|
|
|
154 |
<tr>
|
|
|
155 |
<th style={{ width: '20%' }}>Conducta Observable</th>
|
|
|
156 |
<th style={{ width: '60%' }}>Comentario</th>
|
|
|
157 |
<th style={{ width: '20%' }}>Evaluación</th>
|
|
|
158 |
</tr>
|
|
|
159 |
</thead>
|
|
|
160 |
<tbody>
|
|
|
161 |
<tr>
|
|
|
162 |
<td style={{ width: '20%' }}>{behavior.description}</td>
|
|
|
163 |
<td style={{ width: '60%' }}>
|
|
|
164 |
<textarea
|
|
|
165 |
name={`${behavior.competency_uuid}-${behavior.uuid}-comment`}
|
|
|
166 |
cols="30"
|
|
|
167 |
rows="3"
|
|
|
168 |
ref={register}
|
|
|
169 |
className='form-control w100'
|
|
|
170 |
/>
|
|
|
171 |
</td>
|
|
|
172 |
<td style={{ width: '20%' }}>
|
|
|
173 |
<select className='form-control' name={`select-${behavior.competency_uuid}-${behavior.uuid}`} ref={register}>
|
|
|
174 |
{
|
|
|
175 |
pointsOptions.map(({ label, value }) => {
|
|
|
176 |
return <option selected={watch(`select-${behavior.competency_uuid}-${behavior.uuid}`) === value} key={value} value={value}>{label}</option>
|
|
|
177 |
})
|
|
|
178 |
}
|
|
|
179 |
</select>
|
|
|
180 |
</td>
|
|
|
181 |
</tr>
|
|
|
182 |
</tbody>
|
|
|
183 |
</table>
|
|
|
184 |
))
|
|
|
185 |
}
|
|
|
186 |
</div>
|
|
|
187 |
</div>
|
|
|
188 |
</div>
|
|
|
189 |
))
|
|
|
190 |
}
|
|
|
191 |
</div>
|
|
|
192 |
<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
|
|
193 |
<div className="form-group">
|
|
|
194 |
<label>Comentario</label>
|
|
|
195 |
<input type="text" name="comment" className="form-control" ref={register} />
|
|
|
196 |
</div>
|
|
|
197 |
<div className="form-group">
|
|
|
198 |
<label>Evaluación</label>
|
|
|
199 |
<select className='form-control' name='points' ref={register}>
|
|
|
200 |
{
|
|
|
201 |
pointsOptions.map(({ label, value }) => (
|
|
|
202 |
<option selected={watch('points') === value} key={value} value={value}>{label}</option>
|
|
|
203 |
))
|
|
|
204 |
}
|
|
|
205 |
</select>
|
|
|
206 |
</div>
|
|
|
207 |
</div>
|
|
|
208 |
</div>
|
|
|
209 |
<div className="form-group">
|
|
|
210 |
<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
|
|
|
211 |
Guardar & Cerrar
|
|
|
212 |
</button>
|
|
|
213 |
<button
|
|
|
214 |
type="button"
|
|
|
215 |
className="btn btn-secondary btn-edit-cancel"
|
|
|
216 |
onClick={() => history.goBack()}
|
|
|
217 |
>
|
|
|
218 |
Cancelar
|
|
|
219 |
</button>
|
|
|
220 |
</div>
|
|
|
221 |
</div>
|
|
|
222 |
</div>
|
|
|
223 |
</form>
|
|
|
224 |
</div>
|
|
|
225 |
</div>
|
|
|
226 |
</div>
|
|
|
227 |
</section >
|
|
|
228 |
)
|
|
|
229 |
}
|
|
|
230 |
|
|
|
231 |
export default FormView
|