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 = content.length
                console.log(name)
                console.log(text)

                setContent(prev => [...prev, {
                        slug_section: `section${uuid}`,
                        name: name,
                        text: text,
                        position: position,
                        questions: [],
                        status: 0
                }])
        }

        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