From 6a3f93009476ecd3e1a3598d20bec1f2cf44260b Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Mon, 27 Sep 2021 19:45:13 -0300 Subject: [PATCH] Implementing contrast in admin --- .../Components/Inputs/CreateInstitution.js | 16 ++++++++------- .../Components/Inputs/CreateLanguage.js | 16 ++++++++------- .../Components/Inputs/CreateQuestion.js | 14 +++++++------ .../Components/Inputs/CreateRating.js | 16 ++++++++------- .../Components/Inputs/CreateRole.js | 16 ++++++++------- .../Components/Inputs/EditCollection.js | 16 ++++++++------- .../Components/Inputs/EditLanguage.js | 20 ++++++++++--------- .../Components/Components/Inputs/EditRoles.js | 20 ++++++++++--------- .../Components/Inputs/IntitutionsInputs.js | 19 ++++++++++-------- .../Components/Inputs/NoteVarInputs.js | 18 +++++++++-------- src/Components/FormInput.js | 2 ++ 11 files changed, 98 insertions(+), 75 deletions(-) diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js index 9fb01a1d..2ff90b68 100644 --- a/src/Admin/Components/Components/Inputs/CreateInstitution.js +++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js @@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react'; //imports material ui componets import CardContent from "@material-ui/core/CardContent"; import CardAction from '@material-ui/core/CardActions'; -import { Typography, TextField, Button, Grid } from '@material-ui/core'; +import { Typography, Button, Grid } from '@material-ui/core'; import CircularProgress from '@material-ui/core/CircularProgress'; import AddRoundedIcon from '@material-ui/icons/AddRounded'; import ListRoundedIcon from '@material-ui/icons/ListRounded'; @@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent'; import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig' import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //router import { Link } from 'react-router-dom'; @@ -225,17 +226,18 @@ const CreateInstitution = (props) => { <form style={{ display: 'flex', flexDirection: 'column' }}> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} required={field.required} error={field.error} - helperText={field.error ? field.errorMessage : ''} + help={field.error ? field.errorMessage : ''} style={{ width: '250px', marginBottom: '1em' }} - label={field.label} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type="search" - multiline={true} + handleChange={field.onChange} + inputType="search" + multi={true} /> ))} </form> diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js index 22fedb52..45764323 100644 --- a/src/Admin/Components/Components/Inputs/CreateLanguage.js +++ b/src/Admin/Components/Components/Inputs/CreateLanguage.js @@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react'; //imports material ui componets import CardContent from "@material-ui/core/CardContent"; import CardAction from '@material-ui/core/CardActions'; -import { Typography, TextField, Button, Grid } from '@material-ui/core'; +import { Typography, Button, Grid } from '@material-ui/core'; import CircularProgress from '@material-ui/core/CircularProgress'; import AddRoundedIcon from '@material-ui/icons/AddRounded'; import ListRoundedIcon from '@material-ui/icons/ListRounded'; @@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent'; import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig' import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //router import { Link } from 'react-router-dom'; @@ -202,17 +203,18 @@ const CreateLanguage = (props) => { <form style={{ display: 'flex', flexDirection: 'column' }}> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} required={field.required} error={field.error} - helperText={field.error ? field.errorMessage : ''} + help={field.error ? field.errorMessage : ''} style={{ width: '250px', marginBottom: '1em' }} - label={field.label} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type="search" - multiline={true} + handleChange={field.onChange} + inputType="search" + multi={true} /> ))} </form> diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js index 30de7158..6bd5b688 100644 --- a/src/Admin/Components/Components/Inputs/CreateQuestion.js +++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js @@ -30,6 +30,7 @@ import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConf import SnackBar from '../../../../Components/SnackbarComponent'; import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //router import { Link } from 'react-router-dom'; @@ -207,17 +208,18 @@ const CreateQuestion = (props) => { ))} </TextField> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} required={field.required} error={field.error} - helperText={field.error ? field.errorMessage : ''} + help={field.error ? field.errorMessage : ''} style={{ width: '250px', marginBottom: '1em' }} - label={field.label} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type="search" - multiline={true} + handleChange={field.onChange} + inputType="search" + multi={true} /> ))} </> diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js index e0c2b7de..0b068c76 100644 --- a/src/Admin/Components/Components/Inputs/CreateRating.js +++ b/src/Admin/Components/Components/Inputs/CreateRating.js @@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react'; //imports material ui componets import CardContent from "@material-ui/core/CardContent"; import CardAction from '@material-ui/core/CardActions'; -import { Typography, TextField, Button, Grid } from '@material-ui/core'; +import { Typography, Button, Grid } from '@material-ui/core'; import CircularProgress from '@material-ui/core/CircularProgress'; import AddRoundedIcon from '@material-ui/icons/AddRounded'; import ListRoundedIcon from '@material-ui/icons/ListRounded'; @@ -28,6 +28,7 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded'; import SnackBar from '../../../../Components/SnackbarComponent'; import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //imports services import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig' //router @@ -199,17 +200,18 @@ const CreateRating = (props) => { <form style={{ display: 'flex', flexDirection: 'column' }}> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} required={field.required} error={field.error} - helperText={field.error ? field.errorMessage : ''} + help={field.error ? field.errorMessage : ''} style={{ width: '250px', marginBottom: '1em' }} - label={field.label} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type="search" - multiline={true} + handleChange={field.onChange} + inputType="search" + multi={true} /> ))} </form> diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js index 61a54e8f..8af5f8ad 100644 --- a/src/Admin/Components/Components/Inputs/CreateRole.js +++ b/src/Admin/Components/Components/Inputs/CreateRole.js @@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react'; //imports material ui componets import CardContent from "@material-ui/core/CardContent"; import CardAction from '@material-ui/core/CardActions'; -import { Typography, TextField, Button, Grid } from '@material-ui/core'; +import { Typography, Button, Grid } from '@material-ui/core'; import CircularProgress from '@material-ui/core/CircularProgress'; import AddRoundedIcon from '@material-ui/icons/AddRounded'; import ListRoundedIcon from '@material-ui/icons/ListRounded'; @@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent'; import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig' import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //router import { Link } from 'react-router-dom'; @@ -192,17 +193,18 @@ const CreateRole = (props) => { <form style={{ display: 'flex', flexDirection: 'column' }}> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} required={field.required} error={field.error} - helperText={field.error ? field.errorMessage : ''} + help={field.error ? field.errorMessage : ''} style={{ width: '250px', marginBottom: '1em' }} - label={field.label} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type="search" - multiline={true} + handleChange={field.onChange} + inputType="search" + multi={true} /> ))} </form> diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js index 86a8f980..26999ce2 100644 --- a/src/Admin/Components/Components/Inputs/EditCollection.js +++ b/src/Admin/Components/Components/Inputs/EditCollection.js @@ -32,6 +32,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner'; import { EditFilter, GetAData } from '../../../Filters'; import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //routers import { Link } from 'react-router-dom'; import ClassicEditor from "@ckeditor/ckeditor5-build-classic" @@ -209,18 +210,19 @@ const EditCollection = () => { <form style={{ display: 'flex', flexDirection: 'column' }}> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} required={field.required} - disabled={field.default} + disableField={field.default} error={field.error} - helperText={field.error ? field.errorMessage : ''} + help={field.error ? field.errorMessage : ''} style={{ marginBottom: '1em' }} - label={field.label} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type="search" - multiline={true} + handleChange={field.onChange} + inputType="search" + multi={true} /> ))} <TextField diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js index 84963ec5..d3d48eef 100644 --- a/src/Admin/Components/Components/Inputs/EditLanguage.js +++ b/src/Admin/Components/Components/Inputs/EditLanguage.js @@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useState, useEffect, useContext } from 'react'; //imports material ui components -import { Typography, TextField, Button, Grid, ButtonGroup } from '@material-ui/core'; +import { Typography, Button, Grid, ButtonGroup } from '@material-ui/core'; import CircularProgress from '@material-ui/core/CircularProgress'; import CardContent from "@material-ui/core/CardContent"; import CardAction from '@material-ui/core/CardActions'; @@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent'; import LoadingSpinner from '../../../../Components/LoadingSpinner'; import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //imports services import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig' import { EditFilter, GetAData, DeleteFilter } from '../../../Filters'; @@ -261,18 +262,19 @@ const EditLanguage = () => { <form style={{ display: 'flex', flexDirection: 'column' }}> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} required={field.required} - disabled={field.default} + disableField={field.default} error={field.error} - helperText={field.error ? field.errorMessage : ''} - style={{ width: '250px', marginBottom: '1em' }} - label={field.label} + help={field.error ? field.errorMessage : ''} + style={{ marginBottom: '1em' }} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type="search" - multiline={true} + handleChange={field.onChange} + inputType="search" + multi={true} /> ))} </form> diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js index b1d4114e..be2e1688 100644 --- a/src/Admin/Components/Components/Inputs/EditRoles.js +++ b/src/Admin/Components/Components/Inputs/EditRoles.js @@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useState, useEffect, useContext } from 'react'; //imports material ui components -import { Typography, TextField, Button, Grid } from '@material-ui/core'; +import { Typography, Button, Grid } from '@material-ui/core'; import CircularProgress from '@material-ui/core/CircularProgress'; import CardContent from "@material-ui/core/CardContent"; import CardAction from '@material-ui/core/CardActions'; @@ -31,6 +31,7 @@ import SnackBar from '../../../../Components/SnackbarComponent'; import LoadingSpinner from '../../../../Components/LoadingSpinner'; import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //imports services import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig' import { EditFilter, GetAData, DeleteFilter } from '../../../Filters'; @@ -255,18 +256,19 @@ const EditLanguage = () => { <form style={{ display: 'flex', flexDirection: 'column' }}> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} required={field.required} - disabled={field.default} + disableField={field.default} error={field.error} - helperText={field.error ? field.errorMessage : ''} - style={{ width: '250px', marginBottom: '1em' }} - label={field.label} + help={field.error ? field.errorMessage : ''} + style={{ marginBottom: '1em' }} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type="search" - multiline={true} + handleChange={field.onChange} + inputType="search" + multi={true} /> ))} </form> diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js index 078e4345..a94c6f70 100644 --- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js +++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js @@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useState, useEffect, useContext } from 'react'; //imports material ui components -import { TextField, Button } from '@material-ui/core'; +import { Button } from '@material-ui/core'; import CircularProgress from '@material-ui/core/CircularProgress'; import SaveIcon from '@material-ui/icons/Save'; import CardContent from "@material-ui/core/CardContent"; @@ -30,6 +30,7 @@ import SnackBar from '../../../../Components/SnackbarComponent'; import LoadingSpinner from '../../../../Components/LoadingSpinner'; import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //imports services import { putRequest, getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig' import { EditFilter, GetAData } from '../../../Filters'; @@ -263,17 +264,19 @@ const EditInstitution = () => { <div> <form style={{ display: 'flex', flexDirection: 'column' }}> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} required={field.required} + disableField={field.default} error={field.error} - helperText={field.error ? field.errorMessage : ''} - style={{ width: '250px', marginBottom: '1em' }} - label={field.label} + help={field.error ? field.errorMessage : ''} + style={{ marginBottom: '1em' }} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type="search" - multiline={true} + handleChange={field.onChange} + inputType="search" + multi={true} /> ))} </form> diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js index 2437fe36..1f608305 100644 --- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js +++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js @@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useState, useEffect, useContext } from 'react'; //imports material ui components -import { TextField, Button } from '@material-ui/core'; +import { Button } from '@material-ui/core'; import CircularProgress from '@material-ui/core/CircularProgress'; import SaveIcon from '@material-ui/icons/Save'; import CardContent from "@material-ui/core/CardContent"; @@ -30,6 +30,7 @@ import SnackBar from '../../../../Components/SnackbarComponent'; import LoadingSpinner from '../../../../Components/LoadingSpinner'; import { StyledCard } from "../../../Components/Styles/DataCard"; import { Store } from 'Store' +import FormInput from "Components/FormInput.js" //imports services import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig' import { EditFilter, GetAData } from '../../../Filters'; @@ -266,17 +267,18 @@ const NoteVarInputs = () => { <form style={{ display: 'flex', flexDirection: 'column' }}> {fields.map((field, index) => ( - <TextField + <FormInput + contrast={state.contrast} key={index} + disableField={field.default} error={field.error} - disabled={field.default} - helperText={field.error ? field.errorMessage : ''} + help={field.error ? field.errorMessage : ''} style={{ width: '250px', marginBottom: '1em' }} - label={field.label} + placeholder={field.label} value={field.value} - onChange={field.onChange} - type={field.type} - multiline={true} + handleChange={field.onChange} + inputType={field.type} + multi={true} /> ))} </form> diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js index 8ebbbe5f..45e38a05 100644 --- a/src/Components/FormInput.js +++ b/src/Components/FormInput.js @@ -113,7 +113,9 @@ export default function FormInput(props) { return ( <StyledTextField contrast={props.contrast} + key={props.key} label={props.placeholder} + disabled={props.disableField} margin="normal" id={props.id} name={props.name} -- GitLab