Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
361 geraldo 1 
import React, { useState } 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";
361 geraldo 5 
import ConfirmationBox from "../../../shared/confirmation-box/ConfirmationBox";
306 geraldo 6 
 
7 
const Test = (props) => {
8 
 
360 geraldo 9 
    //init states
361 geraldo 10 
    const [confirmationBoxShow, setConfirmationBoxShow] = useState(false);
360 geraldo 11 
 
306 geraldo 12 
    // get props
344 geraldo 13 
    const { backendVars, test, loading, setTest, action } = props;
306 geraldo 14 
 
340 geraldo 15 
    /**
16 
     * Send form data
17 
     */
18 
    const handleSubmit = async () => {
19 
        if (validateForm()) {
356 geraldo 20 
            //init form data
355 geraldo 21 
            const formData = new FormData();
22 
            formData.append("content", JSON.stringify(test));
360 geraldo 23 
            await axios.post(action, formData).then((response) => {
340 geraldo 24 
                if (response.data.success) {
25 
                    console.info('Formulario almacenado');
26 
                    setTest(null);
336 geraldo 27 
                }
340 geraldo 28 
            });
29 
        }
30 
    }
31 
    /**
32 
     * Update question answer
33 
     * @param {*} slug_section
34 
     * @param {*} slug_question
35 
     * @param {*} answer
36 
     */
37 
    const handleAnswer = (slug_section, slug_question, answer) => {
38 
        test.content.filter((section) => {
39 
            if (section.slug_section == slug_section) {
40 
                section.questions.map((question) => {
41 
                    if (question.slug_question == slug_question) {
356 geraldo 42 
                        //valid if the question has more than one answer
350 geraldo 43 
                        question.type == 'multiple' ?
44 
                            !question.answer ?
45 
                                question.answer = [answer] :
46 
                                question.answer.push(answer)
47 
                            : question.answer = answer;
345 geraldo 48 
 
340 geraldo 49 
                    }
50 
                })
51 
            }
343 geraldo 52 
        });
340 geraldo 53 
        setTest(test);
54 
    }
55 
    /**
56 
     * Check if there are questions to answer
57 
     * @returns
58 
     */
59 
    const validateForm = () => {
60 
        let formValid = true;
61 
        test.content.map((section) => {
62 
            section.questions.map((question) => {
356 geraldo 63 
                //Validate if the answer is empty
340 geraldo 64 
                if (!question.answer) {
65 
                    formValid = false;
66 
                }
336 geraldo 67 
            })
68 
        })
340 geraldo 69 
 
70 
        return formValid;
306 geraldo 71 
    }
72 
 
361 geraldo 73 
    /**
74 
     * Update component status
75 
     * @returns
76 
     */
77 
    const handleConfirmationBoxShow = () => setConfirmationBoxShow(!confirmationBoxShow);
340 geraldo 78 
 
361 geraldo 79 
    /**
80 
     * Cancel test and send to the list of forms
81 
     * @returns
82 
     */
83 
    const handleCancel = () => setTest('');
357 geraldo 84 
 
306 geraldo 85 
    return (
86 
        <div>
87 
            {loading ? (
88 
                <div className="row">
89 
                    <Spinner />
90 
                </div>
91 
            ) : (
311 geraldo 92 
                <div className="row test-section">
340 geraldo 93 
                    <div className="col-md-12 col-sm-12 col-xs-12">
94 
                        <div className="company-title">
95 
                            <div className="section_admin_title_buttons">
96 
                                <h1 className="title">{test.name}</h1>
307 geraldo 97 
                            </div>
306 geraldo 98 
                        </div>
340 geraldo 99 
                        <div
100 
                            dangerouslySetInnerHTML={{ __html: test.text }}
101 
                            className="description company-title"
102 
                        ></div>
103 
                    </div>
104 
                    <div className="col-md-12 col-sm-12 col-xs-12">
105 
                        <div className="company-title">
106 
                            {test.content.map((section, key) => {
107 
                                return <Section
108 
                                    section={section}
109 
                                    key={key}
110 
                                    backendVars={backendVars}
111 
                                    handleAnswer={handleAnswer}
112 
                                />
113 
                            })}
306 geraldo 114 
                        </div>
340 geraldo 115 
                    </div>
360 geraldo 116 
                    <div className="col-md-12 col-sm-12 col-xs-12 text-right">
340 geraldo 117 
                        <div className="company-title">
361 geraldo 118 
                            <button
119 
                                type="button"
120 
                                className="btn btn-danger"
121 
                                onClick={handleConfirmationBoxShow}>
360 geraldo 122 
                                {backendVars.LBL_CANCEL}
123 
                            </button>
361 geraldo 124 
 
125 
                            <ConfirmationBox
126 
                                show={confirmationBoxShow}
127 
                                onClose={handleConfirmationBoxShow}
128 
                                onAccept={handleCancel}
129 
                            />
130 
 
131 
 
132 
                            <button
133 
                                type="buttton"
134 
                                className="btn btn-primary"
135 
                                onClick={() => handleSubmit()}>
360 geraldo 136 
                                {backendVars.LBL_SAVE}
137 
                            </button>
307 geraldo 138 
                        </div>
340 geraldo 139 
                    </div>
306 geraldo 140 
                </div>
141 
            )}
361 geraldo 142 
 
143 
 
306 geraldo 144 
        </div>
145 
    )
146 
}
147 
 
148 
export default Test;