Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 15377 Rev 15378
Línea 18... Línea 18...
18 
	jobsDescription,
 18 
	jobsDescription,
19 
	action,
 19 
	action,
20 
	setAction }) => {
 20 
	setAction }) => {
Línea 21... Línea 21...
21 
 
 21 
 
22 
	// Hooks
 22 
	// Hooks
23 
	const { register, setValue, watch, reset, handleSubmit, errors } = useForm()
 23 
	const { register, setValue, reset, handleSubmit, errors } = useForm()
Línea 24... Línea 24...
24 
	const dispatch = useDispatch()
 24 
	const dispatch = useDispatch()
25 
 
 25 
 
26 
	// State
 26 
	// State
27 
	const [currentJobDescription, setCurretJobDescription] = useState('')
 27 
	const [currentJobDescription, setCurretJobDescription] = useState('')
28 
	const [jobDescriptionOptions, setJobDescriptionOptions] = useState(jobsDescription)
 28 
	const [jobDescriptionOptions, setJobDescriptionOptions] = useState(jobsDescription)
Línea 29... Línea 29...
29 
	const [competencyTypes, setCompetencyTypes] = useState([])
 29 
	const [competencyTypes, setCompetencyTypes] = useState([])
30 
	const [competenciesSelected, setCompetenciesSelected] = useState([])
 30 
	const [competenciesSelected, setCompetenciesSelected] = useState([])
Línea 31... Línea 31...
31 
 
 31 
 
32 
 
 32 
 
33 
	const onSubmit = handleSubmit((data) => {
 33 
	const onSubmit = (data) => {
Línea 54... Línea 54...
54 
								}))
 54 
								}))
55 
							)
 55 
							)
56 
						)
 56 
						)
57 
					return
 57 
					return
58 
				}
 58 
				}
59 
 
 - 
 
60 
				dispatch(addNotification({
 59 
				dispatch(addNotification({ style: 'success', msg: data.data }))
61 
					style: 'success',
 - 
 
62 
					msg: data.data
 - 
 
63 
				}))
 60 
				reset()
64 
			})
 61 
			})
65 
	})
 - 
 
66 
 
 - 
 
67 
	const submitAndClose = () => {
 - 
 
68 
		onSubmit()
 - 
 
69 
		reset()
 - 
 
70 
		setAction('')
 62 
			.finally(() => setAction(''))
71 
	}
 63 
	}
Línea 72... Línea 64...
72 
 
 64 
 
