Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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