Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 564 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
561 geraldo 1 
import React, { useState } from "react";
2 
import Question from "../question/Question";
3 
 
4 
const Section = (props) => {
5 
 
6 
    // get props
7 
    const { section, backendVars, handleAnswer, page, setPage, total, index  } = props;
8 
 
9 
    //init states
10 
    const [errors, setErrors] = useState([]);
11 
 
12 
 
13 
    /**
14 
     * Check if there are questions to answer
15 
     * @returns
16 
     */
17 
    const validateSection = () => {
18 
        setErrors([]);
19 
        let formValid = true;
20 
        let messages = [];
21 
        section.questions.map((question) => {
22 
            //Validate if the answer is empty
23 
            if (!question.answer || question.answer.length == 0) {
24 
                // set error message
25 
                messages.push(backendVars.LBL_EMPTY_ANSWER.replace('%n', question.position + 1));
26 
                formValid = false;
27 
            }
28 
        });
29 
        setErrors(messages);
30 
        return formValid;
31 
    }
32 
 
33 
    /**
34 
     * Return to previous section
35 
     * @returns
36 
     */
37 
    const handlePrevious = () => {
38 
        setErrors([]);
39 
        setPage(page - 1);
40 
    };
41 
 
42 
 
43 
    /**
44 
     * Continue to the next section
45 
     */
46 
    const handleNext = () => validateSection() && setPage(page + 1);
47 
 
48 
 
49 
    return (
50 
 
51 
        <div className="panel-group" hidden={page == index ? false : true}>
52 
            <div className="panel panel-default" id={`panel-${section.slug_section}`}>
53 
                <div className="panel-heading">
54 
                    <h4 className="panel-title">{section.name}</h4>
55 
                </div>
56 
                <div id={section.slug_section} className="panel-collapse in collapse show">
57 
                    <div className="panel-body">
58 
                        <div
59 
                            dangerouslySetInnerHTML={{ __html: section.text }}
60 
                            className="description"
61 
                        />
62 
                        <div className="row">
63 
                            {section.questions.map((question, i) => {
64 
                                return <Question
65 
                                    question={question}
66 
                                    key={i}
67 
                                    backendVars={backendVars}
68 
                                    handleAnswer={handleAnswer}
69 
                                />;
70 
                            })}
71 
                        </div>
72 
                        <div className="row">
73 
                            {errors.length > 0 &&
74 
                                <div className="col-md-12 np-padding">
75 
                                    {errors.map((error, index) => {
76 
                                        return (
77 
                                            <div className="alert alert-danger alert-dismissible fade show" role="alert" key={index}>
78 
                                                {error}
79 
                                                <button type="button" className="close" data-dismiss="alert" aria-label="Close">
80 
                                                    <span aria-hidden="true">&times;</span>
81 
                                                </button>
82 
                                            </div>);
83 
                                    })}
84 
                                </div>
85 
                            }
86 
                            <div className="col-md-12 np-padding">
87 
                                <ul className="wizard">
88 
                                    <li className="previous">
89 
                                        {index != 0 &&
90 
                                            <button
91 
                                                type="button"
92 
                                                className="btn btn-secondary"
93 
                                                onClick={() => handlePrevious()}
94 
                                            >
95 
                                                {backendVars.LBL_SELF_EVALUATION_TEST_FORM_PREVIOUS}
96 
                                            </button>
97 
                                        }
98 
                                    </li>
99 
                                    <li className="next">
100 
                                        {index != total - 1 &&
101 
                                            <button
102 
                                                type="button"
103 
                                                onClick={() => handleNext()}
104 
                                                className="btn btn-secondary">
105 
                                                {backendVars.LBL_SELF_EVALUATION_TEST_FORM_NEXT}
106 
                                            </button>
107 
                                        }
108 
                                    </li>
109 
                                </ul>
110 
                            </div>
111 
                        </div>
112 
                    </div>
113 
                </div>
114 
            </div>
115 
        </div>
116 
    )
117 
}
118 
 
119 
export default Section;