Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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