Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15377 | Ir a la última revisión | | 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'
115 
								ref={register({ required: true, maxLength: 50 })}
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 
							>
151 
								<option selected={status === 'i'} value="i">Inactivo</option>
152 
								<option selected={status === 'a'} value="a">Activo</option>
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