File to Edit a language

src/Admin/Components/Components/Inputs/EditLanguage.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 } from 'react';
+//imports material ui components
+import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardAction from '@material-ui/core/CardActions';
+import ListRoundedIcon from '@material-ui/icons/ListRounded';
+import SaveIcon from '@material-ui/icons/Save';
+//imports local files
+import SnackBar from '../../../../Components/SnackbarComponent';
+//imports services 
+import { Edit } from '../../../Services';
+import { EditFilter, Url } from '../../../Filters';
+
+const EditLanguage = (props) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const id = props.editInfo.id
+    const [name, setName] = useState(props.editInfo.name)
+    const [code, setCode] = useState(props.editInfo.code)
+
+    const [errorInName, setErrorInName] = useState({
+        error: false,
+        message: ''
+    })
+
+    const [errorInCode, setErrorInCode] = useState({
+        error: false,
+        message: ''
+    })
+
+    const [snackInfo, setSnackInfo] = useState({
+        message: '',
+        icon: '',
+        open: false,
+        color: '',
+    })
+
+    const NameHandler = (e) => {
+        if (errorInName.error) {
+            setErrorInName({
+                error: false,
+                message: ''
+            })
+        }
+        setName(e.target.value)
+    }
+
+    const CodeHandler = (e) => {
+        if (errorInCode.error) {
+            setErrorInCode({
+                error: false,
+                message: ''
+            })
+        }
+        setCode(e.target.value)
+    }
+
+
+    //Verify if the string is empty
+    const isEmpty = (text) => {
+        return text.length === 0 ? true : false;
+    }
+
+    // Fields
+    const fields = [
+        {
+            label: 'ID',
+            value: id,
+            default: true,
+            type: 'text'
+        },
+        {
+            label: 'Nome',
+            value: name,
+            error: errorInName.error,
+            errorMessage: errorInName.message,
+            onChange: (event) => NameHandler(event),
+            default: false,
+            type: 'text',
+        },
+        {
+            label: 'Código',
+            value: code,
+            error: errorInCode.error,
+            errorMessage: errorInCode.message,
+            onChange: (event) => CodeHandler(event),
+            default: false,
+            type: 'text'
+        },
+    ]
+
+    // Handle snack infos
+    const HandleSnack = (message, state, icon, color) => {
+        setSnackInfo({
+            message: message,
+            icon: icon,
+            open: state,
+            color: color
+        })
+    }
+
+    const onSubmit = async () => {
+        setIsLoading(true)
+        if (!isEmpty(name) && !isEmpty(code)) {
+            const api = EditFilter('languages', id)
+            const body = {
+                "language": {
+                    'name': name,
+                    'code': code,
+                }
+            }
+            Edit(api, body).then(res => {
+                if (res) {
+                    HandleSnack('A linguagem foi alterada com sucesso', true, 'success', '#228B22')
+                } else {
+                    HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+                }
+                setIsLoading(false)
+            })
+        }
+        else {
+            HandleSnack('Você precisa preencher algumas informações obrigatórias', true, 'warning', '#FFC125')
+            if (isEmpty(name)) {
+                setErrorInName({
+                    error: true,
+                    message: 'Este campo precisa ser preenchido'
+                })
+            }
+            if (isEmpty(code)) {
+                setErrorInCode({
+                    error: true,
+                    message: 'Este campo precisa ser preenchido'
+                })
+            }
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <Card variant='outlined'>
+            <SnackBar
+                severity={snackInfo.icon}
+                text={snackInfo.message}
+                snackbarOpen={snackInfo.open}
+                color={snackInfo.color}
+                handleClose={() => setSnackInfo({
+                    message: '',
+                    icon: '',
+                    open: false,
+                    color: ''
+                })}
+            />
+            <CardContent>
+                <Grid container direction='row' justify='space-between'>
+                    <Typography variant='h4'>
+                        {name}
+                    </Typography>
+                    <Button
+                        onClick={props.BackToList}
+                        startIcon={<ListRoundedIcon />}
+                        variant='outlined'
+                        color='primary'
+                    >
+                        Listar
+                    </Button>
+                </Grid>
+
+                <div style={{ height: '1em' }}></div>
+
+                <form style={{ display: 'flex', flexDirection: 'column' }}>
+                    {fields.map((field, index) => (
+                        <TextField
+                            key={index}
+                            required={field.required}
+                            disabled={field.default}
+                            error={field.error}
+                            helperText={field.error ? field.errorMessage : ''}
+                            style={{ width: '250px', marginBottom: '1em' }}
+                            label={field.label}
+                            value={field.value}
+                            onChange={field.onChange}
+                            type="search"
+                            multiline={true}
+                        />
+                    ))}
+                </form>
+            </CardContent>
+            <CardAction>
+                <Button
+                    onClick={() => {
+                        onSubmit();
+                        setTimeout(function () { props.UpdateList(Url('languages', '', '0', 'DESC')) }, 3000)
+                    }}
+                    variant="contained"
+                    color="primary"
+                    disabled={isLoading}
+                    startIcon={isLoading ? null : <SaveIcon />}
+                >
+                    {
+                        isLoading ? <CircularProgress size={24} /> : 'Salvar'
+                    }
+                </Button>
+            </CardAction>
+        </Card>
+    )
+}
+
+export default EditLanguage;
\ No newline at end of file