Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'

import React, { useState, useEffect } from 'react'

import { useForm } from 'react-hook-form'

import { useDispatch } from 'react-redux'

import { useHistory, useParams } from 'react-router-dom'

import { addNotification } from '../../../redux/notification/notification.actions'

const FormView = ({ actionLink }) => {

	// States

	const [pointsOptions, setPointsOptions] = useState([

		{ label: 'Evaluación', value: 0 },

		{ label: 'Sugerir otro cargo', value: 0 },

		{ label: '25%', value: 1 },

		{ label: '50%', value: 2 },

		{ label: '75%', value: 3 },

		{ label: '100%', value: 4 }

	])

	const [statusOptions, setStatusOptions] = useState([

		{ label: 'Estatus', value: '' },

		{ label: 'Aceptado', value: 'a' },

		{ label: 'Rechazado', value: 'r' }

	])

	// Hooks

	const { setValue, register, watch } = useForm()

	const history = useHistory()

	const dispatch = useDispatch()

	const { action } = useParams()

	useEffect(() => {

		// Get current item data

		if (action === 'edit') {

			axios.get(actionLink)

				.then(({ data }) => {

					const resData = data.data

					if (!data.success) {

						dispatch(addNotification({

							style: 'error',

							msg: 'Ha ocurrido un error'

						}))

					}

					setValue('comment', resData.interview.comment)

					setValue('points', resData.interview.points)

					setValue('status', resData.interview.status)

				})

		}

	}, [action])

	const dataExaple = {

		'candidate': {

			'uuid': 'afc67cd3-60cd-4b14-81d8-6d8a014bbdd6',

			'first_name': 'Eleazar',

			'last_name': 'Oroño',

			'email': 'eorono@gmail.com'

		},

		'job_description': {

			'uuid': '8ff86a9a-651c-4dd0-86c1-b9c0716d09e0',

			'name': 'Programador Junior',

			'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>',

			'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>',

			'competencies': [

				{

					'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',

					'competency_name': 'Flexibilidad',

					'competency_type_uuid': 'ae45b2e5-73a9-4a0b-ad04-29a07524ccd6',

					'competency_type_name': 'Competencias Horizontales',

					'behaviors': [

						{

							'uuid': '4cee9594-051d-4a52-82f0-58d4accc5583',

							'description': 'Enfocar sus acciones al logro de los resultados planteados.',

							'points': 0,

							'comment': '',

							'competency_uuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b'

						}

					]

				}

			]

		},

		'interview': {

			'id': 'd1cb9f3d-a6d0-43c1-a698-645b0156d99d',

			'status': 'a',

			'content': [

				{

					'competencyUuid': '79b6ae02-f8e9-4f57-976d-d28b31fc824b',

					'behaviorUuid': '4cee9594-051d-4a52-82f0-58d4accc5583',

					'comment': '',

					'evaluation': '0'

				}

			],

			'type': 'b',

			'points': '3',

			'comment': null

		},

		'vacancy': {

			'id': '26',

			'uuid': '7693a385-cde2-4e35-adef-1adc1ca63eac',

			'company_id': '1',

			'name': 'Programador PHP',

			'job_description_id': '3',

			'job_category_id': '11',

			'description': '<p>Test</p>',

			'location_id': '136',

			'industry_id': '12',

			'last_date': '0000-00-00',

			'status': 'a',

			'added_on': '2022-08-10 18:24:56',

			'updated_on': '2022-08-17 20:47:29'

		}

	}

	useEffect(() => {

		console.log(action)

	}, [])

	return (

		<section className="content">

			<div className="container-fluid">

				<div className="row">

					<div className="col-12">

						<div className='card'>

							<div className="card-header">

								<ul className="nav nav-tabs" id="myTab" role="tablist">

									<li className="nav-item" role="presentation">

										<button className="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>

									</li>

									<li className="nav-item" role="presentation">

										<button className="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>

									</li>

									<li className="nav-item" role="presentation">

										<button className="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>

									</li>

								</ul>

							</div>

							<div className="card-body">

								<div className="tab-content" id="myTabContent">

									<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"></div>

									<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"></div>

									<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">

										<div className="form-group">

											<label>Comentario</label>

											<input type="text" name="comment" className="form-control" ref={register} />

										</div>

										<div className="form-group">

											<label>Evaluación</label>

											<select

												className='form-control'

												name='points'

												ref={register}

											>

												{

													pointsOptions.map(({ label, value }) => (

														<option selected={watch('points') === value} key={value} value={value}>{label}</option>

													))

												}

											</select>

										</div>

										<div className="form-group">

											<label>Estatus</label>

											<select

												className='form-control'

												name='status'

												ref={register}

											>

												{

													statusOptions.map(({ label, value }) => (

														<option selected={watch('status') === value} key={value} value={value}>{label}</option>

													))

												}

											</select>

										</div>

									</div>

								</div>

								<div className="form-group">

									<button type="submit" className="btn btn-primary btn-form-save-close mr-2">

                                        Guardar

									</button>

									<button

										type="button"

										className="btn btn-secondary btn-edit-cancel"

										onClick={() => history.goBack()}

									>

                                        Cancelar

									</button>

								</div>

							</div>

						</div>

					</div>

				</div>

			</div>

		</section >

	)

}

export default FormView