Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 474 | Rev 476 | 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);
473 geraldo 10 
    const [error, setError] = useState(false);
469 geraldo 11 
    const [draft, setDraft] = useState(false);
474 geraldo 12 
    const [answers, setAnswers] = useState(false);
395 geraldo 13 
    const [page, setPage] = useState(0);
360 geraldo 14 
 
306 geraldo 15 
    // get props
395 geraldo 16 
    const { backendVars, test, loading, setTest, action } = props;
306 geraldo 17 
 
340 geraldo 18 
    /**
19 
     * Send form data
20 
     */
21 
    const handleSubmit = async () => {
473 geraldo 22 
 
23 
 
24 
        //set states
469 geraldo 25 
        setDraft(false);
26 
        setSuccess(false);
473 geraldo 27 
        setError(false);
475 geraldo 28 
        setAnswers(false);
473 geraldo 29 
 
30 
        // set form data
431 geraldo 31 
        const formData = new FormData();
441 geraldo 32 
        formData.append("content", JSON.stringify(test.content));
471 geraldo 33 
        formData.append("status", validateForm() ? backendVars.STATUS_PENDING : backendVars.STATUS_DRAFT);
469 geraldo 34 
 
473 geraldo 35 
        // check if the form has at least one response
474 geraldo 36 
        answers ?
473 geraldo 37 
            await axios.post(action, formData).then((response) =>
38 
                response.data.success && validateForm() ?
39 
                    setSuccess(true) :
40 
                    setDraft(true)
41 
 
42 
            )
43 
            : setError(true)
44 
 
340 geraldo 45 
    }
345 geraldo 46 
 
382 geraldo 47 
    /**
340 geraldo 48 
     * Check if there are questions to answer
49 
     * @returns
50 
     */
51 
    const validateForm = () => {
52 
        let formValid = true;
474 geraldo 53 
        setAnswers(false);
340 geraldo 54 
        test.content.map((section) => {
55 
            section.questions.map((question) => {
356 geraldo 56 
                //Validate if the answer is empty
473 geraldo 57 
                !question.answer || question.answer.length == 0 ?
58 
                    formValid = false :
474 geraldo 59 
                    setAnswers(true)
473 geraldo 60 
 
336 geraldo 61 
            })
62 
        })
340 geraldo 63 
        return formValid;
306 geraldo 64 
    }
65 
 
340 geraldo 66 
 
361 geraldo 67 
    /**
68 
     * Cancel test and send to the list of forms
69 
     * @returns
365 geraldo 70 
     */
441 geraldo 71 
    const handleGoBack = () => {
72 
        setTest(null);
73 
        setSuccess(false)
74 
    }
357 geraldo 75 
 
395 geraldo 76 
 
77 
    /**
78 
     * componentDidMount
79 
     */
80 
    useEffect(() => {
399 geraldo 81 
        setPage(0);
396 geraldo 82 
    }, [action]);
395 geraldo 83 
 
