Proyectos de Subversion LeadersLinked - Backend

Rev

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