Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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