Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 363 | Rev 365 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
364 geraldo 1 
import React, { useState } from "react";
306 geraldo 2 
import Question from "../question/Question";
3 
 
4 
const Section = (props) => {
307 geraldo 5 
 
364 geraldo 6 
    // get props
7 
    const { section, backendVars, handleAnswer, page, setPage } = props;
357 geraldo 8 
 
364 geraldo 9 
    //init states
10 
    const [error, setError] = useState('');
357 geraldo 11 
 
360 geraldo 12 
    /**
13 
     * Check if there are questions to answer
14 
     * @returns
15 
     */
16 
    const validateSection = () => {
364 geraldo 17 
        setError('');
360 geraldo 18 
        let formValid = true;
19 
        section.questions.map((question) => {
20 
            //Validate if the answer is empty
21 
            if (!question.answer) {
22 
                formValid = false;
23 
            }
24 
        })
25 
        return formValid;
26 
    }
357 geraldo 27 
 
364 geraldo 28 
    /**
29 
     * Return to previous section
30 
     * @returns
31 
     */
32 
    const handlePrevious = () => setPage(page - 1);
33 
 
34 
 
35 
    /**
36 
     * Continue to the next section
37 
     */
38 
    const handleNext = () => {
39 
        if (validateSection()) {
40 
            setPage(page + 1);
41 
        }
42 
    }
43 
 
306 geraldo 44 
    return (
312 geraldo 45 
 
364 geraldo 46 
        <div className="panel-group" hidden={page == section.position ? false : true}>
312 geraldo 47 
            <div className="panel panel-default" id={`panel-${section.slug_section}`}>
48 
                <div className="panel-heading">
49 
                    <h4 className="panel-title">
363 geraldo 50 
                        <a>{section.name}</a>
312 geraldo 51 
                    </h4>
52 
                </div>
53 
                <div id={section.slug_section} className="panel-collapse in collapse show">
54 
                    <div className="panel-body">
55 
                        <div
56 
                            dangerouslySetInnerHTML={{ __html: section.text }}
57 
                            className="description"
58 
                        />
59 
                        <div className="row">
357 geraldo 60 
                            {section.questions.map((question, i) => {
332 geraldo 61 
                                return <Question
62 
                                    question={question}
357 geraldo 63 
                                    key={i}
332 geraldo 64 
                                    backendVars={backendVars}
342 geraldo 65 
                                    handleAnswer={handleAnswer}
332 geraldo 66 
                                />;
312 geraldo 67 
                            })}
68 
                        </div>
357 geraldo 69 
                        <div className="row">
363 geraldo 70 
                            <div className="col-md-12 text-right np-padding">
364 geraldo 71 
                                <div class="alert alert-danger" role="alert">
72 
                                    This is a danger alert—check it out!
73 
                                </div>
74 
                            </div>
75 
                            <div className="col-md-12 text-right np-padding">
363 geraldo 76 
                                <ul class="wizard">
359 geraldo 77 
                                    <li class="previous">
78 
                                        <button
79 
                                            type="button"
360 geraldo 80 
                                            className="btn btn-secondary"
364 geraldo 81 
                                            onClick={() => handlePrevious()}
359 geraldo 82 
                                            disabled={section.position == 0}
83 
                                        >
84 
                                            {backendVars.LBL_SELF_EVALUATION_TEST_FORM_PREVIOUS}
85 
                                        </button>
86 
                                    </li>
87 
                                    <li class="next">
88 
                                        <button
89 
                                            type="button"
364 geraldo 90 
                                            onClick={() => handleNext()}
360 geraldo 91 
                                            className="btn btn-secondary">
359 geraldo 92 
                                            {backendVars.LBL_SELF_EVALUATION_TEST_FORM_NEXT}
93 
                                        </button>
94 
                                    </li>
95 
                                </ul>
357 geraldo 96 
                            </div>
97 
                        </div>
312 geraldo 98 
                    </div>
99 
                </div>
306 geraldo 100 
            </div>
101 
        </div>
102 
    )
103 
}
104 
 
105 
export default Section;