Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 561 | Rev 565 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 561 Rev 564
Línea 1... Línea 1...
1 
import React, { useState } from "react";
 1 
import React, { useState } from "react";
2 
import Question from "../question/Question";
 2 
import Option from "../option/Option";
Línea 3... Línea 3...
3 
 
 3 
 
Línea 4... Línea 4...
4 
const Section = (props) => {
 4 
const Section = (props) => {
5 
 
 5 
 
Línea 6... Línea 6...
6 
    // get props
 6 
    // get props
7 
    const { section, backendVars, handleAnswer, page, setPage, total, index  } = props;
 7 
    const { section, backendVars, page, setPage, total, index } = props;
- 
 
 8 
 
8 
 
 9 
    //init states
Línea 9... Línea 10...
9 
    //init states
10 
    const [errors, setErrors] = useState([]);
10 
    const [errors, setErrors] = useState([]);
 11 
    const [input, setInput] = useState(section.answer);
11
12 
 
12 
 
 13 
 
Línea 37... Línea 38...
37 
    const handlePrevious = () => {
 38 
    const handlePrevious = () => {
38 
        setErrors([]);
 39 
        setErrors([]);
39 
        setPage(page - 1);
 40 
        setPage(page - 1);
40 
    };
 41 
    };
Línea -... Línea 42...
- 
 
 42 
 
- 
 
 43 
    /**
- 
 
 44 
     * Update section answer
- 
 
 45 
     * @param {*} value
- 
 
 46 
     */
- 
 
 47 
     const handleAnswer = (value) => {
- 
 
 48 
        setInput(value);
- 
 
 49 
        section.answer = value;
- 
 
 50 
    }
Línea 41... Línea 51...
41 
 
 51 
 
42 
 
 52 
 
43 
    /**
 53 
    /**
44 
     * Continue to the next section
 54 
     * Continue to the next section
45 
     */
 - 
 
Línea -... Línea 55...
- 
 
 55 
     */
- 
 
 56 
    const handleNext = () => validateSection() && setPage(page + 1);
- 
 
 57 
 
- 
 
 58 
    /**
- 
 
 59 
     * componentDidMount
46 
    const handleNext = () => validateSection() && setPage(page + 1);
 60 
     */
Línea -... Línea 61...
- 
 
 61 
     useEffect(() => {
- 
 
 62 
        setInput(section.answer);
47
63 
    }, [section]);
48 
 
 64 
 
49 
    return (
 65 
 
50 
 
 66 
    return (
51 
        <div className="panel-group" hidden={page == index ? false : true}>
 67 
        <div className="panel-group" hidden={page == index ? false : true}>
52 
            <div className="panel panel-default" id={`panel-${section.slug_section}`}>
 68 
            <div className="panel panel-default" id={`panel-${section.id_section}`}>
53 
                <div className="panel-heading">
 69 
                <div className="panel-heading">
54 
                    <h4 className="panel-title">{section.name}</h4>
 70 
                    <h4 className="panel-title">{section.title}</h4>
55 
                </div>
 71 
                </div>
56 
                <div id={section.slug_section} className="panel-collapse in collapse show">
 72 
                <div id={section.id_section} className="panel-collapse in collapse show">
57 
                    <div className="panel-body">
 73 
                    <div className="panel-body">
58 
                        <div
 74 
                        <div
- 
 
 75 
                            dangerouslySetInnerHTML={{ __html: section.text }}
- 
 
 76 
                            className="description"
- 
 
 77 
                        />
- 
 
 78 
                        <div className="row">
- 
 
 79 
                            {section.type == 'simple' ? (
- 
 
 80 
                                <div className="form-group">
- 
 
 81 
 
- 
 
 82 
                                    <textarea
- 
 
 83 
                                        className="form-control"
- 
 
 84 
                                        rows="5"
- 
 
 85 
                                        value={input}
- 
 
 86 
                                        maxLength='200'
- 
 
 87 
                                        name={section.id_section}
- 
 
 88 
                                        onChange={e =>
- 
 
 89 
                                            handleAnswer(e.target.value)}
59 
                            dangerouslySetInnerHTML={{ __html: section.text }}
 90 
                                    />
60 
                            className="description"
 91 
                                </div>
61 
                        />
 92 
                            ) : (
62 
                        <div className="row">
 93 
                                <div>
63 
                            {section.questions.map((question, i) => {
 94 
                                    {section.options.map((option, i) => {
64 
                                return <Question
 95 
                                        return <Option
65 
                                    question={question}
 96 
                                            option={option}
- 
 
 97 
                                            key={i}
66 
                                    key={i}
 98 
                                            backendVars={backendVars}
- 
 
 99 
                                            handleAnswer={handleAnswer}
- 
 
 100 
                                        />
67 
                                    backendVars={backendVars}
 101 
 
- 
 
 102 
                                    })}
68 
                                    handleAnswer={handleAnswer}
 103 
                                </div>)}
69 
                                />;
 104 
 
70 
                            })}
 105 
                        </div>
71 
                        </div>
 106 
 
72 
                        <div className="row">
 107 
                        <div className="row">
Línea 90... Línea 125...
90 
                                            <button
 125 
                                            <button
91 
                                                type="button"
 126 
                                                type="button"
92 
                                                className="btn btn-secondary"
 127 
                                                className="btn btn-secondary"
93 
                                                onClick={() => handlePrevious()}
 128 
                                                onClick={() => handlePrevious()}
94 
                                            >
 129 
                                            >
95 
                                                {backendVars.LBL_SELF_EVALUATION_TEST_FORM_PREVIOUS}
 130 
                                                {backendVars.LBL_EVALUATION_TEST_FORM_PREVIOUS}
96 
                                            </button>
 131 
                                            </button>
97 
                                        }
 132 
                                        }
98 
                                    </li>
 133 
                                    </li>
99 
                                    <li className="next">
 134 
                                    <li className="next">
100 
                                        {index != total - 1 &&
 135 
                                        {index != total - 1 &&
101 
                                            <button
 136 
                                            <button
102 
                                                type="button"
 137 
                                                type="button"
103 
                                                onClick={() => handleNext()}
 138 
                                                onClick={() => handleNext()}
104 
                                                className="btn btn-secondary">
 139 
                                                className="btn btn-secondary">
105 
                                                {backendVars.LBL_SELF_EVALUATION_TEST_FORM_NEXT}
 140 
                                                {backendVars.LBL_EVALUATION_TEST_FORM_NEXT}
106 
                                            </button>
 141 
                                            </button>
107 
                                        }
 142 
                                        }
108 
                                    </li>
 143 
                                    </li>
109 
                                </ul>
 144 
                                </ul>
110 
                            </div>
 145 
                            </div>