73 
	useEffect(() => {
 65 
	useEffect(() => {
74 
		if (action === 'edit') {
 66 
		if (action === 'edit') {
Línea 111... Línea 103...
111 
 
 103 
 
112 
	return (
 104 
	return (
113 
		<section className="content">
 105 
		<section className="content">
114 
			<div className="row" style={{ padding: 16 }}>
 106 
			<div className="row" style={{ padding: 16 }}>
- 
 
 107 
				<div className="col-xs-12 col-md-12">
115 
				<div className="col-xs-12 col-md-12">
 108 
					<form onSubmit={handleSubmit(onSubmit)}>
116 
					<div className="form-group">
 109 
						<div className="form-group">
117 
						<label>Nombre</label>
 110 
							<label>Nombre</label>
118 
						<input
 111 
							<input
119 
							type="text"
 112 
								type="text"
120 
							name="name"
 113 
								name="name"
121 
							className='form-control'
 114 
								className='form-control'
122 
							ref={register({ required: true, maxLength: 50 })}
 115 
								ref={register({ required: true, maxLength: 50 })}
123 
						/>
 116 
							/>
124 
						{errors.name && <p>{errors.name.message}</p>}
 117 
							{errors.name && <p>{errors.name.message}</p>}
125 
					</div>
 118 
						</div>
126 
					<div className="form-group">
 119 
						<div className="form-group">
127 
						<label>Cargo a evaluar</label>
 120 
							<label>Cargo a evaluar</label>
128 
						<select
 121 
							<select
129 
							name="job_description_id"
 122 
								name="job_description_id"
130 
							className="form-control"
 123 
								className="form-control"
131 
							onChange={(e) => setCurretJobDescription(e.target.value)}
 124 
								onChange={(e) => setCurretJobDescription(e.target.value)}
132 
						>
 125 
							>
133 
							<option value=''>Seleccione</option>
 126 
								<option value=''>Seleccione</option>
134 
							{jobDescriptionOptions.map(({ name, uuid }) =>
 127 
								{jobDescriptionOptions.map(({ name, uuid }) =>
135 
								<option selected={uuid === currentJobDescription} key={uuid} value={uuid}>{name}</option>
 128 
									<option selected={uuid === currentJobDescription} key={uuid} value={uuid}>{name}</option>
136 
							)}
 129 
								)}
137 
						</select>
 130 
							</select>
138 
					</div>
 131 
						</div>
139 
					<div className="form-group">
 132 
						<div className="form-group">
140 
						<label htmlFor="form-description">Descripción</label>
 133 
							<label htmlFor="form-description">Descripción</label>
141 
						<textarea
 134 
							<textarea
142 
							type="text"
 135 
								type="text"
143 
							name="description"
 136 
								name="description"
144 
							rows="5"
 137 
								rows="5"
145 
							cols="50"
 138 
								cols="50"
146 
							className='form-control'
 139 
								className='form-control'
147 
							ref={register({ required: 'Este campo es requerido' })}
 140 
								ref={register({ required: 'Este campo es requerido' })}
148 
						/>
 141 
							/>
149 
						{errors.description && <p>{errors.description.message}</p>}
 142 
							{errors.description && <p>{errors.description.message}</p>}
150 
					</div>
 143 
						</div>
151 
					<div className="form-group">
 144 
						<div className="form-group">
152 
						<label htmlFor="status">Estatus</label>
 145 
							<label htmlFor="status">Estatus</label>
153 
						<select
 146 
							<select
154 
							className="form-control"
 147 
								className="form-control"
155 
							name="status"
 148 
								name="status"
156 
							ref={register({ required: 'Este campo es requerido' })}
 149 
								ref={register({ required: 'Este campo es requerido' })}
157 
						>
 150 
							>
158 
							<option selected={status === 'i'} value="i">Inactivo</option>
 151 
								<option selected={status === 'i'} value="i">Inactivo</option>
159 
							<option selected={status === 'a'} value="a">Activo</option>
 152 
								<option selected={status === 'a'} value="a">Activo</option>
160 
						</select>
 153 
							</select>
161 
						{errors.status && <p>{errors.status.message}</p>}
 154 
							{errors.status && <p>{errors.status.message}</p>}
162 
					</div>
 155 
						</div>
163 
					<br />
 156 
						<br />
164 
					<div className="row">
 157 
						<div className="row">
165 
						<div className="col-xs-12 col-md-12">
 158 
							<div className="col-xs-12 col-md-12">
166 
							<div className="panel-group">
 159 
								<div className="panel-group">
167 
								<div className="form-group">
 160 
									<div className="form-group">
168 
									<div className="row">
 161 
										<div className="row">
169 
										<div className="col-xs-12 col-md-12">
 162 
											<div className="col-xs-12 col-md-12">
170 
											<hr />
 163 
												<hr />
171 
											<h4 style={{ fontSize: 18, fontWeight: 'bold' }}>Competencias asociadas al cargo:</h4>
 164 
												<h4 style={{ fontSize: 18, fontWeight: 'bold' }}>Competencias asociadas al cargo:</h4>
172 
											<br />
 165 
												<br />
173 
											<div className="panel-group" id="rows-job-competencies" >
 166 
												<div className="panel-group" id="rows-job-competencies" >
174 
												{!!competencyTypes.length &&
 167 
													{!!competencyTypes.length &&
175 
													competenciesSelected.map((competency) => {
 168 
														competenciesSelected.map((competency) => {
176 
														const type = competencyTypes.find((type) => type.competency_type_id === competency.competency_type_id)
 169 
															const type = competencyTypes.find((type) => type.competency_type_id === competency.competency_type_id)
177 
 
 170 
 
178 
														return (
 - 
 
179 
															<div
 - 
 
180 
																className="panel panel-default"
 - 
 
181 
																id={`panel-${competency.competency_id}`}
 - 
 
182 
																key={competency.competency_id}
 - 
 
183 
															>
 - 
 
184 
																<div className="panel-heading">
 - 
 
185 
																	<h4 className="panel-title" style={{ fontSize: 18 }}>
 - 
 
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 
																		>
 - 
 
193 
																			<span className={`competency-name${competency.competency_id}`}>
 - 
 
194 
																				{`${type.name} - ${competency.name}`}
 - 
 
195 
																			</span>
 - 
 
196 
																		</a>
 - 
 
197 
																	</h4>
 - 
 
198 
																</div>
 171 
															return (
199 
																<div
 172 
																<div
200 
																	className="panel-collapse in collapse show"
 173 
																	className="panel panel-default"
- 
 
 174 
																	id={`panel-${competency.competency_id}`}
201 
																	id={`collapse-${competency.competency_id}`}
 175 
																	key={competency.competency_id}
202 
																>
 176 
																>
203 
																	<div className="panel-body">
 177 
																	<div className="panel-heading">
- 
 
 178 
																		<h4 className="panel-title" style={{ fontSize: 18 }}>
- 
 
 179 
																			<a
204 
																		<div className="table-responsive">
 180 
																				aria-expanded="true"
- 
 
 181 
																				className="accordion-toggle"
205 
																			<table className="table table-bordered">
 182 
																				data-parent={`#panel-${competency.competency_id}`}
- 
 
 183 
																				data-toggle="collapse"
206 
																				<thead>
 184 
																				href={`#collapse-${competency.competency_id}`}
207 
																					<tr>
 185 
																			>
208 
																						<th style={{ width: '80%' }}>Conducta Observable</th>
 186 
																				<span className={`competency-name${competency.competency_id}`}>
209 
																						<th style={{ width: '20%' }}>Nivel</th>
 187 
																					{`${type.name} - ${competency.name}`}
210 
																					</tr>
 188 
																				</span>
211 
																				</thead>
 189 
																			</a>
- 
 
 190 
																		</h4>
- 
 
 191 
																	</div>
212 
																				<tbody>
 192 
																	<div
213 
																					{competency.behaviors?.map(({ behavior_id, description, level }) =>
 193 
																		className="panel-collapse in collapse show"
- 
 
 194 
																		id={`collapse-${competency.competency_id}`}
214 
																						<tr key={behavior_id}>
 195 
																	>
215 
																							<td className="text-left">
 196 
																		<div className="panel-body">
- 
 
 197 
																			<div className="table-responsive">
216 
																								{description}
 198 
																				<table className="table table-bordered">
217 
																							</td>
 199 
																					<thead>
218 
																							<td>
 200 
																						<tr>
219 
																								{levelOptions[level]}
 201 
																							<th style={{ width: '80%' }}>Conducta Observable</th>
220 
																							</td>
 202 
																							<th style={{ width: '20%' }}>Nivel</th>
- 
 
 203 
																						</tr>
- 
 
 204 
																					</thead>
- 
 
 205 
																					<tbody>
- 
 
 206 
																						{competency.behaviors?.map(({ behavior_id, description, level }) =>
- 
 
 207 
																							<tr key={behavior_id}>
- 
 
 208 
																								<td className="text-left">
- 
 
 209 
																									{description}
- 
 
 210 
																								</td>
- 
 
 211 
																								<td>
- 
 
 212 
																									{levelOptions[level]}
- 
 
 213 
																								</td>
221 
																						</tr>
 214 
																							</tr>
222 
																					)}
 215 
																						)}
223 
																				</tbody>
 216 
																					</tbody>
- 
 
 217 
																				</table>
224 
																			</table>
 218 
																			</div>
225 
																		</div>
 219 
																		</div>
226 
																	</div>
 220 
																	</div>
227 
																</div>
 221 
																</div>
228 
															</div>
 222 
															)
229 
														)
 223 
														})
230 
													})
 224 
													}
231 
												}
 225 
												</div>
232 
											</div>
 226 
											</div>
233 
										</div>
 227 
										</div>
234 
									</div>
 228 
									</div>
235 
								</div>
 229 
								</div>
236 
							</div>
 230 
							</div>
237 
						</div>
 - 
 
238 
					</div>
 231 
						</div>
239 
					<div className="d-flex" style={{ gap: '5px' }}>
 232 
						<div className="d-flex" style={{ gap: '5px' }}>
240 
						<button type="button" className="btn btn-primary" onClick={submitAndClose}>Guardar</button>
 233 
							<button type="submit" className="btn btn-primary">Guardar</button>
241 
						<button type="button" className="btn btn-secondary" onClick={() => setAction('')}>Cancelar</button>
 234 
							<button type="button" className="btn btn-secondary" onClick={() => setAction('')}>Cancelar</button>
- 
 
 235 
						</div>
242 
					</div>
 236 
					</form>
243 
				</div>
 237 
				</div>
244 
			</div >
 238 
			</div >
Línea 245... Línea 239...
245 
		</section >
 239 
		</section >