Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
12709 stevensc 1 
/* eslint-disable no-mixed-spaces-and-tabs */
2 
import React, { useState, useEffect } from 'react'
3 
import axios from 'axios'
12733 stevensc 4 
import parse from 'html-react-parser'
12709 stevensc 5 
import { useForm } from 'react-hook-form'
6 
import { useDispatch } from 'react-redux'
12710 stevensc 7 
import { useHistory, useParams } from 'react-router-dom'
12709 stevensc 8 
import { addNotification } from '../../../redux/notification/notification.actions'
9 
import DescriptionInput from '../../../shared/DescriptionInput'
10 
import SectionModal from '../components/SectionModal'
12993 stevensc 11 
import DeleteModal from '../../../shared/DeleteModal'
12996 stevensc 12 
import QuestionModal from '../components/QuestionModal'
12709 stevensc 13 
 
14 
const sectionTypeOptions = {
15 
	open: 'Abierto',
13007 stevensc 16 
	simple: 'Simple',
17 
	multiple: 'Multiple'
12709 stevensc 18 
}
19 
 
20 
const INITIAL_SECTION = {
21 
	slug_section: '',
22 
	name: '',
23 
	text: '',
24 
	position: 0,
25 
	questions: [],
26 
	status: 0
27 
}
28 
 
29 
const INITIAL_QUESTION = {
30 
	slug_section: '',
31 
	slug_question: '',
32 
	text: '',
33 
	type: '',
34 
	position: 0,
35 
	maxlength: '0',
36 
	multiline: '0',
37 
	range: '0',
38 
	options: [],
39 
	answer: ''
40 
}
41 
 
42 
 
