Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
395 geraldo 1 
import React, { useState, useEffect } 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
382 geraldo 9 
    const [success, setSuccess] = useState(false);
395 geraldo 10 
    const [page, setPage] = useState(0);
360 geraldo 11 
 
306 geraldo 12 
    // get props
395 geraldo 13 
    const { backendVars, test, loading, setTest, action } = props;
306 geraldo 14 
 
340 geraldo 15 
    /**
16 
     * Send form data
17 
     */
18 
    const handleSubmit = async () => {
431 geraldo 19 
        //init form data
20 
        const formData = new FormData();
446 geraldo 21 
        let status = validateForm() ? 'p' : 'd';
441 geraldo 22 
        formData.append("content", JSON.stringify(test.content));
446 geraldo 23 
        formData.append("status", status );
449 geraldo 24 
        console.log(test.content);
431 geraldo 25 
        await axios.post(action, formData).then((response) => {
26 
            if (response.data.success && validateForm()) {
27 
                setSuccess(true);
28 
            }
29 
        });
340 geraldo 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] :
379 geraldo 46 
                                question.answer.includes(answer) ?
47 
                                    question.answer = removeOptionMultiple(question.answer, answer) :
48 
                                    question.answer.push(answer)
350 geraldo 49 
                            : question.answer = answer;
345 geraldo 50 
 
340 geraldo 51 
                    }
52 
                })
53 
            }
343 geraldo 54 
        });
340 geraldo 55 
        setTest(test);
56 
    }
378 geraldo 57 
 
382 geraldo 58 
    /**
59 
     * Delete existing option
60 
     * @param {*} arr
61 
     * @param {*} item
62 
     * @returns
63 
     */
64 
    const removeOptionMultiple = (arr, item) => arr.splice(arr.indexOf(item), 1);
380 geraldo 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
382 geraldo 75 
                if (!question.answer || question.answer.length == 0) {
340 geraldo 76 
                    formValid = false;
77 
                }
336 geraldo 78 
            })
79 
        })
340 geraldo 80 
        return formValid;
306 geraldo 81 
    }
82 
 
340 geraldo 83 
 
361 geraldo 84 
    /**
85 
     * Cancel test and send to the list of forms
86 
     * @returns
365 geraldo 87 
     */
441 geraldo 88 
    const handleGoBack = () => {
89 
        setTest(null);
90 
        setSuccess(false)
91 
    }
357 geraldo 92 
 
395 geraldo 93 
 
94 
    /**
95 
     * componentDidMount
96 
     */
97 
    useEffect(() => {
399 geraldo 98 
        setPage(0);
396 geraldo 99 
    }, [action]);
395 geraldo 100 
 
306 geraldo 101 
    return (
102 
        <div>
103 
            {loading ? (
104 
                <div className="row">
105 
                    <Spinner />
106 
                </div>
107 
            ) : (
382 geraldo 108 
                <div>
109 
                    {!success ? (
110 
                        <div className="row test-section">
384 geraldo 111 
 
382 geraldo 112 
                            <div className="col-md-12 col-sm-12 col-xs-12">
113 
                                <div className="company-title">
114 
                                    <div className="section_admin_title_buttons">
115 
                                        <h1 className="title">{test.name}</h1>
116 
                                    </div>
117 
                                </div>
118 
                                <div
119 
                                    dangerouslySetInnerHTML={{ __html: test.text }}
120 
                                    className="description company-title"
121 
                                ></div>
307 geraldo 122 
                            </div>
382 geraldo 123 
                            {test.content.length <= 0 ? (
124 
                                <div className="col-md-12 col-sm-12 col-xs-12 text-center">
125 
                                    {backendVars.LBL_DATATABLE_SZERORECORDS}
126 
                                </div>
127 
                            ) : (
128 
                                <div className="col-md-12 col-sm-12 col-xs-12">
129 
                                    <div className="company-title">
130 
                                        {test.content.map((section, key) => {
384 geraldo 131 
                                            return (
132 
                                                <Section
133 
                                                    section={section}
399 geraldo 134 
                                                    index={key}
384 geraldo 135 
                                                    page={page}
136 
                                                    setPage={setPage}
137 
                                                    total={test.content.length}
138 
                                                    backendVars={backendVars}
139 
                                                    handleAnswer={handleAnswer}
140 
                                                />)
382 geraldo 141 
                                        })}
142 
                                    </div>
384 geraldo 143 
                                </div>
144 
                            )}
382 geraldo 145 
                            <div className="col-md-12 col-sm-12 col-xs-12 text-right">
146 
                                <div className="company-title">
147 
                                    <button
148 
                                        type="button"
149 
                                        className="btn btn-secondary"
441 geraldo 150 
                                        onClick={() => handleGoBack()}>
151 
                                        {backendVars.LBL_GO_BACK}
382 geraldo 152 
                                    </button>
153 
                                    <button
154 
                                        type="buttton"
155 
                                        className="btn btn-primary"
156 
                                        onClick={() => handleSubmit()}>
157 
                                        {backendVars.LBL_SAVE}
158 
                                    </button>
159 
                                </div>
160 
                            </div>
307 geraldo 161 
                        </div>
382 geraldo 162 
                    ) : (
163 
                        <div className="row">
384 geraldo 164 
                            <div class="company-title text-center">
165 
                                <div class="section_admin_title_buttons">
387 geraldo 166 
                                    <h1 class="title">{backendVars.LBL_SUCCESS_SELF_EVALUATION}</h1>
384 geraldo 167 
                                </div>
382 geraldo 168 
                            </div>
384 geraldo 169 
                            <div className="col-md-12 col-sm-12 col-xs-12 text-center">
170 
                                <br />
171 
                                <button
172 
                                    className="btn btn-sm btn-primary"
441 geraldo 173 
                                    onClick={() => handleGoBack()}>
174 
                                        {backendVars.LBL_GO_BACK}
175 
                                    </button>
384 geraldo 176 
                            </div>
382 geraldo 177 
                        </div>
178 
                    )}
306 geraldo 179 
                </div>
180 
            )}
181 
        </div>
182 
    )
183 
}
184 
 
185 
export default Test;