Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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