Proyectos de Subversion LeadersLinked - Backend

Rev

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