Proyectos de Subversion LeadersLinked - Backend

Rev

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