Proyectos de Subversion LeadersLinked - Backend

Rev

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