Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15114 | Rev 15378 | 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
15377 stevensc 23 
	const { register, setValue, watch, 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 
 
15377 stevensc 33 
	const onSubmit = handleSubmit((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 
				}
59 
 
60 
				dispatch(addNotification({
61 
					style: 'success',
62 
					msg: data.data
63 
				}))
64 
			})
15377 stevensc 65 
	})
12096 stevensc 66 
 
67 
	const submitAndClose = () => {
68 
		onSubmit()
69 
		reset()
15102 stevensc 70 
		setAction('')
12096 stevensc 71 
	}
15102 stevensc 72 
 
12040 stevensc 73 
	useEffect(() => {
15066 stevensc 74 
		if (action === 'edit') {
75 
			axios.get(actionLink)
76 
				.then(({ data }) => {
77 
					if (!data.success) {
78 
						return dispatch(addNotification({
79 
							style: 'danger',
80 
							msg: 'Ha ocurrido un error'
81 
						}))
82 
					}
12040 stevensc 83 
 
15066 stevensc 84 
					setValue('name', data.data.name)
15114 stevensc 85 
					setValue('description', data.data.description)
15377 stevensc 86 
					setValue('status', data.data.status)
15066 stevensc 87 
					setCurretJobDescription(data.data.job_description_id)
15069 stevensc 88 
					setValue('jobs_description', data.data.job_description_id)
15066 stevensc 89 
				})
90 
		}
12040 stevensc 91 
	}, [actionLink])
92 
 
93 
	useEffect(() => {
15102 stevensc 94 
		if (currentJobDescription) {
95 
 
96 
			axios.get(`/performance-evaluation/forms/job-decription?id=${currentJobDescription}`)
97 
				.then(({ data }) => {
98 
					if (!data.success) {
99 
						return dispatch(addNotification({
100 
							style: 'danger',
101 
							msg: 'Ha ocurrido un error'
102 
						}))
103 
					}
104 
					let options = data.data.jobs_description?.map(description => ({ uuid: description.job_description_id, name: description.name }))
105 
					setJobDescriptionOptions([...options, { name: data.data.name, uuid: data.data.uuid }])
106 
					setCompetenciesSelected(data.data.competencies_selected)
107 
					setCompetencyTypes(data.data.competency_types)
108 
				})
15080 efrain 109 
		}
12040 stevensc 110 
	}, [currentJobDescription])
111 
 
