Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15378 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
12040 stevensc 1
import axios from 'axios'
2
import React, { useEffect, useState } from 'react'
3
import { useForm } from 'react-hook-form'
4
import { useDispatch } from 'react-redux'
5
import { addNotification } from '../../../redux/notification/notification.actions'
12012 stevensc 6
 
12081 stevensc 7
const levelOptions = {
12139 stevensc 8
	'0': 'Cero',
12081 stevensc 9
	'1': 'Uno',
10
	'2': 'Dos',
11
	'3': 'Tres',
12
	'4': 'Cuatro',
13
	'5': 'Cinco'
14
}
15
 
15102 stevensc 16
const EditView = ({
17
	actionLink,
18
	jobsDescription,
19
	action,
20
	setAction }) => {
12040 stevensc 21
 
12096 stevensc 22
	// Hooks
15378 stevensc 23
	const { register, setValue, reset, handleSubmit, errors } = useForm()
12096 stevensc 24
	const dispatch = useDispatch()
25
 
26
	// State
12047 stevensc 27
	const [currentJobDescription, setCurretJobDescription] = useState('')
15066 stevensc 28
	const [jobDescriptionOptions, setJobDescriptionOptions] = useState(jobsDescription)
12081 stevensc 29
	const [competencyTypes, setCompetencyTypes] = useState([])
30
	const [competenciesSelected, setCompetenciesSelected] = useState([])
12040 stevensc 31
 
15080 efrain 32
 
15378 stevensc 33
	const onSubmit = (data) => {
12101 stevensc 34
		const submitData = new FormData()
15377 stevensc 35
 
36
		Object.entries(data).forEach(([key, value]) => submitData.append(key, value))
12101 stevensc 37
		submitData.append('job_description_id', currentJobDescription)
12104 stevensc 38
		submitData.append('content', '[]')
12101 stevensc 39
 
40
		axios.post(actionLink, submitData)
12096 stevensc 41
			.then(({ data }) => {
42
				if (!data.success) {
14616 stevensc 43
					typeof data.data === 'string'
44
						?
45
						dispatch(addNotification({
46
							style: 'danger',
47
							msg: data.data
48
						}))
49
						: Object.entries(data.data).map(([key, value]) =>
50
							value.map(err =>
51
								dispatch(addNotification({
52
									style: 'danger',
53
									msg: `${key}: ${err}`
54
								}))
55
							)
56
						)
57
					return
12096 stevensc 58
				}
15378 stevensc 59
				dispatch(addNotification({ style: 'success', msg: data.data }))
60
				reset()
12096 stevensc 61
			})
15378 stevensc 62
			.finally(() => setAction(''))
12096 stevensc 63
	}
15102 stevensc 64
 
12040 stevensc 65
	useEffect(() => {
15066 stevensc 66
		if (action === 'edit') {
67
			axios.get(actionLink)
68
				.then(({ data }) => {
69
					if (!data.success) {
70
						return dispatch(addNotification({
71
							style: 'danger',
72
							msg: 'Ha ocurrido un error'
73
						}))
74
					}
12040 stevensc 75
 
15066 stevensc 76
					setValue('name', data.data.name)
15114 stevensc 77
					setValue('description', data.data.description)
15377 stevensc 78
					setValue('status', data.data.status)
15066 stevensc 79
					setCurretJobDescription(data.data.job_description_id)
15069 stevensc 80
					setValue('jobs_description', data.data.job_description_id)
15066 stevensc 81
				})
82
		}
12040 stevensc 83
	}, [actionLink])
84
 
85
	useEffect(() => {
15102 stevensc 86
		if (currentJobDescription) {
87
 
88
			axios.get(`/performance-evaluation/forms/job-decription?id=${currentJobDescription}`)
89
				.then(({ data }) => {
90
					if (!data.success) {
91
						return dispatch(addNotification({
92
							style: 'danger',
93
							msg: 'Ha ocurrido un error'
94
						}))
95
					}
96
					let options = data.data.jobs_description?.map(description => ({ uuid: description.job_description_id, name: description.name }))
97
					setJobDescriptionOptions([...options, { name: data.data.name, uuid: data.data.uuid }])
98
					setCompetenciesSelected(data.data.competencies_selected)
99
					setCompetencyTypes(data.data.competency_types)
100
				})
15080 efrain 101
		}
12040 stevensc 102
	}, [currentJobDescription])
103
 
12012 stevensc 104
	return (
12040 stevensc 105
		<section className="content">
106
			<div className="row" style={{ padding: 16 }}>
107
				<div className="col-xs-12 col-md-12">
15378 stevensc 108
					<form onSubmit={handleSubmit(onSubmit)}>
109
						<div className="form-group">
110
							<label>Nombre</label>
111
							<input
112
								type="text"
113
								name="name"
114
								className='form-control'
15379 stevensc 115
								ref={register({ required: 'Este campo es requerido', maxLength: 50 })}
15378 stevensc 116
							/>
117
							{errors.name && <p>{errors.name.message}</p>}
118
						</div>
119
						<div className="form-group">
120
							<label>Cargo a evaluar</label>
121
							<select
122
								name="job_description_id"
123
								className="form-control"
124
								onChange={(e) => setCurretJobDescription(e.target.value)}
125
							>
126
								<option value=''>Seleccione</option>
127
								{jobDescriptionOptions.map(({ name, uuid }) =>
128
									<option selected={uuid === currentJobDescription} key={uuid} value={uuid}>{name}</option>
129
								)}
130
							</select>
131
						</div>
132
						<div className="form-group">
133
							<label htmlFor="form-description">Descripción</label>
134
							<textarea
135
								type="text"
136
								name="description"
137
								rows="5"
138
								cols="50"
139
								className='form-control'
140
								ref={register({ required: 'Este campo es requerido' })}
141
							/>
142
							{errors.description && <p>{errors.description.message}</p>}
143
						</div>
144
						<div className="form-group">
145
							<label htmlFor="status">Estatus</label>
146
							<select
147
								className="form-control"
148
								name="status"
149
								ref={register({ required: 'Este campo es requerido' })}
150
							>
15379 stevensc 151
								<option value="i">Inactivo</option>
152
								<option value="a">Activo</option>
15378 stevensc 153
							</select>
154
							{errors.status && <p>{errors.status.message}</p>}
155
						</div>
156
						<br />
157
						<div className="row">
158
							<div className="col-xs-12 col-md-12">
159
								<div className="panel-group">
160
									<div className="form-group">
161
										<div className="row">
162
											<div className="col-xs-12 col-md-12">
163
												<hr />
164
												<h4 style={{ fontSize: 18, fontWeight: 'bold' }}>Competencias asociadas al cargo:</h4>
165
												<br />
166
												<div className="panel-group" id="rows-job-competencies" >
167
													{!!competencyTypes.length &&
168
														competenciesSelected.map((competency) => {
169
															const type = competencyTypes.find((type) => type.competency_type_id === competency.competency_type_id)
12083 stevensc 170
 
15378 stevensc 171
															return (
15377 stevensc 172
																<div
15378 stevensc 173
																	className="panel panel-default"
174
																	id={`panel-${competency.competency_id}`}
175
																	key={competency.competency_id}
15377 stevensc 176
																>
15378 stevensc 177
																	<div className="panel-heading">
178
																		<h4 className="panel-title" style={{ fontSize: 18 }}>
179
																			<a
180
																				aria-expanded="true"
181
																				className="accordion-toggle"
182
																				data-parent={`#panel-${competency.competency_id}`}
183
																				data-toggle="collapse"
184
																				href={`#collapse-${competency.competency_id}`}
185
																			>
186
																				<span className={`competency-name${competency.competency_id}`}>
187
																					{`${type.name} - ${competency.name}`}
188
																				</span>
189
																			</a>
190
																		</h4>
191
																	</div>
192
																	<div
193
																		className="panel-collapse in collapse show"
194
																		id={`collapse-${competency.competency_id}`}
195
																	>
196
																		<div className="panel-body">
197
																			<div className="table-responsive">
198
																				<table className="table table-bordered">
199
																					<thead>
200
																						<tr>
201
																							<th style={{ width: '80%' }}>Conducta Observable</th>
202
																							<th style={{ width: '20%' }}>Nivel</th>
15102 stevensc 203
																						</tr>
15378 stevensc 204
																					</thead>
205
																					<tbody>
206
																						{competency.behaviors?.map(({ behavior_id, description, level }) =>
207
																							<tr key={behavior_id}>
208
																								<td className="text-left">
209
																									{description}
210
																								</td>
211
																								<td>
212
																									{levelOptions[level]}
213
																								</td>
214
																							</tr>
215
																						)}
216
																					</tbody>
217
																				</table>
218
																			</div>
12135 stevensc 219
																		</div>
220
																	</div>
221
																</div>
15378 stevensc 222
															)
223
														})
224
													}
225
												</div>
12135 stevensc 226
											</div>
227
										</div>
228
									</div>
12040 stevensc 229
								</div>
230
							</div>
231
						</div>
15378 stevensc 232
						<div className="d-flex" style={{ gap: '5px' }}>
233
							<button type="submit" className="btn btn-primary">Guardar</button>
234
							<button type="button" className="btn btn-secondary" onClick={() => setAction('')}>Cancelar</button>
235
						</div>
236
					</form>
12040 stevensc 237
				</div>
12081 stevensc 238
			</div >
239
		</section >
12040 stevensc 240
 
12012 stevensc 241
	)
242
}
243
 
244
export default EditView