306 geraldo 84 
    return (
85 
        <div>
86 
            {loading ? (
87 
                <div className="row">
88 
                    <Spinner />
89 
                </div>
90 
            ) : (
382 geraldo 91 
                <div>
92 
                    {!success ? (
93 
                        <div className="row test-section">
384 geraldo 94 
 
382 geraldo 95 
                            <div className="col-md-12 col-sm-12 col-xs-12">
96 
                                <div className="company-title">
97 
                                    <div className="section_admin_title_buttons">
98 
                                        <h1 className="title">{test.name}</h1>
99 
                                    </div>
100 
                                </div>
101 
                                <div
102 
                                    dangerouslySetInnerHTML={{ __html: test.text }}
103 
                                    className="description company-title"
104 
                                ></div>
307 geraldo 105 
                            </div>
382 geraldo 106 
                            {test.content.length <= 0 ? (
107 
                                <div className="col-md-12 col-sm-12 col-xs-12 text-center">
108 
                                    {backendVars.LBL_DATATABLE_SZERORECORDS}
109 
                                </div>
110 
                            ) : (
111 
                                <div className="col-md-12 col-sm-12 col-xs-12">
112 
                                    <div className="company-title">
113 
                                        {test.content.map((section, key) => {
384 geraldo 114 
                                            return (
115 
                                                <Section
116 
                                                    section={section}
399 geraldo 117 
                                                    index={key}
384 geraldo 118 
                                                    page={page}
119 
                                                    setPage={setPage}
120 
                                                    total={test.content.length}
121 
                                                    backendVars={backendVars}
122 
                                                />)
382 geraldo 123 
                                        })}
124 
                                    </div>
384 geraldo 125 
                                </div>
126 
                            )}
469 geraldo 127 
 
128 
                            {draft &&
470 geraldo 129 
                                <div className="col-md-12 col-sm-12 col-xs-12">
130 
                                    <div className="company-title">
131 
                                        <div className="alert alert-success alert-dismissible fade show" role="alert" >
471 geraldo 132 
                                            {backendVars.LBL_TEXT_SAVE_CONTINUE_FORM}
470 geraldo 133 
                                            <button
134 
                                                type="button"
135 
                                                className="close"
136 
                                                data-dismiss="alert" aria-label="Close"
137 
                                                onClick={() => setDraft(false)}
469 geraldo 138 
 
470 geraldo 139 
                                            >
140 
                                                <span aria-hidden="true">&times;</span>
141 
                                            </button>
142 
                                        </div>
469 geraldo 143 
                                    </div>
144 
                                </div>
145 
                            }
473 geraldo 146 
 
147 
                            {error &&
148 
 
149 
                                <div className="col-md-12 col-sm-12 col-xs-12">
150 
                                    <div className="company-title">
151 
                                        <div className="alert alert-danger alert-dismissible fade show" role="alert" >
152 
                                            {backendVars.LBL_ERROR_ANSWER_FORM}
153 
                                            <button
154 
                                                type="button"
155 
                                                className="close"
156 
                                                data-dismiss="alert" aria-label="Close"
157 
                                                onClick={() => setError(false)}
158 
 
159 
                                            >
160 
                                                <span aria-hidden="true">&times;</span>
161 
                                            </button>
162 
                                        </div>
163 
                                    </div>
164 
                                </div>
165 
                            }
166 
 
167 
 
382 geraldo 168 
                            <div className="col-md-12 col-sm-12 col-xs-12 text-right">
169 
                                <div className="company-title">
170 
                                    <button
171 
                                        type="button"
172 
                                        className="btn btn-secondary"
441 geraldo 173 
                                        onClick={() => handleGoBack()}>
174 
                                        {backendVars.LBL_GO_BACK}
382 geraldo 175 
                                    </button>
176 
                                    <button
177 
                                        type="buttton"
178 
                                        className="btn btn-primary"
179 
                                        onClick={() => handleSubmit()}>
180 
                                        {backendVars.LBL_SAVE}
181 
                                    </button>
182 
                                </div>
183 
                            </div>
307 geraldo 184 
                        </div>
382 geraldo 185 
                    ) : (
186 
                        <div className="row">
469 geraldo 187 
                            <div className="company-title text-center">
188 
                                <div className="section_admin_title_buttons">
189 
                                    <h1 className="title">{backendVars.LBL_SUCCESS_SELF_EVALUATION}</h1>
384 geraldo 190 
                                </div>
382 geraldo 191 
                            </div>
384 geraldo 192 
                            <div className="col-md-12 col-sm-12 col-xs-12 text-center">
193 
                                <br />
194 
                                <button
195 
                                    className="btn btn-sm btn-primary"
441 geraldo 196 
                                    onClick={() => handleGoBack()}>
469 geraldo 197 
                                    {backendVars.LBL_GO_BACK}
198 
                                </button>
384 geraldo 199 
                            </div>
382 geraldo 200 
                        </div>
201 
                    )}
306 geraldo 202 
                </div>
203 
            )}
204 
        </div>
205 
    )
206 
}
207 
 
208 
export default Test;