Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";

import Question from "../question/Question";

const Section = (props) => {

    // get props

    const { section, backendVars, handleAnswer, key } = props;

    /**

     * Check if there are questions to answer

     * @returns

     */

    const validateSection = () => {

        let formValid = true;

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

            //Validate if the answer is empty

            if (!question.answer) {

                formValid = false;

            }

        })

        return formValid;

    }

    return (

        <div className="panel-group">

            <div className="panel panel-default" id={`panel-${section.slug_section}`}>

                <div className="panel-heading">

                    <h4 className="panel-title">

                        <a

                            className="accordion-toggle"

                            data-toggle="collapse"

                            data-parent={`#panel-${section.slug_section}`}

                            aria-expanded="true"

                            href={`#${section.slug_section}`}>

                            {section.name}</a>

                    </h4>

                </div>

                <div id={section.slug_section} className="panel-collapse in collapse show">

                    <div className="panel-body">

                        <div

                            dangerouslySetInnerHTML={{ __html: section.text }}

                            className="description"

                        />

                        <div className="row">

                            {section.questions.map((question, i) => {

                                return <Question

                                    question={question}

                                    key={i}

                                    backendVars={backendVars}

                                    handleAnswer={handleAnswer}

                                />;

                            })}

                        </div>

                        <div className="row">

                            <div className="col-md-12 text-right">

                                <ul class="pager wizard">

                                    <li class="previous">

                                        <button

                                            type="button"

                                            className="btn btn-secondary"

                                            disabled={section.position == 0}

                                        >

                                            {backendVars.LBL_SELF_EVALUATION_TEST_FORM_PREVIOUS}

                                        </button>

                                    </li>

                                    <li class="next">

                                        <button

                                            type="button"

                                            disabled={!validateSection}

                                            className="btn btn-secondary">

                                            {backendVars.LBL_SELF_EVALUATION_TEST_FORM_NEXT}

                                        </button>

                                    </li>

                                </ul>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    )

}

export default Section;