ModalAvaliarRecurso.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, { useState, useEffect } from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CloseModalButton from './CloseModalButton'
import Snackbar from '@material-ui/core/Snackbar';
import { withStyles } from '@material-ui/core/styles';
import { getRequest } from './HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../Components/LoadingSpinner'
import {StyledTextField, useStyles} from './ReportUserForm.js'

const StyledRadio = withStyles({
    root: {
        color: '#666',
        '&$checked': {
            color: '#ff7f00',
        },
    },
    checked: {},
})((props) => <Radio color="default" {...props} />);

export default function ModalAvaliarRecurso(props) {

    const classes = useStyles();

    const [options, setOptions] = useState([])

    const [avaliacao, setAvaliacao] = useState([null, null, null, null])

    const handleRadios = (event, id) => {
        let newValue = avaliacao
        newValue[id - 1] = (event.target.value === "Sim" ? true : false)
        setAvaliacao(newValue)

        if (avaliacao.indexOf(null) === -1) {
            toggleDisableButton(false)
        }
    }

    const [justificativa, setJustificativa] = useState("")
    const handleChangeJustificativa = (e) => {
        setJustificativa(e.target.value)
    }

    const [snackbarCancelar, toggleSnackbarCancelar] = useState(false)
    const handleSnackbarCancelar = (value) => toggleSnackbarCancelar(value)

    const handleCancel = () => {
        handleSnackbarCancelar(true)

        props.handleClose()
    }

    const [buttonDisabled, toggleDisableButton] = useState(true)

    const handleAvaliar = () => {
        let criteria = options
        avaliacao.map((criterium, index) =>
            criteria[index]['accepted'] = !criterium
        )
        props.confirm(criteria, justificativa, avaliacao.filter((item) => item === true).length > 0 ? false : true)
        returnToDefault()
    }

    const returnToDefault = () => {
        setAvaliacao([null, null, null, null])
        setJustificativa('')
        toggleDisableButton(true)
    }

    useEffect(() => {
        getRequest(
            "/questions",
            (data, header) => {
                const cpyOption = []
                const cpyAvaliacao = []
                for (let index = 0; index < data.length; index++) {
                    const option = data[index];
                    cpyOption.push({
                        text: option.description,
                        id: option.id
                    })
                    cpyAvaliacao.push(null)
                }
                setOptions(cpyOption)
                setAvaliacao(cpyAvaliacao)
            },
            (error) => {

            }
        )
    }, [])

    return (
        <>
            <Snackbar open={snackbarCancelar} autoHideDuration={1000} onClose={toggleSnackbarCancelar}
                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
                message="Você cancelou a avaliação deste recurso."
            />
            {
                options ?
                    <StyledModal
                        aria-labelledby="transition-modal-title"
                        aria-describedby="transition-modal-description"
                        open={props.open}
                        centered="true"
                        onClose={props.handleClose}
                        closeAfterTransition
                        BackdropComponent={Backdrop}
                        BackdropProps={{
                            timeout: 500,
                        }}
                    >

                        <Fade in={props.open}>
                            <Container contrast={props.contrast}>
                                <Header contrast={props.contrast}>
                                    <h2>Você está avaliando o recurso
                                        <span style={{ fontWeight: "bolder" }}> {props.title}</span>
                                    </h2>
                                    <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} />
                                </Header>

                                <Content>
                                    <Grid container>
                                        <Grid item xs={12}>
                                            <p>Esse recurso está em conformidade com os critérios? Marque as opções e justifique aquela(s) que não estiverem em conformidade.</p>
                                        </Grid>

                                        <FormControl component="fieldset" style={{ display: "BlockRuby" }} fullWidth={true}>
                                            {
                                                options.map((option) =>
                                                    <Grid item xs={12} key={option.id} style={{ paddingTop: "10px" }}>
                                                        <Grid container>
                                                            <Grid item xs={10}>
                                                                <div style={{ height: "100%", display: "flex", alignItems: "center" }}>
                                                                    <p>{option.text}</p>
                                                                </div>
                                                            </Grid>
                                                            <Grid item xs={2}>
                                                                <RadioGroup row onChange={(e) => { handleRadios(e, option.id) }}>
                                                                    <FormControlLabel className={`${props.contrast}LinkColor`} value={"Sim"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Não" />
                                                                    <FormControlLabel className={`${props.contrast}LinkColor`} value={"Não"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Sim" />
                                                                </RadioGroup>
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                )
                                            }
                                        </FormControl>

                                        <Grid item xs={12}>
                                            <FormControl style={{ width: "100%", height: "100px" }}>
                                                <StyledTextField
                                                    contrast={props.contrast}
                                                    id={"title-form"}
                                                    label={"Justificativa (opcional)"}
                                                    type={"text"}
                                                    value={justificativa}
                                                    InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
                                                    onChange={e => { handleChangeJustificativa(e) }}
                                                    multiline
                                                    fullWidth
                                                />
                                            </FormControl>
                                        </Grid>

                                        <Grid item xs={12}>
                                            <ButtonsDiv>
                                                <ButtonEnviarAvaliar contrast={props.contrast} disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
                                                <GreyButton contrast={props.contrast} onClick={() => { handleCancel() }}>CANCELAR</GreyButton>
                                            </ButtonsDiv>
                                        </Grid>
                                    </Grid>
                                </Content>

                            </Container>
                        </Fade>
                    </StyledModal>
                    :
                    <LoadingSpinner />
            }
        </>
    )
}

const Content = styled.div`
    padding : 0 30px 20px 30px;
    overflow : visible;
    max-width : 100%;
    font-size : 16px;

    .main-content-text {
        font-size : 15px;
        line-height : 22px;
        text-align : justify;
    }

    p {
        text-align : start;
        margin : 0 0 10px;
    }
`

const Header = styled.div`
    display : flex;
    flex-direction : row;
    padding : 20px 20px 20px 20px;
    align-items : center;
    justify-content : space-between;
    color: ${props => props.contrast === "" ? "#666" : "white"} !important;

    @media screen and (min-width : 990px) {
        height : 64px;
    }
    @media screen and (max-width : 989px) {
        max-height : none;
    }

    h2 {
        font-size : 26px;
        font-weight : lighter;

    }
`

const StyledModal = styled(Modal)`
    .djXaxP{
        margin : 0 !important;
    }
    display : flex;
    align-items: center;
    justify-content : center;
    text-align : center;
    padding : 10px !important;
    max-width : none;
    max-height : none;
`

const Container = styled.div`
    box-sizing : border-box;
    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
    background-color: ${props => props.contrast === "" ? "#fff" : "black"};
    border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
    color: ${props => props.contrast === "" ? "#666" : "white"};
    align : center;
    display : flex;
    flex-direction : column;
    min-width : 240px;
    max-height : 90%;
    position : relative;
    border-radius : 4px;
    max-width : 100%;
    overflow-y : scroll;

    p {
        margin : 0 0 10px;
    }
`

const ButtonsDiv = styled.div`
    display : flex;
    max-width : 100%;
    text-align : start;
    align-items : center;
    padding : 0 0 20px 0;

    @media screen and (min-width : 990px) {
        flex-direction : row;
    }
    @media screen and (max-width : 989px) {
        flex-direction : column;
    }
`
const GreyButton = styled(Button)`
    &:hover {
        background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
    }
    max-height : 36px !important;

    background-color : transparent !important;
    color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
    text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
    outline : none !important;
    text-align : center !important;
    font-weight : 600 !important;


`

const ButtonEnviarAvaliar = styled(Button)`
    color : ${props => props.contrast === "" ? `${props.disabled ? `rgba(0,0,0,0.38)` : `rgba(255,255,255,0.87)`}` : `${props.disabled ? `white` : `yellow`}`} !important;
    box-shadow : ${(props) => props.disabled ? "none !important" : "0 2px 5px 0 rgba(0,0,0,.26) !important"};
    font-weight : 600 !important;
    background-color : ${props => props.contrast === "" ? `${props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"}` : "black !important"};
    text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
    border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
    margin-left : 8px !important;
    margin-right : 8px !important;

    .MuiButton-label {
        padding-left : 32px !important;
        padding-right : 32px !important;
    }
`