| 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 |
|
| 10558 |
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 |
|
| 10558 |
stevensc |
45 |
// Hooks
|
|
|
46 |
const { setValue, register, watch } = useForm()
|
|
|
47 |
const history = useHistory()
|
|
|
48 |
const dispatch = useDispatch()
|
|
|
49 |
const { action } = useParams()
|
| 10439 |
stevensc |
50 |
|
| 10558 |
stevensc |
51 |
useEffect(() => {
|
| 10513 |
stevensc |
52 |
|
| 10753 |
stevensc |
53 |
axios.get(actionLink)
|
|
|
54 |
.then(({ data }) => {
|
|
|
55 |
const resData = data.data
|
| 10513 |
stevensc |
56 |
|
| 10753 |
stevensc |
57 |
if (!data.success) {
|
|
|
58 |
dispatch(addNotification({
|
|
|
59 |
style: 'error',
|
|
|
60 |
msg: 'Ha ocurrido un error'
|
|
|
61 |
}))
|
|
|
62 |
}
|
| 10513 |
stevensc |
63 |
|
| 10753 |
stevensc |
64 |
setValue('comment', resData.interview.comment)
|
|
|
65 |
setValue('points', resData.interview.points)
|
|
|
66 |
setValue('status', resData.interview.status)
|
|
|
67 |
setCompetencies(resData.job_description.competencies)
|
|
|
68 |
setGeneralOptions({
|
|
|
69 |
...generalOptions,
|
|
|
70 |
name: resData.vacancy.name,
|
|
|
71 |
uuid: resData.vacancy.uuid,
|
|
|
72 |
description: resData.vacancy.description,
|
|
|
73 |
functions: resData.job_description.functions,
|
|
|
74 |
objectives: resData.job_description.objectives
|
| 10558 |
stevensc |
75 |
})
|
| 10753 |
stevensc |
76 |
})
|
|
|
77 |
|
| 10558 |
stevensc |
78 |
}, [action])
|
| 10516 |
stevensc |
79 |
|
| 10558 |
stevensc |
80 |
return (
|
|
|
81 |
<section className="content">
|
|
|
82 |
<div className="container-fluid">
|
|
|
83 |
<div className="row">
|
|
|
84 |
<div className="col-12">
|
|
|
85 |
<div className='card'>
|
|
|
86 |
<div className="card-header">
|
|
|
87 |
<ul className="nav nav-tabs" id="myTab" role="tablist">
|
|
|
88 |
<li className="nav-item" role="presentation">
|
|
|
89 |
<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>
|
|
|
90 |
</li>
|
|
|
91 |
<li className="nav-item" role="presentation">
|
|
|
92 |
<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>
|
|
|
93 |
</li>
|
|
|
94 |
<li className="nav-item" role="presentation">
|
|
|
95 |
<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>
|
|
|
96 |
</li>
|
|
|
97 |
</ul>
|
|
|
98 |
</div>
|
|
|
99 |
<div className="card-body">
|
|
|
100 |
<div className="tab-content" id="myTabContent">
|
|
|
101 |
<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
|
|
102 |
<div className="row p-3 justify-content-between">
|
| 10569 |
stevensc |
103 |
<div className="col-6">
|
|
|
104 |
<div className="form-group">
|
|
|
105 |
<label>Vacantes</label>
|
| 10753 |
stevensc |
106 |
<select className='form-control' name='points' ref={register} disabled={action === 'edit'}>
|
| 10569 |
stevensc |
107 |
{
|
|
|
108 |
vacancyOptions.map(({ label, value }) => (
|
|
|
109 |
<option selected={generalOptions.name === label} key={value} value={value}>{label}</option>
|
|
|
110 |
))
|
|
|
111 |
}
|
|
|
112 |
</select>
|
|
|
113 |
</div>
|
| 10558 |
stevensc |
114 |
</div>
|
| 10569 |
stevensc |
115 |
<div className="col-6">
|
|
|
116 |
<div className="form-group">
|
|
|
117 |
<label>Candidatos</label>
|
| 10753 |
stevensc |
118 |
<select className='form-control' name='points' ref={register} disabled={action === 'edit'}>
|
| 10569 |
stevensc |
119 |
{
|
|
|
120 |
candidatesOptions.map(({ label, value }) => (
|
|
|
121 |
<option selected={watch('candidate') === value} key={value} value={value}>{label}</option>
|
|
|
122 |
))
|
|
|
123 |
}
|
|
|
124 |
</select>
|
|
|
125 |
</div>
|
| 10558 |
stevensc |
126 |
</div>
|
|
|
127 |
</div>
|
|
|
128 |
<div className="card">
|
|
|
129 |
<div className="card-body">
|
|
|
130 |
<h5>{generalOptions.name}</h5>
|
|
|
131 |
<p>{generalOptions.description}</p>
|
|
|
132 |
<h6>Funciones</h6>
|
|
|
133 |
<p>{generalOptions.functions}</p>
|
|
|
134 |
<h6>Objetivos</h6>
|
|
|
135 |
<p>{generalOptions.objectives}</p>
|
|
|
136 |
</div>
|
|
|
137 |
</div>
|
|
|
138 |
</div>
|
|
|
139 |
<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
|
|
140 |
{
|
| 10753 |
stevensc |
141 |
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 |
{
|
|
|
148 |
competency.behaviors
|
|
|
149 |
&&
|
|
|
150 |
competency.behaviors.map((behavior) => (
|
|
|
151 |
<table key={behavior.uuid} className="table table-hover">
|
|
|
152 |
<thead>
|
|
|
153 |
<tr>
|
|
|
154 |
<th style={{ width: '20%' }}>Conducta Observable</th>
|
|
|
155 |
<th style={{ width: '60%' }}>Comentario</th>
|
|
|
156 |
<th style={{ width: '20%' }}>Evaluación</th>
|
|
|
157 |
</tr>
|
|
|
158 |
</thead>
|
|
|
159 |
<tbody>
|
|
|
160 |
<tr>
|
|
|
161 |
<td style={{ width: '20%' }}>{behavior.description}</td>
|
|
|
162 |
<td style={{ width: '60%' }}>
|
|
|
163 |
<textarea
|
|
|
164 |
name={`${behavior.competency_uuid}_${behavior.uuid}-name`}
|
|
|
165 |
cols="30"
|
|
|
166 |
rows="3"
|
|
|
167 |
ref={register}
|
|
|
168 |
className='form-control w100'
|
|
|
169 |
/>
|
|
|
170 |
</td>
|
|
|
171 |
<td style={{ width: '20%' }}>
|
|
|
172 |
<select className='form-control' name={`${behavior.competency_uuid}_${behavior.uuid}-points`} ref={register}>
|
|
|
173 |
{
|
|
|
174 |
pointsOptions.map(({ label, value }) => (
|
|
|
175 |
<option selected={behavior.points === value} key={value} value={value}>{label}</option>
|
|
|
176 |
))
|
|
|
177 |
}
|
|
|
178 |
</select>
|
|
|
179 |
</td>
|
|
|
180 |
</tr>
|
|
|
181 |
</tbody>
|
|
|
182 |
</table>
|
|
|
183 |
))
|
|
|
184 |
}
|
|
|
185 |
</div>
|
|
|
186 |
</div>
|
|
|
187 |
))
|
| 10558 |
stevensc |
188 |
}
|
|
|
189 |
</div>
|
|
|
190 |
<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
|
|
191 |
<div className="form-group">
|
|
|
192 |
<label>Comentario</label>
|
|
|
193 |
<input type="text" name="comment" className="form-control" ref={register} />
|
|
|
194 |
</div>
|
|
|
195 |
<div className="form-group">
|
|
|
196 |
<label>Evaluación</label>
|
|
|
197 |
<select className='form-control' name='points' ref={register}>
|
|
|
198 |
{
|
|
|
199 |
pointsOptions.map(({ label, value }) => (
|
|
|
200 |
<option selected={watch('points') === value} key={value} value={value}>{label}</option>
|
|
|
201 |
))
|
|
|
202 |
}
|
|
|
203 |
</select>
|
|
|
204 |
</div>
|
|
|
205 |
<div className="form-group">
|
|
|
206 |
<label>Estatus</label>
|
|
|
207 |
<select className='form-control' name='status' ref={register}>
|
|
|
208 |
{
|
|
|
209 |
statusOptions.map(({ label, value }) => (
|
|
|
210 |
<option selected={watch('status') === value} key={value} value={value}>{label}</option>
|
|
|
211 |
))
|
|
|
212 |
}
|
|
|
213 |
</select>
|
|
|
214 |
</div>
|
|
|
215 |
</div>
|
|
|
216 |
</div>
|
|
|
217 |
<div className="form-group">
|
|
|
218 |
<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
|
| 10753 |
stevensc |
219 |
Guardar
|
| 10558 |
stevensc |
220 |
</button>
|
|
|
221 |
<button
|
|
|
222 |
type="button"
|
|
|
223 |
className="btn btn-secondary btn-edit-cancel"
|
|
|
224 |
onClick={() => history.goBack()}
|
|
|
225 |
>
|
| 10753 |
stevensc |
226 |
Cancelar
|
| 10558 |
stevensc |
227 |
</button>
|
|
|
228 |
</div>
|
|
|
229 |
</div>
|
|
|
230 |
</div>
|
|
|
231 |
</div>
|
|
|
232 |
</div>
|
|
|
233 |
</div>
|
|
|
234 |
</section >
|
|
|
235 |
)
|
| 10436 |
stevensc |
236 |
}
|
|
|
237 |
export default FormView
|