| 10540 |
stevensc |
1 |
/* eslint-disable no-mixed-spaces-and-tabs */
|
| 10513 |
stevensc |
2 |
import axios from 'axios'
|
| 10518 |
stevensc |
3 |
import React, { useState, useEffect } from 'react'
|
| 10513 |
stevensc |
4 |
import { useForm } from 'react-hook-form'
|
|
|
5 |
import { useDispatch } from 'react-redux'
|
| 10450 |
stevensc |
6 |
import { useHistory, useParams } from 'react-router-dom'
|
| 10513 |
stevensc |
7 |
import { addNotification } from '../../../redux/notification/notification.actions'
|
| 10436 |
stevensc |
8 |
|
| 10439 |
stevensc |
9 |
|
| 10513 |
stevensc |
10 |
const FormView = ({ actionLink }) => {
|
|
|
11 |
|
| 10554 |
stevensc |
12 |
// States
|
|
|
13 |
const [generalOptions, setGeneralOptions] = useState({
|
|
|
14 |
uuid: '',
|
|
|
15 |
name: '',
|
|
|
16 |
description: '',
|
|
|
17 |
functions: '',
|
|
|
18 |
objectives: ''
|
|
|
19 |
})
|
|
|
20 |
const [pointsOptions, setPointsOptions] = useState([
|
|
|
21 |
{ label: 'Evaluación', value: 0 },
|
|
|
22 |
{ label: 'Sugerir otro cargo', value: 0 },
|
|
|
23 |
{ label: '25%', value: 1 },
|
|
|
24 |
{ label: '50%', value: 2 },
|
|
|
25 |
{ label: '75%', value: 3 },
|
|
|
26 |
{ label: '100%', value: 4 }
|
|
|
27 |
])
|
|
|
28 |
const [statusOptions, setStatusOptions] = useState([
|
|
|
29 |
{ label: 'Estatus', value: '' },
|
|
|
30 |
{ label: 'Aceptado', value: 'a' },
|
|
|
31 |
{ label: 'Rechazado', value: 'r' }
|
|
|
32 |
])
|
|
|
33 |
const [vacancyOptions, setVacancyOptions] = useState([
|
|
|
34 |
{ label: 'Estatus', value: '' },
|
|
|
35 |
{ label: 'Aceptado', value: 'a' },
|
|
|
36 |
{ label: 'Rechazado', value: 'r' }
|
|
|
37 |
])
|
|
|
38 |
const [candidatesOptions, setCandidatesOptions] = useState([
|
|
|
39 |
{ label: 'Estatus', value: '' },
|
|
|
40 |
{ label: 'Aceptado', value: 'a' },
|
|
|
41 |
{ label: 'Rechazado', value: 'r' }
|
|
|
42 |
])
|
|
|
43 |
const [competencies, setCompetencies] = useState([])
|
| 10516 |
stevensc |
44 |
|
| 10554 |
stevensc |
45 |
// Hooks
|
|
|
46 |
const { setValue, register, watch } = useForm()
|
|
|
47 |
const history = useHistory()
|
|
|
48 |
const dispatch = useDispatch()
|
|
|
49 |
const { action } = useParams()
|
| 10439 |
stevensc |
50 |
|
| 10554 |
stevensc |
51 |
useEffect(() => {
|
| 10513 |
stevensc |
52 |
|
| 10554 |
stevensc |
53 |
// Get current item data
|
|
|
54 |
if (action === 'edit') {
|
|
|
55 |
axios.get(actionLink)
|
|
|
56 |
.then(({ data }) => {
|
|
|
57 |
const resData = data.data
|
| 10513 |
stevensc |
58 |
|
| 10554 |
stevensc |
59 |
if (!data.success) {
|
|
|
60 |
dispatch(addNotification({
|
|
|
61 |
style: 'error',
|
|
|
62 |
msg: 'Ha ocurrido un error'
|
|
|
63 |
}))
|
|
|
64 |
}
|
| 10513 |
stevensc |
65 |
|
| 10554 |
stevensc |
66 |
setValue('comment', resData.interview.comment)
|
|
|
67 |
setValue('points', resData.interview.points)
|
|
|
68 |
setValue('status', resData.interview.status)
|
|
|
69 |
setCompetencies(resData.job_description.competencies)
|
|
|
70 |
setGeneralOptions({
|
|
|
71 |
...generalOptions,
|
|
|
72 |
name: resData.vacancy.name,
|
|
|
73 |
uuid: resData.vacancy.uuid,
|
|
|
74 |
description: resData.vacancy.description,
|
|
|
75 |
functions: dataExaple.job_description.functions,
|
|
|
76 |
objectives: dataExaple.job_description.objectives
|
|
|
77 |
})
|
|
|
78 |
})
|
|
|
79 |
}
|
|
|
80 |
}, [action])
|
| 10516 |
stevensc |
81 |
|
| 10554 |
stevensc |
82 |
const dataExaple = {
|
|
|
83 |
'job_description': {
|
|
|
84 |
'uuid': '8ff86a9a-651c-4dd0-86c1-b9c0716d09e0',
|
|
|
85 |
'name': 'Programador Junior',
|
|
|
86 |
'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>',
|
|
|
87 |
'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>',
|
|
|
88 |
'competencies': [
|
|
|
89 |
{
|
|
|
90 |
'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',
|
|
|
91 |
'competency_name': 'Flexibilidad',
|
|
|
92 |
'competency_type_uuid': 'ae45b2e5-73a9-4a0b-ad04-29a07524ccd6',
|
|
|
93 |
'competency_type_name': 'Competencias Horizontales',
|
|
|
94 |
'behaviors': [
|
|
|
95 |
{
|
|
|
96 |
'uuid': '4cee9594-051d-4a52-82f0-58d4accc5583',
|
|
|
97 |
'description': 'Enfocar sus acciones al logro de los resultados planteados.',
|
|
|
98 |
'points': 0,
|
|
|
99 |
'comment': '',
|
|
|
100 |
'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b'
|
|
|
101 |
}
|
|
|
102 |
]
|
|
|
103 |
}
|
|
|
104 |
]
|
|
|
105 |
},
|
|
|
106 |
'interview': {
|
|
|
107 |
'id': 'd1cb9f3d-a6d0-43c1-a698-645b0156d99d',
|
|
|
108 |
'status': 'a',
|
|
|
109 |
'content': [
|
|
|
110 |
{
|
|
|
111 |
'competencyUuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',
|
|
|
112 |
'behaviorUuid': '4cee9594-051d-4a52-82f0-58d4accc5583',
|
|
|
113 |
'comment': '',
|
|
|
114 |
'evaluation': '0'
|
|
|
115 |
}
|
|
|
116 |
],
|
|
|
117 |
'type': 'b',
|
|
|
118 |
'points': '3',
|
|
|
119 |
'comment': null
|
|
|
120 |
}
|
|
|
121 |
}
|
| 10513 |
stevensc |
122 |
|
| 10554 |
stevensc |
123 |
useEffect(() => {
|
|
|
124 |
console.log(action)
|
|
|
125 |
}, [])
|
| 10450 |
stevensc |
126 |
|
| 10554 |
stevensc |
127 |
return (
|
|
|
128 |
<section className="content">
|
|
|
129 |
<div className="container-fluid">
|
|
|
130 |
<div className="row">
|
|
|
131 |
<div className="col-12">
|
|
|
132 |
<div className='card'>
|
|
|
133 |
<div className="card-header">
|
|
|
134 |
<ul className="nav nav-tabs" id="myTab" role="tablist">
|
|
|
135 |
<li className="nav-item" role="presentation">
|
|
|
136 |
<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>
|
|
|
137 |
</li>
|
|
|
138 |
<li className="nav-item" role="presentation">
|
|
|
139 |
<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>
|
|
|
140 |
</li>
|
|
|
141 |
<li className="nav-item" role="presentation">
|
|
|
142 |
<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>
|
|
|
143 |
</li>
|
|
|
144 |
</ul>
|
|
|
145 |
</div>
|
|
|
146 |
<div className="card-body">
|
|
|
147 |
<div className="tab-content" id="myTabContent">
|
|
|
148 |
<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
|
|
149 |
<div className="row p-3 justify-content-between">
|
|
|
150 |
<div className="form-group">
|
|
|
151 |
<label>Vacantes</label>
|
|
|
152 |
<select className='form-control' name='points' ref={register}>
|
|
|
153 |
{
|
|
|
154 |
vacancyOptions.map(({ label, value }) => (
|
|
|
155 |
<option selected={generalOptions.name === label} key={value} value={value}>{label}</option>
|
|
|
156 |
))
|
|
|
157 |
}
|
|
|
158 |
</select>
|
|
|
159 |
</div>
|
|
|
160 |
<div className="form-group">
|
|
|
161 |
<label>Candidatos</label>
|
|
|
162 |
<select className='form-control' name='points' ref={register}>
|
|
|
163 |
{
|
|
|
164 |
candidatesOptions.map(({ label, value }) => (
|
|
|
165 |
<option selected={watch('candidate') === value} key={value} value={value}>{label}</option>
|
|
|
166 |
))
|
|
|
167 |
}
|
|
|
168 |
</select>
|
|
|
169 |
</div>
|
|
|
170 |
</div>
|
|
|
171 |
<div className="card">
|
|
|
172 |
<div className="card-body">
|
|
|
173 |
<h5>{generalOptions.name}</h5>
|
|
|
174 |
<p>{generalOptions.description}</p>
|
|
|
175 |
<h6>Funciones</h6>
|
|
|
176 |
<p>{generalOptions.functions}</p>
|
|
|
177 |
<h6>Objetivos</h6>
|
|
|
178 |
<p>{generalOptions.objectives}</p>
|
|
|
179 |
</div>
|
|
|
180 |
</div>
|
|
|
181 |
</div>
|
|
|
182 |
<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
|
|
183 |
{
|
|
|
184 |
competencies.length
|
| 10540 |
stevensc |
185 |
&&
|
| 10554 |
stevensc |
186 |
competencies.map((competency, index) => (
|
|
|
187 |
<div className="card" key={competency.competency_uuid}>
|
|
|
188 |
<div className="card-header">
|
|
|
189 |
<h5>{competency.competency_name} - {competency.competency_type_name}</h5>
|
|
|
190 |
</div>
|
|
|
191 |
<div className="card-body">
|
|
|
192 |
{
|
|
|
193 |
competency.behaviors
|
| 10532 |
stevensc |
194 |
&&
|
| 10554 |
stevensc |
195 |
competency.behaviors.map((behavior, index) => (
|
|
|
196 |
<table key={behavior.uuid}>
|
|
|
197 |
<thead>
|
|
|
198 |
<tr>
|
|
|
199 |
<th style={{ width: '20%' }}>Conducta Observable</th>
|
|
|
200 |
<th style={{ width: '60%' }}>Comentario</th>
|
|
|
201 |
<th style={{ width: '20%' }}>Evaluación</th>
|
|
|
202 |
</tr>
|
|
|
203 |
</thead>
|
|
|
204 |
<tbody>
|
|
|
205 |
<tr>
|
|
|
206 |
<td style={{ width: '20%' }}>{behavior.description}</td>
|
|
|
207 |
<td style={{ width: '60%' }}>
|
|
|
208 |
<textarea
|
|
|
209 |
name="behavior-comment"
|
|
|
210 |
cols="30"
|
|
|
211 |
rows="3"
|
|
|
212 |
onChange={(e) => setCompetencies([...competencies, { ...competency, behaviors[index]: { ...behaviors[index], name: e.target.value } }])}
|
|
|
213 |
/>
|
|
|
214 |
</td>
|
|
|
215 |
<td style={{ width: '20%' }}>
|
|
|
216 |
<select className='form-control' name='behavior-points' >
|
|
|
217 |
{
|
|
|
218 |
pointsOptions.map(({ label, value }) => (
|
|
|
219 |
<option selected={behavior.points === value} key={value} value={value}>{label}</option>
|
|
|
220 |
))
|
|
|
221 |
}
|
|
|
222 |
</select>
|
|
|
223 |
</td>
|
|
|
224 |
</tr>
|
|
|
225 |
</tbody>
|
|
|
226 |
</table>
|
| 10532 |
stevensc |
227 |
))
|
| 10554 |
stevensc |
228 |
}
|
|
|
229 |
</div>
|
|
|
230 |
</div>
|
| 10540 |
stevensc |
231 |
))
|
| 10554 |
stevensc |
232 |
}
|
|
|
233 |
</div>
|
|
|
234 |
<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
|
|
235 |
<div className="form-group">
|
|
|
236 |
<label>Comentario</label>
|
|
|
237 |
<input type="text" name="comment" className="form-control" ref={register} />
|
|
|
238 |
</div>
|
|
|
239 |
<div className="form-group">
|
|
|
240 |
<label>Evaluación</label>
|
|
|
241 |
<select className='form-control' name='points' ref={register}>
|
|
|
242 |
{
|
|
|
243 |
pointsOptions.map(({ label, value }) => (
|
|
|
244 |
<option selected={watch('points') === value} key={value} value={value}>{label}</option>
|
|
|
245 |
))
|
|
|
246 |
}
|
|
|
247 |
</select>
|
|
|
248 |
</div>
|
|
|
249 |
<div className="form-group">
|
|
|
250 |
<label>Estatus</label>
|
|
|
251 |
<select className='form-control' name='status' ref={register}>
|
|
|
252 |
{
|
|
|
253 |
statusOptions.map(({ label, value }) => (
|
|
|
254 |
<option selected={watch('status') === value} key={value} value={value}>{label}</option>
|
|
|
255 |
))
|
|
|
256 |
}
|
|
|
257 |
</select>
|
|
|
258 |
</div>
|
|
|
259 |
</div>
|
|
|
260 |
</div>
|
|
|
261 |
<div className="form-group">
|
|
|
262 |
<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
|
| 10439 |
stevensc |
263 |
Guardar
|
| 10554 |
stevensc |
264 |
</button>
|
|
|
265 |
<button
|
|
|
266 |
type="button"
|
|
|
267 |
className="btn btn-secondary btn-edit-cancel"
|
|
|
268 |
onClick={() => history.goBack()}
|
|
|
269 |
>
|
| 10439 |
stevensc |
270 |
Cancelar
|
| 10554 |
stevensc |
271 |
</button>
|
|
|
272 |
</div>
|
|
|
273 |
</div>
|
|
|
274 |
</div>
|
|
|
275 |
</div>
|
|
|
276 |
</div>
|
|
|
277 |
</div>
|
|
|
278 |
</section >
|
|
|
279 |
)
|
| 10436 |
stevensc |
280 |
}
|
|
|
281 |
export default FormView
|