Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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