12012 stevensc 112 
	return (
12040 stevensc 113 
		<section className="content">
114 
			<div className="row" style={{ padding: 16 }}>
115 
				<div className="col-xs-12 col-md-12">
12096 stevensc 116 
					<div className="form-group">
117 
						<label>Nombre</label>
15102 stevensc 118 
						<input
119 
							type="text"
120 
							name="name"
121 
							className='form-control'
15377 stevensc 122 
							ref={register({ required: true, maxLength: 50 })}
123 
						/>
124 
						{errors.name && <p>{errors.name.message}</p>}
12096 stevensc 125 
					</div>
126 
					<div className="form-group">
127 
						<label>Cargo a evaluar</label>
15102 stevensc 128 
						<select
129 
							name="job_description_id"
130 
							className="form-control"
15377 stevensc 131 
							onChange={(e) => setCurretJobDescription(e.target.value)}
132 
						>
15066 stevensc 133 
							<option value=''>Seleccione</option>
15377 stevensc 134 
							{jobDescriptionOptions.map(({ name, uuid }) =>
15102 stevensc 135 
								<option selected={uuid === currentJobDescription} key={uuid} value={uuid}>{name}</option>
15377 stevensc 136 
							)}
12096 stevensc 137 
						</select>
138 
					</div>
139 
					<div className="form-group">
140 
						<label htmlFor="form-description">Descripción</label>
15102 stevensc 141 
						<textarea
142 
							type="text"
143 
							name="description"
144 
							rows="5"
145 
							cols="50"
146 
							className='form-control'
15377 stevensc 147 
							ref={register({ required: 'Este campo es requerido' })}
148 
						/>
149 
						{errors.description && <p>{errors.description.message}</p>}
12096 stevensc 150 
					</div>
151 
					<div className="form-group">
15377 stevensc 152 
						<label htmlFor="status">Estatus</label>
153 
						<select
154 
							className="form-control"
155 
							name="status"
156 
							ref={register({ required: 'Este campo es requerido' })}
157 
						>
12096 stevensc 158 
							<option selected={status === 'i'} value="i">Inactivo</option>
159 
							<option selected={status === 'a'} value="a">Activo</option>
160 
						</select>
15377 stevensc 161 
						{errors.status && <p>{errors.status.message}</p>}
12096 stevensc 162 
					</div>
163 
					<br />
164 
					<div className="row">
165 
						<div className="col-xs-12 col-md-12">
15377 stevensc 166 
							<div className="panel-group">
167 
								<div className="form-group">
12135 stevensc 168 
									<div className="row">
169 
										<div className="col-xs-12 col-md-12">
170 
											<hr />
171 
											<h4 style={{ fontSize: 18, fontWeight: 'bold' }}>Competencias asociadas al cargo:</h4>
172 
											<br />
173 
											<div className="panel-group" id="rows-job-competencies" >
15102 stevensc 174 
												{!!competencyTypes.length &&
12135 stevensc 175 
													competenciesSelected.map((competency) => {
176 
														const type = competencyTypes.find((type) => type.competency_type_id === competency.competency_type_id)
12083 stevensc 177 
 
12135 stevensc 178 
														return (
15377 stevensc 179 
															<div
180 
																className="panel panel-default"
181 
																id={`panel-${competency.competency_id}`}
182 
																key={competency.competency_id}
183 
															>
12135 stevensc 184 
																<div className="panel-heading">
185 
																	<h4 className="panel-title" style={{ fontSize: 18 }}>
15377 stevensc 186 
																		<a
187 
																			aria-expanded="true"
188 
																			className="accordion-toggle"
189 
																			data-parent={`#panel-${competency.competency_id}`}
190 
																			data-toggle="collapse"
191 
																			href={`#collapse-${competency.competency_id}`}
192 
																		>
12135 stevensc 193 
																			<span className={`competency-name${competency.competency_id}`}>
194 
																				{`${type.name} - ${competency.name}`}
195 
																			</span>
196 
																		</a>
197 
																	</h4>
198 
																</div>
15377 stevensc 199 
																<div
200 
																	className="panel-collapse in collapse show"
201 
																	id={`collapse-${competency.competency_id}`}
202 
																>
12135 stevensc 203 
																	<div className="panel-body">
204 
																		<div className="table-responsive">
205 
																			<table className="table table-bordered">
206 
																				<thead>
207 
																					<tr>
208 
																						<th style={{ width: '80%' }}>Conducta Observable</th>
209 
																						<th style={{ width: '20%' }}>Nivel</th>
210 
																					</tr>
211 
																				</thead>
212 
																				<tbody>
15377 stevensc 213 
																					{competency.behaviors?.map(({ behavior_id, description, level }) =>
15102 stevensc 214 
																						<tr key={behavior_id}>
215 
																							<td className="text-left">
216 
																								{description}
217 
																							</td>
218 
																							<td>
219 
																								{levelOptions[level]}
220 
																							</td>
221 
																						</tr>
15377 stevensc 222 
																					)}
12135 stevensc 223 
																				</tbody>
224 
																			</table>
225 
																		</div>
226 
																	</div>
227 
																</div>
12081 stevensc 228 
															</div>
12135 stevensc 229 
														)
230 
													})
231 
												}
232 
											</div>
233 
										</div>
234 
									</div>
12040 stevensc 235 
								</div>
236 
							</div>
237 
						</div>
12096 stevensc 238 
					</div>
12104 stevensc 239 
					<div className="d-flex" style={{ gap: '5px' }}>
15080 efrain 240 
						<button type="button" className="btn btn-primary" onClick={submitAndClose}>Guardar</button>
15102 stevensc 241 
						<button type="button" className="btn btn-secondary" onClick={() => setAction('')}>Cancelar</button>
12096 stevensc 242 
					</div>
12040 stevensc 243 
				</div>
12081 stevensc 244 
			</div >
245 
		</section >
12040 stevensc 246 
 
12012 stevensc 247 
	)
248 
}
249 
 
250 
export default EditView