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

PanelEditarPerfil.js

Blame
  • PanelEditarPerfil.js 9.89 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, useState} from 'react'
    import styled from 'styled-components'
    import { Store } from '../../../Store.js';
    import {Link} from 'react-router-dom'
    import Button from '@material-ui/core/Button';
    import IconButton from '@material-ui/core/IconButton';
    import PhotoCamera from '@material-ui/icons/PhotoCamera';
    import Tooltip from '@material-ui/core/Tooltip';
    import FormInput from "../../FormInput.js"
    import ValidateUserInput from '../../FormValidationFunction.js'
    import {apiDomain} from '../../../env.js'
    
    
    export default function TabPanelEditarPerfil (props) {
        const {state, dispatch} = useContext(Store)
        const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
    
        const [formNome, setNome] = useState({
            key : false,
            value : ""
        })
    
        const [formAboutMe, setAboutMe] = useState({
            key : false,
            value : "",
        })
    
        const handleHoverAlterarFoto = () => {
            handleAlterarFoto(!hoverAlterarFoto)
        }
    
        const updateCover = (selectorFiles : FileList) => {
            console.log(selectorFiles)
            console.log(selectorFiles[0].name)
        }
    
        const handleChange = (e, type) => {
            const userInput = e.target.value
            const flag = ValidateUserInput(type, userInput)
    
            if(type === 'username') {
                setNome({...formNome,
                    key : flag,
                    value : userInput
                })
                console.log(formNome)
            }
            else if (type === 'aboutMe') {
                setAboutMe({...formAboutMe,
                    key : flag,
                    value : userInput,
                })
                console.log(formAboutMe)
            }
        }
    
        const limpaCamposForm = () => {
            setNome({...formNome,
                key : false,
                value : ''
            })
    
            setAboutMe({...formAboutMe,
                key : false,
                value : ''
            })
        }
    
        const handleSubmit = (e) => {
            e.preventDefault()
            const info = {nome : formNome.value, aboutMe : formAboutMe.value}
            const flagNome = formNome.key
            const flagAboutMe = formAboutMe.key
    
            if (!(flagNome || flagAboutMe)) {
                console.log(info)
                limpaCamposForm()
            }
        }
    
        return (
            <div className="card-config">
                <h1 style={{fontWeight:"300"}}>Editar Perfil </h1>
                    <div className='content-div'>
                        <div style={{padding:"0", display:"flex", flexDirection:"column"}}>
                            <HeaderContainer>
                                <div style={{position:"relative", height:"100%"}}>
                                    <img src={`${apiDomain}` + state.currentUser.userCover} alt="user cover avatar" style={{width:"100%", height:"100%", objectFit:"cover"}}/>
                                    <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)}/>
                                    <label htmlFor="icon-button-file">
                                        <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
                                            <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
                                                <PhotoCamera />
                                            </IconButton>
                                        </Tooltip>
                                    </label>
                                </div>
                                <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
                                    <img src={`${apiDomain}` + state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
                                    <ChangeAvatarDiv  style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
                                        <span>Alterar Foto</span>
                                    </ChangeAvatarDiv>
                                </ProfileAvatarDiv>
                            </HeaderContainer>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                        </div>
    
                        <div style={{paddingTop:"90px"}}>
                            <div style={{display:"flex", flexDirection:"row"}}>
                                <form onSubmit={e => handleSubmit(e)}>
                                    <FormInput
                                        inputType={"text"}
                                        name={"Nome Completo"}
                                        value={formNome.value}
                                        placeholder={"Nome Completo"}
                                        handleChange={e => handleChange(e, 'username')}
                                        required={true}
                                        error={formNome.key}
                                    />
                                    <FormInput
                                        inputType={"text"}
                                        name={"Sobre Mim"}
                                        value={formAboutMe.value}
                                        multi = {true}
                                        rows="3"
                                        rowsMax = "3"
                                        error={formAboutMe.key}
                                        placeholder={"Sobre Mim"}
                                        handleChange={e => handleChange(e, 'aboutMe')}
                                        required={false}
                                        help = {formAboutMe.value.length + '/160'}
                                    />
                                </form>
                            </div>
                            <ButtonsDiv>
                                <Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link>
                                <ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar>
                            </ButtonsDiv>
                        </div>
                    </div >
            </div>
        )
    }
    
    const ButtonConfirmar = styled(Button)`
        background-color : #00bcd4 !important;
        color : #fff !important;
        font-family : 'Roboto',sans-serif !important;
        font-size : 14px !important;
        font-weight : 500 !important;
        padding-left : 16px !important;
        padding-right : 16px !important;
        outline : none !important;
        margin : 6px 8px !important;
        white-space : nowrap !important;
        text-transform : uppercase !important;
        font-weight : bold !important;
        font-size : 14px !important;
        font-style : inherit !important;
        font-variant : inherit !important;
        font-family : inherit !important;
        text-decoration : none !important;
        overflow : hidden !important;
        display : inline-block !important;
        position : relative !important;
        cursor : pointer !important;
        min-height : 36px !important;
        min-width : 88px !important;
        line-height : 36px !important;
        vertical-align : middle !important;
        align-items : center !important;
        text-align : center !important;
        border-radius : 3px !important;
        box-sizing : border-box !important;
        border : 0 !important;
    `
    
    export const ButtonCancelar = styled(Button)`
        height : 36px !important;
        padding-left : 16px !important;
        padding-right : 16px !important;
        font-weight : bold !important;
        border-radius : 3px !important;
        outline : none !important;
        text-transform : uppercase !important;
        font-weight : 500 !important;
        font-size : 14px !important;
        font-style : inherit !important;
        font-variant : inherit !important;
        font-family : inherit !important;
        text-decoration : none !important;
        overflow : hidden !important;
        display : inline-block !important;
        position : relative !important;
        cursor : pointer !important;
        min-height : 36px !important;
        min-width : 88px !important;
        line-height : 36px !important;
        vertical-align : middle !important;
        align-items : center !important;
        text-align : center !important;
        border-radius : 3px !important;
        box-sizing : border-box !important;
        user-select : none !important;
        border : 0 !important;
        padding : 0 6px !important;
        margin : 6px 8px !important;
        :hover{
          background-color : #f1f1f1 !important;
        }
    
    `
    
    const ButtonsDiv = styled.div`
        text-align : right;
        margin-top : 80px;
    `
    
    const ChangeAvatarDiv = styled.div`
        height : 40px;
        position: absolute;
        width : 100%;
        bottom : 0;
        display : flex;
        background-color : #000;
        color : #fff;
        justify-content : center;
    `
    
    const ProfileAvatarDiv = styled.div`
        bottom : -10px;
        left : 120px !important;
        border-radius : 100%;
        position : absolute;
        width : 100px !important;
        height : 100px !important;
        overflow : hidden;
        border : 8px solid #fff;
        outline : 0;
        cursor : pointer;
        z-index : 10;
        background-color : #fff !important;
    `
    
    const HeaderContainer = styled.div`
        background-color : #afeeee;
        position : relative;
        height : 150px;
        border-radius : 8px;
    `