Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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