43 
const FormView = ({ actionLink }) => {
44 
 
45 
	// Hooks
46 
	const history = useHistory()
12710 stevensc 47 
	const { action } = useParams()
12709 stevensc 48 
	const dispatch = useDispatch()
49 
	const { register, setValue, watch, reset } = useForm()
50 
 
51 
	// Section modal states
52 
	const [isShowSection, setIsShowSectionModal] = useState(false)
53 
	const [sectionSelected, setSectionSelected] = useState(INITIAL_SECTION)
54 
	const [sectionType, setSectionType] = useState('add')
55 
 
56 
	// Section modal states
57 
	const [isShowQuestion, setIsShowQuestionModal] = useState(false)
58 
	const [questionSelected, setQuestionSelected] = useState(INITIAL_QUESTION)
59 
	const [questionType, setQuestionType] = useState('add')
60 
 
61 
	const [content, setContent] = useState([])
62 
	const [status, setStatus] = useState('A')
12993 stevensc 63 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
64 
	const [deleteType, setDeleteType] = useState('section')
13007 stevensc 65 
	const deleteSlugsOptions = {
66 
		section: sectionSelected.slug_section,
67 
		question: questionSelected.slug_question
68 
	}
12709 stevensc 69 
 
70 
	const showSectionModal = (section = INITIAL_SECTION, type = 'add') => {
71 
		setSectionSelected(section)
72 
		setSectionType(type)
13007 stevensc 73 
		setIsShowSectionModal(true)
12709 stevensc 74 
	}
75 
 
76 
	const closeSectionModal = () => {
77 
		setIsShowSectionModal(false)
78 
		setSectionSelected(INITIAL_SECTION)
79 
	}
80 
 
12991 stevensc 81 
	const addSection = (name, text) => {
12836 stevensc 82 
		const uuid = new Date().getTime()
12991 stevensc 83 
		let position = content.length
84 
		console.log(name)
85 
		console.log(text)
12836 stevensc 86 
 
12990 stevensc 87 
		setContent(prev => [...prev, {
12836 stevensc 88 
			slug_section: `section${uuid}`,
89 
			name: name,
90 
			text: text,
91 
			position: position,
92 
			questions: [],
93 
			status: 0
12990 stevensc 94 
		}])
12709 stevensc 95 
	}
96 
 
12993 stevensc 97 
	const deleteSection = (slug) => {
98 
		setContent(current =>
99 
			current.filter(currentSection => {
100 
				return currentSection.slug_section !== slug
101 
			}),
102 
		)
103 
	}
104 
 
13007 stevensc 105 
	const deleteQuestion = (slug) => {
106 
		setContent(current =>
107 
			current.map(currentSection => {
108 
				if (currentSection.slug_section === sectionSelected.slug_section) {
109 
					return {
110 
						...currentSection,
111 
						questions: currentSection.questions.filter((currentQuestion) => currentQuestion.slug_question !== slug)
112 
					}
113 
				}
114 
				return currentSection
115 
			}),
116 
		)
117 
	}
118 
 
12993 stevensc 119 
	const deleteHandler = (type, slug) => {
120 
		if (type === 'section') {
121 
			return deleteSection(slug)
122 
		}
13007 stevensc 123 
		if (type === 'question') {
124 
			return deleteQuestion(slug)
125 
		}
12993 stevensc 126 
	}
127 
 
12991 stevensc 128 
	const editSection = (name, text, slug) => {
12992 stevensc 129 
		setContent(current =>
130 
			current.map(currentSection => {
131 
				if (currentSection.slug_section === slug) {
132 
					return { ...currentSection, name: name, text: text }
133 
				}
12991 stevensc 134 
 
12992 stevensc 135 
				return currentSection
136 
			})
137 
		)
12709 stevensc 138 
	}
139 
 
140 
	const showQuestionModal = (question = INITIAL_QUESTION, type = 'add') => {
141 
		setIsShowQuestionModal(true)
142 
		setQuestionType(type)
143 
		setQuestionSelected(question)
144 
	}
145 
 
146 
	const closeQuestionModal = () => {
147 
		setIsShowQuestionModal(false)
148 
		setQuestionSelected(INITIAL_QUESTION)
149 
	}
150 
 
151 
	const addQuestion = (question) => {
12996 stevensc 152 
		const uuid = new Date().getTime()
153 
 
13004 stevensc 154 
		setContent(current =>
155 
			current.map(currentSection => {
156 
				if (currentSection.slug_section === sectionSelected.slug_section) {
157 
					return {
158 
						...currentSection,
159 
						questions: [
160 
							...currentSection.questions,
161 
							{
162 
								...question,
163 
								slug_question: `question${uuid}`,
164 
								slug_section: sectionSelected.slug_section,
165 
							}
166 
						]
167 
					}
168 
				}
13002 stevensc 169 
 
13004 stevensc 170 
				return currentSection
171 
			})
172 
		)
12709 stevensc 173 
	}
174 
 
175 
	const editQuestion = (question) => {
13006 stevensc 176 
		setContent(current =>
177 
			current.map(currentSection => {
178 
				if (currentSection.slug_section === sectionSelected.slug_section) {
13001 stevensc 179 
 
13006 stevensc 180 
					const newQuestions = currentSection.questions.map((currentQuestion) => {
181 
						if (currentQuestion.slug_question === question.slug_question) {
182 
							return question
183 
						}
12709 stevensc 184 
 
13006 stevensc 185 
						return currentQuestion
186 
					})
187 
 
188 
					return { ...currentSection, questions: newQuestions }
189 
				}
13007 stevensc 190 
 
13006 stevensc 191 
				return currentSection
192 
			})
193 
		)
12709 stevensc 194 
	}
195 
 
196 
	const onSubmit = () => {
197 
		const submitData = new FormData()
198 
		submitData.append('name', watch('name'))
199 
		submitData.append('description', watch('description'))
200 
		submitData.append('text', watch('text'))
201 
		submitData.append('status', status)
12791 stevensc 202 
		submitData.append('content', JSON.stringify(content))
12709 stevensc 203 
 
204 
		axios.post(actionLink, submitData)
205 
			.then(({ data }) => {
206 
				if (!data.success) {
207 
					return dispatch(addNotification({
208 
						style: 'danger',
209 
						msg: typeof data.data === 'string'
210 
							? data.data
211 
							: 'Ha ocurrido un error'
212 
					}))
213 
				}
214 
 
215 
				dispatch(addNotification({
216 
					style: 'success',
217 
					msg: data.data
218 
				}))
219 
			})
220 
	}
221 
 
222 
	const submitAndClose = () => {
223 
		onSubmit()
224 
		reset()
225 
		history.goBack()
226 
	}
227 
 
228 
	useEffect(() => {
13008 stevensc 229 
		register('text')
230 
		register('description')
231 
	}, [])
232 
 
233 
	useEffect(() => {
12726 stevensc 234 
		if (action === 'edit') {
235 
			axios.get(actionLink)
236 
				.then(({ data }) => {
237 
					if (!data.success) {
238 
						return dispatch(addNotification({
239 
							style: 'danger',
240 
							msg: 'Ha ocurrido un error'
241 
						}))
242 
					}
12709 stevensc 243 
 
13008 stevensc 244 
					register('text')
245 
					register('description')
246 
 
247 
					setContent(data.data.content)
248 
					setStatus(data.data.status)
249 
 
12726 stevensc 250 
					setValue('name', data.data.name)
251 
					setValue('description', data.data.description)
252 
					setValue('text', data.data.description)
253 
				})
254 
		}
12709 stevensc 255 
	}, [actionLink])
256 
 
13008 stevensc 257 
 
12709 stevensc 258 
	return (
259 
		<>
260 
			<section className="content">
261 
				<div className="row" style={{ padding: 16 }}>
262 
					<div className="col-xs-12 col-md-12">
263 
						<div className="form-group">
264 
							<label>Nombre</label>
265 
							<input type="text" name="name" className='form-control' ref={register({ required: true, maxLength: 50 })} />
266 
						</div>
267 
						<div className="form-group">
268 
							<label htmlFor="form-description">Descripción</label>
12856 stevensc 269 
							<DescriptionInput
12733 stevensc 270 
								defaultValue={watch('description') ? parse(watch('description')) : ''}
12709 stevensc 271 
								name='description'
272 
								onChange={setValue}
12856 stevensc 273 
							/>
12709 stevensc 274 
						</div>
275 
						<div className="form-group">
276 
							<label htmlFor="form-description">Texto</label>
12856 stevensc 277 
							<DescriptionInput
12733 stevensc 278 
								defaultValue={watch('text') ? parse(watch('text')) : ''}
12709 stevensc 279 
								name='text'
280 
								onChange={setValue}
12856 stevensc 281 
							/>
12709 stevensc 282 
						</div>
283 
						<div className="form-group">
284 
							<label htmlFor="form-status">Estatus</label>
285 
							<select name="form-status" className="form-control" onChange={(e) => setStatus(e.target.value)} value={status}>
12728 stevensc 286 
								<option value="A">Activo</option>
287 
								<option value="I">Inactivo</option>
12709 stevensc 288 
							</select>
289 
						</div>
290 
						<br />
291 
						<div className="row">
292 
							<div className="col-xs-12 col-md-12">
293 
								<div className="panel-group" id="rows" >
294 
									<div className="form-group">
295 
										<div className="row">
296 
											<div className="col-xs-12 col-md-12">
297 
												<hr />
12994 stevensc 298 
												<div className="d-flex justify-content-end">
299 
													<button className='btn btn-primary' onClick={() => showSectionModal()}>
300 
														<i className="fa fa-plus" />
301 
														Agregar sección
302 
													</button>
303 
												</div>
12709 stevensc 304 
												<br />
305 
												<div className="panel-group" id="rows-job-competencies" >
306 
													{
307 
														content.length > 0
12836 stevensc 308 
														&&
309 
														content.map((section) => {
12709 stevensc 310 
 
12836 stevensc 311 
															return (
312 
																<div className="panel panel-default" key={section.slug_section}>
313 
																	<div className="panel-heading">
314 
																		<h4 className="panel-title">
315 
																			<a className="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent={`panel-${section.slug_section}`} href={`#collapse-${section.slug_section}`}>
316 
																				<span className={`section-name${section.slug_section}`}>
317 
																					{section.name}
318 
																				</span>
319 
																			</a>
320 
																		</h4>
321 
																	</div>
322 
																	<div id="collapse-section1661528423935" className="panel-collapse in collapse show">
323 
																		<div className="panel-body">
324 
																			<div className="table-responsive">
325 
																				<table className="table table-bordered">
326 
																					<thead>
327 
																						<tr>
328 
																							<th style={{ width: '10%' }}>Elemento</th>
329 
																							<th style={{ width: '50%' }}>Texto</th>
330 
																							<th style={{ width: '10%' }}>Tipo</th>
331 
																							<th style={{ width: '20%' }}>Acciones</th>
332 
																						</tr>
333 
																					</thead>
334 
																					<tbody>
335 
																						<tr className="tr-section">
336 
																							<td className="text-left">Sección</td>
337 
																							<td className="text-left">{section.name}</td>
338 
																							<td />
339 
																							<td>
340 
																								<button className="btn btn-default" onClick={() => showSectionModal(section, 'edit')}>
341 
																									<i className="fa fa-edit" />
342 
																									Editar Sección
343 
																								</button>
12994 stevensc 344 
																								<button className="btn btn-default" onClick={() => {
13007 stevensc 345 
																									setSectionSelected(section)
346 
																									setDeleteType('section')
12993 stevensc 347 
																									setShowDeleteModal(true)
348 
																								}}>
12836 stevensc 349 
																									<i className="fa fa-ban" />
350 
																									Borrar Sección
351 
																								</button>
13003 stevensc 352 
																								<button className="btn btn-default" onClick={() => {
13007 stevensc 353 
																									setSectionSelected(section)
13003 stevensc 354 
																									showQuestionModal()
355 
																								}}>
12836 stevensc 356 
																									<i className="fa fa-plus" />
357 
																									Agregar  Pregunta
358 
																								</button>
359 
																							</td>
360 
																						</tr>
361 
																						{
362 
																							section.questions.map((question) => (
363 
																								<tr key={question.slug_question} className="tr-question">
364 
																									<td className="text-left">Pregunta</td>
365 
																									<td className="text-left">
366 
																										{parse(question.text)}
367 
																									</td>
368 
																									<td className="text-capitalize">
369 
																										{sectionTypeOptions[question.type]}
370 
																									</td>
371 
																									<td>
13002 stevensc 372 
																										<button className="btn btn-default btn-edit-question" onClick={() => {
13007 stevensc 373 
																											setSectionSelected(section)
13002 stevensc 374 
																											showQuestionModal(question, 'edit')
375 
																										}}>
12836 stevensc 376 
																											<i className="fa fa-edit" /> Editar Pregunta
377 
																										</button>
12996 stevensc 378 
																										<button className="btn btn-default btn-delete-question" onClick={() => {
13002 stevensc 379 
																											setQuestionSelected(question)
380 
																											setDeleteType('question')
12996 stevensc 381 
																											setShowDeleteModal(true)
382 
																										}}>
12836 stevensc 383 
																											<i className="fa fa-ban" /> Borrar Pregunta
384 
																										</button>
12996 stevensc 385 
																										{
386 
																											question.type !== 'open'
387 
																											&&
388 
																											<button className="btn btn-default btn-delete-question">
389 
																												<i className="fa fa-plus" /> Agregar opción
390 
																											</button>
391 
																										}
12836 stevensc 392 
																									</td>
393 
																								</tr>
394 
																							))
395 
																						}
396 
																					</tbody>
397 
																				</table>
398 
																			</div>
399 
																		</div>
400 
																	</div>
401 
																</div>
402 
															)
403 
														})
12709 stevensc 404 
													}
405 
												</div>
406 
											</div>
407 
										</div>
408 
									</div>
409 
								</div>
410 
							</div>
411 
						</div>
412 
						<div className="d-flex" style={{ gap: '5px' }}>
413 
							<button type="button" className="btn btn-info" onClick={onSubmit}>Guardar & Continuar</button>
414 
							<button type="button" className="btn btn-primary" onClick={submitAndClose}>Guardar & Cerrar</button>
415 
							<button type="button" className="btn btn-secondary" onClick={() => history.goBack()}>Cancelar</button>
416 
						</div>
417 
					</div>
418 
				</div >
419 
			</section >
420 
			<SectionModal
421 
				show={isShowSection}
12836 stevensc 422 
				sectionType={sectionType}
12709 stevensc 423 
				section={sectionSelected}
424 
				closeModal={closeSectionModal}
425 
				onSubmit={sectionType === 'add' ? addSection : editSection}
426 
			/>
12996 stevensc 427 
			<QuestionModal
428 
				show={isShowQuestion}
429 
				questionType={questionType}
430 
				question={questionSelected}
431 
				closeModal={closeQuestionModal}
432 
				onSubmit={questionType === 'add' ? addQuestion : editQuestion}
433 
			/>
12993 stevensc 434 
			<DeleteModal
435 
				isOpen={showDeleteModal}
436 
				closeModal={() => setShowDeleteModal(false)}
13007 stevensc 437 
				onComplete={() => deleteHandler(deleteType, deleteSlugsOptions[deleteType])}
12993 stevensc 438 
				message="Registro eliminado"
439 
			/>
12709 stevensc 440 
		</>
441 
	)
442 
}
443 
 
444 
export default FormView