Proyectos de Subversion LeadersLinked - Backend

Rev

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