Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 12992 | Rev 12994 | 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'
12709 stevensc 12 
 
13 
const sectionTypeOptions = {
14 
	open: 'Abierto',
15 
	simple: 'Simple'
16 
}
17 
 
18 
const INITIAL_SECTION = {
19 
	slug_section: '',
20 
	name: '',
21 
	text: '',
22 
	position: 0,
23 
	questions: [],
24 
	status: 0
25 
}
26 
 
27 
const INITIAL_QUESTION = {
28 
	slug_section: '',
29 
	slug_question: '',
30 
	text: '',
31 
	type: '',
32 
	position: 0,
33 
	maxlength: '0',
34 
	multiline: '0',
35 
	range: '0',
36 
	options: [],
37 
	answer: ''
38 
}
39 
 
40 
 
41 
const FormView = ({ actionLink }) => {
42 
 
43 
	// Hooks
44 
	const history = useHistory()
12710 stevensc 45 
	const { action } = useParams()
12709 stevensc 46 
	const dispatch = useDispatch()
47 
	const { register, setValue, watch, reset } = useForm()
48 
 
49 
	// Section modal states
50 
	const [isShowSection, setIsShowSectionModal] = useState(false)
51 
	const [sectionSelected, setSectionSelected] = useState(INITIAL_SECTION)
52 
	const [sectionType, setSectionType] = useState('add')
53 
 
54 
	// Section modal states
55 
	const [isShowQuestion, setIsShowQuestionModal] = useState(false)
56 
	const [questionSelected, setQuestionSelected] = useState(INITIAL_QUESTION)
57 
	const [questionType, setQuestionType] = useState('add')
58 
 
59 
	const [content, setContent] = useState([])
60 
	const [status, setStatus] = useState('A')
12993 stevensc 61 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
62 
	const [deleteType, setDeleteType] = useState('section')
12709 stevensc 63 
 
64 
	const showSectionModal = (section = INITIAL_SECTION, type = 'add') => {
65 
		setIsShowSectionModal(true)
66 
		setSectionSelected(section)
67 
		setSectionType(type)
68 
	}
69 
 
70 
	const closeSectionModal = () => {
71 
		setIsShowSectionModal(false)
72 
		setSectionSelected(INITIAL_SECTION)
73 
	}
74 
 
12991 stevensc 75 
	const addSection = (name, text) => {
12836 stevensc 76 
		const uuid = new Date().getTime()
12991 stevensc 77 
		let position = content.length
78 
		console.log(name)
79 
		console.log(text)
12836 stevensc 80 
 
12990 stevensc 81 
		setContent(prev => [...prev, {
12836 stevensc 82 
			slug_section: `section${uuid}`,
83 
			name: name,
84 
			text: text,
85 
			position: position,
86 
			questions: [],
87 
			status: 0
12990 stevensc 88 
		}])
12709 stevensc 89 
	}
90 
 
12993 stevensc 91 
	const deleteSection = (slug) => {
92 
		setContent(current =>
93 
			current.filter(currentSection => {
94 
				return currentSection.slug_section !== slug
95 
			}),
96 
		)
97 
	}
98 
 
99 
	const deleteHandler = (type, slug) => {
100 
		if (type === 'section') {
101 
			return deleteSection(slug)
102 
		}
103 
	}
104 
 
12991 stevensc 105 
	const editSection = (name, text, slug) => {
12992 stevensc 106 
		setContent(current =>
107 
			current.map(currentSection => {
108 
				if (currentSection.slug_section === slug) {
109 
					return { ...currentSection, name: name, text: text }
110 
				}
12991 stevensc 111 
 
12992 stevensc 112 
				return currentSection
113 
			})
114 
		)
12709 stevensc 115 
	}
116 
 
117 
	const showQuestionModal = (question = INITIAL_QUESTION, type = 'add') => {
118 
		setIsShowQuestionModal(true)
119 
		setQuestionType(type)
120 
		setQuestionSelected(question)
121 
	}
122 
 
123 
	const closeQuestionModal = () => {
124 
		setIsShowQuestionModal(false)
125 
		setQuestionSelected(INITIAL_QUESTION)
126 
	}
127 
 
128 
	const addQuestion = (question) => {
129 
		setContent(prev => prev.map(prevSection => prevSection.slug_section === question.slug_section && prev.questions.push(question)))
130 
	}
131 
 
132 
	const editQuestion = (question) => {
133 
		setContent(prev => prev.map(prevSection => {
134 
			if (prevSection.slug_section === question.slug_section) {
135 
				const questions = prevSection.questions
136 
 
137 
				return questions.map(prevQuestion => prevQuestion.slug_question === question.slug_question && question)
138 
			}
139 
		}))
140 
	}
141 
 
142 
	const onSubmit = () => {
143 
		const submitData = new FormData()
144 
		submitData.append('name', watch('name'))
145 
		submitData.append('description', watch('description'))
146 
		submitData.append('text', watch('text'))
147 
		submitData.append('status', status)
12791 stevensc 148 
		submitData.append('content', JSON.stringify(content))
12709 stevensc 149 
 
150 
		axios.post(actionLink, submitData)
151 
			.then(({ data }) => {
152 
				if (!data.success) {
153 
					return dispatch(addNotification({
154 
						style: 'danger',
155 
						msg: typeof data.data === 'string'
156 
							? data.data
157 
							: 'Ha ocurrido un error'
158 
					}))
159 
				}
160 
 
161 
				dispatch(addNotification({
162 
					style: 'success',
163 
					msg: data.data
164 
				}))
165 
			})
166 
	}
167 
 
168 
	const submitAndClose = () => {
169 
		onSubmit()
170 
		reset()
171 
		history.goBack()
172 
	}
173 
 
174 
	useEffect(() => {
12726 stevensc 175 
		if (action === 'edit') {
176 
			axios.get(actionLink)
177 
				.then(({ data }) => {
178 
					if (!data.success) {
179 
						return dispatch(addNotification({
180 
							style: 'danger',
181 
							msg: 'Ha ocurrido un error'
182 
						}))
183 
					}
12709 stevensc 184 
 
12726 stevensc 185 
					setValue('name', data.data.name)
186 
					setValue('description', data.data.description)
187 
					setValue('text', data.data.description)
188 
					setContent(data.data.content)
189 
					setStatus(data.data.status)
190 
				})
191 
		}
12709 stevensc 192 
	}, [actionLink])
193 
 
194 
	return (
195 
		<>
196 
			<section className="content">
197 
				<div className="row" style={{ padding: 16 }}>
198 
					<div className="col-xs-12 col-md-12">
199 
						<div className="form-group">
200 
							<label>Nombre</label>
201 
							<input type="text" name="name" className='form-control' ref={register({ required: true, maxLength: 50 })} />
202 
						</div>
203 
						<div className="form-group">
204 
							<label htmlFor="form-description">Descripción</label>
12856 stevensc 205 
							<DescriptionInput
12733 stevensc 206 
								defaultValue={watch('description') ? parse(watch('description')) : ''}
12709 stevensc 207 
								name='description'
208 
								onChange={setValue}
12856 stevensc 209 
							/>
12709 stevensc 210 
						</div>
211 
						<div className="form-group">
212 
							<label htmlFor="form-description">Texto</label>
12856 stevensc 213 
							<DescriptionInput
12733 stevensc 214 
								defaultValue={watch('text') ? parse(watch('text')) : ''}
12709 stevensc 215 
								name='text'
216 
								onChange={setValue}
12856 stevensc 217 
							/>
12709 stevensc 218 
						</div>
219 
						<div className="form-group">
220 
							<label htmlFor="form-status">Estatus</label>
221 
							<select name="form-status" className="form-control" onChange={(e) => setStatus(e.target.value)} value={status}>
12728 stevensc 222 
								<option value="A">Activo</option>
223 
								<option value="I">Inactivo</option>
12709 stevensc 224 
							</select>
225 
						</div>
226 
						<br />
227 
						<div className="row">
228 
							<div className="col-xs-12 col-md-12">
229 
								<div className="panel-group" id="rows" >
230 
									<div className="form-group">
231 
										<div className="row">
232 
											<div className="col-xs-12 col-md-12">
233 
												<hr />
234 
												<h4 style={{ fontSize: 18, fontWeight: 'bold' }}>Competencias asociadas al cargo:</h4>
12745 stevensc 235 
												<button className='btn btn-primary' onClick={() => showSectionModal()}>
12836 stevensc 236 
													Agregar sección
12709 stevensc 237 
												</button>
238 
												<br />
239 
												<div className="panel-group" id="rows-job-competencies" >
240 
													{
241 
														content.length > 0
12836 stevensc 242 
														&&
243 
														content.map((section) => {
12709 stevensc 244 
 
12836 stevensc 245 
															return (
246 
																<div className="panel panel-default" key={section.slug_section}>
247 
																	<div className="panel-heading">
248 
																		<h4 className="panel-title">
249 
																			<a className="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent={`panel-${section.slug_section}`} href={`#collapse-${section.slug_section}`}>
250 
																				<span className={`section-name${section.slug_section}`}>
251 
																					{section.name}
252 
																				</span>
253 
																			</a>
254 
																		</h4>
255 
																	</div>
256 
																	<div id="collapse-section1661528423935" className="panel-collapse in collapse show">
257 
																		<div className="panel-body">
258 
																			<div className="table-responsive">
259 
																				<table className="table table-bordered">
260 
																					<thead>
261 
																						<tr>
262 
																							<th style={{ width: '10%' }}>Elemento</th>
263 
																							<th style={{ width: '50%' }}>Texto</th>
264 
																							<th style={{ width: '10%' }}>Tipo</th>
265 
																							<th style={{ width: '20%' }}>Acciones</th>
266 
																						</tr>
267 
																					</thead>
268 
																					<tbody>
269 
																						<tr className="tr-section">
270 
																							<td className="text-left">Sección</td>
271 
																							<td className="text-left">{section.name}</td>
272 
																							<td />
273 
																							<td>
274 
																								<button className="btn btn-default" onClick={() => showSectionModal(section, 'edit')}>
275 
																									<i className="fa fa-edit" />
276 
																									Editar Sección
277 
																								</button>
12993 stevensc 278 
																								<button className="btn btn-default" onClick={()=> {
279 
																									setShowDeleteModal(true)
280 
																									setDeleteType('section')
281 
																								}}>
12836 stevensc 282 
																									<i className="fa fa-ban" />
283 
																									Borrar Sección
284 
																								</button>
285 
																								<button className="btn btn-default btn-add-question" >
286 
																									<i className="fa fa-plus" />
287 
																									Agregar  Pregunta
288 
																								</button>
289 
																							</td>
290 
																						</tr>
291 
																						{
292 
																							section.questions.map((question) => (
293 
																								<tr key={question.slug_question} className="tr-question">
294 
																									<td className="text-left">Pregunta</td>
295 
																									<td className="text-left">
296 
																										{parse(question.text)}
297 
																									</td>
298 
																									<td className="text-capitalize">
299 
																										{sectionTypeOptions[question.type]}
300 
																									</td>
301 
																									<td>
302 
																										<button className="btn btn-default btn-edit-question">
303 
																											<i className="fa fa-edit" /> Editar Pregunta
304 
																										</button>
305 
																										<button className="btn btn-default btn-delete-question">
306 
																											<i className="fa fa-ban" /> Borrar Pregunta
307 
																										</button>
308 
																									</td>
309 
																								</tr>
310 
																							))
311 
																						}
312 
																					</tbody>
313 
																				</table>
314 
																			</div>
315 
																		</div>
316 
																	</div>
317 
																</div>
318 
															)
319 
														})
12709 stevensc 320 
													}
321 
												</div>
322 
											</div>
323 
										</div>
324 
									</div>
325 
								</div>
326 
							</div>
327 
						</div>
328 
						<div className="d-flex" style={{ gap: '5px' }}>
329 
							<button type="button" className="btn btn-info" onClick={onSubmit}>Guardar & Continuar</button>
330 
							<button type="button" className="btn btn-primary" onClick={submitAndClose}>Guardar & Cerrar</button>
331 
							<button type="button" className="btn btn-secondary" onClick={() => history.goBack()}>Cancelar</button>
332 
						</div>
333 
					</div>
334 
				</div >
335 
			</section >
336 
			<SectionModal
337 
				show={isShowSection}
12836 stevensc 338 
				sectionType={sectionType}
12709 stevensc 339 
				section={sectionSelected}
340 
				closeModal={closeSectionModal}
341 
				onSubmit={sectionType === 'add' ? addSection : editSection}
342 
			/>
12993 stevensc 343 
			<DeleteModal
344 
				isOpen={showDeleteModal}
345 
				closeModal={() => setShowDeleteModal(false)}
346 
				onComplete={() => deleteHandler(deleteType, sectionSelected.slug_section)}
347 
				message="Registro eliminado"
348 
			/>
12709 stevensc 349 
		</>
350 
	)
351 
}
352 
 
353 
export default FormView