Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15100 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
12289 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
2 
import axios from 'axios'
3 
import React, { useState, useEffect } from 'react'
4 
import { useForm } from 'react-hook-form'
5 
import { useDispatch } from 'react-redux'
6 
import { addNotification } from '../../../redux/notification/notification.actions'
15083 stevensc 7 
import parse from 'html-react-parser'
12289 stevensc 8 
 
15099 stevensc 9 
const EvaluationView = ({ actionLink, setActionLink, action, setAction }) => {
12289 stevensc 10 
 
11 
	// Hooks
12 
	const dispatch = useDispatch()
13 
	const { setValue, register, watch, handleSubmit } = useForm()
14 
 
15 
	//States
16 
	const [jobDescription, setJobDescription] = useState({})
17 
 
18 
	const onSubmit = () => {
19 
		const content = []
20 
		jobDescription.competencies.forEach(competency => competency.behaviors.forEach(behavior => {
21 
			content.push({
12301 stevensc 22 
				competencyUuid: behavior.competency_uuid,
23 
				behaviorUuid: behavior.uuid,
12289 stevensc 24 
				comment: watch(`${behavior.competency_uuid}-${behavior.uuid}-comment`),
25 
				evaluation: watch(`select-${behavior.competency_uuid}-${behavior.uuid}`)
26 
			})
27 
		}))
28 
 
29 
		const submitData = new FormData()
30 
		submitData.append('content', JSON.stringify(content))
31 
		submitData.append('points', watch('points'))
32 
		submitData.append('comment', watch('comment'))
33 
 
34 
		axios.post(actionLink, submitData)
35 
			.then(({ data }) => {
36 
				if (!data.success) {
14843 stevensc 37 
					typeof data.data === 'string'
38 
						?
39 
						dispatch(addNotification({
40 
							style: 'danger',
41 
							msg: data.data
42 
						}))
43 
						: Object.entries(data.data).map(([key, value]) =>
44 
							value.map(err =>
45 
								dispatch(addNotification({
46 
									style: 'danger',
47 
									msg: `${key}: ${err}`
48 
								}))
49 
							)
50 
						)
51 
					return
12289 stevensc 52 
				}
53 
 
15099 stevensc 54 
				setAction('')
12289 stevensc 55 
				setActionLink('')
56 
				dispatch(addNotification({
57 
					style: 'success',
15098 stevensc 58 
					msg: 'Registro actualizado'
12289 stevensc 59 
				}))
60 
			})
61 
	}
62 
 
63 
	useEffect(() => {
64 
		axios.get(actionLink)
65 
			.then(({ data }) => {
66 
				const resData = data.data
67 
				if (!data.success) {
68 
					return dispatch(addNotification({
69 
						style: 'danger',
70 
						msg: 'Ha ocurrido un error'
71 
					}))
72 
				}
73 
 
74 
				setJobDescription(resData.job_description)
75 
 
76 
				if (action === 'both') {
77 
					setValue('comment', resData.both.comment)
78 
					setValue('points', resData.both.points)
79 
				}
80 
 
81 
				if (action === 'self') {
82 
					setValue('comment', resData.self.comment)
83 
					setValue('points', resData.self.points)
84 
				}
85 
 
86 
				if (action === 'superviser') {
87 
					setValue('comment', resData.superviser.comment)
88 
					setValue('points', resData.superviser.points)
89 
				}
90 
 
91 
				resData.jobDescription.competencies.behaviors.forEach((obj) => {
92 
					setValue(`select-${obj.competency_uuid}-${obj.uuid}`, obj.evaluation)
93 
					setValue(`${obj.competency_uuid}-${obj.uuid}-comment`, obj.comment)
94 
				})
95 
			})
96 
	}, [action])
97 
 
98 
	return (
99 
		<section className="content">
100 
			<div className="container-fluid">
101 
				<div className="row">
102 
					<div className="col-12">
103 
						<form onSubmit={handleSubmit(onSubmit)}>
104 
							<div className='card'>
105 
								<div className="card-header">
106 
									<ul className="nav nav-tabs" id="myTab" role="tablist">
107 
										<li className="nav-item" role="presentation">
108 
											<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>
109 
										</li>
110 
										<li className="nav-item" role="presentation">
111 
											<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>
112 
										</li>
113 
										<li className="nav-item" role="presentation">
114 
											<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>
115 
										</li>
116 
									</ul>
117 
								</div>
118 
								<div className="card-body">
119 
									<div className="tab-content" id="myTabContent">
120 
										<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
121 
											<div className="card">
122 
												<div className="card-body">
15083 stevensc 123 
													<h5 className='mb-3 bold'>{jobDescription.name}</h5>
12289 stevensc 124 
													<h6>Funciones</h6>
15100 stevensc 125 
													<p>{parse(jobDescription.functions || '')}</p>
12289 stevensc 126 
													<h6>Objetivos</h6>
15100 stevensc 127 
													<p>{parse(jobDescription.objectives || '')}</p>
12289 stevensc 128 
												</div>
129 
											</div>
130 
										</div>
131 
										<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
132 
											{
12292 stevensc 133 
												jobDescription.competencies?.length > 0
14843 stevensc 134 
												&&
135 
												jobDescription.competencies.map((competency) => (
136 
													<div className="card" key={competency.competency_uuid}>
137 
														<div className="card-header">
138 
															<h5>{competency.competency_name} - {competency.competency_type_name}</h5>
139 
														</div>
140 
														<div className="card-body">
141 
															<div className="table-responsive">
15098 stevensc 142 
																{competency.behaviors &&
14843 stevensc 143 
																	competency.behaviors.map((behavior) => (
144 
																		<table key={behavior.uuid} className="table table-hover">
145 
																			<thead>
146 
																				<tr>
147 
																					<th style={{ width: '20%' }}>Conducta Observable</th>
148 
																					<th style={{ width: '60%' }}>Comentario</th>
149 
																					<th style={{ width: '20%' }}>Evaluación</th>
150 
																				</tr>
151 
																			</thead>
152 
																			<tbody>
153 
																				<tr>
154 
																					<td style={{ width: '20%' }}>{behavior.description}</td>
155 
																					<td style={{ width: '60%' }}>
15083 stevensc 156 
																						<input
14843 stevensc 157 
																							name={`${behavior.competency_uuid}-${behavior.uuid}-comment`}
158 
																							ref={register}
15083 stevensc 159 
																							className='form-control w-100' />
14843 stevensc 160 
																					</td>
161 
																					<td style={{ width: '20%' }}>
15083 stevensc 162 
																						<input
163 
																							type="number"
15148 stevensc 164 
																							max={100}
15083 stevensc 165 
																							className='form-control'
166 
																							name={`select-${behavior.competency_uuid}-${behavior.uuid}`}
167 
																							ref={register} />
14843 stevensc 168 
																					</td>
169 
																				</tr>
170 
																			</tbody>
171 
																		</table>
172 
																	))
173 
																}
174 
															</div>
175 
														</div>
176 
													</div>
177 
												))
12289 stevensc 178 
											}
179 
										</div>
180 
										<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
181 
											<div className="form-group">
182 
												<label>Comentario</label>
15079 efrain 183 
												<textarea type="text" name="comment" className="form-control" rows="5" cols="50" ref={register} />
12289 stevensc 184 
											</div>
185 
											<div className="form-group">
186 
												<label>Evaluación</label>
15083 stevensc 187 
												<input
188 
													type="number"
15148 stevensc 189 
													max={100}
15083 stevensc 190 
													className='form-control'
191 
													name='points'
192 
													ref={register} />
12289 stevensc 193 
											</div>
194 
										</div>
195 
									</div>
196 
									<div className="form-group">
197 
										<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
15079 efrain 198 
											Guardar
12289 stevensc 199 
										</button>
200 
										<button
201 
											type="button"
202 
											className="btn btn-secondary btn-edit-cancel"
15099 stevensc 203 
											onClick={() => setAction('')}
12289 stevensc 204 
										>
14843 stevensc 205 
											Cancelar
12289 stevensc 206 
										</button>
207 
									</div>
208 
								</div>
209 
							</div>
210 
						</form>
211 
					</div>
212 
				</div>
213 
			</div>
214 
		</section >
215 
	)
216 
}
217 
export default EvaluationView