Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable no-mixed-spaces-and-tabs */

import axios from 'axios'

import { CKEditor } from 'ckeditor4-react'

import React, { useEffect, useState } 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'

import { config } from '../../shared/helpers/ckeditor_config'

import ToggleComponent from '../../shared/ToggleComponent'

const FormView = ({

	actionLink = '',

	setActionLink = function () { }

}) => {

	// Hooks

	const dispatch = useDispatch()

	const history = useHistory()

	const { action } = useParams()

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

	//States

	const [supervisers, setSupervisers] = useState([])

	const onSubmit = () => {

		const submitData = new FormData()

		/* 		const content = []

		jobDescription.competencies.forEach(competency => competency.behaviors.forEach(behavior => {

			content.push({

				competencyUuid: behavior.competency_uuid,

				behaviorUuid: behavior.uuid,

				comment: watch(`${behavior.competency_uuid}-${behavior.uuid}-comment`),

				evaluation: watch(`select-${behavior.competency_uuid}-${behavior.uuid}`)

			})

		}))

		submitData.append('content', JSON.stringify(content))

		submitData.append('points', watch('points')) */

		//.append('comment', watch('comment'))

		axios.post(actionLink, submitData)

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: typeof data.data === 'string'

							? data.data

							: 'Ha ocurrido un error'

					}))

				}

				history.goBack()

				setActionLink('')

				dispatch(addNotification({

					style: 'success',

					msg: `Registro ${action === 'edit' ? 'actualizado' : 'añadido'}`

				}))

			})

	}

	useEffect(() => {

		register('status')

		register('objectives')

		register('functions')

	}, [])

	useEffect(() => {

		axios.get(actionLink)

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				setSupervisers(data.data['supervisers'].map(option => {

					return {

						key: option.name,

						value: option.uuid

					}

				}))

				setValue('name', data.data['name'])

				setValue('status', data.data['status'])

				setValue('objectives', data.data['objectives'])

				setValue('functions', data.data['functions'])

				setValue('job_description_id_boss', data.data['job_description_id_boss'])

			})

	}, [action])

	return (

		<section className="content">

			<div className="container-fluid">

				<div className="row">

					<div className="col-12">

						<form onSubmit={handleSubmit(onSubmit)}>

							<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">General</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">Competencias</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">Conclusiones</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 className="card px-2">

												<div className="d-flex">

													<div className="col-4">

														<div className="form-group">

															<label>Nombre</label>

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

														</div>

													</div>

													<div className="col-4">

														<div className="form-group">

															<label>Nombre</label>

															<select className='form-control' name="job_description_id_boss" ref={register}>

																<option value="">No aplica</option>

																{

																	supervisers.map(({ key, value }) =>

																		<option key={value} value={value}>{key}</option>

																	)

																}

															</select>

														</div>

													</div>

													<div className="col-4">

														<div className="form-group">

															<label>Estatus</label>

															<ToggleComponent

																setValue={(e) => setValue('status', e)}

															/>

														</div>

													</div>

												</div>

												<div className="d-flex">

													<div className="form-group w-100">

														<label>Objetivo</label>

														<CKEditor

															onChange={(e) => setValue('objectives', e.editor.getData())}

															initData={watch('objectives')}

															config={config}

															name="objectives"

														/>

													</div>

												</div>

												<div className="d-flex">

													<div className="form-group w-100">

														<label>Funciones</label>

														<CKEditor

															onChange={(e) => setValue('functions', e.editor.getData())}

															initData={watch('functions')}

															config={config}

															name="functions"

														/>

													</div>

												</div>

											</div>

										</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>

									</div>

									<div className="form-group">

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

											Guardar & Cerrar

										</button>

										<button

											type="button"

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

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

										>

											Cancelar

										</button>

									</div>

								</div>

							</div>

						</form>

					</div>

				</div>

			</div>

		</section >

	)

}

export default FormView