EditarColecaoForm.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, useContext, useEffect} from 'react'
import {Store} from '../Store.js'
import { Button } from '@material-ui/core';
import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import {StyledTextField, useStyles} from './ReportUserForm.js'
import {getRequest, putRequest} from './HelperFunctions/getAxiosConfig'

export default function EditarColecaoForm (props) {
    const {state} = useContext(Store)

    const classes = useStyles();

    function handleSuccessfulGet (data) {
        setColName({key : false, value : data.name})
        setValue( data.privacy === 'public' ? 'pública' : 'privada')
        handleColDescription(data.description)
    }

    useEffect(() => {
        getRequest(`/collections/${props.id}`, handleSuccessfulGet, (error) => {console.log(error)})
    }, [])

    const [value, setValue] = useState(-1);

    /*values are set according to backend complaint id*/
    const options = [
        {value : "pública", text :'Pública (Sua coleção estará disponível para todos)'},
        {value : "privada", text : 'Privada (Somente você poderá visualizar esta coleção)'}
    ]

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    const [colName, setColName] = useState({
        key : false,
        value : "",
    })

    const handleColName = (e) => {
        const userInput = e.target.value

        const flag = userInput.length === 0 ? true : false

        setColName({...colName,
            key : flag,
            value : userInput
        })
    }

    function handleSuccessfulSubmit (data) {
        props.finalize(data.name, data.privacy)
    }
    const formSubmit = (e) => {
        e.preventDefault()

        // {/*if user didn't select either one, default to privada*/}
        const finalRadioValue = value === 'pública' ? 'public' : 'private'
        const finalColName = colName

        if(!(finalColName.key)) {
            let payload = {
                "collection" : {
                    "name" : finalColName.value,
                    "owner_id" : state.currentUser.id,
                    "owner_type" : "User",
                    "privacy" : finalRadioValue
                }
            }

            putRequest(`/collections/${props.id}/`, payload, handleSuccessfulSubmit, (error) =>{console.log(error)})
        }
    }

    const [colDescription, handleColDescription] = useState("")
    const setColDescription = (e) => {handleColDescription(e.target.value)}

    return (
        <form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>

            <StyledTextField
                contrast={props.contrast}
                id = {"col-name"}
                label={"Nome"}
                type = {"text"}
                value = {colName.value}
                onChange = {e => handleColName(e)}
                error = {colName.key}
                InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
                required = {true}
                style={{width:"100%"}}
            />

            <StyledTextField
                contrast={props.contrast}
                id = {"col-description"}
                label={"Descrição"}
                type = {"text"}
                value = {colDescription}
                multiline
                InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
                rows={5}
                onChange = {e => setColDescription(e)}
                style={{width:"100%"}}
            />

            <span style={{fontSize : "12px"}}>Esta coleção é:</span>
            <StyledFormControl contrast={props.contrast} component="fieldset">
                <RadioGroup value={value} onChange={handleChange}>
                    {
                        options.map(option =>
                            <FormControlLabel key={option.value} value={option.value} control={<Radio/>} label={option.text} />
                        )
                    }
                </RadioGroup>
            </StyledFormControl>


            <ButtonsDiv>
                <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
                <ButtonEnviar contrast={props.contrast} type="submit">SALVAR</ButtonEnviar>
            </ButtonsDiv>
        </form>
    );
}

export const ButtonsDiv = styled.div`
    display : flex;
    flex-direction : row;
    justify-content : center;
    align-items : center;
`

export const ButtonCancelar = styled(Button)`
    color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
    text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
    height : 36px !important;
    padding-left : 16px !important;
    padding-right : 16px !important;
    font-weight : 500 !important;
    border-radius : 3px !important;
    background-color: transparent;
    min-width : 88px !important;
    height : 36px !important;
`

export const ButtonEnviar = styled(Button)`
    color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
    background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
    text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
    border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
    font-size: 14px !important;
    font-weight: 500 !important;
    height: 36px !important;
    border-radius: 3px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
    outline : none !important;
    min-width : 88px !important;
    vertical-align : middle !important;
    margin : 6px 8px !important;

    .MuiButton-label {
        padding-right : 16px;
        padding-left : 16px;
    }
`

export const StyledFormControl = styled(FormControl)`
    .MuiFormControlLabel-root {
        color: ${props => props.contrast === "" ? "#666" : "yellow"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
    }
    .MuiIconButton-label {
        color: ${props => props.contrast === "" ? "#666" : "white"};
    }
    display : block !important;

    .PrivateRadioButtonIcon-checked {
        color : orange;
    }

    .MuiTypography-body1 {
        font-size : 14px;
    }
`