Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
306 geraldo 1 
import React from "react";
352 geraldo 2 
import { axios } from '../../../utils';
306 geraldo 3 
import Section from "./section/Section";
4 
import Spinner from "../../../shared/loading-spinner/Spinner";
5 
 
6 
const Test = (props) => {
7 
 
8 
    // get props
344 geraldo 9 
    const { backendVars, test, loading, setTest, action } = props;
306 geraldo 10 
 
340 geraldo 11 
 
12 
    /**
13 
     * Send form data
14 
     */
15 
    const handleSubmit = async () => {
16 
        if (validateForm()) {
356 geraldo 17 
            //init form data
355 geraldo 18 
            const formData = new FormData();
19 
            formData.append("content", JSON.stringify(test));
20 
            await axios.post(action,  formData ).then((response) => {
340 geraldo 21 
                if (response.data.success) {
22 
                    console.info('Formulario almacenado');
23 
                    setTest(null);
336 geraldo 24 
                }
340 geraldo 25 
            });
26 
        }
27 
    }
28 
    /**
29 
     * Update question answer
30 
     * @param {*} slug_section
31 
     * @param {*} slug_question
32 
     * @param {*} answer
33 
     */
34 
    const handleAnswer = (slug_section, slug_question, answer) => {
35 
        test.content.filter((section) => {
36 
            if (section.slug_section == slug_section) {
37 
                section.questions.map((question) => {
38 
                    if (question.slug_question == slug_question) {
356 geraldo 39 
                        //valid if the question has more than one answer
350 geraldo 40 
                        question.type == 'multiple' ?
41 
                            !question.answer ?
42 
                                question.answer = [answer] :
43 
                                question.answer.push(answer)
44 
                            : question.answer = answer;
345 geraldo 45 
 
340 geraldo 46 
                    }
47 
                })
48 
            }
343 geraldo 49 
        });
340 geraldo 50 
        setTest(test);
51 
    }
52 
    /**
53 
     * Check if there are questions to answer
54 
     * @returns
55 
     */
56 
    const validateForm = () => {
57 
        let formValid = true;
58 
        test.content.map((section) => {
59 
            section.questions.map((question) => {
356 geraldo 60 
                //Validate if the answer is empty
340 geraldo 61 
                if (!question.answer) {
62 
                    console.error(`Debe ingresar una respuesta en la pregunta ${question.position + 1} de la sección ${section.name}`);
63 
                    formValid = false;
64 
                }
336 geraldo 65 
            })
66 
        })
340 geraldo 67 
 
68 
        return formValid;
306 geraldo 69 
    }
70 
 
340 geraldo 71 
 
306 geraldo 72 
    return (
73 
        <div>
74 
            {loading ? (
75 
                <div className="row">
76 
                    <Spinner />
77 
                </div>
78 
            ) : (
311 geraldo 79 
                <div className="row test-section">
340 geraldo 80 
                    <div className="col-md-12 col-sm-12 col-xs-12">
81 
                        <div className="company-title">
82 
                            <div className="section_admin_title_buttons">
83 
                                <h1 className="title">{test.name}</h1>
307 geraldo 84 
                            </div>
306 geraldo 85 
                        </div>
340 geraldo 86 
                        <div
87 
                            dangerouslySetInnerHTML={{ __html: test.text }}
88 
                            className="description company-title"
89 
                        ></div>
90 
                    </div>
91 
                    <div className="col-md-12 col-sm-12 col-xs-12">
92 
                        <div className="company-title">
93 
                            {test.content.map((section, key) => {
94 
                                return <Section
95 
                                    section={section}
96 
                                    key={key}
97 
                                    backendVars={backendVars}
98 
                                    handleAnswer={handleAnswer}
99 
                                />
100 
                            })}
306 geraldo 101 
                        </div>
340 geraldo 102 
                    </div>
103 
                    <div className="col-md-12 col-sm-12 col-xs-12">
104 
                        <div className="company-title">
105 
                            <button type="button" className="btn btn-danger" onClick={() => setTest(null)}>{backendVars.LBL_CANCEL}</button>
106 
                            <button type="buttton" className="btn btn-success" onClick={() => handleSubmit()}>{backendVars.LBL_SAVE}</button>
307 geraldo 107 
                        </div>
340 geraldo 108 
                    </div>
306 geraldo 109 
                </div>
110 
            )}
111 
        </div>
112 
    )
113 
}
114 
 
115 
export default Test;