Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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