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'
import DeleteModal from '../../../shared/DeleteModal'
import QuestionModal from '../components/QuestionModal'

const sectionTypeOptions = {
        open: 'Abierto',
        simple: 'Simple',
        multiple: 'Multiple'
}

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 [showDeleteModal, setShowDeleteModal] = useState(false)
        const [deleteType, setDeleteType] = useState('section')
        const deleteSlugsOptions = {
                section: sectionSelected.slug_section,
                question: questionSelected.slug_question
        }

        const showSectionModal = (section = INITIAL_SECTION, type = 'add') => {
                setSectionSelected(section)
                setSectionType(type)
                setIsShowSectionModal(true)
        }

        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 deleteSection = (slug) => {
                setContent(current =>
                        current.filter(currentSection => {
                                return currentSection.slug_section !== slug
                        }),
                )
        }

        const deleteQuestion = (slug) => {
                setContent(current =>
                        current.map(currentSection => {
                                if (currentSection.slug_section === sectionSelected.slug_section) {
                                        return {
                                                ...currentSection,
                                                questions: currentSection.questions.filter((currentQuestion) => currentQuestion.slug_question !== slug)
                                        }
                                }
                                return currentSection
                        }),
                )
        }

        const deleteHandler = (type, slug) => {
                if (type === 'section') {
                        return deleteSection(slug)
                }
                if (type === 'question') {
                        return deleteQuestion(slug)
                }
        }

        const editSection = (name, text, slug) => {
                setContent(current =>
                        current.map(currentSection => {
                                if (currentSection.slug_section === slug) {
                                        return { ...currentSection, name: name, text: text }
                                }

                                return currentSection
                        })
                )
        }

        const showQuestionModal = (question = INITIAL_QUESTION, type = 'add') => {
                setIsShowQuestionModal(true)
                setQuestionType(type)
                setQuestionSelected(question)
        }

        const closeQuestionModal = () => {
                setIsShowQuestionModal(false)
                setQuestionSelected(INITIAL_QUESTION)
        }

        const addQuestion = (question) => {
                const uuid = new Date().getTime()

                setContent(current =>
                        current.map(currentSection => {
                                if (currentSection.slug_section === sectionSelected.slug_section) {
                                        return {
                                                ...currentSection,
                                                questions: [
                                                        ...currentSection.questions,
                                                        {
                                                                ...question,
                                                                slug_question: `question${uuid}`,
                                                                slug_section: sectionSelected.slug_section,
                                                        }
                                                ]
                                        }
                                }

                                return currentSection
                        })
                )
        }

        const editQuestion = (question) => {
                setContent(current =>
                        current.map(currentSection => {
                                if (currentSection.slug_section === sectionSelected.slug_section) {

                                        const newQuestions = currentSection.questions.map((currentQuestion) => {
                                                if (currentQuestion.slug_question === question.slug_question) {
                                                        return question
                                                }

                                                return currentQuestion
                                        })

                                        return { ...currentSection, questions: newQuestions }
                                }

                                return currentSection
                        })
                )
        }

        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(() => {
                register('text')
                register('description')
        }, [])

        useEffect(() => {
                if (action === 'edit') {
                        axios.get(actionLink)
                                .then(({ data }) => {
                                        if (!data.success) {
                                                return dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: 'Ha ocurrido un error'
                                                }))
                                        }

                                        register('text')
                                        register('description')

                                        setContent(data.data.content)
                                        setStatus(data.data.status)

                                        setValue('name', data.data.name)
                                        setValue('description', data.data.description)
                                        setValue('text', data.data.description)
                                })
                }
        }, [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 />
                                                                                                <div className="d-flex justify-content-end">
                                                                                                        <button className='btn btn-primary' onClick={() => showSectionModal()}>
                                                                                                                <i className="fa fa-plus" />
                                                                                                                Agregar sección
                                                                                                        </button>
                                                                                                </div>
                                                                                                <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" onClick={() => {
                                                                                                                                                                                                        setSectionSelected(section)
                                                                                                                                                                                                        setDeleteType('section')
                                                                                                                                                                                                        setShowDeleteModal(true)
                                                                                                                                                                                                }}>
                                                                                                                                                                                                        <i className="fa fa-ban" />
                                                                                                                                                                                                        Borrar Sección
                                                                                                                                                                                                </button>
                                                                                                                                                                                                <button className="btn btn-default" onClick={() => {
                                                                                                                                                                                                        setSectionSelected(section)
                                                                                                                                                                                                        showQuestionModal()
                                                                                                                                                                                                }}>
                                                                                                                                                                                                        <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" onClick={() => {
                                                                                                                                                                                                                        setSectionSelected(section)
                                                                                                                                                                                                                        showQuestionModal(question, 'edit')
                                                                                                                                                                                                                }}>
                                                                                                                                                                                                                        <i className="fa fa-edit" /> Editar Pregunta
                                                                                                                                                                                                                </button>
                                                                                                                                                                                                                <button className="btn btn-default btn-delete-question" onClick={() => {
                                                                                                                                                                                                                        setQuestionSelected(question)
                                                                                                                                                                                                                        setDeleteType('question')
                                                                                                                                                                                                                        setShowDeleteModal(true)
                                                                                                                                                                                                                }}>
                                                                                                                                                                                                                        <i className="fa fa-ban" /> Borrar Pregunta
                                                                                                                                                                                                                </button>
                                                                                                                                                                                                                {
                                                                                                                                                                                                                        question.type !== 'open'
                                                                                                                                                                                                                        &&
                                                                                                                                                                                                                        <button className="btn btn-default btn-delete-question">
                                                                                                                                                                                                                                <i className="fa fa-plus" /> Agregar opción
                                                                                                                                                                                                                        </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}
                        />
                        <QuestionModal
                                show={isShowQuestion}
                                questionType={questionType}
                                question={questionSelected}
                                closeModal={closeQuestionModal}
                                onSubmit={questionType === 'add' ? addQuestion : editQuestion}
                        />
                        <DeleteModal
                                isOpen={showDeleteModal}
                                closeModal={() => setShowDeleteModal(false)}
                                onComplete={() => deleteHandler(deleteType, deleteSlugsOptions[deleteType])}
                                message="Registro eliminado"
                        />
                </>
        )
}

export default FormView