Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 586 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
583 geraldo 1 
import React, { useState, useEffect } from "react";
564 geraldo 2 
import Option from "../option/Option";
561 geraldo 3 
 
4 
const Section = (props) => {
5 
 
6 
    // get props
564 geraldo 7 
    const { section, backendVars, page, setPage, total, index } = props;
561 geraldo 8 
 
9 
    //init states
10 
    const [errors, setErrors] = useState([]);
564 geraldo 11 
    const [input, setInput] = useState(section.answer);
561 geraldo 12 
 
564 geraldo 13 
 
561 geraldo 14 
    /**
567 geraldo 15 
     * Check if there are options to answer
561 geraldo 16 
     * @returns
17 
     */
586 geraldo 18 
    const validateSection = () => {
561 geraldo 19 
        setErrors([]);
20 
        let formValid = true;
21 
        let messages = [];
572 geraldo 22 
        if (section.type == 'multiple') {
23 
            section.options.map((option) => {
24 
                //Validate if the answer is empty
25 
                if (!option.answer || option.answer.length == 0) {
586 geraldo 26 
                    messages.push(backendVars.LBL_ERROR_FIELDS_EMPTY);
572 geraldo 27 
                    formValid = false;
28 
                }
29 
            });
30 
        } else {
31 
            if (!section.answer || section.answer.length == 0) {
586 geraldo 32 
                messages.push(backendVars.LBL_ERROR_FIELDS_EMPTY);
561 geraldo 33 
                formValid = false;
34 
            }
572 geraldo 35 
        }
561 geraldo 36 
        setErrors(messages);
37 
        return formValid;
38 
    }
39 
 
40 
    /**
41 
     * Return to previous section
42 
     * @returns
43 
     */
44 
    const handlePrevious = () => {
45 
        setErrors([]);
46 
        setPage(page - 1);
47 
    };
48 
 
564 geraldo 49 
    /**
50 
     * Update section answer
51 
     * @param {*} value
52 
     */
567 geraldo 53 
    const handleAnswer = (value) => {
564 geraldo 54 
        setInput(value);
55 
        section.answer = value;
56 
    }
561 geraldo 57 
 
564 geraldo 58 
 
561 geraldo 59 
    /**
60 
     * Continue to the next section
61 
     */
62 
    const handleNext = () => validateSection() && setPage(page + 1);
63 
 
564 geraldo 64 
    /**
65 
     * componentDidMount
66 
     */
567 geraldo 67 
    useEffect(() => {
564 geraldo 68 
        setInput(section.answer);
69 
    }, [section]);
70 
 
71 
 
561 geraldo 72 
    return (
73 
        <div className="panel-group" hidden={page == index ? false : true}>
564 geraldo 74 
            <div className="panel panel-default" id={`panel-${section.id_section}`}>
561 geraldo 75 
                <div className="panel-heading">
564 geraldo 76 
                    <h4 className="panel-title">{section.title}</h4>
561 geraldo 77 
                </div>
564 geraldo 78 
                <div id={section.id_section} className="panel-collapse in collapse show">
561 geraldo 79 
                    <div className="panel-body">
586 geraldo 80 
                        <div className="description"><p>{section.text}</p></div>
561 geraldo 81 
                        <div className="row">
564 geraldo 82 
                            {section.type == 'simple' ? (
586 geraldo 83 
                                <div className="col-md-12 col-sm-12 col-xs-12 np-padding">
84 
                                    <div className="form-group">
564 geraldo 85 
 
586 geraldo 86 
                                        <textarea
87 
                                            className="form-control"
88 
                                            rows="5"
89 
                                            value={input}
90 
                                            maxLength='200'
91 
                                            name={section.id_section}
92 
                                            onChange={e =>
93 
                                                handleAnswer(e.target.value)}
94 
                                        />
95 
                                    </div>
564 geraldo 96 
                                </div>
97 
                            ) : (
590 geraldo 98 
                                <div className="col-md-12 col-sm-12 col-xs-12 np-padding">
567 geraldo 99 
                                    {section.options.length > 0 &&
590 geraldo 100 
                                        <div className="col-md-12 col-sm-12 col-xs-12 np-padding">
567 geraldo 101 
                                            {section.options.map((option, i) => {
102 
                                                return <Option
103 
                                                    option={option}
104 
                                                    key={i}
105 
                                                    handleAnswer={handleAnswer}
106 
                                                />
564 geraldo 107 
 
567 geraldo 108 
                                            })}
109 
                                        </div>}
564 geraldo 110 
                                </div>)}
111 
 
561 geraldo 112 
                        </div>
564 geraldo 113 
 
561 geraldo 114 
                        <div className="row">
115 
                            {errors.length > 0 &&
116 
                                <div className="col-md-12 np-padding">
117 
                                    {errors.map((error, index) => {
118 
                                        return (
119 
                                            <div className="alert alert-danger alert-dismissible fade show" role="alert" key={index}>
120 
                                                {error}
121 
                                                <button type="button" className="close" data-dismiss="alert" aria-label="Close">
122 
                                                    <span aria-hidden="true">&times;</span>
123 
                                                </button>
124 
                                            </div>);
125 
                                    })}
126 
                                </div>
127 
                            }
128 
                            <div className="col-md-12 np-padding">
129 
                                <ul className="wizard">
130 
                                    <li className="previous">
131 
                                        {index != 0 &&
132 
                                            <button
133 
                                                type="button"
134 
                                                className="btn btn-secondary"
135 
                                                onClick={() => handlePrevious()}
136 
                                            >
564 geraldo 137 
                                                {backendVars.LBL_EVALUATION_TEST_FORM_PREVIOUS}
561 geraldo 138 
                                            </button>
139 
                                        }
140 
                                    </li>
141 
                                    <li className="next">
142 
                                        {index != total - 1 &&
143 
                                            <button
144 
                                                type="button"
145 
                                                onClick={() => handleNext()}
146 
                                                className="btn btn-secondary">
564 geraldo 147 
                                                {backendVars.LBL_EVALUATION_TEST_FORM_NEXT}
561 geraldo 148 
                                            </button>
149 
                                        }
150 
                                    </li>
151 
                                </ul>
152 
                            </div>
153 
                        </div>
154 
                    </div>
155 
                </div>
156 
            </div>
157 
        </div>
158 
    )
159 
}
160 
 
161 
export default Section;