Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
10513 stevensc 1 
import axios from 'axios'
10518 stevensc 2 
import React, { useState, useEffect } from 'react'
10513 stevensc 3 
import { useForm } from 'react-hook-form'
4 
import { useDispatch } from 'react-redux'
10450 stevensc 5 
import { useHistory, useParams } from 'react-router-dom'
10513 stevensc 6 
import { addNotification } from '../../../redux/notification/notification.actions'
10436 stevensc 7 
 
10439 stevensc 8 
 
10513 stevensc 9 
const FormView = ({ actionLink }) => {
10 
 
10516 stevensc 11 
	// States
10524 stevensc 12 
	const [generalOptions, setGeneralOptions] = useState({
13 
		uuid: '',
14 
		name: '',
15 
		description: '',
16 
		functions: '',
17 
		objectives: ''
18 
	})
10518 stevensc 19 
	const [pointsOptions, setPointsOptions] = useState([
10516 stevensc 20 
		{ label: 'Evaluación', value: 0 },
21 
		{ label: 'Sugerir otro cargo', value: 0 },
22 
		{ label: '25%', value: 1 },
23 
		{ label: '50%', value: 2 },
24 
		{ label: '75%', value: 3 },
25 
		{ label: '100%', value: 4 }
10518 stevensc 26 
	])
27 
	const [statusOptions, setStatusOptions] = useState([
10516 stevensc 28 
		{ label: 'Estatus', value: '' },
29 
		{ label: 'Aceptado', value: 'a' },
30 
		{ label: 'Rechazado', value: 'r' }
10518 stevensc 31 
	])
10524 stevensc 32 
	const [vacancyOptions, setVacancyOptions] = useState([
33 
		{ label: 'Estatus', value: '' },
34 
		{ label: 'Aceptado', value: 'a' },
35 
		{ label: 'Rechazado', value: 'r' }
36 
	])
37 
	const [candidatesOptions, setCandidatesOptions] = useState([
38 
		{ label: 'Estatus', value: '' },
39 
		{ label: 'Aceptado', value: 'a' },
40 
		{ label: 'Rechazado', value: 'r' }
41 
	])
10516 stevensc 42 
 
43 
	// Hooks
10522 stevensc 44 
	const { setValue, register, watch } = useForm()
10447 stevensc 45 
	const history = useHistory()
10513 stevensc 46 
	const dispatch = useDispatch()
10450 stevensc 47 
	const { action } = useParams()
10439 stevensc 48 
 
10450 stevensc 49 
	useEffect(() => {
10513 stevensc 50 
 
10516 stevensc 51 
		// Get current item data
52 
		if (action === 'edit') {
53 
			axios.get(actionLink)
54 
				.then(({ data }) => {
55 
					const resData = data.data
10513 stevensc 56 
 
10516 stevensc 57 
					if (!data.success) {
58 
						dispatch(addNotification({
59 
							style: 'error',
60 
							msg: 'Ha ocurrido un error'
61 
						}))
62 
					}
10513 stevensc 63 
 
10516 stevensc 64 
					setValue('comment', resData.interview.comment)
10522 stevensc 65 
					setValue('points', resData.interview.points)
66 
					setValue('status', resData.interview.status)
10524 stevensc 67 
					setGeneralOptions({
68 
						...generalOptions,
69 
						name: resData.vacancy.name,
70 
						uuid: resData.vacancy.uuid,
71 
						description: resData.vacancy.description,
72 
						functions: dataExaple.job_description.functions,
73 
						objectives: dataExaple.job_description.objectives
74 
					})
10516 stevensc 75 
				})
76 
		}
77 
	}, [action])
78 
 
10513 stevensc 79 
	const dataExaple = {
80 
		'candidate': {
81 
			'uuid': 'afc67cd3-60cd-4b14-81d8-6d8a014bbdd6',
82 
			'first_name': 'Eleazar',
83 
			'last_name': 'Oroño',
84 
			'email': 'eorono@gmail.com'
85 
		},
86 
		'job_description': {
87 
			'uuid': '8ff86a9a-651c-4dd0-86c1-b9c0716d09e0',
88 
			'name': 'Programador Junior',
89 
			'functions': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Tortor posuere ac ut consequat semper viverra nam. Ultricies leo integer malesuada nunc.</p>',
90 
			'objectives': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Tortor posuere ac ut consequat semper viverra nam. Ultricies leo integer malesuada nunc.</p>',
91 
			'competencies': [
92 
				{
93 
					'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',
94 
					'competency_name': 'Flexibilidad',
95 
					'competency_type_uuid': 'ae45b2e5-73a9-4a0b-ad04-29a07524ccd6',
96 
					'competency_type_name': 'Competencias Horizontales',
97 
					'behaviors': [
98 
						{
99 
							'uuid': '4cee9594-051d-4a52-82f0-58d4accc5583',
100 
							'description': 'Enfocar sus acciones al logro de los resultados planteados.',
101 
							'points': 0,
102 
							'comment': '',
103 
							'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b'
104 
						}
105 
					]
106 
				}
107 
			]
108 
		},
109 
		'interview': {
110 
			'id': 'd1cb9f3d-a6d0-43c1-a698-645b0156d99d',
111 
			'status': 'a',
112 
			'content': [
113 
				{
114 
					'competencyUuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',
115 
					'behaviorUuid': '4cee9594-051d-4a52-82f0-58d4accc5583',
116 
					'comment': '',
117 
					'evaluation': '0'
118 
				}
119 
			],
120 
			'type': 'b',
121 
			'points': '3',
122 
			'comment': null
123 
		},
124 
		'vacancy': {
125 
			'id': '26',
126 
			'uuid': '7693a385-cde2-4e35-adef-1adc1ca63eac',
127 
			'company_id': '1',
128 
			'name': 'Programador PHP',
129 
			'job_description_id': '3',
130 
			'job_category_id': '11',
131 
			'description': '<p>Test</p>',
132 
			'location_id': '136',
133 
			'industry_id': '12',
134 
			'last_date': '0000-00-00',
135 
			'status': 'a',
136 
			'added_on': '2022-08-10 18:24:56',
137 
			'updated_on': '2022-08-17 20:47:29'
138 
		}
139 
	}
140 
 
141 
	useEffect(() => {
10450 stevensc 142 
		console.log(action)
143 
	}, [])
144 
 
10447 stevensc 145 
	return (
146 
		<section className="content">
147 
			<div className="container-fluid">
148 
				<div className="row">
149 
					<div className="col-12">
150 
						<div className='card'>
151 
							<div className="card-header">
152 
								<ul className="nav nav-tabs" id="myTab" role="tablist">
153 
									<li className="nav-item" role="presentation">
10524 stevensc 154 
										<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>
10447 stevensc 155 
									</li>
156 
									<li className="nav-item" role="presentation">
10524 stevensc 157 
										<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>
10447 stevensc 158 
									</li>
159 
									<li className="nav-item" role="presentation">
10524 stevensc 160 
										<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>
10447 stevensc 161 
									</li>
162 
								</ul>
163 
							</div>
164 
							<div className="card-body">
165 
								<div className="tab-content" id="myTabContent">
10523 stevensc 166 
									<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
167 
										<div className="row p-3 justify-content-between">
168 
											<div className="form-group">
169 
												<label>Vacantes</label>
10524 stevensc 170 
												<select className='form-control' name='points' ref={register}>
171 
													{
172 
														vacancyOptions.map(({ label, value }) => (
173 
															<option selected={generalOptions.name === label} key={value} value={value}>{label}</option>
174 
														))
175 
													}
10523 stevensc 176 
												</select>
177 
											</div>
178 
											<div className="form-group">
179 
												<label>Candidatos</label>
10524 stevensc 180 
												<select className='form-control' name='points' ref={register}>
181 
													{
182 
														candidatesOptions.map(({ label, value }) => (
183 
															<option selected={watch('candidate') === value} key={value} value={value}>{label}</option>
184 
														))
185 
													}
10523 stevensc 186 
												</select>
187 
											</div>
188 
										</div>
189 
										<div className="card">
190 
											<div className="card-body">
10524 stevensc 191 
												<h5 className="card-title">{generalOptions.name}</h5>
192 
												<p>{generalOptions.description}</p>
193 
												<h5>Funciones</h5>
194 
												<p>{generalOptions.functions}</p>
195 
												<h5>Objetivos</h5>
196 
												<p>{generalOptions.objectives}</p>
10523 stevensc 197 
											</div>
198 
										</div>
199 
									</div>
10447 stevensc 200 
									<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"></div>
201 
									<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
202 
										<div className="form-group">
10513 stevensc 203 
											<label>Comentario</label>
10522 stevensc 204 
											<input type="text" name="comment" className="form-control" ref={register} />
10447 stevensc 205 
										</div>
10513 stevensc 206 
										<div className="form-group">
207 
											<label>Evaluación</label>
10524 stevensc 208 
											<select className='form-control' name='points' ref={register}>
10513 stevensc 209 
												{
10519 stevensc 210 
													pointsOptions.map(({ label, value }) => (
10522 stevensc 211 
														<option selected={watch('points') === value} key={value} value={value}>{label}</option>
10519 stevensc 212 
													))
10513 stevensc 213 
												}
214 
											</select>
215 
										</div>
216 
										<div className="form-group">
217 
											<label>Estatus</label>
10524 stevensc 218 
											<select className='form-control' name='status' ref={register}>
10513 stevensc 219 
												{
10519 stevensc 220 
													statusOptions.map(({ label, value }) => (
10522 stevensc 221 
														<option selected={watch('status') === value} key={value} value={value}>{label}</option>
10519 stevensc 222 
													))
10513 stevensc 223 
												}
224 
											</select>
225 
										</div>
10447 stevensc 226 
									</div>
227 
								</div>
228 
								<div className="form-group">
10513 stevensc 229 
									<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
10439 stevensc 230 
                                        Guardar
10447 stevensc 231 
									</button>
232 
									<button
233 
										type="button"
234 
										className="btn btn-secondary btn-edit-cancel"
235 
										onClick={() => history.goBack()}
236 
									>
10439 stevensc 237 
                                        Cancelar
10447 stevensc 238 
									</button>
239 
								</div>
240 
							</div>
241 
						</div>
242 
					</div>
243 
				</div>
244 
			</div>
10522 stevensc 245 
		</section >
10447 stevensc 246 
	)
10436 stevensc 247 
}
248 
export default FormView