Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable no-mixed-spaces-and-tabs */

import React, { useState, useEffect } from 'react'

import axios from 'axios'

import parse from 'html-react-parser'

import { useForm } from 'react-hook-form'

import { useDispatch } from 'react-redux'

import { useHistory, useParams } from 'react-router-dom'

import { addNotification } from '../../../redux/notification/notification.actions'

import DescriptionInput from '../../../shared/DescriptionInput'

import SectionModal from '../components/SectionModal'

const sectionTypeOptions = {

	open: 'Abierto',

	simple: 'Simple'

}

const INITIAL_SECTION = {

	slug_section: '',

	name: '',

	text: '',

	position: 0,

	questions: [],

	status: 0

}

const INITIAL_QUESTION = {

	slug_section: '',

	slug_question: '',

	text: '',

	type: '',

	position: 0,

	maxlength: '0',

	multiline: '0',

	range: '0',

	options: [],

	answer: ''

}

const FormView = ({ actionLink }) => {

	// Hooks

	const history = useHistory()

	const { action } = useParams()

	const dispatch = useDispatch()

	const { register, setValue, watch, reset } = useForm()

	// Section modal states

	const [isShowSection, setIsShowSectionModal] = useState(false)

	const [sectionSelected, setSectionSelected] = useState(INITIAL_SECTION)

	const [sectionType, setSectionType] = useState('add')

	// Section modal states

	const [isShowQuestion, setIsShowQuestionModal] = useState(false)

	const [questionSelected, setQuestionSelected] = useState(INITIAL_QUESTION)

	const [questionType, setQuestionType] = useState('add')

	const [content, setContent] = useState([])

	const [status, setStatus] = useState('A')

	const showSectionModal = (section = INITIAL_SECTION, type = 'add') => {

		setIsShowSectionModal(true)

		setSectionSelected(section)

		setSectionType(type)

	}

	const closeSectionModal = () => {

		setIsShowSectionModal(false)

		setSectionSelected(INITIAL_SECTION)

	}

	const addSection = ({ name, text }) => {

		const uuid = new Date().getTime()

		let position = 0

		content.forEach((section) => {

			if (position < section.position) {

				position = section.position

			}

			position++

		})

		const newSection = {

			slug_section: `section${uuid}`,

			name: name,

			text: text,

			position: position,

			questions: [],

			status: 0

		}

		setContent(prev => [...prev, newSection])

	}

	const editSection = ({ name, text, slug }) => {

		setContent(prev => prev.map(contentSection => {

			if (contentSection.slug_section === slug.slug_section) {

				return { ...contentSection, name: name, text: text }

			}

		}))

	}

	const showQuestionModal = (question = INITIAL_QUESTION, type = 'add') => {

		setIsShowQuestionModal(true)

		setQuestionType(type)

		setQuestionSelected(question)

	}

	const closeQuestionModal = () => {

		setIsShowQuestionModal(false)

		setQuestionSelected(INITIAL_QUESTION)

	}

	const addQuestion = (question) => {

		setContent(prev => prev.map(prevSection => prevSection.slug_section === question.slug_section && prev.questions.push(question)))

	}

	const editQuestion = (question) => {

		setContent(prev => prev.map(prevSection => {

			if (prevSection.slug_section === question.slug_section) {

				const questions = prevSection.questions

				return questions.map(prevQuestion => prevQuestion.slug_question === question.slug_question && question)

			}

		}))

	}

	const onSubmit = () => {

		const submitData = new FormData()

		submitData.append('name', watch('name'))

		submitData.append('description', watch('description'))

		submitData.append('text', watch('text'))

		submitData.append('status', status)

		submitData.append('content', JSON.stringify(content))

		axios.post(actionLink, submitData)

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: typeof data.data === 'string'

							? data.data

							: 'Ha ocurrido un error'

					}))

				}

				dispatch(addNotification({

					style: 'success',

					msg: data.data

				}))

			})

	}

	const submitAndClose = () => {

		onSubmit()

		reset()

		history.goBack()

	}

	useEffect(() => {

		if (action === 'edit') {

			axios.get(actionLink)

				.then(({ data }) => {

					if (!data.success) {

						return dispatch(addNotification({

							style: 'danger',

							msg: 'Ha ocurrido un error'

						}))

					}

					setValue('name', data.data.name)

					setValue('description', data.data.description)

					setValue('text', data.data.description)

					setContent(data.data.content)

					setStatus(data.data.status)

				})

		}

	}, [actionLink])

	return (

		<>

			<section className="content">

				<div className="row" style={{ padding: 16 }}>

					<div className="col-xs-12 col-md-12">

						<div className="form-group">

							<label>Nombre</label>

							<input type="text" name="name" className='form-control' ref={register({ required: true, maxLength: 50 })} />

						</div>

						<div className="form-group">

							<label htmlFor="form-description">Descripción</label>

							{/* <DescriptionInput

								defaultValue={watch('description') ? parse(watch('description')) : ''}

								name='description'

								onChange={setValue}

							/> */}

						</div>

						<div className="form-group">

							<label htmlFor="form-description">Texto</label>

							{/* <DescriptionInput

								defaultValue={watch('text') ? parse(watch('text')) : ''}

								name='text'

								onChange={setValue}

							/> */}

						</div>

						<div className="form-group">

							<label htmlFor="form-status">Estatus</label>

							<select name="form-status" className="form-control" onChange={(e) => setStatus(e.target.value)} value={status}>

								<option value="A">Activo</option>

								<option value="I">Inactivo</option>

							</select>

						</div>

						<br />

						<div className="row">

							<div className="col-xs-12 col-md-12">

								<div className="panel-group" id="rows" >

									<div className="form-group">

										<div className="row">

											<div className="col-xs-12 col-md-12">

												<hr />

												<h4 style={{ fontSize: 18, fontWeight: 'bold' }}>Competencias asociadas al cargo:</h4>

												<button className='btn btn-primary' onClick={() => showSectionModal()}>

													Agregar sección

												</button>

												<br />

												<div className="panel-group" id="rows-job-competencies" >

													{

														content.length > 0

														&&

														content.map((section) => {

															return (

																<div className="panel panel-default" key={section.slug_section}>

																	<div className="panel-heading">

																		<h4 className="panel-title">

																			<a className="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent={`panel-${section.slug_section}`} href={`#collapse-${section.slug_section}`}>

																				<span className={`section-name${section.slug_section}`}>

																					{section.name}

																				</span>

																			</a>

																		</h4>

																	</div>

																	<div id="collapse-section1661528423935" className="panel-collapse in collapse show">

																		<div className="panel-body">

																			<div className="table-responsive">

																				<table className="table table-bordered">

																					<thead>

																						<tr>

																							<th style={{ width: '10%' }}>Elemento</th>

																							<th style={{ width: '50%' }}>Texto</th>

																							<th style={{ width: '10%' }}>Tipo</th>

																							<th style={{ width: '20%' }}>Acciones</th>

																						</tr>

																					</thead>

																					<tbody>

																						<tr className="tr-section">

																							<td className="text-left">Sección</td>

																							<td className="text-left">{section.name}</td>

																							<td />

																							<td>

																								<button className="btn btn-default" onClick={() => showSectionModal(section, 'edit')}>

																									<i className="fa fa-edit" />

																									Editar Sección

																								</button>

																								<button className="btn btn-default" >

																									<i className="fa fa-ban" />

																									Borrar Sección

																								</button>

																								<button className="btn btn-default btn-add-question" >

																									<i className="fa fa-plus" />

																									Agregar  Pregunta

																								</button>

																							</td>

																						</tr>

																						{

																							section.questions.map((question) => (

																								<tr key={question.slug_question} className="tr-question">

																									<td className="text-left">Pregunta</td>

																									<td className="text-left">

																										{parse(question.text)}

																									</td>

																									<td className="text-capitalize">

																										{sectionTypeOptions[question.type]}

																									</td>

																									<td>

																										<button className="btn btn-default btn-edit-question">

																											<i className="fa fa-edit" /> Editar Pregunta

																										</button>

																										<button className="btn btn-default btn-delete-question">

																											<i className="fa fa-ban" /> Borrar Pregunta

																										</button>

																									</td>

																								</tr>

																							))

																						}

																					</tbody>

																				</table>

																			</div>

																		</div>

																	</div>

																</div>

															)

														})

													}

												</div>

											</div>

										</div>

									</div>

								</div>

							</div>

						</div>

						<div className="d-flex" style={{ gap: '5px' }}>

							<button type="button" className="btn btn-info" onClick={onSubmit}>Guardar & Continuar</button>

							<button type="button" className="btn btn-primary" onClick={submitAndClose}>Guardar & Cerrar</button>

							<button type="button" className="btn btn-secondary" onClick={() => history.goBack()}>Cancelar</button>

						</div>

					</div>

				</div >

			</section >

			<SectionModal

				show={isShowSection}

				sectionType={sectionType}

				section={sectionSelected}

				closeModal={closeSectionModal}

				onSubmit={sectionType === 'add' ? addSection : editSection}

			/>

		</>

	)

}

export default FormView