Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
14197 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
2 
import axios from 'axios'
14231 stevensc 3 
import { CKEditor } from 'ckeditor4-react'
14197 stevensc 4 
import React, { useEffect, useState } from 'react'
5 
import { useForm } from 'react-hook-form'
6 
import { useDispatch } from 'react-redux'
7 
import { useHistory, useParams } from 'react-router-dom'
8 
import { addNotification } from '../../redux/notification/notification.actions'
14231 stevensc 9 
import { config } from '../../shared/helpers/ckeditor_config'
14230 stevensc 10 
import ToggleComponent from '../../shared/ToggleComponent'
14197 stevensc 11 
 
12 
const FormView = ({
13 
	actionLink = '',
14 
	setActionLink = function () { }
15 
}) => {
16 
 
17 
	// Hooks
18 
	const dispatch = useDispatch()
19 
	const history = useHistory()
20 
	const { action } = useParams()
21 
	const { setValue, register, watch, handleSubmit } = useForm()
22 
 
23 
	//States
14205 stevensc 24 
	const [supervisers, setSupervisers] = useState([])
14197 stevensc 25 
 
26 
	const onSubmit = () => {
27 
 
14206 stevensc 28 
		const submitData = new FormData()
14205 stevensc 29 
		/* 		const content = []
14197 stevensc 30 
		jobDescription.competencies.forEach(competency => competency.behaviors.forEach(behavior => {
31 
			content.push({
32 
				competencyUuid: behavior.competency_uuid,
33 
				behaviorUuid: behavior.uuid,
34 
				comment: watch(`${behavior.competency_uuid}-${behavior.uuid}-comment`),
35 
				evaluation: watch(`select-${behavior.competency_uuid}-${behavior.uuid}`)
36 
			})
37 
		}))
38 
 
39 
		submitData.append('content', JSON.stringify(content))
14205 stevensc 40 
		submitData.append('points', watch('points')) */
41 
		//.append('comment', watch('comment'))
14197 stevensc 42 
 
43 
		axios.post(actionLink, submitData)
44 
			.then(({ data }) => {
45 
				if (!data.success) {
46 
					return dispatch(addNotification({
47 
						style: 'danger',
48 
						msg: typeof data.data === 'string'
49 
							? data.data
50 
							: 'Ha ocurrido un error'
51 
					}))
52 
				}
53 
 
54 
				history.goBack()
55 
				setActionLink('')
56 
				dispatch(addNotification({
57 
					style: 'success',
58 
					msg: `Registro ${action === 'edit' ? 'actualizado' : 'añadido'}`
59 
				}))
60 
			})
61 
	}
62 
 
63 
	useEffect(() => {
14230 stevensc 64 
		register('status')
14231 stevensc 65 
		register('objectives')
66 
		register('functions')
14230 stevensc 67 
	}, [])
68 
 
69 
	useEffect(() => {
14233 stevensc 70 
		console.log(watch('status'))
71 
		console.log(watch('objectives'))
72 
		console.log(watch('functions'))
73 
	}, [])
74 
 
75 
	useEffect(() => {
14197 stevensc 76 
		axios.get(actionLink)
77 
			.then(({ data }) => {
78 
				if (!data.success) {
79 
					return dispatch(addNotification({
80 
						style: 'danger',
81 
						msg: 'Ha ocurrido un error'
82 
					}))
83 
				}
84 
 
14206 stevensc 85 
				setSupervisers(data.data['supervisers'].map(option => {
86 
					return {
87 
						key: option.name,
88 
						value: option.uuid
89 
					}
90 
				}))
14205 stevensc 91 
				setValue('name', data.data['name'])
14231 stevensc 92 
				setValue('status', data.data['status'])
14232 stevensc 93 
				setValue('objectives', data.data['objectives'])
94 
				setValue('functions', data.data['functions'])
14205 stevensc 95 
				setValue('job_description_id_boss', data.data['job_description_id_boss'])
14197 stevensc 96 
 
97 
			})
98 
	}, [action])
99 
 
100 
	return (
101 
		<section className="content">
102 
			<div className="container-fluid">
103 
				<div className="row">
104 
					<div className="col-12">
105 
						<form onSubmit={handleSubmit(onSubmit)}>
14232 stevensc 106 
							<div className='card'>
14197 stevensc 107 
								<div className="card-header">
108 
									<ul className="nav nav-tabs" id="myTab" role="tablist">
109 
										<li className="nav-item" role="presentation">
110 
											<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>
111 
										</li>
112 
										<li className="nav-item" role="presentation">
113 
											<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>
114 
										</li>
115 
										<li className="nav-item" role="presentation">
116 
											<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>
117 
										</li>
118 
									</ul>
119 
								</div>
120 
								<div className="card-body">
121 
									<div className="tab-content" id="myTabContent">
122 
										<div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
14232 stevensc 123 
											<div className="card px-2">
124 
												<div className="d-flex">
14205 stevensc 125 
													<div className="col-4">
126 
														<div className="form-group">
127 
															<label>Nombre</label>
14228 stevensc 128 
															<input className='form-control' type="text" name='name' ref={register} />
14197 stevensc 129 
														</div>
14205 stevensc 130 
													</div>
131 
													<div className="col-4">
132 
														<div className="form-group">
133 
															<label>Nombre</label>
14206 stevensc 134 
															<select className='form-control' name="job_description_id_boss" ref={register}>
14205 stevensc 135 
																<option value="">No aplica</option>
14197 stevensc 136 
																{
14207 stevensc 137 
																	supervisers.map(({ key, value }) =>
14205 stevensc 138 
																		<option key={value} value={value}>{key}</option>
139 
																	)
14197 stevensc 140 
																}
14205 stevensc 141 
															</select>
14197 stevensc 142 
														</div>
143 
													</div>
14228 stevensc 144 
													<div className="col-4">
145 
														<div className="form-group">
14231 stevensc 146 
															<label>Estatus</label>
14230 stevensc 147 
															<ToggleComponent
148 
																setValue={(e) => setValue('status', e)}
149 
															/>
14228 stevensc 150 
														</div>
151 
													</div>
14205 stevensc 152 
												</div>
14232 stevensc 153 
												<div className="d-flex">
154 
													<div className="form-group w-100">
14231 stevensc 155 
														<label>Objetivo</label>
156 
														<CKEditor
157 
															onChange={(e) => setValue('objectives', e.editor.getData())}
158 
															initData={watch('objectives')}
159 
															config={config}
160 
															name="objectives"
161 
														/>
162 
													</div>
163 
												</div>
14232 stevensc 164 
												<div className="d-flex">
165 
													<div className="form-group w-100">
14231 stevensc 166 
														<label>Funciones</label>
167 
														<CKEditor
168 
															onChange={(e) => setValue('functions', e.editor.getData())}
169 
															initData={watch('functions')}
170 
															config={config}
171 
															name="functions"
172 
														/>
173 
													</div>
174 
												</div>
14205 stevensc 175 
											</div>
14197 stevensc 176 
										</div>
14205 stevensc 177 
										<div className="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
14206 stevensc 178 
 
14205 stevensc 179 
										</div>
14197 stevensc 180 
										<div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
14206 stevensc 181 
 
14197 stevensc 182 
										</div>
183 
									</div>
184 
									<div className="form-group">
185 
										<button type="submit" className="btn btn-primary btn-form-save-close mr-2">
186 
											Guardar & Cerrar
187 
										</button>
188 
										<button
189 
											type="button"
190 
											className="btn btn-secondary btn-edit-cancel"
191 
											onClick={() => history.goBack()}
192 
										>
193 
											Cancelar
194 
										</button>
195 
									</div>
196 
								</div>
197 
							</div>
198 
						</form>
199 
					</div>
200 
				</div>
201 
			</div>
202 
		</section >
203 
	)
204 
}
205 
 
206 
export default FormView