Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect } from "react";

import { axios } from '../../../utils';

import Section from "./section/Section";

import Spinner from "../../../shared/loading-spinner/Spinner";

import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";

const Test = (props) => {

    //init states

    const [confirmModalShow, setConfirmModalShow] = useState(true);

    const [success, setSuccess] = useState(false);

    const [error, setError] = useState(false);

    const [draft, setDraft] = useState(false);

    const [page, setPage] = useState(0);

    // get props

    const { backendVars, test, loading, setTest, action } = props;

    /**

 * Send form data

 */

    const handleSubmit = async () => {

        //set states

        setDraft(false);

        setSuccess(false);

        setError(false);

        // check if the form has at least one response

        if (leastOneAnswer()) {

            sendData();

        } else {

            setError(true);

        }

    }

    const sendData = async () => {

        // set form data

        const formData = new FormData();

        formData.append("content", JSON.stringify(test.content));

        formData.append("status",

            formCompleted() ?

                backendVars.STATUS_PENDING :

                backendVars.STATUS_DRAFT);

        await axios.post(action, formData).then((response) => {

            if (response.data.success) {

                formCompleted() ?

                    setSuccess(true) :

                    setDraft(true)

            }

        })

    }

    /**

     * Check if there are options to answer

     * @returns

     */

    const formCompleted = () => {

        let completed = true;

        test.content.map((section) => {

            if (section.type == 'multiple') {

                section.options.map((option) => {

                    //Validate if the answer is empty

                    if (!option.answer || option.answer.length == 0) {

                        completed = false;

                    }

                });

            } else {

                if (!section.answer || section.answer.length == 0) {

                    completed = false;

                }

            }

        })

        return completed;

    }

    /**

     * Check if there is at least one answer

     * @returns

     */

    const leastOneAnswer = () => {

        let answer = false;

        test.content.map((section) => {

            if (section.type == 'multiple') {

                section.options.map((option) => {

                    //Validate if the answer is not empty

                    if (option.answer != "" || option.answer.length != 0) {

                        answer = true;

                    }

                });

            } else {

                if (section.answer || section.answer.length != 0) {

                    answer = true;

                }

            }

        })

        return answer;

    }

    /**

     * Cancel test and send to the list of forms

     * @returns

     */

    const handleGoBack = () => {

        setTest(null);

        setSuccess(false)

    }

    /**

     * componentDidMount

     */

    useEffect(() => {

        setPage(0);

    }, [action]);

    /**

     * Click cancel modal

     * @returns

     */

    const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow);

    /**

     * Click accept modal

     * @returns

     */

     const handleConfirmModalAccept = async () => sendData();

    return (

        <div>

            {loading ? (

                <div className="row">

                    <Spinner />

                </div>

            ) : (

                <div>

                    {!success ? (

                        <div className="row test-section">

                            <ConfirmModal

                                show={confirmModalShow}

                                onClose={handleConfirmModalShow}

                                onAccept={handleConfirmModalAccept}

                            />

                            <div className="col-md-12 col-sm-12 col-xs-12">

                                <div className="company-title">

                                    <div className="section_admin_title_buttons">

                                        <h1 className="title">{test.name}</h1>

                                    </div>

                                </div>

                                <div

                                    dangerouslySetInnerHTML={{ __html: test.text }}

                                    className="description company-title"

                                ></div>

                            </div>

                            {test.content.length <= 0 ? (

                                <div className="col-md-12 col-sm-12 col-xs-12 text-center">

                                    {backendVars.LBL_DATATABLE_SZERORECORDS}

                                </div>

                            ) : (

                                <div className="col-md-12 col-sm-12 col-xs-12">

                                    <div className="company-title">

                                        {test.content.map((section, key) => {

                                            return (

                                                <Section

                                                    section={section}

                                                    index={key}

                                                    page={page}

                                                    setPage={setPage}

                                                    total={test.content.length}

                                                    backendVars={backendVars}

                                                />)

                                        })}

                                    </div>

                                </div>

                            )}

                            {draft &&

                                <div className="col-md-12 col-sm-12 col-xs-12">

                                    <div className="company-title">

                                        <div className="alert alert-success alert-dismissible fade show" role="alert" >

                                            {backendVars.LBL_TEXT_SAVE_CONTINUE_FORM}

                                            <button

                                                type="button"

                                                className="close"

                                                data-dismiss="alert" aria-label="Close"

                                                onClick={() => setDraft(false)}

                                            >

                                                <span aria-hidden="true">&times;</span>

                                            </button>

                                        </div>

                                    </div>

                                </div>

                            }

                            {error &&

                                <div className="col-md-12 col-sm-12 col-xs-12">

                                    <div className="company-title">

                                        <div className="alert alert-danger alert-dismissible fade show" role="alert" >

                                            {backendVars.LBL_ERROR_ANSWER_FORM}

                                            <button

                                                type="button"

                                                className="close"

                                                data-dismiss="alert" aria-label="Close"

                                                onClick={() => setError(false)}

                                            >

                                                <span aria-hidden="true">&times;</span>

                                            </button>

                                        </div>

                                    </div>

                                </div>

                            }

                            <div className="col-md-12 col-sm-12 col-xs-12 text-right">

                                <div className="company-title">

                                    <button

                                        type="button"

                                        className="btn btn-secondary"

                                        onClick={() => handleGoBack()}>

                                        {backendVars.LBL_GO_BACK}

                                    </button>

                                    <button

                                        type="buttton"

                                        className="btn btn-primary"

                                        onClick={() => handleSubmit()}>

                                        {backendVars.LBL_SAVE}

                                    </button>

                                </div>

                            </div>

                        </div>

                    ) : (

                        <div className="row">

                            <div className="company-title text-center">

                                <div className="section_admin_title_buttons">

                                    <h1 className="title">{backendVars.LBL_SUCCESS_SELF_EVALUATION}</h1>

                                </div>

                            </div>

                            <div className="col-md-12 col-sm-12 col-xs-12 text-center">

                                <br />

                                <button

                                    className="btn btn-sm btn-primary"

                                    onClick={() => handleGoBack()}>

                                    {backendVars.LBL_GO_BACK}

                                </button>

                            </div>

                        </div>

                    )}

                </div>

            )}

        </div>

    )

}

export default Test;