Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 12086 | Rev 12101 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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