Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14383 | Rev 14385 | 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'
13068 stevensc 13 
import OptionModal from '../components/OptionModal'
12709 stevensc 14 
 
15 
const sectionTypeOptions = {
16 
	open: 'Abierto',
13007 stevensc 17 
	simple: 'Simple',
18 
	multiple: 'Multiple'
12709 stevensc 19 
}
20 
 
13067 stevensc 21 
const INITIAL_OPTION = {
22 
	slug_section: '',
23 
	slug_question: '',
24 
	slug_option: '',
25 
	text: '',
26 
	checked: false,
27 
	position: 0
28 
}
29 
 
12709 stevensc 30 
const INITIAL_SECTION = {
31 
	slug_section: '',
32 
	name: '',
33 
	text: '',
34 
	position: 0,
35 
	questions: [],
36 
	status: 0
37 
}
38 
 
39 
const INITIAL_QUESTION = {
40 
	slug_section: '',
41 
	slug_question: '',
42 
	text: '',
43 
	type: '',
44 
	position: 0,
45 
	maxlength: '0',
46 
	multiline: '0',
47 
	range: '0',
48 
	options: [],
49 
	answer: ''
50 
}
51 
 
52 
const FormView = ({ actionLink }) => {
53 
 
54 
	// Hooks
55 
	const history = useHistory()
12710 stevensc 56 
	const { action } = useParams()
12709 stevensc 57 
	const dispatch = useDispatch()
58 
	const { register, setValue, watch, reset } = useForm()
59 
 
60 
	// Section modal states
61 
	const [isShowSection, setIsShowSectionModal] = useState(false)
62 
	const [sectionSelected, setSectionSelected] = useState(INITIAL_SECTION)
63 
	const [sectionType, setSectionType] = useState('add')
64 
 
13067 stevensc 65 
	// Question modal states
12709 stevensc 66 
	const [isShowQuestion, setIsShowQuestionModal] = useState(false)
67 
	const [questionSelected, setQuestionSelected] = useState(INITIAL_QUESTION)
68 
	const [questionType, setQuestionType] = useState('add')
69 
 
13067 stevensc 70 
	// Option modal states
71 
	const [isShowOption, setIsShowOptionModal] = useState(false)
72 
	const [optionSelected, setOptionSelected] = useState(INITIAL_OPTION)
73 
	const [optionType, setOptionType] = useState('add')
74 
 
12709 stevensc 75 
	const [content, setContent] = useState([])
76 
	const [status, setStatus] = useState('A')
12993 stevensc 77 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
78 
	const [deleteType, setDeleteType] = useState('section')
13007 stevensc 79 
	const deleteSlugsOptions = {
80 
		section: sectionSelected.slug_section,
13069 stevensc 81 
		question: questionSelected.slug_question,
82 
		option: optionSelected.slug_option
13007 stevensc 83 
	}
12709 stevensc 84 
 
14376 kerby 85 
	const [text,setText] = useState((action != 'edit')? ' ' :'')
86 
	const [description,setDescription] = useState((action != 'edit')? ' ' :'')
14366 kerby 87 
 
13067 stevensc 88 
	// Section methods
12709 stevensc 89 
	const showSectionModal = (section = INITIAL_SECTION, type = 'add') => {
90 
		setSectionSelected(section)
91 
		setSectionType(type)
13007 stevensc 92 
		setIsShowSectionModal(true)
12709 stevensc 93 
	}
94 
 
95 
	const closeSectionModal = () => {
96 
		setIsShowSectionModal(false)
97 
		setSectionSelected(INITIAL_SECTION)
98 
	}
99 
 
12991 stevensc 100 
	const addSection = (name, text) => {
12836 stevensc 101 
		const uuid = new Date().getTime()
12991 stevensc 102 
		let position = content.length
103 
		console.log(name)
104 
		console.log(text)
12836 stevensc 105 
 
12990 stevensc 106 
		setContent(prev => [...prev, {
12836 stevensc 107 
			slug_section: `section${uuid}`,
108 
			name: name,
109 
			text: text,
110 
			position: position,
111 
			questions: [],
112 
			status: 0
12990 stevensc 113 
		}])
12709 stevensc 114 
	}
115 
 
12991 stevensc 116 
	const editSection = (name, text, slug) => {
12992 stevensc 117 
		setContent(current =>
118 
			current.map(currentSection => {
119 
				if (currentSection.slug_section === slug) {
120 
					return { ...currentSection, name: name, text: text }
121 
				}
12991 stevensc 122 
 
12992 stevensc 123 
				return currentSection
124 
			})
125 
		)
12709 stevensc 126 
	}
127 
 
13067 stevensc 128 
	const deleteSection = (slug) => {
129 
		setContent(current =>
130 
			current.filter(currentSection => {
131 
				return currentSection.slug_section !== slug
132 
			}),
133 
		)
134 
	}
135 
 
136 
	// Question methods
12709 stevensc 137 
	const showQuestionModal = (question = INITIAL_QUESTION, type = 'add') => {
138 
		setIsShowQuestionModal(true)
139 
		setQuestionType(type)
140 
		setQuestionSelected(question)
141 
	}
142 
 
143 
	const closeQuestionModal = () => {
144 
		setIsShowQuestionModal(false)
145 
		setQuestionSelected(INITIAL_QUESTION)
146 
	}
147 
 
148 
	const addQuestion = (question) => {
12996 stevensc 149 
		const uuid = new Date().getTime()
150 
 
13004 stevensc 151 
		setContent(current =>
152 
			current.map(currentSection => {
153 
				if (currentSection.slug_section === sectionSelected.slug_section) {
154 
					return {
155 
						...currentSection,
156 
						questions: [
157 
							...currentSection.questions,
158 
							{
159 
								...question,
160 
								slug_question: `question${uuid}`,
161 
								slug_section: sectionSelected.slug_section,
162 
							}
163 
						]
164 
					}
165 
				}
13002 stevensc 166 
 
13004 stevensc 167 
				return currentSection
168 
			})
169 
		)
12709 stevensc 170 
	}
171 
 
172 
	const editQuestion = (question) => {
13006 stevensc 173 
		setContent(current =>
174 
			current.map(currentSection => {
175 
				if (currentSection.slug_section === sectionSelected.slug_section) {
13001 stevensc 176 
 
13006 stevensc 177 
					const newQuestions = currentSection.questions.map((currentQuestion) => {
178 
						if (currentQuestion.slug_question === question.slug_question) {
179 
							return question
180 
						}
12709 stevensc 181 
 
13006 stevensc 182 
						return currentQuestion
183 
					})
184 
 
185 
					return { ...currentSection, questions: newQuestions }
186 
				}
13007 stevensc 187 
 
13006 stevensc 188 
				return currentSection
189 
			})
190 
		)
12709 stevensc 191 
	}
192 
 
13067 stevensc 193 
	const deleteQuestion = (slug) => {
194 
		setContent(current =>
195 
			current.map(currentSection => {
196 
				if (currentSection.slug_section === sectionSelected.slug_section) {
197 
					return {
198 
						...currentSection,
199 
						questions: currentSection.questions.filter((currentQuestion) => currentQuestion.slug_question !== slug)
200 
					}
201 
				}
202 
				return currentSection
203 
			}),
204 
		)
205 
	}
206 
 
207 
	// Option methods
208 
	const showOptionModal = (option = INITIAL_OPTION, type = 'add') => {
209 
		setIsShowOptionModal(true)
210 
		setOptionType(type)
211 
		setOptionSelected(option)
212 
	}
213 
 
13068 stevensc 214 
	const closeOptionModal = () => {
215 
		setIsShowOptionModal(false)
216 
		setOptionSelected(INITIAL_QUESTION)
217 
	}
218 
 
13067 stevensc 219 
	const addOption = (option) => {
220 
		const uuid = new Date().getTime()
221 
 
222 
		setContent(current =>
223 
			current.map(currentSection => {
224 
				if (currentSection.slug_section === sectionSelected.slug_section) {
225 
 
13069 stevensc 226 
					return {
227 
						...currentSection,
228 
						questions: currentSection.questions.map(currentQuestion => {
229 
							if (currentQuestion.slug_question === questionSelected.slug_question) {
230 
 
231 
								return {
232 
									...currentQuestion,
233 
									options: [
234 
										...currentQuestion.options,
235 
										{
236 
											...option,
237 
											slug_question: questionSelected.slug_question,
238 
											slug_section: sectionSelected.slug_section,
239 
											slug_option: `option${uuid}`
240 
										}
241 
									]
242 
								}
13067 stevensc 243 
							}
244 
 
13069 stevensc 245 
							return currentQuestion
246 
						})
247 
					}
13067 stevensc 248 
				}
249 
				return currentSection
250 
			})
251 
		)
252 
	}
253 
 
13070 stevensc 254 
	const editOption = (option) => {
255 
 
256 
		setContent(current =>
257 
			current.map(currentSection => {
258 
				if (currentSection.slug_section === sectionSelected.slug_section) {
259 
 
260 
					return {
261 
						...currentSection,
262 
						questions: currentSection.questions.map(currentQuestion => {
263 
							if (currentQuestion.slug_question === questionSelected.slug_question) {
264 
 
265 
								return {
266 
									...currentQuestion,
267 
									options: currentQuestion.options.map(currentOption => {
268 
										if (currentOption.slug_option === option.slug_option) {
269 
											return option
270 
										}
271 
 
272 
										return currentOption
273 
									})
274 
								}
275 
							}
276 
 
277 
							return currentQuestion
278 
						})
279 
					}
280 
				}
281 
				return currentSection
282 
			})
283 
		)
284 
	}
285 
 
13067 stevensc 286 
	const deleteOption = (slug) => {
287 
		setContent(current =>
288 
			current.map(currentSection => {
289 
				if (currentSection.slug_section === sectionSelected.slug_section) {
290 
 
13069 stevensc 291 
					return {
292 
						...currentSection,
293 
						questions: currentSection.questions.map(question => {
13067 stevensc 294 
 
13069 stevensc 295 
							if (question.slug_question === questionSelected.slug_question) {
296 
								return {
297 
									...question,
298 
									options: question.options.filter(option => option.slug_option !== slug)
299 
								}
13067 stevensc 300 
							}
301 
 
13069 stevensc 302 
							return question
303 
						})
304 
					}
13067 stevensc 305 
				}
306 
 
307 
				return currentSection
308 
			}),
309 
		)
310 
	}
311 
 
312 
	// General methods
313 
	const deleteHandler = (type, slug) => {
314 
		if (type === 'section') {
315 
			return deleteSection(slug)
316 
		}
317 
		if (type === 'question') {
318 
			return deleteQuestion(slug)
319 
		}
320 
		if (type === 'option') {
321 
			return deleteOption(slug)
322 
		}
323 
	}
324 
 
13071 stevensc 325 
	const validate = () => {
13072 stevensc 326 
		const sectionError = content.find(section => !section.questions.length)
13073 stevensc 327 
 
13077 stevensc 328 
		if (sectionError) {
13072 stevensc 329 
			dispatch(addNotification({
330 
				style: 'danger',
331 
				msg: `La sección ${sectionError.name} no tiene preguntas`
332 
			}))
12709 stevensc 333 
 
13072 stevensc 334 
			return false
14361 kerby 335 
		}else{
336 
			return true
13072 stevensc 337 
		}
13078 stevensc 338 
	}
13071 stevensc 339 
 
13078 stevensc 340 
	const onSubmit = () => {
12709 stevensc 341 
 
13078 stevensc 342 
		const isValid = validate()
13073 stevensc 343 
 
13078 stevensc 344 
		if (isValid) {
345 
			const submitData = new FormData()
346 
			submitData.append('name', watch('name'))
14377 kerby 347 
			submitData.append('description', description)
348 
			submitData.append('text', text)
13078 stevensc 349 
			submitData.append('status', status)
350 
			submitData.append('content', JSON.stringify(content))
12709 stevensc 351 
 
13078 stevensc 352 
			axios.post(actionLink, submitData)
353 
				.then(({ data }) => {
354 
					if (!data.success) {
355 
						return dispatch(addNotification({
356 
							style: 'danger',
357 
							msg: typeof data.data === 'string'
358 
								? data.data
359 
								: 'Ha ocurrido un error'
360 
						}))
361 
					}
13071 stevensc 362 
 
13078 stevensc 363 
					dispatch(addNotification({
364 
						style: 'success',
365 
						msg: data.data
366 
					}))
367 
				})
368 
		}
13071 stevensc 369 
	}
370 
 
12709 stevensc 371 
	const submitAndClose = () => {
372 
		onSubmit()
373 
		reset()
374 
		history.goBack()
375 
	}
376 
 
14374 kerby 377 
	// useEffect(() => {
378 
	// 	register('text')
379 
	// 	register('description')
14373 kerby 380 
 
14374 kerby 381 
	// }, [])
13008 stevensc 382 
 
383 
	useEffect(() => {
12726 stevensc 384 
		if (action === 'edit') {
385 
			axios.get(actionLink)
386 
				.then(({ data }) => {
387 
					if (!data.success) {
388 
						return dispatch(addNotification({
389 
							style: 'danger',
390 
							msg: 'Ha ocurrido un error'
391 
						}))
392 
					}
12709 stevensc 393 
 
13008 stevensc 394 
					register('text')
395 
					register('description')
396 
 
397 
					setContent(data.data.content)
398 
					setStatus(data.data.status)
399 
 
12726 stevensc 400 
					setValue('name', data.data.name)
401 
					setValue('description', data.data.description)
402 
					setValue('text', data.data.description)
14366 kerby 403 
					setDescription(data.data.description)
404 
					setText(data.data.text)
12726 stevensc 405 
				})
406 
		}
12709 stevensc 407 
	}, [actionLink])
14383 kerby 408 
	const handleDescription = (e) =>{
409 
		setDescription(e)
410 
	}
411 
	const hendleText = (e) =>{
412 
		setText(e)
413 
	}
12709 stevensc 414 
 
415 
	return (
416 
		<>
417 
			<section className="content">
418 
				<div className="row" style={{ padding: 16 }}>
419 
					<div className="col-xs-12 col-md-12">
420 
						<div className="form-group">
421 
							<label>Nombre</label>
422 
							<input type="text" name="name" className='form-control' ref={register({ required: true, maxLength: 50 })} />
423 
						</div>
424 
						<div className="form-group">
425 
							<label htmlFor="form-description">Descripción</label>
14384 kerby 426 
							{/* {(description) &&  */}
12856 stevensc 427 
							<DescriptionInput
14366 kerby 428 
								defaultValue={description}
12709 stevensc 429 
								name='description'
14383 kerby 430 
								outputValue={handleDescription}
14384 kerby 431 
							/>
432 
							{/* } */}
14367 kerby 433 
 
12709 stevensc 434 
						</div>
435 
						<div className="form-group">
436 
							<label htmlFor="form-description">Texto</label>
14384 kerby 437 
							{/* {(text) &&  */}
12856 stevensc 438 
							<DescriptionInput
14366 kerby 439 
								defaultValue={text}
12709 stevensc 440 
								name='text'
14383 kerby 441 
								outputValue={hendleText}
14384 kerby 442 
							/>
443 
							{/* } */}
12709 stevensc 444 
						</div>
445 
						<div className="form-group">
446 
							<label htmlFor="form-status">Estatus</label>
447 
							<select name="form-status" className="form-control" onChange={(e) => setStatus(e.target.value)} value={status}>
12728 stevensc 448 
								<option value="A">Activo</option>
449 
								<option value="I">Inactivo</option>
12709 stevensc 450 
							</select>
451 
						</div>
452 
						<br />
453 
						<div className="row">
454 
							<div className="col-xs-12 col-md-12">
455 
								<div className="panel-group" id="rows" >
456 
									<div className="form-group">
457 
										<div className="row">
458 
											<div className="col-xs-12 col-md-12">
459 
												<hr />
12994 stevensc 460 
												<div className="d-flex justify-content-end">
461 
													<button className='btn btn-primary' onClick={() => showSectionModal()}>
462 
														<i className="fa fa-plus" />
463 
														Agregar sección
464 
													</button>
465 
												</div>
12709 stevensc 466 
												<br />
467 
												<div className="panel-group" id="rows-job-competencies" >
468 
													{
469 
														content.length > 0
12836 stevensc 470 
														&&
471 
														content.map((section) => {
12709 stevensc 472 
 
12836 stevensc 473 
															return (
474 
																<div className="panel panel-default" key={section.slug_section}>
475 
																	<div className="panel-heading">
476 
																		<h4 className="panel-title">
477 
																			<a className="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent={`panel-${section.slug_section}`} href={`#collapse-${section.slug_section}`}>
478 
																				<span className={`section-name${section.slug_section}`}>
479 
																					{section.name}
480 
																				</span>
481 
																			</a>
482 
																		</h4>
483 
																	</div>
13071 stevensc 484 
																	<div id={`collapse-section${section.slug_section}`} className="panel-collapse in collapse show">
12836 stevensc 485 
																		<div className="panel-body">
486 
																			<div className="table-responsive">
487 
																				<table className="table table-bordered">
488 
																					<thead>
489 
																						<tr>
490 
																							<th style={{ width: '10%' }}>Elemento</th>
491 
																							<th style={{ width: '50%' }}>Texto</th>
492 
																							<th style={{ width: '10%' }}>Tipo</th>
493 
																							<th style={{ width: '20%' }}>Acciones</th>
494 
																						</tr>
495 
																					</thead>
496 
																					<tbody>
497 
																						<tr className="tr-section">
498 
																							<td className="text-left">Sección</td>
499 
																							<td className="text-left">{section.name}</td>
500 
																							<td />
501 
																							<td>
502 
																								<button className="btn btn-default" onClick={() => showSectionModal(section, 'edit')}>
503 
																									<i className="fa fa-edit" />
504 
																									Editar Sección
505 
																								</button>
12994 stevensc 506 
																								<button className="btn btn-default" onClick={() => {
13007 stevensc 507 
																									setSectionSelected(section)
508 
																									setDeleteType('section')
12993 stevensc 509 
																									setShowDeleteModal(true)
510 
																								}}>
12836 stevensc 511 
																									<i className="fa fa-ban" />
512 
																									Borrar Sección
513 
																								</button>
13003 stevensc 514 
																								<button className="btn btn-default" onClick={() => {
13007 stevensc 515 
																									setSectionSelected(section)
13003 stevensc 516 
																									showQuestionModal()
517 
																								}}>
12836 stevensc 518 
																									<i className="fa fa-plus" />
519 
																									Agregar  Pregunta
520 
																								</button>
521 
																							</td>
522 
																						</tr>
523 
																						{
524 
																							section.questions.map((question) => (
13067 stevensc 525 
																								<>
526 
																									<tr key={question.slug_question} className="tr-question">
527 
																										<td className="text-left">Pregunta</td>
528 
																										<td className="text-left">
529 
																											{parse(question.text)}
530 
																										</td>
531 
																										<td className="text-capitalize">
532 
																											{sectionTypeOptions[question.type]}
533 
																										</td>
534 
																										<td>
535 
																											<button className="btn btn-default" onClick={() => {
536 
																												setSectionSelected(section)
537 
																												showQuestionModal(question, 'edit')
538 
																											}}>
539 
																												<i className="fa fa-edit" /> Editar Pregunta
12996 stevensc 540 
																											</button>
13067 stevensc 541 
																											<button className="btn btn-default" onClick={() => {
13070 stevensc 542 
																												setSectionSelected(section)
13067 stevensc 543 
																												setQuestionSelected(question)
544 
																												setDeleteType('question')
545 
																												setShowDeleteModal(true)
546 
																											}}>
547 
																												<i className="fa fa-ban" /> Borrar Pregunta
548 
																											</button>
549 
																											{
550 
																												question.type !== 'open'
551 
																												&&
13068 stevensc 552 
																												<button className="btn btn-default" onClick={() => {
553 
																													setSectionSelected(section)
554 
																													setQuestionSelected(question)
555 
																													showOptionModal()
556 
																												}}>
13067 stevensc 557 
																													<i className="fa fa-plus" /> Agregar opción
558 
																												</button>
559 
																											}
560 
																										</td>
561 
																									</tr>
562 
																									{
563 
																										question.options.map(option => (
564 
																											<tr key={option.slug_question} className="tr-option">
13069 stevensc 565 
																												<td className="text-left">Opción</td>
13067 stevensc 566 
																												<td className="text-left">
567 
																													{parse(option.text)}
568 
																												</td>
569 
																												<td />
570 
																												<td>
571 
																													<button className="btn btn-default" onClick={() => {
572 
																														setSectionSelected(section)
573 
																														setQuestionSelected(question)
574 
																														showOptionModal(option, 'edit')
575 
																													}}>
576 
																														<i className="fa fa-edit" /> Editar opción
577 
																													</button>
578 
																													<button className="btn btn-default" onClick={() => {
579 
																														setOptionSelected(option)
13070 stevensc 580 
																														setSectionSelected(section)
13067 stevensc 581 
																														setQuestionSelected(question)
582 
																														setDeleteType('option')
583 
																														setShowDeleteModal(true)
584 
																													}}>
585 
																														<i className="fa fa-ban" /> Borrar opción
586 
																													</button>
587 
																												</td>
588 
																											</tr>
589 
																										))
590 
																									}
591 
																								</>
12836 stevensc 592 
																							))
593 
																						}
13067 stevensc 594 
 
12836 stevensc 595 
																					</tbody>
596 
																				</table>
597 
																			</div>
598 
																		</div>
599 
																	</div>
600 
																</div>
601 
															)
602 
														})
12709 stevensc 603 
													}
604 
												</div>
605 
											</div>
606 
										</div>
607 
									</div>
608 
								</div>
609 
							</div>
610 
						</div>
611 
						<div className="d-flex" style={{ gap: '5px' }}>
612 
							<button type="button" className="btn btn-info" onClick={onSubmit}>Guardar & Continuar</button>
613 
							<button type="button" className="btn btn-primary" onClick={submitAndClose}>Guardar & Cerrar</button>
614 
							<button type="button" className="btn btn-secondary" onClick={() => history.goBack()}>Cancelar</button>
615 
						</div>
616 
					</div>
617 
				</div >
618 
			</section >
619 
			<SectionModal
620 
				show={isShowSection}
12836 stevensc 621 
				sectionType={sectionType}
12709 stevensc 622 
				section={sectionSelected}
623 
				closeModal={closeSectionModal}
624 
				onSubmit={sectionType === 'add' ? addSection : editSection}
625 
			/>
12996 stevensc 626 
			<QuestionModal
627 
				show={isShowQuestion}
628 
				questionType={questionType}
629 
				question={questionSelected}
630 
				closeModal={closeQuestionModal}
631 
				onSubmit={questionType === 'add' ? addQuestion : editQuestion}
632 
			/>
13067 stevensc 633 
			<OptionModal
634 
				show={isShowOption}
13068 stevensc 635 
				optionType={optionType}
636 
				option={optionSelected}
13067 stevensc 637 
				closeModal={closeOptionModal}
13070 stevensc 638 
				onSubmit={optionType === 'add' ? addOption : editOption}
13067 stevensc 639 
			/>
12993 stevensc 640 
			<DeleteModal
641 
				isOpen={showDeleteModal}
642 
				closeModal={() => setShowDeleteModal(false)}
13007 stevensc 643 
				onComplete={() => deleteHandler(deleteType, deleteSlugsOptions[deleteType])}
12993 stevensc 644 
				message="Registro eliminado"
645 
			/>
12709 stevensc 646 
		</>
647 
	)
648 
}
649 
 
650 
export default FormView