Skip to content
Snippets Groups Projects
Select Git revision
  • Develop
  • master default protected
  • Develop_copy_to_implement_acessibility
  • Develop_copy_to_implement_acessibility_in_admin
  • vinicius_accessibility_from_copy
  • luis_accesibility_before_develop
  • vinicius_accessiblity
  • Fixing_bugs
  • Otimizando_Vinicius
  • Password_recovery_fix
  • fix_admin_bugs_luis
  • luis_gamefication
  • gamificacaoLucas
  • GameficationAdmin
  • fixHomeScreen
  • Fix_perfil
  • fix_remaining_bugs
  • homologa
  • centraliza-axios
  • Gamification
  • v1.2.0
  • v1.1.1
  • v1.1.0
  • V1.0.1
  • V1.0.0
  • V1.0.0-RC
26 results

ReportModal.js

Blame
  • ReportModal.js 5.54 KiB
    /*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, {useContext} 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 SignUpContainer from './SignUpContainerFunction.js'
    import {Store} from '../Store.js'
    import axios from 'axios'
    import {apiUrl} from '../env';
    import CloseIcon from '@material-ui/icons/Close';
    import ReportUserForm from './ReportUserForm.js'
    import ReportRecursoForm from './ReportRecursoForm.js'
    import ReportColecaoForm from './ReportColecaoForm.js'
    
    function CloseModalButton (props) {
        return (
            <StyledCloseModalButton onClick={props.handleClose}>
                <CloseIcon/>
            </StyledCloseModalButton>
        )
    }
    
    export default function ReportModal (props) {
        const {state} = useContext(Store)
    
        const handleSubmit  = (complaint_reason_id, description) => {
            console.log('complaint_reason_id: ', complaint_reason_id)
            console.log('description: ', description)
    
            const payload = {
                "complaint" : {
                    "user_id" : state.currentUser.id,
                    "description" : description,
                    "complainable_id" : props.complainableId,
                    "complainable_type" : props.complainableType,
                    "complaint_reason_id" : complaint_reason_id
                }
            }
            console.log(payload)
    
            axios.post(`${apiUrl}/complaints`,
            {
                "complaint" : {
                    "user_id" : state.currentUser.id,
                    "description" : description,
                    "complainable_id" : props.complainableId,
                    "complainable_type" : props.complainableType,
                    "complaint_reason_id" : complaint_reason_id
                }
            }).then( (response) => {console.log(response)}, (error) => {console.log(error)})
        }
    
        const renderForm = (formType) => {
            switch (formType) {
                case 'colecao':
                    return (
                        <ReportColecaoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
                    )
                case 'recurso':
                        return (
                        <ReportRecursoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
                        )
                    break;
                default:
                    return (
                    <ReportUserForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
                    )
                }
        }
    
        return (
            <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}>
                    <ReportContainer>
                        <Header>
                            <span style={{width:"32px"}}/>
                            <h2>O que está acontecendo?</h2>
                            <CloseModalButton handleClose={props.handleClose}/>
                        </Header>
    
                        <Content>
                            {
                                renderForm(props.form)
                            }
                        </Content>
                    </ReportContainer>
                </Fade>
            </StyledModal>
        )
    }
    
    
    const Content = styled.div`
        padding : 20px 30px;
        overflow : visible;
        max-width : 470px;
    `
    
    const Header = styled.div`
        display : flex;
        flex-direction : row;
        padding : 10px 26px 0 26px;
        align-items : center;
        justify-content : space-between;
        height : 64px;
    
        h2 {
            font-size : 26px;
            font-weight : lighter;
            color : #666
        }
    `
    
    const StyledCloseModalButton = styled(Button)`
        display : inline-block;
        position : relative;
        float : right !important;
        margin-right : -8px !important;
        background : transparent !important;
        min-width: 0 !important;
        width : 40px;
    `
    
    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 ReportContainer = styled.div`
        box-sizing : border-box;
        background-color : white;
        max-width : none;
        align : center;
        display : flex;
        flex-direction : column;
        min-width : 240px;
        max-height : none;
        position : relative;
        padding : 10px;
        border-radius : 4px;
    
        @media screen and (max-width : 899px) {
            width : 100%;
            height : 100%;
        }
    `