diff --git a/src/Admin/Components/Components/AdminTemplate.js b/src/Admin/Components/Components/AdminTemplate.js
index e0affe5c4b124d0f81166da51626efac58575d62..57fc2a2802bfb3c005b421d670465c36e352d1d8 100644
--- a/src/Admin/Components/Components/AdminTemplate.js
+++ b/src/Admin/Components/Components/AdminTemplate.js
@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useContext } from "react";
import { Store } from 'Store'
+import styled from 'styled-components'
const Unauthorized = React.lazy(() => import('./Unauthorized'));
const AppBarAdmin = React.lazy(() => import('./AppBar'));
@@ -33,10 +34,10 @@ const AdminTemplate = (props) => {
const roles = [...state.currentUser.roles];
for (let i = 0; i < roles.length; i++)
if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
+ canUserEdit = true;
}
else {
- canUserEdit = false;
+ canUserEdit = false;
}
return canUserEdit;
@@ -44,21 +45,26 @@ const AdminTemplate = (props) => {
if (CheckUserPermission())
return (
- <div style={{ backgroundColor: " #D3D3D3" }}>
- <AppBarAdmin />
- <div style={{ padding: "2em" }}>
+ <StyledDiv contrast={state.contrast}>
+ <AppBarAdmin contrast={state.contrast}/>
+ <div style={{margin: "20px"}}>
{props.inner}
</div>
- </div>
+ </StyledDiv>
)
else
return (
- <div style={{ backgroundColor: " #D3D3D3" }}>
- <div style={{ padding: "2em" }}>
- <Unauthorized />
+ <StyledDiv contrast={state.contrast}>
+ <div>
+ <Unauthorized contrast={state.contrast}/>
</div>
- </div>
+ </StyledDiv>
)
}
+const StyledDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+
export default AdminTemplate;
diff --git a/src/Admin/Components/Components/AlertDialog.js b/src/Admin/Components/Components/AlertDialog.js
index 14861d979b42a3a78cdeeb07ed501e4615dc4e43..d2a252ad607d53371d9d84fed2e66e83d3e366eb 100644
--- a/src/Admin/Components/Components/AlertDialog.js
+++ b/src/Admin/Components/Components/AlertDialog.js
@@ -15,15 +15,20 @@ 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 from 'react';
-import Button from '@material-ui/core/Button';
+import React, { useContext } from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
+import styled from 'styled-components';
+import { Store } from 'Store'
+import StyledButton from './Button';
const AlertDialog = ( props ) => {
+
+ const { state } = useContext(Store)
+
return (
<div>
<Dialog
@@ -32,25 +37,33 @@ const AlertDialog = ( props ) => {
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
- <DialogTitle id="alert-dialog-title">
- Deseja deletar o dado de id: {props.deleteItem.id}
- </DialogTitle>
- <DialogContent>
- <DialogContentText id="alert-dialog-description">
- Se você deletar essa dado, todas as informações desse dado serão deletas para sempre
- </DialogContentText>
- </DialogContent>
- <DialogActions>
- <Button onClick={props.HandleClose} color="primary">
- Não deletar
- </Button>
- <Button onClick={props.OnDelete} color="secondary" autoFocus>
- Deletar
- </Button>
- </DialogActions>
+ <StyledDiv contrast={state.contrast}>
+ <DialogTitle id="alert-dialog-title">
+ Deseja deletar o dado de id: {props.deleteItem.id}
+ </DialogTitle>
+ <DialogContent>
+ <DialogContentText id="alert-dialog-description">
+ Se você deletar essa dado, todas as informações desse dado serão deletas para sempre
+ </DialogContentText>
+ </DialogContent>
+ <DialogActions>
+ <StyledButton onClick={props.HandleClose} color="primary" text="Não deletar"/>
+ <StyledButton onClick={props.OnDelete} color="secondary" autoFocus text="Deletar"/>
+ </DialogActions>
+ </StyledDiv>
</Dialog>
</div>
);
}
+const StyledDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+
+ #alert-dialog-description {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+`
+
export default AlertDialog;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/AppBar.js b/src/Admin/Components/Components/AppBar.js
index b596c35f59484e8754b79c68d787feced4011913..2531b3e218be4834aac49b3e246cd77121247010 100644
--- a/src/Admin/Components/Components/AppBar.js
+++ b/src/Admin/Components/Components/AppBar.js
@@ -6,68 +6,99 @@ import AppBar from "@material-ui/core/AppBar";
import { Tab, Tabs } from "@material-ui/core";
import { Link } from 'react-router-dom'
import { TabsItens } from '../../Pages/AdminLabelTabs/LabelTabs'
+import styled from "styled-components";
function TabPanel(props) {
- const { children, value, index, ...other } = props;
+ const { children, value, index, ...other } = props;
- return (
- <div
- role="tabpanel"
- hidden={value !== index}
- id={`nav-tabpanel-${index}`}
- aria-labelledby={`nav-tab-${index}`}
- {...other}
- >
- {value === index && (
- <Box p={3}>
- <Typography>{children}</Typography>
- </Box>
- )}
- </div>
- );
+ return (
+ <div
+ role="tabpanel"
+ hidden={value !== index}
+ id={`nav-tabpanel-${index}`}
+ aria-labelledby={`nav-tab-${index}`}
+ {...other}
+ >
+ {value === index && (
+ <Box p={3}>
+ <Typography>{children}</Typography>
+ </Box>
+ )}
+ </div>
+ );
}
TabPanel.propTypes = {
- children: PropTypes.node,
- index: PropTypes.any.isRequired,
- value: PropTypes.any.isRequired,
+ children: PropTypes.node,
+ index: PropTypes.any.isRequired,
+ value: PropTypes.any.isRequired,
};
function a11yProps(index) {
- return {
- id: `nav-tab-${index}`,
- "aria-controls": `nav-tabpanel-${index}`,
- };
+ return {
+ id: `nav-tab-${index}`,
+ "aria-controls": `nav-tabpanel-${index}`,
+ };
}
-export default function AppBarAdmin() {
- const [value, setValue] = React.useState(0);
+export default function AppBarAdmin(props) {
+ const [value, setValue] = React.useState(0);
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
- return (
- <AppBar position="sticky" color="default">
- <Tabs
- variant="scrollable"
- scrollButtons="on"
- value={value}
- onChange={handleChange}
- aria-label="nav tabs example"
- >
- {
- TabsItens.map((label, index) => (
- <Tab
- key={label.href}
- label={label.label}
- to={label.href}
- icon={label.icon}
- component={Link}
- {...a11yProps(index)}
- />
- ))
- }
- </Tabs>
- </AppBar>
- )
-}
\ No newline at end of file
+ return (
+ <StyledAppBar position="sticky" contrast={props.contrast}>
+ <StyledTabs
+ variant="scrollable"
+ scrollButtons="on"
+ value={value}
+ onChange={handleChange}
+ aria-label="nav tabs example"
+ TabIndicatorProps={{style: {background: props.contrast === "" ? "orange" : "yellow"}}}
+ >
+ {
+ TabsItens.map((label, index) => (
+ <StyledTab
+ contrast={props.contrast}
+ key={label.href}
+ label={label.label}
+ to={label.href}
+ icon={label.icon}
+ component={Link}
+ {...a11yProps(index)}
+ />
+ ))
+ }
+ </StyledTabs>
+ </StyledAppBar>
+ )
+}
+
+const StyledTab = styled(Tab)`
+ svg {
+ fill: ${props => props.contrast === "" ? "" : "white"} !important;
+ }
+
+ color: ${props => props.contrast === "" ? "" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "" : "underline yellow"} !important;
+`
+
+const StyledAppBar = styled(AppBar)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border-bottom: 1px solid ${props => props.contrast === "" ? "black" : "white"} !important;
+ box-shadow: none !important;
+`
+
+const StyledTabs = styled(Tabs)`
+ /*workaround because scrollButtons = on does not work*/
+ .MuiTabScrollButton-root.Mui-disabled {
+ opacity: 1 !important;
+ }
+
+ .MuiButtonBase-root.Mui-disabled {
+ cursor: pointer !important;
+ pointer-events: auto !important;
+ }
+`
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Button.js b/src/Admin/Components/Components/Button.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd2aedd0ccdf5932db7fe6f85e92b69027174b8c
--- /dev/null
+++ b/src/Admin/Components/Components/Button.js
@@ -0,0 +1,56 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import { Store } from 'Store';
+
+
+function ButtonComponent({ text, color, icon, variant, onClick, disabled }) {
+ const { state } = useContext(Store);
+
+ if (state.contrast === "") {
+ return (
+ <Button
+ startIcon={icon}
+ color={color}
+ variant={variant}
+ onClick={onClick}
+ disabled={disabled}
+ style={{margin: "5px"}}
+ >
+ {text}
+ </Button>
+ )
+ }
+ else {
+ return (
+ <ContrastButton
+ startIcon={icon}
+ onClick={onClick}
+ variant={variant}
+ disabled={disabled}
+ >
+ {text}
+ </ContrastButton>
+ );
+ }
+}
+
+const ContrastButton = styled(Button)`
+ background-color: black !important;
+ border: 1px solid white !important;
+ color: yellow !important;
+ text-decoration: underline !important;
+ :hover {
+ background-color: rgba(255,255,0,0.24) !important;
+ }
+ :disabled {
+ color: white !important;
+ text-decoration: none !important;
+ }
+ svg {
+ fill: white !important;
+ }
+ margin: 5px !important;
+`
+
+export default ButtonComponent
diff --git a/src/Admin/Components/Components/DataCards/ActivityCard.js b/src/Admin/Components/Components/DataCards/ActivityCard.js
index 915df2f99fdb31c17741d362555721f14a3753f9..c93bb1fc93c2a2c9498a6c2206ce16661057e7da 100644
--- a/src/Admin/Components/Components/DataCards/ActivityCard.js
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -16,23 +16,27 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from "@material-ui/core/Grid";
//imports from local files
import { GetAData } from "../../../Filters";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
import { Link } from 'react-router-dom'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const ActivityCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -102,39 +106,38 @@ const ActivityCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.id}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/activities`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/CollectionCard.js b/src/Admin/Components/Components/DataCards/CollectionCard.js
index a4ef28da2b30bdff799545b79d7936b5415e19ca..7929d26077128ac44887bd8f579886ff8c5c090b 100644
--- a/src/Admin/Components/Components/DataCards/CollectionCard.js
+++ b/src/Admin/Components/Components/DataCards/CollectionCard.js
@@ -16,15 +16,13 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from '@material-ui/core/Grid';
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
@@ -35,8 +33,13 @@ import { Link, useHistory } from 'react-router-dom'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
+import StyledButton from '../Button';
+import { Store } from 'Store'
const CollectionCard = () => {
+
+ const { state } = useContext(Store);
+
let history = useHistory()
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
@@ -148,7 +151,7 @@ const CollectionCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -164,54 +167,51 @@ const CollectionCard = () => {
<CardContent>
<Grid xs={12} justify="space-between" alignItems="center" container>
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/Collections`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/EditCollection?collection=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
+ text="Deletar"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
index b8ae952c3dabc4ff4c7fd73ceb45a6d3123972b1..45208abb8704b3718d57ae0a1186b2115249555c 100644
--- a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
+++ b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
@@ -19,13 +19,11 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import Grid from "@material-ui/core/Grid";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
//imports from local files
@@ -35,9 +33,14 @@ import { Link } from 'react-router-dom'
import Unauthorized from "../Unauthorized";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const CommunityQuestions = () => {
+
const { state } = useContext(Store);
+
const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -102,14 +105,14 @@ const CommunityQuestions = () => {
subTitle: "Email",
prop:
item.email ?
- <Link to={`/admin/sendEmail/?email=${item.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <Link to={`/admin/sendEmail/?email=${item.email}`} style={state.contrast === "" ? { textDecoration: "none" } : { textDecoration: "yellow underline", color: "yellow" }}>
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
+ color='inherit'
+ icon={<EmailRoundedIcon style={{ color: state.contrast === "" ? "#666" : "white" }} />}
+ text={item.email}
>
- {item.email}
- </Button>
+ </StyledButton>
</Link> : null
},
{
@@ -123,39 +126,38 @@ const CommunityQuestions = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid direction="row" justify="space-between" alignContent="center" alignItems="center" container>
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid>
<Link style={{ textDecoration: 'none' }} to={`/admin/CommunityQuestions`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
} else return <Unauthorized />
};
diff --git a/src/Admin/Components/Components/DataCards/ComplaintsCard.js b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
index 4c3fc1337f6c2a18d26e20b9191f46bfe003ed1a..9a35bdcd5add42c68bad750fa4bc09f0a65a5277 100644
--- a/src/Admin/Components/Components/DataCards/ComplaintsCard.js
+++ b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
@@ -16,10 +16,9 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
@@ -31,7 +30,7 @@ import GetAppRoundedIcon from "@material-ui/icons/GetAppRounded";
import LaunchRoundedIcon from "@material-ui/icons/LaunchRounded";
import RemoveRoundedIcon from "@material-ui/icons/RemoveRounded";
import RestoreRoundedIcon from "@material-ui/icons/RestoreRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
@@ -47,16 +46,20 @@ import { apiDomain } from '../../../../env';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { Store } from 'Store'
+import StyledButton from '../Button';
//styles
const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
const CollectionCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
-
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
const [item, setItem] = useState({}); //Necessary to consult the API, data
@@ -133,7 +136,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -150,7 +154,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -165,7 +170,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -231,9 +237,11 @@ const CollectionCard = () => {
<Button
style={{
width: "100%",
- color: "#FFFAFA",
- backgroundColor: "#FFA07A",
+ color: state.contrast === "" ? "#FFFAFA" : "yellow",
+ backgroundColor: state.contrast === "" ? "#FFA07A" : "black",
fontWeight: "500",
+ border: state.contrast === "" ? "" : "1px solid white",
+ textDecoration: state.contrast === "" ? "none" : "underline yellow"
}}
variant="contained"
onClick={() => {
@@ -247,9 +255,11 @@ const CollectionCard = () => {
<Button
style={{
width: "100%",
- color: "#FFFAFA",
- backgroundColor: "#FA8072",
+ color: state.contrast === "" ? "#FFFAFA" : "yellow",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
fontWeight: "500",
+ border: state.contrast === "" ? "" : "1px solid white",
+ textDecoration: state.contrast === "" ? "none" : "underline yellow"
}}
variant="contained"
onClick={() => {
@@ -263,9 +273,11 @@ const CollectionCard = () => {
<Button
style={{
width: "100%",
- color: "#FFFAFA",
- backgroundColor: "red",
+ color: state.contrast === "" ? "#FFFAFA" : "yellow",
+ backgroundColor: state.contrast === "" ? "red" : "black",
fontWeight: "500",
+ border: state.contrast === "" ? "" : "1px solid white",
+ textDecoration: state.contrast === "" ? "none" : "underline yellow"
}}
variant="contained"
onClick={() => {
@@ -287,7 +299,6 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="initial"
className={classes.subTitle}
variant="h6"
>
@@ -295,20 +306,20 @@ const CollectionCard = () => {
</Typography>
</Grid>
<Grid item>
- <Button
+ <StyledButton
style={{
color: "#FFFAFA",
backgroundColor: "#FA8072",
fontWeight: "500",
}}
+ color="secondary"
variant="contained"
onClick={() => HandleComplainObj("accept")}
- startIcon={
+ icon={
<RemoveRoundedIcon style={{ fill: "#FFFAFA" }} />
}
- >
- Remover
- </Button>
+ text="Remover"
+ />
</Grid>
</Grid>
@@ -323,7 +334,6 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="initial"
className={classes.subTitle}
variant="h6"
>
@@ -331,26 +341,26 @@ const CollectionCard = () => {
</Typography>
</Grid>
<Grid item>
- <Button
+ <StyledButton
style={{
color: "#FFFAFA",
backgroundColor: "#228B22",
fontWeight: "500",
}}
+ color="primary"
variant="contained"
onClick={() => HandleComplainObj("reject")}
- startIcon={
+ icon={
<RestoreRoundedIcon style={{ fill: "#FFFAFA" }} />
}
- >
- Ativar
- </Button>
+ text="Ativar"
+ />
</Grid>
</Grid>
</>
);
default:
- return "Essa denúncia já foi avaliado!";
+ return "Essa denúncia já foi avaliada!";
}
}
@@ -360,73 +370,72 @@ const CollectionCard = () => {
return (
<CardActions>
<Link to={`/admin/user?id=${item.complainable_id}`}>
- <Button
+ <StyledButton
variant="contained"
color="primary"
- startIcon={<VisibilityIcon />}
- >
- Visualizar usuário
- </Button>
+ icon={<VisibilityIcon />}
+ text="Visualizar usuário"
+ />
</Link>
- <Button
- style={{
- fontWeight: "500",
- backgroundColor: "#FA8072"
- }}
- variant="contained"
- startIcon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
+
+ <a
+ style={{ textDecoration: "none", color: "#FFFAFA" }}
+ target="_blank"
+ rel="noreferrer"
+ href={
+ PORTAL_MEC +
+ convertToLink(
+ item.complainable_type,
+ item.complainable_id
+ )
+ }
>
- <a
- style={{ textDecoration: "none", color: "#FFFAFA" }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
- convertToLink(
- item.complainable_type,
- item.complainable_id
- )
- }
- >
- MEC RED
- </a>
- </Button>
+ <StyledButton
+ style={{
+ fontWeight: "500",
+ backgroundColor: "#FA8072"
+ }}
+ variant="contained"
+ color="secondary"
+ icon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
+ text="MEC RED"
+ />
+ </a>
</CardActions>
)
default:
return (
<CardActions>
- <Button
+ <StyledButton
variant="contained"
color="primary"
- startIcon={<GetAppRoundedIcon />}
+ icon={<GetAppRoundedIcon />}
onClick={handleClickOpen('paper')}
+ text="Veja o recurso"
+ />
+ <a
+ style={{ textDecoration: "none", color: "#FFFAFA" }}
+ target="_blank"
+ rel="noreferrer"
+ href={
+ PORTAL_MEC +
+ convertToLink(
+ item.complainable_type,
+ item.complainable_id
+ )
+ }
>
- Veja o recurso
- </Button>
- <Button
- style={{
- fontWeight: "500",
- backgroundColor: "#FA8072"
- }}
- variant="contained"
- startIcon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
- >
- <a
- style={{ textDecoration: "none", color: "#FFFAFA" }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
- convertToLink(
- item.complainable_type,
- item.complainable_id
- )
- }
- >
- MEC RED
- </a>
- </Button>
+ <StyledButton
+ style={{
+ fontWeight: "500",
+ backgroundColor: "#FA8072"
+ }}
+ variant="contained"
+ color="secondary"
+ icon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
+ text="MEC RED"
+ />
+ </a>
</CardActions>
)
}
@@ -513,7 +522,8 @@ const CollectionCard = () => {
padding: "0.8em",
marginBottom: "1em",
marginRight: "1em",
- backgroundColor: "#D3D3D3",
+ backgroundColor: state.contrast === "" ? "#D3D3D3" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontSize: 14,
}}
>
@@ -542,10 +552,10 @@ const CollectionCard = () => {
) : null}
{importantData.map((info, index) => (
<Grid item className={classes.displayColumn} key={index}>
- <Typography color="textPrimary">
+ <Typography>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</Grid>
@@ -668,20 +678,18 @@ const CollectionCard = () => {
md={6}
xs={12}
>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container justify="space-between">
<Grid item>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
Denuncia:
</Typography>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
{
@@ -695,23 +703,22 @@ const CollectionCard = () => {
style={{ textDecoration: "none" }}
to={`/admin/complaints`}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
@@ -720,7 +727,7 @@ const CollectionCard = () => {
{
DisplayButtonsArea(item.complainable_type)
}
- </Card>
+ </StyledCard>
</Grid>
<Grid
@@ -729,7 +736,7 @@ const CollectionCard = () => {
xs={12}
>
<Grid item>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Denúncia #{item.id}
@@ -740,13 +747,12 @@ const CollectionCard = () => {
<Grid container className={classes.marginTop}>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
variant="h6"
>
Descrição
</Typography>
- <Typography color="initial">{item.description}</Typography>
+ <Typography>{item.description}</Typography>
</Grid>
</Grid>
@@ -759,24 +765,22 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
>
Data
</Typography>
- <Typography color="initial">
+ <Typography>
{DisplayDate(item.created_at)}
</Typography>
</Grid>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
>
Denunciante
</Typography>
- <Typography color="initial">{item.user_id}</Typography>
+ <Typography>{item.user_id}</Typography>
</Grid>
</Grid>
@@ -785,13 +789,12 @@ const CollectionCard = () => {
<Grid container className={classes.marginTop}>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
variant="h6"
>
Motivo
</Typography>
- <Typography color="initial">
+ <Typography>
{item.complaint_reason.reason}
</Typography>
</Grid>
@@ -800,23 +803,22 @@ const CollectionCard = () => {
<Grid container className={classes.marginTop}>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
variant="h6"
>
Status
</Typography>
- <Typography color="initial">
+ <Typography>
{item.complaint_reason.status}
</Typography>
</Grid>
</Grid>
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
<Grid item className={classes.marginTop}>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Ações
@@ -825,7 +827,7 @@ const CollectionCard = () => {
Actions(item.state, item.complainable_type)
}
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
</Grid>
@@ -853,9 +855,11 @@ const CollectionCard = () => {
</DialogContentText>
</DialogContent>
<DialogActions>
- <Button onClick={handleClose} color="primary">
- Fechar
- </Button>
+ <StyledButton
+ color="primary"
+ onClick={handleClose}
+ text="Fechar"
+ />
</DialogActions>
</Dialog>
</Grid>
diff --git a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
index 08a8f3255e1015758e98373e8c2d7e25c70cd05e..bda7c746c7a2838897a510c4d7d175b1a93cdcc5 100644
--- a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
+++ b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
@@ -16,23 +16,21 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from "moment";
// Maerial ui components
-import Card from "@material-ui/core/Card";
import Paper from "@material-ui/core/Paper";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
import EditRoundedIcon from "@material-ui/icons/EditRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//imports from local files
import { GetAData, DeleteFilter } from "../../../Filters";
import { Link, useHistory } from "react-router-dom";
-import { apiUrl, apiDomain } from "../../../../env";
+import { apiDomain } from "../../../../env";
import { Grid } from "@material-ui/core";
import LoadingSpinner from "../../../../Components/LoadingSpinner";
import {
@@ -40,8 +38,14 @@ import {
deleteRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import SnackBar from "../../../../Components/SnackbarComponent";
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const CommunityQuestions = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -190,7 +194,9 @@ const CommunityQuestions = () => {
padding: "0.8em",
marginBottom: "1em",
marginRight: "1em",
- backgroundColor: "#D3D3D3",
+ backgroundColor: state.contrast === "" ? "#D3D3D3" : "black",
+ color: state.contrast === "" ? "black" : "white",
+ border: state.contrast === "" ? "" : "1px solid white",
fontSize: 14,
}}
>
@@ -207,7 +213,7 @@ const CommunityQuestions = () => {
];
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -234,7 +240,6 @@ const CommunityQuestions = () => {
<Grid item>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
{item.name}
@@ -245,53 +250,43 @@ const CommunityQuestions = () => {
style={{ textDecoration: "none" }}
to={`/admin/learningObjects`}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
- <Button
- startIcon={<VisibilityIcon />}
- color="primary"
- variant="outlined"
+ <Link
+ style={{ textDecoration: "none" }}
+ to={"/recurso/" + id}
>
- <a
- style={{ textDecoration: "none" }}
- rel="noreferrer"
- target="_blank"
- href={
- apiUrl +
- "/learning_objects/" +
- id +
- "/download"
- }
- >
- Ver recurso
- </a>
- </Button>
+ <StyledButton
+ icon={<VisibilityIcon />}
+ color="primary"
+ variant="outlined"
+ text="Ver recurso"
+ />
+ </Link>
+
<Link
style={{ textDecoration: "none" }}
to={`/admin/learningObjectEdit?learnObj=${item.id}`}
>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
@@ -306,16 +301,16 @@ const CommunityQuestions = () => {
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/InstitutionsCard.js b/src/Admin/Components/Components/DataCards/InstitutionsCard.js
index 1791b22d4867fcb2338057acccc185d559c98db4..cf8b6da438e28fd749f4cd56b827b591dfca73dd 100644
--- a/src/Admin/Components/Components/DataCards/InstitutionsCard.js
+++ b/src/Admin/Components/Components/DataCards/InstitutionsCard.js
@@ -16,15 +16,13 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment'
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from '@material-ui/core/Grid';
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
@@ -35,8 +33,14 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Link, useHistory } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const InstitutionCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -147,7 +151,7 @@ const InstitutionCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -163,54 +167,51 @@ const InstitutionCard = () => {
<CardContent>
<Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/institutions`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/institutionEdit?institution=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/NoteVarCard.js b/src/Admin/Components/Components/DataCards/NoteVarCard.js
index 7c7b4356f9f174607e330987ee15081724b080e8..d179bdeb594a4521b2097cf680c3f0f1d7332fbf 100644
--- a/src/Admin/Components/Components/DataCards/NoteVarCard.js
+++ b/src/Admin/Components/Components/DataCards/NoteVarCard.js
@@ -16,16 +16,14 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
//imports from local files
@@ -33,8 +31,14 @@ import { GetAData } from "../../../Filters";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Link } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const NoteCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -98,49 +102,47 @@ const NoteCard = () => {
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container xs={12} justify="space-between" alignContent="center" alignItems="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/noteVars`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/noteVarEdit?id=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
</Grid>
</Grid>
<div style={{height: "1em"}}/>
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/RatingCard.js b/src/Admin/Components/Components/DataCards/RatingCard.js
index b5f69a53c800dce0324ec0afb274a97ce315fc8e..c103f58cb9b80b984ae03b0fe31710cb8be56373 100644
--- a/src/Admin/Components/Components/DataCards/RatingCard.js
+++ b/src/Admin/Components/Components/DataCards/RatingCard.js
@@ -16,16 +16,14 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
@@ -35,8 +33,14 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Link, useHistory } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const RatingCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -135,7 +139,7 @@ const RatingCard = () => {
];
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -151,54 +155,51 @@ const RatingCard = () => {
<CardContent>
<Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/Ratings`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/EditRating?rating=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/UserCard.js b/src/Admin/Components/Components/DataCards/UserCard.js
index 0e5563ec5de0e6cf27e3c5cac7e295b91fd789e4..0799b4fda60c87c42eb3f76185f78039d907ef6c 100644
--- a/src/Admin/Components/Components/DataCards/UserCard.js
+++ b/src/Admin/Components/Components/DataCards/UserCard.js
@@ -16,19 +16,17 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Chip from '@material-ui/core/Chip';
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
@@ -41,12 +39,17 @@ import { Link, useHistory } from "react-router-dom";
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, postRequest, deleteRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { Store } from 'Store'
+import StyledButton from '../Button';
//styles
import styled from 'styled-components';
//Image Import
import { noAvatar } from "ImportImages.js";
const CollectionCard = () => {
+
+ const { state } = useContext(Store);
+
let history = useHistory()
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
@@ -71,7 +74,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -85,7 +89,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -99,7 +104,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -113,7 +119,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#797D7F ",
+ backgroundColor: state.contrast === "" ? "#797D7F" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -215,13 +222,14 @@ const CollectionCard = () => {
)
}
- const isBlocked = (state) => {
- if (state === "blocked" || state === "banished")
+ const isBlocked = (stateb) => {
+ if (stateb === "blocked" || stateb === "banished")
return <Paper
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "red",
+ backgroundColor: state.contrast === "" ? "red" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -230,23 +238,24 @@ const CollectionCard = () => {
</Paper>
}
- const actionsForBlockedUser = (state) => {
- if (state === "blocked" || state === "banished") {
+ const actionsForBlockedUser = (stateb) => {
+ if (stateb === "blocked" || stateb === "banished") {
return (
- <Button
+ <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
+ icon={<RemoveCircleOutlineRoundedIcon />}
onClick={() => ReactiveUser()}
- >
- Desbloquear
- </Button>
+ text="Desbloquear"
+ />
)
}
- return <Typography color="textSecondary">
- Usuário não bloqueado
- </Typography>
+ return (
+ <Typography>
+ Usuário não bloqueado
+ </Typography>
+ )
}
const actionsForStateTeacherRequest = (state) => {
@@ -254,43 +263,43 @@ const CollectionCard = () => {
return (
<Grid container direction="row" spacing={1}>
<Grid item>
- <Button
+ <StyledButton
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
item.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => { handleReject(item.id, item.name) }}
- >
- Recusar
- </Button>
+ text="Recusar"
+ />
</Grid>
<Grid item>
- <Button
+ <StyledButton
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
item.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => { handleAprove(item.id, item.name) }}
- >
- Aceitar
- </Button>
+ text="Aceitar"
+ />
</Grid>
</Grid>
)
}
- return <Typography color="textSecondary">
- Usuário não requisitou conta de professor
- </Typography>
+ return (
+ <Typography>
+ Usuário não requisitou conta de professor
+ </Typography>
+ )
}
const ReactiveUser = () => {
@@ -352,13 +361,12 @@ const CollectionCard = () => {
md={6}
xs={12}
>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container justify="space-between">
<Grid item xs={12}>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
Identificação do usuário
@@ -370,34 +378,31 @@ const CollectionCard = () => {
style={{ textDecoration: "none" }}
to={`/admin/usersList`}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
<Grid item>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={() => { deleteUser(item.id) }}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
<Grid item>
<Link to={`/admin/EditUser?id=${item.id}`} style={{ textDecoration: "none" }}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
</Grid>
</Grid>
@@ -412,35 +417,34 @@ const CollectionCard = () => {
</Grid>
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Nome
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.name === null ? "Sem dados" : item.name}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Email
</Typography>
{
item.email ?
- <Link to={`/admin/sendEmail?email=${item.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {item.email}
- </Button>
- </Link> : null
+ <Link to={`/admin/sendEmail?email=${item.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color='primary'
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={item.email}
+ />
+ </Link> : null
}
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Cpf
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.cpf === null ? "Sem dados" : item.cpf}
</Typography>
</div>
@@ -448,40 +452,40 @@ const CollectionCard = () => {
</Grid>
<Grid>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Escola
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.name : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Telefone da escola
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.phone : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
UF
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.uf : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
MunÃcipo
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.city : "Sem dados"}
</Typography>
</div>
</Grid>
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
<Grid
@@ -490,7 +494,7 @@ const CollectionCard = () => {
xs={12}
>
<Grid item>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Informações do perfil
@@ -505,10 +509,10 @@ const CollectionCard = () => {
<Grid container justify="flex-start">
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Descrição
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.description}
</Typography>
</div>
@@ -517,10 +521,10 @@ const CollectionCard = () => {
<Grid container direction="row" justify="space-between" spacing={1} alignItems="center">
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Criado em
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{DisplayDate(item.created_at)}
</Typography>
</div>
@@ -528,10 +532,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Atualizado em
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{DisplayDate(item.updated_at)}
</Typography>
</div>
@@ -540,7 +544,7 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Permissões
</Typography>
<Grid container direction="row">
@@ -548,7 +552,7 @@ const CollectionCard = () => {
item.roles.map((tag, index) => {
return (
<ChipDiv key={index}>
- <Chip label={tag.name} />
+ <Chip label={tag.name} style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}} />
</ChipDiv>
)
})
@@ -560,10 +564,10 @@ const CollectionCard = () => {
<Grid container direction="row" spacing={1} justify="space-between" alignItems="center">
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Nota
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.score}
</Typography>
</div>
@@ -571,10 +575,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Seguidores
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.follows_count}
</Typography>
</div>
@@ -582,10 +586,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Likes
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.likes_count}
</Typography>
</div>
@@ -593,10 +597,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Objetos educacionais
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.learning_objects_count}
</Typography>
</div>
@@ -604,10 +608,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Coleções
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.collections_count}
</Typography>
</div>
@@ -637,7 +641,7 @@ const CollectionCard = () => {
</Grid>
</Grid>
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
</Grid>
</Grid>
diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js
index 378c0960b36556a71709978fed512c03db48a9ba..742bdbe91e15bdb9198fe7395bbb97486a01f4e8 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js
@@ -18,10 +18,9 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
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, 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,13 +28,18 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-import Unauthorized from '../Unauthorized';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
const CreateInstitution = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova Instituição');
const [description, setDescription] = useState('');
const [adress, setAdress] = useState('');
@@ -203,80 +207,73 @@ const CreateInstitution = (props) => {
onChange: (event) => CountryHandler(event)
}
]
-
- if (CheckUserPermission()) {
- return (
- <Card>
- <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' alignContent="center" alignItems="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link style={{ textDecoration: 'none' }} to={'/admin/institutions'}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <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' alignContent="center" alignItems="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link style={{ textDecoration: 'none' }} to={'/admin/institutions'}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
+ />
+ </Link>
</Grid>
<div style={{ height: '1em' }}></div>
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- 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();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- );
- } else return <Unauthorized />
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ );
}
export default CreateInstitution;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js
index c9a6590184ea0695d365aa6a58e3119c5dfa4051..c76c3ff06f047d08dbd031ee9c594114a78b7cbd 100644
--- a/src/Admin/Components/Components/Inputs/CreateLanguage.js
+++ b/src/Admin/Components/Components/Inputs/CreateLanguage.js
@@ -18,10 +18,9 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
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, 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 +28,10 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
@@ -36,6 +39,8 @@ import Unauthorized from '../Unauthorized';
const CreateLanguage = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova linguagem');
const [code, setCode] = useState('');
@@ -179,79 +184,74 @@ const CreateLanguage = (props) => {
}
]
- if (CheckUserPermission()) {
- return (
- <Card>
- <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' alignItems="center" alignContent="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/languages'} style={{ textDecoration: 'none' }}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <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' alignItems="center" alignContent="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link to={'/admin/languages'} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
+ />
+ </Link>
</Grid>
+ </Grid>
- <div style={{ height: '1em' }}></div>
+ <div style={{ height: '1em' }}></div>
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- 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();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- )
- } else return <Unauthorized />
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ )
}
export default CreateLanguage;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index 89fd3f856e7b8cee4760048d3913723a9c24c129..166528238cc4b6579aee99af1961c755257f6ead 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -18,10 +18,9 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
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, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from "@material-ui/core/MenuItem";
@@ -31,12 +30,18 @@ import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import Unauthorized from '../Unauthorized';
import SnackBar from '../../../../Components/SnackbarComponent';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
const CreateQuestion = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [status, setStatus] = useState('');
const [description, setDescription] = useState('');
@@ -166,100 +171,94 @@ const CreateQuestion = (props) => {
},
];
- if (CheckUserPermission()) {
- return (
- <Card>
- <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' alignContent="center" alignItems="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- Nova question
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/Questions'} style={{ textDecoration: 'none' }}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <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' alignContent="center" alignItems="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ Nova pergunta
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link to={'/admin/Questions'} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
+ />
+ </Link>
</Grid>
+ </Grid>
- <div style={{ height: '1em' }}></div>
+ <div style={{ height: '1em' }}></div>
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- <>
- <TextField
- select
- label="Status"
- value={status ? status : ""}
- style={{ width: '250px', marginBottom: '1em' }}
- onChange={handleChange}
- >
- {STATUS_OPTIONS.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.value}
- style={option.value === status ? { color: 'blue' } : { color: 'black' }}
- >
- {
- option.label
- }
- </MenuItem>
- ))}
- </TextField>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- 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 style={{ display: 'flex', flexDirection: 'column' }}>
+ <>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Status"
+ value={status ? status : ""}
+ handleChange={handleChange}
+ items={STATUS_OPTIONS.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {
+ option.label
+ }
+ </MenuItem>
))}
- </>
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- );
- } else return <Unauthorized />
+ />
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </>
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ );
}
export default CreateQuestion;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js
index 3a8907f9faed11a37027e592577703cfc8a88d59..63568c9be74920a5e72443de47f47c3329634cb5 100644
--- a/src/Admin/Components/Components/Inputs/CreateRating.js
+++ b/src/Admin/Components/Components/Inputs/CreateRating.js
@@ -18,16 +18,19 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
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, 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';
//imports local files
import { Store } from '../../../../Store';
import SnackBar from '../../../../Components/SnackbarComponent';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//router
@@ -37,6 +40,8 @@ import Unauthorized from '../Unauthorized';
const CreateRating = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Novo rating');
const [description, setDescription] = useState('');
@@ -176,79 +181,74 @@ const CreateRating = (props) => {
}
]
- if(CheckUserPermission()) {
- return (
- <Card>
- <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' alignItems="center" alignContent="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/Ratings'} style={{textDecoration: 'none'}}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <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' alignItems="center" alignContent="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
</Grid>
-
- <div style={{ height: '1em' }}></div>
-
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- 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}
+ <Grid item>
+ <Link to={'/admin/Ratings'} style={{textDecoration: 'none'}}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
/>
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- );
- } else return <Unauthorized/>
+ </Link>
+ </Grid>
+ </Grid>
+
+ <div style={{ height: '1em' }}></div>
+
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ );
}
export default CreateRating;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js
index 94afb02479f83a1f9830f659c77d478247a62c26..7277aa5a1c6ac3b80a0e8e15b0bb1c9fed10b941 100644
--- a/src/Admin/Components/Components/Inputs/CreateRole.js
+++ b/src/Admin/Components/Components/Inputs/CreateRole.js
@@ -18,10 +18,9 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
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, 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 +28,10 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
@@ -36,6 +39,8 @@ import Unauthorized from '../Unauthorized';
const CreateRole = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova role');
const [desc, setDesc] = useState('');
@@ -170,79 +175,74 @@ const CreateRole = (props) => {
}
]
- if (CheckUserPermission()) {
- return (
- <Card>
- <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' alignItems="center" alignContent="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/permissions'} style={{ textDecoration: 'none' }}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <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' alignItems="center" alignContent="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
</Grid>
-
- <div style={{ height: '1em' }}></div>
-
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- 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}
+ <Grid item>
+ <Link to={'/admin/permissions'} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
/>
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- )
- } else return <Unauthorized />
+ </Link>
+ </Grid>
+ </Grid>
+
+ <div style={{ height: '1em' }}></div>
+
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ )
}
export default CreateRole;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 13aabcf16dac0ebc5f77ca965b60cfa6b5508395..0bb6fcaa317faf7fe5c27e6d95939256fd3f1180 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -18,9 +18,8 @@ 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, 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';
@@ -33,13 +32,19 @@ import { getRequest, putRequest } from '../../../../Components/HelperFunctions/g
import { Store } from '../../../../Store';
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"
+import StyledButton from '../Button';
//routers
import { Link } from 'react-router-dom';
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
const EditCollection = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("collection");
@@ -188,7 +193,7 @@ const EditCollection = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -210,13 +215,12 @@ const EditCollection = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/Collections'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -225,66 +229,63 @@ 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
- select
- label="Privacidade"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Privacidade"
value={privacy ? privacy : ""}
- style={{ marginBottom: '1em' }}
- onChange={handleChange}
- >
- {privacyOptions.map((option, index) => (
+ handleChange={handleChange}
+ items={privacyOptions.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
- style={option.value === privacy ? { color: 'blue' } : { color: 'black' }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{
option.value
}
</MenuItem>
))}
- </TextField>
- <CKEditor
- editor={ClassicEditor}
- data={description}
- onBlur={(event, editor) => {
- const data = editor.getData();
- setDescription(data)
- }}
/>
+ <div style={{color: "#666"}}>
+ <CKEditor
+ editor={ClassicEditor}
+ data={description}
+ onBlur={(event, editor) => {
+ const data = editor.getData();
+ setDescription(data)
+ }}
+ />
+ </div>
</form>
</CardContent>
<CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
+ <StyledButton
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Salvar'
- }
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ onClick={onSubmit}
+ text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index 5996383029e0fc08a2b770c8fe7aa32a6b6f2b9e..67ecf181271d78ff1b560d4b6dc5210d19b18e41 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -16,20 +16,19 @@ 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, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext } from 'react';
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import moment from "moment";
//imports material ui components
-import { Typography, TextField, Button, Grid } from "@material-ui/core";
+import { Typography, 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 Chip from "@material-ui/core/Chip";
import MenuItem from "@material-ui/core/MenuItem";
-import { useTheme, makeStyles } from "@material-ui/core/styles";
+import { useTheme } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
@@ -44,31 +43,25 @@ import {
putRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import { EditFilter } from "../../../Filters";
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//routers
import { Link } from "react-router-dom";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
-const useStyles = makeStyles((theme) => ({
- root: {
- width: "100%",
- maxWidth: 250,
- backgroundColor: theme.palette.background.paper,
- position: "relative",
- overflow: "auto",
- maxHeight: 300,
- },
-}));
-
let text;
const EditEducationalObject = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("learnObj");
const theme = useTheme();
- const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
@@ -448,7 +441,7 @@ const EditEducationalObject = () => {
return <LoadingSpinner text="Carregando..." />;
} else if (CheckUserPermission()) {
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -480,13 +473,12 @@ const EditEducationalObject = () => {
style={{ textDecoration: "none" }}
to={"/admin/learningObjects"}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant="outlined"
color="primary"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -495,9 +487,10 @@ const EditEducationalObject = () => {
value={value}
onChange={handleChangeTab}
indicatorColor="primary"
- textColor="primary"
+ textColor="inherit"
variant="fullWidth"
aria-label="full width tabs example"
+ TabIndicatorProps={{style: {background: state.contrast === "" ? "orange" : "yellow"}}}
>
<Tab label="Resumo" {...a11yProps(0)} />
<Tab label="Descrição" {...a11yProps(1)} />
@@ -509,21 +502,22 @@ const EditEducationalObject = () => {
index={value}
onChangeIndex={handleChangeIndex}
>
- <TabPanel value={value} index={0} dir={theme.direction}>
+
<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}
- defaultValue={field.value}
- onBlur={field.onChange}
- type="search"
- multiline
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
{languagesID.map((data) => {
@@ -537,95 +531,99 @@ const EditEducationalObject = () => {
onDelete={
data === "React" ? undefined : handleDeleteLan(data)
}
- className={classes.chip}
+ color="primary"
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
/>
</li>
);
})}
- <TextField
- id="standard-select-currency"
- select
- label="LÃnguas"
- style={{ width: "250px", marginBottom: "1em" }}
- >
- {listOfLanguages.map((option) => (
+ <FormInput
+ contrast={state.contrast}
+
+ selectable={true}
+ placeholder="LÃnguas"
+ items={listOfLanguages.map((option) => (
<MenuItem
key={option.id}
value={option.name}
onClick={() => {
handleChangeLan(option.id, option.name);
}}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.name}
</MenuItem>
))}
- </TextField>
+ />
<li style={{ listStyleType: "none", marginBottom: "0.5em" }}>
- <Chip label={objectType.name} className={classes.chip} />
+ <Chip label={objectType.name} style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}} />
</li>
- <TextField
- id="standard-select-currency"
- select
- label="Object type"
- style={{ width: "250px", marginBottom: "1em" }}
- >
- {listOfObjectTypes.map((option) => (
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Object type"
+ items={listOfObjectTypes.map((option) => (
<MenuItem
key={option.id}
value={option.name}
onClick={() => {
handleChangeObj(option.id, option.name);
}}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.name}
</MenuItem>
))}
- </TextField>
+ />
</form>
- </TabPanel>
-
- <TabPanel value={value} index={1} dir={theme.direction}>
- <CKEditor
- editor={ClassicEditor}
- data={description}
- onBlur={(event, editor) => {
- const data = editor.getData();
- setDescription(data)
- }}
- />
- </TabPanel>
-
- <TabPanel value={value} index={2} dir={theme.direction}>
+
+
+
+ <div style={{color: "#666"}}>
+ <CKEditor
+ editor={ClassicEditor}
+ data={description}
+ onBlur={(event, editor) => {
+ const data = editor.getData();
+ setDescription(data)
+ }}
+ />
+ </div>
+
+
+
<form style={{ display: "flex", flexDirection: "column" }}>
{Imutables.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
- disabled={field.default}
- style={{ width: "250px", marginBottom: "1em" }}
- label={field.label}
- defaultValue={field.value}
+ disableField={field.default}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
/>
))}
</form>
- </TabPanel>
+
</SwipeableViews>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {isLoading ? <CircularProgress size={24} /> : "Salvar"}
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ text={
+ isLoading ? <CircularProgress size={24} /> : 'Salvar'
+ }
+ />
</CardAction>
- </Card>
+ </StyledCard>
);
} else return <Unauthorized />;
};
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index 44df71ceed76a2846983700ced3f66f60143e7e4..c0060cc8596e4f33991cd79332bbbf9fbff35878 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.js
@@ -18,9 +18,8 @@ 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, Grid, ButtonGroup } 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';
@@ -29,6 +28,10 @@ import SaveIcon from '@material-ui/icons/Save';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -38,7 +41,9 @@ import { Link, useHistory } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
const EditLanguage = () => {
+
const { state } = useContext(Store);
+
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("language");
@@ -234,7 +239,7 @@ const EditLanguage = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -254,22 +259,20 @@ const EditLanguage = () => {
</Typography>
<ButtonGroup>
<Link style={{ textDecoration: 'none' }} to={'/admin/languages'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</ButtonGroup>
</Grid>
@@ -277,38 +280,38 @@ 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>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EditRating.js b/src/Admin/Components/Components/Inputs/EditRating.js
index 1b8e0e6fd7c2c054f389dd7f62316778c4aebfa1..398ca2faf89be1994239a6cf730865a02c0ec50c 100644
--- a/src/Admin/Components/Components/Inputs/EditRating.js
+++ b/src/Admin/Components/Components/Inputs/EditRating.js
@@ -18,9 +18,8 @@ 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, 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';
@@ -29,6 +28,10 @@ import SaveIcon from '@material-ui/icons/Save';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -37,7 +40,9 @@ import { Link } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
const EditRating = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("rating");
@@ -213,7 +218,7 @@ const EditRating = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -235,13 +240,12 @@ const EditRating = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/Ratings'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -250,38 +254,38 @@ const EditRating = () => {
<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={{ 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>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index 4b3aa488a8d6f8d2334d29a55680b49ed8020787..b5e1fa8b4b4cf1600624ac20121c02e75e21c410 100644
--- a/src/Admin/Components/Components/Inputs/EditRoles.js
+++ b/src/Admin/Components/Components/Inputs/EditRoles.js
@@ -18,9 +18,8 @@ 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, 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';
@@ -31,6 +30,10 @@ import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -39,7 +42,9 @@ import { Link, useHistory } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
const EditLanguage = () => {
+
const { state } = useContext(Store);
+
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("role");
@@ -228,7 +233,7 @@ const EditLanguage = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -248,22 +253,20 @@ const EditLanguage = () => {
</Typography>
<ButtonGroup>
<Link style={{ textDecoration: 'none' }} to={'/admin/permissions'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</ButtonGroup>
</Grid>
@@ -271,38 +274,38 @@ 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>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</CardAction>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index fe9a61c8931170c9685afa20e5a1ac118d569511..32eb6e1a114b06d24b7dae0e0fe3dd19afc6411f 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -18,9 +18,8 @@ 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, 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';
@@ -29,13 +28,18 @@ import { makeStyles } from '@material-ui/core/styles';
import SaveIcon from '@material-ui/icons/Save';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from '@material-ui/core/MenuItem';
+
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
+import { BlueCheckBox, ContrastCheckBox } from "./EmailInputs.js"
//imports services
import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -58,6 +62,9 @@ const useStyles = makeStyles((theme) => ({
}));
const EditUser = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const { state } = useContext(Store)
@@ -484,7 +491,7 @@ const EditUser = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -508,26 +515,24 @@ const EditUser = () => {
<Grid container direction="row">
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/usersList'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
{
id !== "-1" ?
<Grid item>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={() => { deleteUser(id) }}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid> : null
}
</Grid>
@@ -537,18 +542,19 @@ const EditUser = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
field.value !== "-1" ?
- <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={{ 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}
/> : null
))}
{userRoles.map((data) => {
@@ -557,32 +563,30 @@ const EditUser = () => {
<Chip
label={data.name}
onDelete={data === 'React' ? undefined : handleDelete(data)}
+ color="primary"
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
className={classes.chip}
/>
</li>
);
})}
- <TextField
- id="standard-select-currency"
- select
- label="Permissões"
- style={{ width: '250px', marginBottom: '1em' }}
- >
- {rolesList.map((option) => (
- <MenuItem key={option.id} value={option.value} onClick={() => { handleChange(option.id, option.value) }}>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Permissões"
+ items={rolesList.map((option) => (
+ <MenuItem
+ key={option.id}
+ value={option.value}
+ onClick={() => { handleChange(option.id, option.value) }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
{option.value}
</MenuItem>
))}
- </TextField>
+ />
<FormControlLabel
- control={
- <Switch
- checked={switchState}
- onChange={() => { setSwitchState(!switchState) }}
- name="checkedB"
- color="primary"
- />
- }
+ control={state.contrast === "" ? <BlueCheckBox checked={switchState} onChange={() => { setSwitchState(!switchState) }} name="checkedB"/> : <ContrastCheckBox checked={switchState} onChange={() => { setSwitchState(!switchState) }} name="checkedB"/>}
label="Concorda com os termos de serviço?"
/>
</form>
@@ -590,36 +594,30 @@ const EditUser = () => {
<CardAction>
{
id !== "-1" ?
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Salvar'
- }
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+ />
:
- <Button
+ <StyledButton
onClick={() => {
onCreate();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Criar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Criar'}
+ />
}
</CardAction>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index f75e8b482316ff43cea4ddff066ef9896ef81798..0a5df002cfb1f6c2f05b47b8dc93f6e6405bb097 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -16,23 +16,25 @@ 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";
+import React, { useState, useContext } from "react";
//material ui components
-import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import CircularProgress from "@material-ui/core/CircularProgress";
import Checkbox from "@material-ui/core/Checkbox";
import SendRoundedIcon from "@material-ui/icons/SendRounded";
-import Button from "@material-ui/core/Button";
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
+import { yellow, blue } from "@material-ui/core/colors";
//imports from local files
import SnackBar from "../../../../Components/SnackbarComponent";
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
const useStyles = makeStyles((theme) => ({
root: {
@@ -48,7 +50,30 @@ const useStyles = makeStyles((theme) => ({
},
}));
+export const BlueCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
const EmailInputs = (props) => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const [option, setOption] = useState(props.email ? "Emails" : "All"); //labels of the text field 'to'
const [isToEmails, setIsToEmails] = useState(props.email ? true : false)
@@ -371,31 +396,31 @@ const EmailInputs = (props) => {
}
/>
- <TextField
+ <FormInput
+ contrast={state.contrast}
id="outlined-input"
- label="De *"
- defaultValue="integrada.contato@mec.gov.br"
- variant="outlined"
- disabled={true}
- />
+ disableField={true}
+ placeholder="De *"
+ value="integrada.contato@mec.gov.br"
+ />
<div style={{ height: "1em" }} />
-
- <TextField
- select
- label="Para *"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Para *"
value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.label}
</MenuItem>
))}
- </TextField>
+ />
<div style={{ height: "1em" }} />
{
isToRoles &&
@@ -403,14 +428,7 @@ const EmailInputs = (props) => {
{roles.map((role, index) => (
<FormControlLabel
key={index}
- control={
- <Checkbox
- checked={role.isChecked}
- onChange={() => handleChangeCheckBox(index)}
- name={role.label}
- color="primary"
- />
- }
+ control={props.contrast === "" ? <BlueCheckBox checked={role.isChecked} onChange={() => handleChangeCheckBox(index)} name={role.label}/> : <ContrastCheckBox checked={role.isChecked} onChange={() => handleChangeCheckBox(index)} name={role.label}/>}
label={role.label}
/>
))}
@@ -433,42 +451,41 @@ const EmailInputs = (props) => {
<Chip
label={email}
onDelete={() => HandleDelete(index)}
+ color="primary"
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
classes={classes.chip}
/>
</li>
))}
</div>
- <TextField
+ <FormInput
+ contrast={state.contrast}
id="outlined-input"
- label="Emails"
- rows={1}
error={errorInEmails.error}
- helperText={errorInEmails.message}
+ help={errorInEmails.message}
value={emails}
onKeyPress={(key) => OnKeyPressHandler(key.which)}
- onChange={EmailsHandler}
- // onBlur={ShowEmails}
+ handleChange={EmailsHandler}
placeholder="Digite um email por vez e pressione Enter"
- variant="outlined"
style={{ marginBottom: "1em" }}
/>
</>
}
- <TextField
+ <FormInput
+ contrast={state.contrast}
id="outlined-input"
- label="Assunto"
- value={subject}
error={errorInSubject.error}
- helperText={errorInSubject.message}
+ help={errorInSubject.message}
+ value={subject}
+ onKeyPress={(key) => OnKeyPressHandler(key.which)}
+ handleChange={SubjectHandler}
placeholder="Digite o assunto do email"
- onChange={SubjectHandler}
- variant="outlined"
/>
</form >
<div style={{ height: "1em" }} />
- <div style={{ flex: 1 }}>
+ <div style={{ flex: 1, color: "#666" }}>
<CKEditor
editor={ClassicEditor}
data={message}
@@ -478,23 +495,23 @@ const EmailInputs = (props) => {
}}
/>
</div>
-
+ {/*
<div style={{ fontSize: 14 }}>
* Se você deseja enviar foto da sua máquina, é preciso <a href="mailto:name@email.com">Clicar aqui</a>
</div>
+ */}
<div style={{ marginTop: 18 }}>
- <Button
+ <StyledButton
onClick={() => {
submitRequest();
}}
variant="contained"
disabled={isSending}
color="primary"
- startIcon={<SendRoundedIcon />}
- >
- {isSending ? <CircularProgress size={24} /> : "Enviar"}
- </Button>
+ icon={<SendRoundedIcon />}
+ text={isSending ? <CircularProgress size={24} /> : "Enviar"}
+ />
</div>
</div >
);
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index ca1ea9dfb454b6cf7275e47b33f9b6da8cd2b212..00652ebcd422b87f71d56d4113bf3ac0b9249ade 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -18,10 +18,8 @@ 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 CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
@@ -31,6 +29,10 @@ import Unauthorized from '../Unauthorized';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js";
+import StyledButton from '../Button';
//imports services
import { putRequest, getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -38,7 +40,9 @@ import { EditFilter, GetAData } from '../../../Filters';
import { Link } from 'react-router-dom';
const EditInstitution = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("institution");
@@ -236,7 +240,7 @@ const EditInstitution = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -263,13 +267,12 @@ const EditInstitution = () => {
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/institutions`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -278,40 +281,39 @@ 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>
</div>
<div>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Salvar'
- }
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+ />
</div>
</div>
</CardContent>
- </Card>
+ </StyledCard>
);
} else {
return <Unauthorized />
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 3c1542ec851b700c0b53755592659fd2a7f9cd21..354446fdba0b4cd6eb231730f87677b00e0e4744 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
@@ -18,10 +18,8 @@ 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 CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
@@ -30,6 +28,10 @@ import Grid from '@material-ui/core/Grid';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -38,7 +40,9 @@ import { Link } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
const NoteVarInputs = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -241,7 +245,7 @@ const NoteVarInputs = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -269,52 +273,51 @@ const NoteVarInputs = () => {
<Grid>
<Link style={{ textDecoration: 'none' }} to={`/admin/noteVars`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
<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>
<div>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</div>
</CardContent>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
index f3520c9f12319310eba1544dd60d551aa001a29e..56255c2b696ec0a31dbeff1d87a8ff82ca5a9388 100644
--- a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
+++ b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
@@ -16,17 +16,20 @@ 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 from "react";
+import React, { useContext } from "react";
import Paper from "@material-ui/core/Paper"
import Grid from "@material-ui/core/Grid"
import Button from "@material-ui/core/Button"
import Typography from "@material-ui/core/Typography"
import CircularProgress from "@material-ui/core/CircularProgress"
+import styled from 'styled-components'
+import { Store } from 'Store'
const MobilePageHeader = (props) => {
+ const { state } = useContext(Store);
return (
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
+ <Paper style={{ marginBottom: "2em", marginTop: "2em", marginLeft: "1em", marginRight: "1em" }}>
+ <StyledGrid contrast={state.contrast} container spacing={3} direction="row" alignItems="center">
<Grid item xs={12}>
<Typography variant="h4">{props.title}</Typography>
</Grid>
@@ -38,7 +41,8 @@ const MobilePageHeader = (props) => {
{props.actions.map((act, index) => {
return (
<Grid item key={act.name}>
- <Button
+ <StyledButton
+ contrast={state.contrast}
variant="contained"
color="secondary"
disabled={act.isLoading}
@@ -46,16 +50,35 @@ const MobilePageHeader = (props) => {
startIcon={act.icon}
>
{act.isLoading ? <CircularProgress size={24} /> : act.name}
- </Button>
+ </StyledButton>
</Grid>
)
})}
</Grid>
</Grid>
- </Grid>
+ </StyledGrid>
{props.children}
</Paper>
)
}
+const StyledGrid = styled(Grid)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius: 10px;
+ border-radius: 10px;
+`
+
+const StyledButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "" : "black !important"};
+ color: ${props => props.contrast === "" ? "" : "yellow !important"};
+ border: 1px solid ${props => props.contrast === "" ? "" : "white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ :hover {
+ background-color: rgba(255,255,0,0.24) !important;
+ }
+`
+
+
export default MobilePageHeader;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/MobileComponents/SimpleList.js b/src/Admin/Components/Components/MobileComponents/SimpleList.js
index f7afb24bc6b5a48f775d7561b71ceb57fe65b392..6f787e41a81757c068d9ab4b359d36bc1a97dfb6 100644
--- a/src/Admin/Components/Components/MobileComponents/SimpleList.js
+++ b/src/Admin/Components/Components/MobileComponents/SimpleList.js
@@ -31,13 +31,10 @@ import VisibilityIcon from "@material-ui/icons/Visibility";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import { Link } from "react-router-dom";
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles({
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
- transition: theme.transitions.create("transform", {
- duration: theme.transitions.duration.shortest,
- }),
},
expandOpen: {
transform: "rotate(180deg)",
@@ -51,10 +48,18 @@ const useStyles = makeStyles((theme) => ({
fontSize: 14,
fontWeight: "500",
},
-}));
+ subColor: {
+ color: props => props.contrast === "" ? "#666" : "white",
+ },
+ root: {
+ backgroundColor: props => props.contrast === "" ? "" : "black",
+ color: props => props.contrast === "" ? "#666" : "white",
+ border: props => props.contrast === "" ? "1px solid #666" : "1px solid white",
+ }
+});
export default function MobileList(props) {
- const classes = useStyles();
+ const classes = useStyles(props);
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
@@ -68,16 +73,22 @@ export default function MobileList(props) {
<Avatar
aria-label="avatar"
style={
- props.backColor
- ? { backgroundColor: props.backColor }
- : { backgroundColor: "grey" }
+ props.contrast === "" ? (
+ props.backColor
+ ? { backgroundColor: props.backColor }
+ : { backgroundColor: "gray" }
+ )
+ :
+ (
+ {backgroundColor: "black"}
+ )
}
>
{props.avatar}
</Avatar>
}
title={props.title}
- subheader={props.subtitle}
+ subheader={<Typography className={classes.subColor}>{props.subtitle}</Typography>}
action={
<>
{
@@ -86,7 +97,7 @@ export default function MobileList(props) {
<IconButton
onClick={props.reset}
>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{fill: props.contrast === "" ? "#00bcd4" : "yellow"}} />
</IconButton>
</Link> : null
}
@@ -99,7 +110,7 @@ export default function MobileList(props) {
aria-expanded={expanded}
aria-label="show more"
>
- <ExpandMoreIcon />
+ <ExpandMoreIcon style={{fill: props.contrast === "" ? "#666" : "yellow"}}/>
</IconButton>
</>
}
@@ -108,10 +119,10 @@ export default function MobileList(props) {
<CardContent>
{props.data.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.title}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.subtitle}
</Typography>
</div>
diff --git a/src/Admin/Components/Components/PageHeader.js b/src/Admin/Components/Components/PageHeader.js
index beef3c04f372e78dec96dbe82d252e787555e7e9..b2110129d04445823893f2f89e93211468b707af 100644
--- a/src/Admin/Components/Components/PageHeader.js
+++ b/src/Admin/Components/Components/PageHeader.js
@@ -16,17 +16,20 @@ 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 from "react";
+import React, { useContext } from "react";
import Paper from "@material-ui/core/Paper"
import Grid from "@material-ui/core/Grid"
import Button from "@material-ui/core/Button"
import Typography from "@material-ui/core/Typography"
import CircularProgress from "@material-ui/core/CircularProgress"
+import styled from 'styled-components'
+import { Store } from 'Store'
const PageHeader = (props) => {
+ const { state } = useContext(Store);
return (
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
+ <Paper style={{marginBottom: "2em", marginTop: "2em", marginLeft: "1em", marginRight: "1em"}}>
+ <StyledGrid contrast={state.contrast} container spacing={3} direction="row" alignItems="center">
<Grid item xs={6}>
<Typography variant="h4">{props.title}</Typography>
</Grid>
@@ -38,24 +41,49 @@ const PageHeader = (props) => {
{props.actions.map((act, index) => {
return (
<Grid item key={act.name}>
- <Button
+ <StyledButton
+ contrast={state.contrast}
variant="contained"
- color="secondary"
disabled={act.isLoading}
onClick={act.func}
startIcon={act.icon}
>
- {act.isLoading ? <CircularProgress size={24} /> : act.name}
- </Button>
+ <div style={state.contrast === "" ? {color: "white"} : {color: "yellow"}}>
+ {act.isLoading ? <CircularProgress size={24} /> : act.name}
+ </div>
+ </StyledButton>
</Grid>
)
})}
</Grid>
</Grid>
- </Grid>
+ </StyledGrid>
{props.children}
</Paper>
)
}
+const StyledGrid = styled(Grid)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius: 10px;
+`
+
+const StyledButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ color: white !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "" : "white"} !important;
+`
+
+export const StyledFilter = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius: 0 0 10px 10px;
+ padding: 10px;
+ margin-top: 10px;
+`
+
export default PageHeader;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Table.js b/src/Admin/Components/Components/Table.js
index ddb7a377b4fea041f52c881835700312b7f8e6c8..3fbba67f1c58cea2cca69e2f43ab3e4f03cda7de 100644
--- a/src/Admin/Components/Components/Table.js
+++ b/src/Admin/Components/Components/Table.js
@@ -23,7 +23,8 @@ const StyledTableCell = withStyles((theme) => ({
const useStyles = makeStyles({
table: {
minWidth: 700,
- width: "100%"
+ width: "99.99%",
+ overflow: "hidden"
},
});
diff --git a/src/Admin/Components/Components/Unauthorized.js b/src/Admin/Components/Components/Unauthorized.js
index 245a219b46f516a8d6fe7ce5d4ec2a89852f2590..ef9e9184848d16566d1bdb4fcb2121e9112334e6 100644
--- a/src/Admin/Components/Components/Unauthorized.js
+++ b/src/Admin/Components/Components/Unauthorized.js
@@ -21,12 +21,12 @@ import SnackBar from '../../../Components/SnackbarComponent';
import { Link } from 'react-router-dom';
import styled from "styled-components";
-const Unauthorized = () => {
+const Unauthorized = (props) => {
const [openSnack, setOpenSnack] = useState(true);
return (
- <div style={{ textAlign: 'center' }}>
+ <ContentDiv contrast={props.contrast} style={{ textAlign: 'center' }}>
<SnackBar
severity='warning'
text='Você não tem as permissões necessárias'
diff --git a/src/Admin/Components/Components/Welcome.js b/src/Admin/Components/Components/Welcome.js
index 47e4f942e27534ce052b96183368b931c9fb77b1..4780d2bda753710d1612bc56c1da37c5805d84ca 100644
--- a/src/Admin/Components/Components/Welcome.js
+++ b/src/Admin/Components/Components/Welcome.js
@@ -21,8 +21,8 @@ import {Styles} from '../Styles/WelcomeStyle';
// This file is a component that says welcome to the user
-const Welcome = () => {
- const classes = Styles();
+const Welcome = (props) => {
+ const classes = Styles(props.contrast);
return(
<div style={classes.welcomeContainer}>
<p style={classes.welcomeTitle}>
@@ -34,5 +34,8 @@ const Welcome = () => {
</div>
);
}
-
+/*
+ <div style={props.contrast === "" ? classes.welcomeContainer : classes.welcomeContainerContrast}>
+ <p style={props.contrast === "" ? classes.welcomeTitle : classes.welcomeTitleContrast}>
+*/
export default Welcome;
\ No newline at end of file
diff --git a/src/Admin/Components/Styles/DataCard.js b/src/Admin/Components/Styles/DataCard.js
index 17083da50639dd57f55aaedbfd45f1f9a825735c..f0f98c0766472f195f8b2ddf7a028ac383b62316 100644
--- a/src/Admin/Components/Styles/DataCard.js
+++ b/src/Admin/Components/Styles/DataCard.js
@@ -16,7 +16,9 @@ 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 Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
+import styled from 'styled-components'
const useStyles = makeStyles({
table: {
@@ -53,4 +55,10 @@ const useStyles = makeStyles({
}
});
-export { useStyles };
\ No newline at end of file
+const StyledCard = styled(Card)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
+`
+
+export { useStyles, StyledCard };
\ No newline at end of file
diff --git a/src/Admin/Components/Styles/WelcomeStyle.js b/src/Admin/Components/Styles/WelcomeStyle.js
index 11364da864132b3ad83519ac3eaff9704ac81b7d..508848db03916b7b6ad12010329ba07f13e85e9f 100644
--- a/src/Admin/Components/Styles/WelcomeStyle.js
+++ b/src/Admin/Components/Styles/WelcomeStyle.js
@@ -16,12 +16,11 @@ 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/>.*/
-const Styles = () => ({
+const Styles = (contrast) => ({
welcomeContainer : {
- padding : '1em 1em',
- borderRadius : '22px',
- backgroundColor : 'white',
- boxShadow : '2px 2px 1px #A9A9A9'
+ padding: '1em',
+ borderRadius : '10px',
+ border: `1px solid ${contrast === "" ? "#666" : "white"}`
},
welcomeTitle : {
fontWeight : 'bold',
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index c87c1b25fd2b7ce07aac8c36adf11909a794cd9a..c6259b382ad886b4bef8f8a208883f4cf53833d4 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -16,7 +16,7 @@ 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, { useEffect, useState } from "react"
+import React, { useEffect, useState, useContext } from "react"
import moment from 'moment'
//imports from local files
import TableData from "../../../Components/Components/Table"
@@ -25,16 +25,16 @@ import { Url } from "../../../Filters"
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner'
import MobilePageHeader from '../../../Components/Components/MobileComponents/MobilePageHeader'
-import PageHeader from '../../../Components/Components/PageHeader'
+import PageHeader, { StyledFilter } from '../../../Components/Components/PageHeader'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import FormInput from "Components/FormInput.js"
//imports from material ui
-import { withStyles } from "@material-ui/core/styles"
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
import MenuItem from "@material-ui/core/MenuItem"
import TableRow from "@material-ui/core/TableRow"
-import TextField from "@material-ui/core/TextField"
import IconButton from "@material-ui/core/IconButton"
-import { Button, Paper } from "@material-ui/core"
+import { Button } from "@material-ui/core"
import CircularProgress from "@material-ui/core/CircularProgress"
import AddRoundedIcon from "@material-ui/icons/AddRounded"
import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded"
@@ -44,27 +44,16 @@ import AllOutIcon from "@material-ui/icons/AllOut"
//routers
import { Link } from 'react-router-dom'
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-import styled from "styled-components"
-
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+
+import { Store } from 'Store'
const Activity = () => {
+
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"CRIADO EM",
@@ -83,6 +72,7 @@ const Activity = () => {
const [showFilter, setShowFilter] = useState(false);
const [option, setOption] = useState(); //labels of the text field 'to'
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -162,7 +152,7 @@ const Activity = () => {
setError(true)
}
)
- }, [currPage, option])
+ }, [currPage, option, forceUpdate])
useEffect(() => {
setOption()
@@ -200,6 +190,7 @@ const Activity = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -214,40 +205,40 @@ const Activity = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
- <TextField
- select
- label="Filtro"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</div>
- </>
+ </StyledFilter>
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -263,11 +254,12 @@ const Activity = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={row.privacy}
@@ -295,7 +287,6 @@ const Activity = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -325,6 +316,7 @@ const Activity = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -339,41 +331,39 @@ const Activity = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
- <TextField
- select
- label="Filtro"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</div>
- </>
+ </StyledFilter>
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<TableData top={TOP_LABELS}>
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at} style={{ padding: "1em" }}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at} style={{ padding: "1em" }}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color="primary"
variant="text"
@@ -383,6 +373,7 @@ const Activity = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -390,30 +381,30 @@ const Activity = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.owner ? row.owner.name : ""
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.activity}
- </StyledTableCell>
- <StyledTableCell align="right">{row.privacy}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.privacy}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/activity?activity=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -426,10 +417,3 @@ const Activity = () => {
export default Activity;
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index dca8669260e3795ccc28c98d97ce9eea5e9c6b28..6b69fed21a912f9f59b254dc035f97369783f82f 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -16,9 +16,8 @@ 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, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from "moment";
-import styled from "styled-components";
//imports from local files
import TableData from "../../../Components/Components/Table";
import SnackBar from "../../../../Components/SnackbarComponent";
@@ -30,15 +29,17 @@ import {
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import MobileList from "../../../Components/Components/MobileComponents/SimpleList";
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader";
-import PageHeader from "../../../Components/Components/PageHeader";
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader";
import { apiDomain } from '../../../../env';
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -55,26 +56,13 @@ import { Link } from "react-router-dom";
//Image Import
import { noAvatar } from "ImportImages.js";
+const AproveTeacher = () => {
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store);
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const AproveTeacher = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -101,6 +89,7 @@ const AproveTeacher = () => {
const [nameValue, setNameValue] = useState("")
const [email, setEmail] = useState("");
const [emailValue, setEmailValue] = useState("")
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -162,7 +151,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -176,7 +166,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -190,7 +181,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -204,7 +196,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#797D7F ",
+ backgroundColor: state.contrast === "" ? "#797D7F" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -335,7 +328,7 @@ const AproveTeacher = () => {
setError(true)
}
)
- }, [currPage, option, email, name, invertList])
+ }, [currPage, option, email, name, invertList, forceUpdate])
useEffect(() => {
setOption("requested")
@@ -375,6 +368,7 @@ const AproveTeacher = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -396,8 +390,7 @@ const AproveTeacher = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
{showFilter ? (
<Grid
container
@@ -409,54 +402,56 @@ const AproveTeacher = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Estado"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- onChange={NameHandler}
- value={nameValue}
- onBlur={(event) => { setName(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={NameHandler}
+ value={nameValue}
+ onBlur={(event) => { setName(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
<Grid item>
- <TextField
- label="Email"
- onChange={EmailHandler}
- value={emailValue}
- onBlur={(event) => { setEmail(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={EmailHandler}
+ value={emailValue}
+ onBlur={(event) => { setEmail(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
</Grid>
) : null}
- </>
+ </StyledFilter>
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton>
- <Button
+ <StyledDivButton contrast={state.contrast}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -472,11 +467,12 @@ const AproveTeacher = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -501,13 +497,13 @@ const AproveTeacher = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
@@ -522,44 +518,40 @@ const AproveTeacher = () => {
{
title: "Ações rápidas",
subtitle: <>
- <Button
+ <StyledButton
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleReject(row.id, row.name);
}}
- >
- Recusar
- </Button>
- <div style={{ height: "0.5em" }} />
- <Button
+ text="Recusar"
+ />
+ <StyledButton
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleAprove(row.id, row.name);
}}
- >
- Aceitar
- </Button>
+ text="Aceitar"
+ />
</>
}
]}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -591,6 +583,7 @@ const AproveTeacher = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -605,8 +598,7 @@ const AproveTeacher = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
{showFilter ? (
<Grid
container
@@ -618,50 +610,51 @@ const AproveTeacher = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Estado"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- onChange={NameHandler}
- value={nameValue}
- onBlur={(event) => { setName(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={NameHandler}
+ value={nameValue}
+ onBlur={(event) => { setName(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
<Grid item>
- <TextField
- label="Email"
- onChange={EmailHandler}
- value={emailValue}
- onBlur={(event) => { setEmail(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={EmailHandler}
+ value={emailValue}
+ onBlur={(event) => { setEmail(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
</Grid>
) : null}
- </>
+ </StyledFilter>
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<Grid xs={12} container>
<TableData
top={TOP_LABELS}
@@ -670,9 +663,9 @@ const AproveTeacher = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -682,6 +675,7 @@ const AproveTeacher = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -689,69 +683,77 @@ const AproveTeacher = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow
+ <TableRow className={classesRow.root}
key={new Date().toISOString() + index}
style={{ flex: 1, width: "100%" }}
>
- <StyledTableCell component="th" scope="row">
+ <TableCell className={classesCell.root} component="th" scope="row">
{ComplaintStatus(row.submitter_request)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.email}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color='primary'
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/user?id=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- <Button
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <StyledButton
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleReject(row.id, row.name);
}}
- >
- Recusar
- </Button>
- <div style={{ height: "0.5em" }} />
- <Button
+ text="Recusar"
+ />
+ <StyledButton
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleAprove(row.id, row.name);
}}
- >
- Aceitar
- </Button>
- </StyledTableCell>
- </StyledTableRow>
+ text="Aceitar"
+ />
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -762,11 +764,4 @@ const AproveTeacher = () => {
}
}
};
-export default AproveTeacher;
-
-const StyledDivButton = styled(Paper)`
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-`;
+export default AproveTeacher;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index ba077fdae792fd4eb6c7d6a4cc9a7362631e877d..9eac1d9a5f121dbddfce3f18d1f226bb19965f89 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -15,17 +15,14 @@ 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, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
import moment from "moment";
-import styled from "styled-components"
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import TableCell from '@material-ui/core/TableCell';
import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -41,7 +38,11 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import { apiDomain } from '../../../../env';
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
+import FormInput from "Components/FormInput.js"
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -51,25 +52,13 @@ import { Link } from 'react-router-dom';
//Image Import
import { noAvatar } from "ImportImages.js";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const BlockedUsers = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const BlockedUsers = () => {
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -80,6 +69,7 @@ const BlockedUsers = () => {
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
const [stateOpt, setStateOpt] = useState(1)
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -122,7 +112,8 @@ const BlockedUsers = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -136,7 +127,8 @@ const BlockedUsers = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "red",
+ backgroundColor: state.contrast === "" ? "red" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -150,7 +142,8 @@ const BlockedUsers = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#797D7F",
+ backgroundColor: state.contrast === "" ? "#797D7F" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -232,7 +225,7 @@ const BlockedUsers = () => {
setError(true)
}
)
- }, [currPage, stateOpt, invertList])
+ }, [currPage, stateOpt, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -265,6 +258,7 @@ const BlockedUsers = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -277,32 +271,34 @@ const BlockedUsers = () => {
},
]}
>
+ <StyledFilter contrast={state.contrast}>
<Grid item>
- <TextField
- select
- label="Estado de bloqueio"
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado de bloqueio"
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
+ </StyledFilter>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton>
- <Button
+ <StyledDivButton contrast={state.contrast}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -318,11 +314,12 @@ const BlockedUsers = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -347,15 +344,13 @@ const BlockedUsers = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
-
},
{
title: "Estado",
@@ -363,20 +358,18 @@ const BlockedUsers = () => {
},
{
title: "Ações rápidas",
- subtitle: <Button
+ subtitle: <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
+ icon={<RemoveCircleOutlineRoundedIcon />}
onClick={() => ReactiveUser(row.id, index)}
- >
- Desbloquear
- </Button>
+ text="Desbloquear"
+ />
}
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -406,33 +399,35 @@ const BlockedUsers = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
]}
>
+ <StyledFilter contrast={state.contrast}>
<Grid item>
- <TextField
- select
- label="Estado de bloqueio"
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado de bloqueio"
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
+ </StyledFilter>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -440,9 +435,9 @@ const BlockedUsers = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={6}>
<Button
color='primary'
variant='text'
@@ -451,61 +446,59 @@ const BlockedUsers = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{BlockStatus(row.state)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">
- {
- row.email ?
- <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
- </Link> : null
- }
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.suspended_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Button
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
+ icon={<RemoveCircleOutlineRoundedIcon />}
onClick={() => ReactiveUser(row.id, index)}
- >
- Desbloquear
- </Button>
+ text="Desbloquear"
+ />
<Link to={`/admin/user?id=${row.id}`}>
- <Button
+ <StyledButton
style={{ width: "100%" }}
variant="contained"
color="primary"
- startIcon={<VisibilityIcon />}
- >
- Visualizar
- </Button>
+ icon={<VisibilityIcon />}
+ text="Visualizar"
+ />
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -516,11 +509,4 @@ const BlockedUsers = () => {
}
-export default BlockedUsers;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
\ No newline at end of file
+export default BlockedUsers;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index dd15cbaefc69bf3b14657d8c13393f05b9c0edf0..f7ab54ccacc4394b0fd746ca7008c94159a700f0 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -16,7 +16,7 @@ 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, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from "moment";
//imports from local files
import TableData from "../../../Components/Components/Table";
@@ -26,15 +26,16 @@ import AlertDialog from "../../../Components/Components/AlertDialog";
import LoadingSpinner from "../../../../Components/LoadingSpinner";
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -44,567 +45,599 @@ import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
import {
- deleteRequest,
- getRequest,
+ deleteRequest,
+ getRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
//routers
import { Link } from "react-router-dom";
import styled from 'styled-components'
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
+import { Store } from 'Store'
+
+export const useStylesCell = makeStyles((theme) => ({
+ root: {
+ color: props => props.contrast === "" ? "#666" : "white",
+ border: props => props.contrast === "" ? "1px solid #666" : "1px solid white",
+ "MuiTableRow-root": {
+ backgroundColor: props => props.contrast === "" ? "#eee" : "black",
+ }
+ }
+}));
+
+export const useStylesRow = makeStyles((theme) => ({
+ root: {
+ "&:nth-of-type(odd)": {
+ backgroundColor: props => props.contrast === "" ? "#eee" : "black",
+ },
+ backgroundColor: props => props.contrast === "" ? "" : "black",
+ border: props => props.contrast === "" ? "1px solid #666" : "1px solid white",
},
- },
-}))(TableRow);
+}));
const Collections = () => {
- const ADD_ONE_LENGHT = [""];
- const TOP_LABELS = [
- "NOME",
- "DESCRIÇÃO",
- "DONO(A)",
- "CRIAÇÃO",
- "ATUALIZAÇÃO",
- "PRIVACIDADE",
- "VISUALIZAR",
- "DELETAR",
- ]; //Labels from Table
-
- const WINDOW_WIDTH = window.innerWidth;
-
- const [error, setError] = useState(null); //Necessary to consult the API, catch errors
- const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
- const [items, setItems] = useState([]); //Necessary to consult the API, data
-
- const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
-
- const [showFilter, setShowFilter] = useState(false);
- const [valueOfSearch, setValueOfSearch] = useState("")
- const [search, setSearch] = useState("");
- const [currPage, setCurrPage] = useState(0)
-
- const [openAlertDialog, setOpenAlertDialog] = useState(false);
- const [deleteItem, setDeleteItem] = useState({}); //Delete Item
- const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
- const [option, setOption] = useState(); //labels of the text field 'to'
-
- const [snackInfo, setSnackInfo] = useState({
- message: "",
- icon: "",
- open: false,
- color: "",
- });
-
- const privacyOptions = [
- { name: "private", value: "Privado" },
- { name: "public", value: "Público" }
- ];
-
-
- //handle snack info
- const HandleSnack = (message, state, icon, color) => {
- setSnackInfo({
- message: message,
- icon: icon,
- open: state,
- color: color,
+
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
+ const ADD_ONE_LENGHT = [""];
+ const TOP_LABELS = [
+ "NOME",
+ "DESCRIÇÃO",
+ "DONO(A)",
+ "CRIAÇÃO",
+ "ATUALIZAÇÃO",
+ "PRIVACIDADE",
+ "VISUALIZAR",
+ "DELETAR",
+ ]; //Labels from Table
+
+ const WINDOW_WIDTH = window.innerWidth;
+
+ const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+ const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+ const [items, setItems] = useState([]); //Necessary to consult the API, data
+
+ const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
+
+ const [showFilter, setShowFilter] = useState(false);
+ const [valueOfSearch, setValueOfSearch] = useState("")
+ const [search, setSearch] = useState("");
+ const [currPage, setCurrPage] = useState(0)
+
+ const [openAlertDialog, setOpenAlertDialog] = useState(false);
+ const [deleteItem, setDeleteItem] = useState({}); //Delete Item
+ const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [option, setOption] = useState(); //labels of the text field 'to'
+ const [forceUpdate, setForceUpdate] = useState(false)
+
+ const [snackInfo, setSnackInfo] = useState({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
});
- };
-
- //Defines which row must show the circular progress
- const HandleStateCircularProgress = (i) => {
- setIsLoadingToDelete(i);
- };
-
- //Called when user want to delete one institution
- async function DeleteHandler() {
- const id = deleteItem.id;
- HandleStateAlertDialog(null);
- deleteRequest(
- DeleteFilter("collections", id),
- (data) => {
- if (data.errors)
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- else {
- HandleSnack(
- "A Coleção foi deletada com sucesso",
- true,
- "success",
- "#228B22"
- );
- setCurrPage(0)
- HandleStateCircularProgress(null);
- removeItemFromList(id);
- }
- },
- (error) => {
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- HandleStateCircularProgress(null);
- }
- );
- }
-
- //Controlls the state of the Alert Dialog
- const HandleStateAlertDialog = (i) => {
- const obj = { ...items[i] };
- setDeleteItem(obj);
- setOpenAlertDialog(!openAlertDialog);
- };
-
- // handle change of privacy
- const handleChange = (e) => {
- setOption(e.target.value);
- };
-
- const HandleSearch = (e) => {
- setValueOfSearch(e.target.value)
- }
-
- const DisplayDate = (date) => {
- const convertedData = moment.utc(date);
- return moment(convertedData)
- .format("LLL")
- .toString();
- };
-
- const buildUrl = (privacyOpt, name) => {
- if (privacyOpt && name)
- return Url("collections", `"privacy" : "${privacyOpt}", "name" : "${name}"`, currPage, "DESC")
- else if (privacyOpt)
- return Url("collections", `"privacy" : "${privacyOpt}"`, currPage, "DESC")
- else if (name)
- return Url("collections", `"name" : "${name}"`, currPage, "DESC")
- else
- return Url("collections", "", currPage, "DESC")
- }
-
- const removeItemFromList = (itemId) => {
- let index = -1;
- for (let i = 0; i < items.length; i++) {
- const element = items[i];
- if (element.id === itemId) {
- index = i
- break
- }
+
+ const privacyOptions = [
+ { name: "private", value: "Privado" },
+ { name: "public", value: "Público" }
+ ];
+
+
+ //handle snack info
+ const HandleSnack = (message, state, icon, color) => {
+ setSnackInfo({
+ message: message,
+ icon: icon,
+ open: state,
+ color: color,
+ });
+ };
+
+ //Defines which row must show the circular progress
+ const HandleStateCircularProgress = (i) => {
+ setIsLoadingToDelete(i);
+ };
+
+ //Called when user want to delete one institution
+ async function DeleteHandler() {
+ const id = deleteItem.id;
+ HandleStateAlertDialog(null);
+ deleteRequest(
+ DeleteFilter("collections", id),
+ (data) => {
+ if (data.errors)
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ else {
+ HandleSnack(
+ "A Coleção foi deletada com sucesso",
+ true,
+ "success",
+ "#228B22"
+ );
+ setCurrPage(0)
+ HandleStateCircularProgress(null);
+ removeItemFromList(id);
+ }
+ },
+ (error) => {
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ HandleStateCircularProgress(null);
+ }
+ );
}
- if (index !== -1) {
- const cpyItems = [...items]
- cpyItems.splice(index, 1)
- setItems(cpyItems)
+
+ //Controlls the state of the Alert Dialog
+ const HandleStateAlertDialog = (i) => {
+ const obj = { ...items[i] };
+ setDeleteItem(obj);
+ setOpenAlertDialog(!openAlertDialog);
+ };
+
+ // handle change of privacy
+ const handleChange = (e) => {
+ setOption(e.target.value);
+ };
+
+ const HandleSearch = (e) => {
+ setValueOfSearch(e.target.value)
}
- }
-
- useEffect(() => {
- if (currPage === 0)
- setIsLoaded(false)
- else
- setIsLoadingMoreItems(true)
- getRequest(
- buildUrl(option, search),
- (data, header) => {
- const arrData = [...data]
- if (arrData.length === 0) {
- HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
- } else {
- const arrItems = [...items]
- if (currPage === 0) {
- setItems(arrData.concat(ADD_ONE_LENGHT))
- }
- else {
- arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
- const arrResult = arrItems.concat(arrData)
- setItems(arrResult.concat(ADD_ONE_LENGHT))
- }
- }
- setIsLoaded(true)
- setIsLoadingMoreItems(false)
- },
- (error) => {
- HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
- setIsLoadingMoreItems(false)
- setIsLoaded(true)
- setError(true)
- }
- )
- }, [currPage, search, option])
-
- useEffect(() => {
- setCurrPage(0)
- setOption()
- setSearch("")
- setValueOfSearch("")
- }, [showFilter])
-
- if (error) {
- return <div>Error: {error.message}</div>;
- } else if (!isLoaded) {
- return <LoadingSpinner text="Carregando..." />;
- } else {
- if (WINDOW_WIDTH <= 1024) {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
+
+ const DisplayDate = (date) => {
+ const convertedData = moment.utc(date);
+ return moment(convertedData)
+ .format("LLL")
+ .toString();
+ };
+
+ const buildUrl = (privacyOpt, name) => {
+ if (privacyOpt && name)
+ return Url("collections", `"privacy" : "${privacyOpt}", "name" : "${name}"`, currPage, "DESC")
+ else if (privacyOpt)
+ return Url("collections", `"privacy" : "${privacyOpt}"`, currPage, "DESC")
+ else if (name)
+ return Url("collections", `"name" : "${name}"`, currPage, "DESC")
+ else
+ return Url("collections", "", currPage, "DESC")
+ }
+
+ const removeItemFromList = (itemId) => {
+ let index = -1;
+ for (let i = 0; i < items.length; i++) {
+ const element = items[i];
+ if (element.id === itemId) {
+ index = i
+ break
}
- />
- <AlertDialog
- open={openAlertDialog}
- OnDelete={DeleteHandler}
- deleteItem={deleteItem}
- HandleClose={() => {
- setOpenAlertDialog(false);
- HandleStateCircularProgress(null);
- }}
- />
- <MobilePageHeader
- title="Coleções"
- actions={[
- {
- name: "Atualizar",
- isLoading: false,
- func: () => {
- setCurrPage(0)
- },
- icon: <UpdateRoundedIcon />
- },
- {
- name: "Filtrar",
- isLoading: false,
- func: () => {
- setShowFilter(!showFilter);
- },
- icon: <FilterListRoundedIcon />
- }
- ]}
- >
- {showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
-
- <Grid
- container
- alignItems="center"
- alignContent="center"
- xs={12}
- direction="row"
- justify="space-between"
- >
- <Grid item>
- <TextField
- select
- label="Filtro"
- value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
-
- <Grid item>
- <TextField
- label="Pesquisa"
- value={valueOfSearch}
- helperText="Ao digitar, tire o foco do campo de texto"
- onChange={(event) => HandleSearch(event)}
- onBlur={(event) => setSearch(event.target.value)}
- ></TextField>
- </Grid>
- </Grid>
- </>
- ) : null}
- </MobilePageHeader>
-
- <div style={{ height: "2em" }}></div>
-
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledDivButton
- key={new Date().toISOString() + row.created_at}
- >
- <Button
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
- onClick={() => {
- setCurrPage(currPage + 1)
- }}
- >
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
- </Button>
- </StyledDivButton>
- ) : (
- <>
- <MobileList
- key={new Date().toISOString() + row.created_at}
- title={row.name}
- subtitle={row.privacy}
- backColor={"#e81f4f"}
- avatar={<PeopleRoundedIcon />}
- href={`/admin/Collection?collection=${row.id}`}
- reset={() => {
-
- }}
- data={
- [
- {
- title: "ID",
- subtitle: row.id
-
- },
- {
- title: "Dono(a)",
- subtitle: row.owner ? row.owner.name : "Sem dados"
-
- },
- {
- title: "Criado em",
- subtitle: DisplayDate(row.created_at)
- },
- {
- title: "Atualizado em",
- subtitle: DisplayDate(row.updated_at)
- },
- {
- title: "Deletar",
- subtitle:
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
- }
- ]
- }
- />
- <div style={{ height: "0.5em" }} />
- </>
- )
- )}
- </>
- );
+ }
+ if (index !== -1) {
+ const cpyItems = [...items]
+ cpyItems.splice(index, 1)
+ setItems(cpyItems)
+ }
}
- else {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
+
+ useEffect(() => {
+ if (currPage === 0)
+ setIsLoaded(false)
+ else
+ setIsLoadingMoreItems(true)
+ getRequest(
+ buildUrl(option, search),
+ (data, header) => {
+ const arrData = [...data]
+ if (arrData.length === 0) {
+ HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+ } else {
+ const arrItems = [...items]
+ if (currPage === 0) {
+ setItems(arrData.concat(ADD_ONE_LENGHT))
+ }
+ else {
+ arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
+ const arrResult = arrItems.concat(arrData)
+ setItems(arrResult.concat(ADD_ONE_LENGHT))
+ }
+ }
+ setIsLoaded(true)
+ setIsLoadingMoreItems(false)
+ },
+ (error) => {
+ HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+ setIsLoadingMoreItems(false)
+ setIsLoaded(true)
+ setError(true)
}
- />
-
- <PageHeader
- title="Coleções"
- actions={[
- {
- name: "Atualizar",
- isLoading: false,
- func: () => {
- setCurrPage(0)
- },
- icon: <UpdateRoundedIcon />
- },
- {
- name: "Filtrar",
- isLoading: false,
- func: () => {
- setShowFilter(!showFilter);
- },
- icon: <FilterListRoundedIcon />
- }
- ]}
- >
- {showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
-
- <Grid
- container
- alignItems="center"
- alignContent="center"
- xs={12}
- direction="row"
- justify="space-between"
- >
- <Grid item>
- <TextField
- select
- label="Filtro"
- value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
-
- <Grid item>
- <TextField
- label="Pesquisa"
- value={valueOfSearch}
- helperText="Ao digitar, tire o foco do campo de texto"
- onChange={(event) => HandleSearch(event)}
- onBlur={(event) => setSearch(event.target.value)}
- ></TextField>
- </Grid>
- </Grid>
- </>
- ) : null}
- </PageHeader>
-
- <div style={{ height: "2em" }}></div>
-
- <TableData top={TOP_LABELS}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
- <StyledTableCell>
- <Button
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
- onClick={() => {
- setCurrPage(currPage + 1)
- }}
- >
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
- </Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
- {row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
- <div
- dangerouslySetInnerHTML={{ __html: row.description }}
- ></div>
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.owner ? row.owner.name : "Sem dados"}
- </StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.updated_at)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.privacy}</StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/Collection?collection=${row.id}`}>
- <IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
+ )
+ }, [currPage, search, option, forceUpdate])
+
+ useEffect(() => {
+ setCurrPage(0)
+ setOption()
+ setSearch("")
+ setValueOfSearch("")
+ }, [showFilter])
+
+ return (
+ <StyledContent contrast={state.contrast}>
+ {
+ error ? (
+ <div>Error: {error.message}</div>
+ )
+ :
+ (
+ !isLoaded ? (
+ <LoadingSpinner text="Carregando..." />
+ )
+ :
+ (
+ WINDOW_WIDTH <= 1024 ? (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+ <AlertDialog
+ open={openAlertDialog}
+ OnDelete={DeleteHandler}
+ deleteItem={deleteItem}
+ HandleClose={() => {
+ setOpenAlertDialog(false);
+ HandleStateCircularProgress(null);
+ }}
+ />
+ <MobilePageHeader
+ title="Coleções"
+ actions={[
+ {
+ name: "Atualizar",
+ isLoading: false,
+ func: () => {
+ setCurrPage(0)
+ setForceUpdate(!forceUpdate)
+ },
+ icon: <UpdateRoundedIcon />
+ },
+ {
+ name: "Filtrar",
+ isLoading: false,
+ func: () => {
+ setShowFilter(!showFilter);
+ },
+ icon: <FilterListRoundedIcon />
+ }
+ ]}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
- </IconButton>
- )}
- </StyledTableCell>
- </StyledTableRow>
- )
- )}
- </TableBody>
- </TableData>
-
- {/* This alert will be displayed if the user click to delete an institution */}
- <AlertDialog
- open={openAlertDialog}
- OnDelete={DeleteHandler}
- deleteItem={deleteItem}
- HandleClose={() => {
- setOpenAlertDialog(false);
- HandleStateCircularProgress(null);
- }}
- />
- </>
- );
- }
- }
+ {showFilter ? (
+ <StyledFilter contrast={state.contrast}>
+ <Grid
+ container
+ alignItems="center"
+ alignContent="center"
+ xs={12}
+ direction="row"
+ justify="space-between"
+ >
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
+ </Grid>
+
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Pesquisa"
+ handleChange={(event) => HandleSearch(event)}
+ value={valueOfSearch}
+ onBlur={(event) => setSearch(event.target.value)}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
+ </Grid>
+ </Grid>
+ </StyledFilter>
+ ) : null}
+ </MobilePageHeader>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ >
+ <StyledLoadMoreButton
+ contrast={state.contrast}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setCurrPage(currPage + 1)
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </StyledLoadMoreButton>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ title={row.name}
+ subtitle={row.privacy}
+ backColor={"#e81f4f"}
+ avatar={<PeopleRoundedIcon />}
+ href={`/admin/Collection?collection=${row.id}`}
+ reset={() => {
+
+ }}
+ data={
+ [
+ {
+ title: "ID",
+ subtitle: row.id
+ },
+ {
+ title: "Dono(a)",
+ subtitle: row.owner ? row.owner.name : "Sem dados"
+ },
+ {
+ title: "Criado em",
+ subtitle: DisplayDate(row.created_at)
+ },
+ {
+ title: "Atualizado em",
+ subtitle: DisplayDate(row.updated_at)
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteIcon />}
+ text="Deletar"
+ >
+ </StyledButton>
+ }
+ ]
+ }
+ />
+ </>
+ )
+ )}
+ </>
+ )
+ :
+ (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <PageHeader
+ title="Coleções"
+ actions={[
+ {
+ name: "Atualizar",
+ isLoading: false,
+ func: () => {
+ setCurrPage(0)
+ setForceUpdate(!forceUpdate)
+ },
+ icon: <UpdateRoundedIcon />
+ },
+ {
+ name: "Filtrar",
+ isLoading: false,
+ func: () => {
+ setShowFilter(!showFilter);
+ },
+ icon: <FilterListRoundedIcon />
+ }
+ ]}
+ >
+ {showFilter ? (
+ <StyledFilter contrast={state.contrast}>
+ <Grid
+ container
+ alignItems="center"
+ alignContent="center"
+ xs={12}
+ direction="row"
+ justify="space-between"
+ >
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
+ </Grid>
+
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Pesquisa"
+ handleChange={(event) => HandleSearch(event)}
+ value={valueOfSearch}
+ onBlur={(event) => setSearch(event.target.value)}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
+ </Grid>
+ </Grid>
+ </StyledFilter>
+ ) : null}
+ </PageHeader>
+
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
+ <TableCell className={classesCell.root} colSpan={8}>
+ <Button
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setCurrPage(currPage + 1)
+ }}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </TableCell>
+ </TableRow>
+ ) : (
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
+ {row.name}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <div
+ dangerouslySetInnerHTML={{ __html: row.description }}
+ ></div>
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {row.owner ? row.owner.name : "Sem dados"}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {DisplayDate(row.created_at)}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {DisplayDate(row.updated_at)}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.privacy}</TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <Link to={`/admin/Collection?collection=${row.id}`}>
+ <IconButton>
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
+ </IconButton>
+ </Link>
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {isLoadingToDelete === index ? (
+ <CircularProgress size={24} color="primary" />
+ ) : (
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
+ </IconButton>
+ )}
+ </TableCell>
+ </TableRow>
+ )
+ )}
+ </TableBody>
+ </TableData>
+
+ {/* This alert will be displayed if the user click to delete an institution */}
+ <AlertDialog
+ open={openAlertDialog}
+ OnDelete={DeleteHandler}
+ deleteItem={deleteItem}
+ HandleClose={() => {
+ setOpenAlertDialog(false);
+ HandleStateCircularProgress(null);
+ }}
+ />
+ </>
+ )
+ )
+ )
+ }
+ </StyledContent>
+ );
};
export default Collections;
-const StyledDivButton = styled(Paper)`
+export const StyledLoadMoreButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "" : "underline yellow"} !important;
+`
+
+export const StyledDivButton = styled(Paper)`
width : 100%;
display : flex;
justify-content : center;
align-items : center;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
`
+const StyledContent = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 4c93b941127ab8009536a7ada106ca0791ffec23..b6be7e2178f7fe4cd1d28bd0752d8ad0f7b0c34f 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -16,7 +16,7 @@ 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, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from 'moment';
//imports from local files
import TableData from "../../../Components/Components/Table";
@@ -26,15 +26,17 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
-import { Button, Paper, Grid } from "@material-ui/core";
+import { Button, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
@@ -44,27 +46,13 @@ import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
//routers
import { Link } from 'react-router-dom';
-import styled from "styled-components"
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const CommunityQuestion = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
-const CommunityQuestion = () => {
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -93,6 +81,7 @@ const CommunityQuestion = () => {
const [email, setEmail] = useState("");
const [valueOfNameField, setValueOfNameField] = useState("")
const [name, setName] = useState("");
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -192,7 +181,7 @@ const CommunityQuestion = () => {
setError(true)
}
)
- }, [currPage, message, email, name, invertList])
+ }, [currPage, message, email, name, invertList, forceUpdate])
useEffect(() => {
setCurrPage(0)
@@ -234,6 +223,7 @@ const CommunityQuestion = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -255,6 +245,7 @@ const CommunityQuestion = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -265,47 +256,48 @@ const CommunityQuestion = () => {
xs={12}
>
<Grid item>
- <TextField
- label="Email"
- value={valueOfEmailField}
- onChange={valueOfEmailHandler}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={valueOfEmailHandler}
+ value={valueOfEmailField}
+ onBlur={(event) => setEmail(event.target.value)}
+ help="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Mensagem"
- value={valueOfMessageField}
- onChange={valueOfMessageHandler}
- onBlur={(e) => { setMessage(e.target.value) }}
- helperText="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Mensagem"
+ handleChange={valueOfMessageHandler}
+ value={valueOfMessageField}
+ onBlur={(event) => setMessage(event.target.value)}
+ help="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- value={valueOfNameField}
- onChange={valueOfNameHandler}
- onBlur={(e) => { setName(e.target.value) }}
- helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={valueOfNameHandler}
+ value={valueOfNameField}
+ onBlur={(event) => setName(event.target.value)}
+ help="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key="Load more"
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -320,11 +312,12 @@ const CommunityQuestion = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={index}
title={row.name}
subtitle={row.id}
@@ -340,13 +333,13 @@ const CommunityQuestion = () => {
subtitle:
row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ color="primary"
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
@@ -362,7 +355,6 @@ const CommunityQuestion = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -394,6 +386,7 @@ const CommunityQuestion = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -408,6 +401,7 @@ const CommunityQuestion = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -418,48 +412,47 @@ const CommunityQuestion = () => {
xs={12}
>
<Grid item>
- <TextField
- label="Email"
- value={valueOfEmailField}
- onChange={valueOfEmailHandler}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={valueOfEmailHandler}
+ value={valueOfEmailField}
+ onBlur={(event) => setEmail(event.target.value)}
+ help="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Mensagem"
- value={valueOfMessageField}
- onChange={valueOfMessageHandler}
- onBlur={(e) => { setMessage(e.target.value) }}
- helperText="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Mensagem"
+ handleChange={valueOfMessageHandler}
+ value={valueOfMessageField}
+ onBlur={(event) => setMessage(event.target.value)}
+ help="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- value={valueOfNameField}
- onChange={valueOfNameHandler}
- onBlur={(e) => { setName(e.target.value) }}
- helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={valueOfNameHandler}
+ value={valueOfNameField}
+ onBlur={(event) => setName(event.target.value)}
+ help="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<TableData top={TOP_LABELS} onIconPressed={cleanArrayAndInvert}>
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={row.created_at} style={{ padding: "1em" }}>
+ <TableRow className={classesRow.root} key={row.created_at} style={{ padding: "1em" }}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -468,6 +461,7 @@ const CommunityQuestion = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -475,44 +469,44 @@ const CommunityQuestion = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{row.id}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
- {
- row.email ?
- <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
- </Link> : null
- }
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color='primary'
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.message}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/CommunityQuestion?question=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -522,12 +516,3 @@ const CommunityQuestion = () => {
}
}
export default CommunityQuestion;
-
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index d03514dc91f170cd84c4807e42c5f4d643de036e..0da9bdf14296d50813f2de8cff6e73262443592b 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -16,7 +16,7 @@ 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, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from "moment";
//imports from local files
import TableData from "../../../Components/Components/Table";
@@ -26,14 +26,16 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -44,28 +46,15 @@ import VisibilityIcon from "@material-ui/icons/Visibility";
import LaunchRoundedIcon from "@material-ui/icons/LaunchRounded";
//routers
import { Link } from "react-router-dom";
-import styled from "styled-components"
import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Complaints = () => {
+
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
@@ -93,6 +82,7 @@ const Complaints = () => {
const [description, setDescription] = useState("");
const [valueOfDescField, setValueOfDescField] = useState("")
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -158,7 +148,8 @@ const Complaints = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -174,7 +165,8 @@ const Complaints = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -188,7 +180,8 @@ const Complaints = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -267,7 +260,7 @@ const Complaints = () => {
setError(true)
}
)
- }, [currPage, complainOption, stateOption, description, invertList])
+ }, [currPage, complainOption, stateOption, description, invertList, forceUpdate])
useEffect(() => {
setComplainOption()
@@ -307,6 +300,7 @@ const Complaints = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -328,6 +322,7 @@ const Complaints = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -338,58 +333,68 @@ const Complaints = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Motivo"
- value={complainOption}
- onChange={handleChangeComplain}
- helperText="Por favor, selecione uma das opções"
- >
- {ComplaintReasons.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Motivo"
+ value={complainOption}
+ handleChange={handleChangeComplain}
+ help="Por favor, selecione uma das opções"
+ items={ComplaintReasons.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- select
- label="Estado"
- value={stateOption}
- onChange={handleChangeState}
- helperText="Por favor, selecione uma das opções"
- >
- {stateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={stateOption}
+ handleChange={handleChangeState}
+ help="Por favor, selecione uma das opções"
+ items={stateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField label="Descrição" helperText="Ao digitar a descrição, retire o foco do campo de texto" onChange={DescriptionHandler} value={valueOfDescField} onBlur={e => setDescription(e.target.value)} />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Descrição"
+ handleChange={DescriptionHandler}
+ value={valueOfDescField}
+ onBlur={(event) => setDescription(event.target.value)}
+ help="Ao digitar a descrição, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -404,11 +409,12 @@ const Complaints = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.complainable_type}
subtitle={row.id}
@@ -440,7 +446,6 @@ const Complaints = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -473,6 +478,7 @@ const Complaints = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -487,6 +493,7 @@ const Complaints = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -497,52 +504,60 @@ const Complaints = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Motivo"
- value={complainOption}
- onChange={handleChangeComplain}
- helperText="Por favor, selecione uma das opções"
- >
- {ComplaintReasons.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Motivo"
+ value={complainOption}
+ handleChange={handleChangeComplain}
+ help="Por favor, selecione uma das opções"
+ items={ComplaintReasons.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- select
- label="Estado"
- value={stateOption}
- onChange={handleChangeState}
- helperText="Por favor, selecione uma das opções"
- >
- {stateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={stateOption}
+ handleChange={handleChangeState}
+ help="Por favor, selecione uma das opções"
+ items={stateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField label="Descrição" helperText="Ao digitar a descrição, retire o foco do campo de texto" onChange={DescriptionHandler} value={valueOfDescField} onBlur={e => setDescription(e.target.value)} />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Descrição"
+ handleChange={DescriptionHandler}
+ value={valueOfDescField}
+ onBlur={(event) => setDescription(event.target.value)}
+ help="Ao digitar a descrição, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<Grid xs={12} container>
<TableData
top={TOP_LABELS}
@@ -551,9 +566,9 @@ const Complaints = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={8}>
<Button
color="primary"
variant="text"
@@ -563,6 +578,7 @@ const Complaints = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -570,67 +586,57 @@ const Complaints = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow
+ <TableRow className={classesRow.root}
key={new Date().toISOString() + index}
style={{ flex: 1, width: "100%" }}
>
- <StyledTableCell component="th" scope="row">
+ <TableCell className={classesCell.root} component="th" scope="row">
{ComplaintStatus(row.state, row.complainable_type)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.description}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.complainable_id}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.complainable_type}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/complaint?id=${row.id}`}>
<IconButton
onClick={() => {
}}
>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- <Button
- variant="text"
- secondary={true}
- startIcon={
- <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
- }
- >
- <a
- style={{
- textDecoration: "none",
- color: "#FA8072",
- }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <a href={PORTAL_MEC +
convertToLink(
row.complainable_type,
row.complainable_id
- )
- }
+ )}
>
- MEC RED
- </a>
- </Button>
- </StyledTableCell>
- </StyledTableRow>
+ <StyledButton
+ variant="text"
+ secondary={true}
+ icon={
+ <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
+ }
+ text="MEC RED"
+ />
+ </a>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -641,12 +647,4 @@ const Complaints = () => {
}
}
};
-export default Complaints;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Complaints;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index 69d0dfc326b54a0f970a6e98e905dddff7f0f41f..64a493888db5f300d3293c169be3e3766df2ed4a 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -16,7 +16,7 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Imports from local file
import TableData from "../../../Components/Components/Table";
@@ -25,7 +25,11 @@ import AlertDialog from "../../../Components/Components/AlertDialog";
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -37,40 +41,24 @@ import IconButton from "@material-ui/core/IconButton";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
// Import from material-ui
-import { withStyles } from "@material-ui/core/styles";
-import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
-import TextField from "@material-ui/core/TextField";
// services
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//Filters
import { Url, DeleteFilter } from "../../../Filters";
//router
import { Link } from 'react-router-dom';
-import styled from 'styled-components'
import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const EducationalObjects = () => {
+
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -83,6 +71,7 @@ const EducationalObjects = () => {
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
const [showFilter, setShowFilter] = useState(false)
const [openAlertDialog, setOpenAlertDialog] = useState(false);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -237,7 +226,7 @@ const EducationalObjects = () => {
setError(true)
}
)
- }, [currPage, search, description, author])
+ }, [currPage, search, description, author, forceUpdate])
useEffect(() => {
setCurrPage(0)
@@ -326,6 +315,7 @@ const EducationalObjects = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -341,34 +331,36 @@ const EducationalObjects = () => {
>
{
showFilter &&
+ <StyledFilter contrast={state.contrast}>
<Grid item xs={12}>
<Grid container justify="space-between" spacing={3}>
{TextFieldOfTheFilter.map((field, index) => (
<Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- type="search"
- onChange={field.onChange}
- onBlur={field.onBlur}
- value={field.value}
- helperText={field.helperText}
- />
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ inputType="search"
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
</Grid>
))}
</Grid>
</Grid>
+ </StyledFilter>
}
</MobilePageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton>
- <Button
+ <StyledDivButton contrast={state.contrast}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -384,11 +376,12 @@ const EducationalObjects = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -419,22 +412,20 @@ const EducationalObjects = () => {
{
title: "Deletar",
subtitle:
- <Button
+ <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index);
HandleStateCircularProgress(index);
}}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteIcon />}
+ text="Deletar"
+ />
}
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -468,6 +459,7 @@ const EducationalObjects = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -483,37 +475,38 @@ const EducationalObjects = () => {
>
{
showFilter &&
+ <StyledFilter contrast={state.contrast}>
<Grid item xs={12}>
<Grid container justify="space-between" spacing={3}>
{TextFieldOfTheFilter.map((field, index) => (
<Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- type="search"
- onChange={field.onChange}
- onBlur={field.onBlur}
- value={field.value}
- helperText={field.helperText}
- />
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ inputType="search"
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
</Grid>
))}
</Grid>
</Grid>
+ </StyledFilter>
}
</PageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
<TableData top={TOP_TABLE}>
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -524,6 +517,7 @@ const EducationalObjects = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -531,33 +525,33 @@ const EducationalObjects = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.description}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.author}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.score}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/learningObject?learnObj=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -567,11 +561,11 @@ const EducationalObjects = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }}/>
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -594,12 +588,4 @@ const EducationalObjects = () => {
}
};
-export default EducationalObjects;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default EducationalObjects;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Inframe.js b/src/Admin/Pages/Pages/SubPages/Inframe.js
index f2979dbbda1405d86d73cd8bd1a51da35167a685..cfda1e2917175cd3bb4e21d543d6bd5748497579 100644
--- a/src/Admin/Pages/Pages/SubPages/Inframe.js
+++ b/src/Admin/Pages/Pages/SubPages/Inframe.js
@@ -16,24 +16,73 @@ 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 from 'react';
+import React, { useContext, useEffect, useState } from 'react';
import Welcome from '../../../Components/Components/Welcome';
+import LoadingSpinner from 'Components/LoadingSpinner';
+
+import { Store } from 'Store'
+import styled from 'styled-components'
const IframeComponent = () => {
+ const { state } = useContext(Store);
+
+ const [srcMetabase, setSrcMetabase] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ const changeMetabase = () => {
+ if (state.contrast !== "")
+ setSrcMetabase("https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623#theme=night");
+ else
+ setSrcMetabase("https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623");
+ }
+
+ useEffect(() => {
+ if (loading === true) {
+ changeMetabase();
+ setLoading(false);
+ }
+ }, [ loading ])
+
+ useEffect(() => {
+ setLoading(true);
+ }, [ state.contrast ])
+
return (
- <div>
- <Welcome />
- <div style={{ height: '1em' }}></div>
- <iframe
- title="Métricas portal MEC"
- src='https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623'
- height='800px'
- width='100%'
- // allowTransparency={true}
- frameBorder={0}
- >
- </iframe>
- </div>
+ <>
+ {!loading ? (
+ <StyledDiv contrast={state.contrast}>
+ <Welcome contrast={state.contrast}/>
+ <div style={{ height: '1em' }}></div>
+ <StyledIframe
+ title="Métricas portal MEC"
+ src={srcMetabase}
+ height='800px'
+ width='100%'
+ // allowTransparency={true}
+ frameBorder={0}
+ contrast={state.contrast}
+ >
+ </StyledIframe>
+ </StyledDiv>
+ )
+ :
+ (
+ <LoadingSpinner/>
+ )
+ }
+ </>
)
}
+
+const StyledDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+
+const StyledIframe = styled.iframe`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+`
+
export default IframeComponent;
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index 7f713b9e4f42d42c906092fc0c3e1baccbdb1080..4fa613c5c156445f71b6331dd32d4ec2b1abc640 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -16,7 +16,7 @@ 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, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
// Imports from local files
import TableData from "../../../Components/Components/Table";
import SnackBar from "../../../../Components/SnackbarComponent";
@@ -24,7 +24,10 @@ import AlertDialog from "../../../Components/Components/AlertDialog";
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import { Store } from 'Store';
+import StyledButton from '../../../Components/Components/Button';
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -36,40 +39,25 @@ import IconButton from "@material-ui/core/IconButton";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
// Import from material-ui
-import { withStyles } from "@material-ui/core/styles";
-import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
-import TextField from "@material-ui/core/TextField";
+import FormInput from "Components/FormInput.js"
// services
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//Filters
import { Url, DeleteFilter } from "../../../Filters";
//router
import { Link, useHistory } from 'react-router-dom';
-import styled from "styled-components"
import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Institutions = () => {
+
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -84,6 +72,7 @@ const Institutions = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [openAlertDialog, setOpenAlertDialog] = useState(false);
@@ -228,7 +217,7 @@ const Institutions = () => {
setError(true)
}
)
- }, [currPage, description, country, search, city, invertList])
+ }, [currPage, description, country, search, city, invertList, forceUpdate])
useEffect(() => {
setSeacrh("")
@@ -327,6 +316,7 @@ const Institutions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -350,35 +340,38 @@ const Institutions = () => {
>
{
showFilter &&
- <Grid item xs={12}>
- <Grid container justify="space-between" spacing={3}>
- {TextFieldOfTheFilter.map((field, index) => (
- <Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- value={field.value}
- helperText={field.helperText}
- onChange={field.onChange}
- onBlur={field.onBlur}
- />
- </Grid>
- ))}
+ <StyledFilter contrast={state.contrast}>
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={field.label}>
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
+ </Grid>
+ ))}
+ </Grid>
</Grid>
- </Grid>
+ </StyledFilter>
}
</MobilePageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -391,59 +384,58 @@ const Institutions = () => {
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
- </Button>
+ "Carregar mais itens"
+ )}
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
- <>
- <MobileList
- key={new Date().toISOString() + row.created_at}
- title={row.name}
- subtitle={row.id}
- backColor={"#ff7f00"}
- avatar={<AccountBalanceRoundedIcon />}
- href={`/admin/institution?institution=${row.id}`}
- reset={() => {
-
- }}
- data={
- [
- {
- title: "Descrição",
- subtitle: row.description ? row.description : "Sem dado"
-
- },
- {
- title: "Cidade",
- subtitle: row.city ? row.city : "Sem dado"
-
- },
- {
- title: "PaÃs",
- subtitle: row.country ? row.country : "Sem dado"
- },
- {
- title: "Deletar",
- subtitle:
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
- }
- ]
- }
- />
- <div style={{ height: "0.5em" }} />
- </>
- )
+ <>
+ <MobileList
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#ff7f00"}
+ avatar={<AccountBalanceRoundedIcon />}
+ href={`/admin/institution?institution=${row.id}`}
+ reset={() => {
+
+ }}
+ data={
+ [
+ {
+ title: "Descrição",
+ subtitle: row.description ? row.description : "Sem dado"
+
+ },
+ {
+ title: "Cidade",
+ subtitle: row.city ? row.city : "Sem dado"
+
+ },
+ {
+ title: "PaÃs",
+ subtitle: row.country ? row.country : "Sem dado"
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteIcon />}
+ text="Deletar"
+ />
+ }
+ ]
+ }
+ />
+ </>
+ )
)}
{/************** End of display data in table **************/}
@@ -477,6 +469,7 @@ const Institutions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -500,36 +493,37 @@ const Institutions = () => {
>
{
showFilter &&
- <Grid item xs={12}>
- <Grid container justify="space-between" spacing={3}>
- {TextFieldOfTheFilter.map((field, index) => (
- <Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- value={field.value}
- helperText={field.helperText}
- onChange={field.onChange}
- onBlur={field.onBlur}
- />
- </Grid>
- ))}
+ <StyledFilter contrast={state.contrast}>
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={field.label}>
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
+ </Grid>
+ ))}
+ </Grid>
</Grid>
- </Grid>
+ </StyledFilter>
}
</PageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
<TableData top={topTable} onIconPressed={cleanArrayAndInvert}>
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -538,51 +532,52 @@ const Institutions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? { width: "100%" } : { width: "100%", color: "yellow", textDecoration: "underline yellow" }}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
+ "Carregar mais itens"
+ )}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
- {row.id}
- </StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">
- {row.description}
- </StyledTableCell>
- <StyledTableCell align="right">{row.city}</StyledTableCell>
- <StyledTableCell align="right">
- {row.country}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/institution?institution=${row.id}`}>
- <IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteIcon style={{ fill: "#FF0000" }} />
- </IconButton>
- )}
- </StyledTableCell>
- </StyledTableRow>
- )
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
+ {row.id}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {row.description}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.city}</TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {row.country}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <Link to={`/admin/institution?institution=${row.id}`}>
+ <IconButton>
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
+ </IconButton>
+ </Link>
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {isLoadingToDelete === index ? (
+ <CircularProgress size={24} color="primary" />
+ ) : (
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
+ </IconButton>
+ )}
+ </TableCell>
+ </TableRow>
+ )
)}
</TableBody>
</TableData>
@@ -604,12 +599,4 @@ const Institutions = () => {
}
};
-export default Institutions;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Institutions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index c38ac1e1015d1ad352f23e597ee85240c4e28a2c..55dca43dbdb64bdef7d7ea8e6dcb938640219bd6 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -16,7 +16,7 @@ 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, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
//imports from local files
import TableData from '../../../Components/Components/Table';
import SnackBar from '../../../../Components/SnackbarComponent';
@@ -28,13 +28,15 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
-import { Button, Paper } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
@@ -42,28 +44,15 @@ import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
//router
import { Link, useHistory } from 'react-router-dom';
-import styled from "styled-components"
import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const Languages = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const Languages = () => {
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', 'DELETAR'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -80,6 +69,7 @@ const Languages = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -192,7 +182,7 @@ const Languages = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -231,6 +221,7 @@ const Languages = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -246,12 +237,11 @@ const Languages = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -264,49 +254,48 @@ const Languages = () => {
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
- </Button>
+ "Carregar mais itens"
+ )}
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
- <>
- <MobileList
- key={new Date().toISOString() + row.created_at}
- title={row.name}
- subtitle={row.id}
- backColor={"#e81f4f"}
- avatar={<LanguageRoundedIcon />}
- href={`/admin/languageEdit?language=${row.id}`}
- reset={() => {
+ <>
+ <MobileList
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#e81f4f"}
+ avatar={<LanguageRoundedIcon />}
+ href={`/admin/languageEdit?language=${row.id}`}
+ reset={() => {
- }}
- data={
- [
- {
- title: "Code",
- subtitle: row.code
- },
- {
- title: "Deletar",
- subtitle:
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
- }
- ]
- }
- />
- <div style={{ height: "0.5em" }} />
- </>
- )
+ }}
+ data={
+ [
+ {
+ title: "Code",
+ subtitle: row.code
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
+ }
+ ]
+ }
+ />
+ </>
+ )
)}
</>
);
@@ -335,6 +324,7 @@ const Languages = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -350,8 +340,6 @@ const Languages = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
@@ -359,9 +347,9 @@ const Languages = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color='primary'
variant='text'
@@ -371,42 +359,43 @@ const Languages = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? { width: "100%" } : { width: "100%", color: "yellow", textDecoration: "underline yellow" }}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.code}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.code}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/languageEdit?language=${row.id}`}>
<IconButton>
- <EditRoundedIcon style={{ fill: '#00bcd4' }} />
+ <EditRoundedIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
- </IconButton>
- )}
- </StyledTableCell>
- </StyledTableRow>
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
+ </IconButton>
+ )}
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -426,12 +415,4 @@ const Languages = () => {
}
}
}
-export default Languages;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Languages;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index 1ad35f99a8c2a8c5a7e8340acfbd1d9551ec5473..865a290186031d94578ca0b42344035b88e3fae9 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -15,11 +15,9 @@ 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, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
-import Paper from "@material-ui/core/Paper";
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
@@ -37,34 +35,22 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import { Store } from 'Store'
//Services
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
//routers
import { Link } from 'react-router-dom';
-import styled from "styled-components"
import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const NoteVariables = () => {
+
+ const { state } = useContext(Store)
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const NoteVariables = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -74,6 +60,7 @@ const NoteVariables = () => {
const [currPage, setCurrPage] = useState(0)
const [items, setItems] = useState([]); //Necessary to consult the API, data
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -130,7 +117,7 @@ const NoteVariables = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -164,6 +151,7 @@ const NoteVariables = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -178,12 +166,11 @@ const NoteVariables = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -198,11 +185,12 @@ const NoteVariables = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -225,12 +213,11 @@ const NoteVariables = () => {
},
{
title: "Ativo",
- subtitle: row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ subtitle: row.active ? <CheckRoundedIcon style={{ fill: state.contrast === "" ? "#3CB371" : "white" }} /> : <BlockRoundedIcon style={{ fill: state.contrast === "" ? "#FA8072" : "white" }} />
},
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -260,6 +247,7 @@ const NoteVariables = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -267,8 +255,6 @@ const NoteVariables = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -276,9 +262,9 @@ const NoteVariables = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color='primary'
variant='text'
@@ -287,27 +273,28 @@ const NoteVariables = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.code}</StyledTableCell>
- <StyledTableCell align="right">{row.weight}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.code}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.weight}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{
- row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ row.active ? <CheckRoundedIcon style={{ fill: state.contrast === "" ? "#3CB371" : "white" }} /> : <BlockRoundedIcon style={{ fill: state.contrast === "" ? "#FA8072" : "white" }} />
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row['score_type'].map((item) => (
<Typography key={item} style={{ fontSize: 14 }}>
@@ -315,15 +302,15 @@ const NoteVariables = () => {
</Typography>
))
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/noteVar?id=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -334,11 +321,4 @@ const NoteVariables = () => {
}
-export default NoteVariables;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
+export default NoteVariables;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index 787ac0de2893aeaa4107d7c57d3ef43935fe78dd..0623ea00ed8f2b755fe0beed8c4798597536c23c 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -16,7 +16,7 @@ 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, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
//imports from local files
import TableData from '../../../Components/Components/Table';
import SnackBar from '../../../../Components/SnackbarComponent';
@@ -25,15 +25,17 @@ import { Url } from '../../../Filters';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { DeleteFilter } from '../../../Filters';
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
-import { Button, Paper } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
@@ -41,28 +43,15 @@ import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
//router
import { Link, useHistory } from 'react-router-dom';
-import styled from "styled-components"
import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded"
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const UserPermissions = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const UserPermissions = () => {
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -79,6 +68,7 @@ const UserPermissions = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -189,7 +179,7 @@ const UserPermissions = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -228,6 +218,7 @@ const UserPermissions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -250,12 +241,11 @@ const UserPermissions = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -270,11 +260,12 @@ const UserPermissions = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -292,22 +283,20 @@ const UserPermissions = () => {
},
{
title: "Ações",
- subtitle: <Button
+ subtitle: <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index)
HandleStateCircularProgress(index)
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
},
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -338,6 +327,7 @@ const UserPermissions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -353,8 +343,6 @@ const UserPermissions = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
@@ -362,9 +350,9 @@ const UserPermissions = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={4}>
<Button
color='primary'
variant='text'
@@ -374,36 +362,36 @@ const UserPermissions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.description}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/EditPermissions?role=${row.id}`}>
- <Button
+ <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="primary"
- startIcon={<EditRoundedIcon />}
- >
- Editar
- </Button>
+ icon={<EditRoundedIcon />}
+ text="Editar"
+ />
</Link>
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
- <Button
+ <StyledButton
style={{ width: "100%" }}
variant="contained"
color="secondary"
@@ -411,14 +399,13 @@ const UserPermissions = () => {
HandleStateAlertDialog(index)
HandleStateCircularProgress(index)
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -438,12 +425,4 @@ const UserPermissions = () => {
}
}
}
-export default UserPermissions;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default UserPermissions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index ca32e0cd11a506134b40c2801dde53209d615cb2..706a93cca96d177ce7afa8ff05d7393ed40e5eb6 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -16,7 +16,7 @@ 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, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
import moment from 'moment';
//imports from local files
import TableData from '../../../Components/Components/Table';
@@ -27,40 +27,27 @@ import { getRequest, putRequest } from '../../../../Components/HelperFunctions/g
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import { Store } from 'Store'
+import { BlueCheckBox, ContrastCheckBox } from "../../../Components/Components/Inputs/EmailInputs"
//imports from material ui
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
-import { Button, Paper } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
-import Switch from '@material-ui/core/Switch';
//router
import { useHistory } from 'react-router-dom';
-import styled from "styled-components"
import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const Questions = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
-const Questions = () => {
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
const ADD_ONE_LENGHT = [""];
const WINDOW_WIDTH = window.innerWidth
@@ -73,6 +60,7 @@ const Questions = () => {
const [items, setItems] = useState([]); //Necessary to consult the API, data
const [currPage, setCurrPage] = useState(0)
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false) //controlls the state of loadind more data
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -194,7 +182,7 @@ const Questions = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
@@ -226,6 +214,7 @@ const Questions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -248,14 +237,14 @@ const Questions = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -270,11 +259,12 @@ const Questions = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={DisplayDate(row.created_at)}
@@ -291,21 +281,7 @@ const Questions = () => {
{
title: "Status",
subtitle:
- row.status === 'active' ?
- <Switch
- checked={true}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- :
-
- <Switch
- checked={false}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
+ state.contrast === "" ? <BlueCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/> : <ContrastCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/>
},
{
title: "Atualizado em",
@@ -314,7 +290,6 @@ const Questions = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -345,6 +320,7 @@ const Questions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -360,8 +336,6 @@ const Questions = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
@@ -369,9 +343,9 @@ const Questions = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color='primary'
variant='text'
@@ -381,41 +355,28 @@ const Questions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell >
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{DisplayDate(row.created_at)}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
- {
- row.status === 'active' ?
- <Switch
- checked={true}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- :
-
- <Switch
- checked={false}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- }
- </StyledTableCell>
- <StyledTableCell align="right">{DisplayDate(row.updated_at)}</StyledTableCell>
- </StyledTableRow>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell >
+ <TableCell className={classesCell.root} align="right">{DisplayDate(row.created_at)}</TableCell >
+ <TableCell className={classesCell.root} align="right">{row.description}</TableCell >
+ <TableCell className={classesCell.root} align="right">
+ {
+ state.contrast === "" ? <BlueCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/> : <ContrastCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/>
+ }
+ </TableCell >
+ <TableCell className={classesCell.root} align="right">{DisplayDate(row.updated_at)}</TableCell >
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -424,12 +385,4 @@ const Questions = () => {
}
}
}
-export default Questions;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Questions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index 22d57d409dfe56f9b649f36c9ad4b67d10cd923c..927426178ba72323816aa4f052a747ca6d28b4d1 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -16,11 +16,9 @@ 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, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
-import Paper from "@material-ui/core/Paper";
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
@@ -37,6 +35,9 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
//Services
import AlertDialog from "../../../Components/Components/AlertDialog";
import { Url } from '../../../Filters';
@@ -45,27 +46,14 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
//routers
import { Link, useHistory } from 'react-router-dom';
import StarRoundedIcon from "@material-ui/icons/StarRounded";
-import styled from "styled-components"
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const Ratings = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const Ratings = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -80,6 +68,7 @@ const Ratings = () => {
const [openAlertDialog, setOpenAlertDialog] = useState(false); //controlls the state od alert dialog
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -190,7 +179,7 @@ const Ratings = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -232,6 +221,7 @@ const Ratings = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -247,12 +237,11 @@ const Ratings = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -267,11 +256,12 @@ const Ratings = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -290,22 +280,20 @@ const Ratings = () => {
{
title: "Deletar",
subtitle:
- <Button
+ <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index);
HandleStateCircularProgress(index);
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
}
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -335,6 +323,7 @@ const Ratings = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -350,8 +339,6 @@ const Ratings = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -359,9 +346,9 @@ const Ratings = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color='primary'
variant='text'
@@ -370,28 +357,29 @@ const Ratings = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.description}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/Rating?rating=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -401,11 +389,11 @@ const Ratings = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -428,11 +416,3 @@ const Ratings = () => {
export default Ratings;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
diff --git a/src/Admin/Pages/Pages/SubPages/SendEmail.js b/src/Admin/Pages/Pages/SubPages/SendEmail.js
index aff09bc843ce63f5238516695dd3887398987756..92db3b654999d747828f2ab979a2147b3432896f 100644
--- a/src/Admin/Pages/Pages/SubPages/SendEmail.js
+++ b/src/Admin/Pages/Pages/SubPages/SendEmail.js
@@ -18,12 +18,14 @@ 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 from 'react';
-import Card from "@material-ui/core/Card";
+import React, { useContext } from 'react';
import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles";
import { Typography } from '@material-ui/core';
import EmailInputs from '../../../Components/Components/Inputs/EmailInputs';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+
+import { Store } from 'Store'
const useStyles = makeStyles({
root: {
@@ -54,14 +56,16 @@ const useStyles = makeStyles({
},
});
-
const SendEmail = ({ match }) => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const email = urlParams.get("email");
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography
className={classes.title}
@@ -70,9 +74,9 @@ const SendEmail = ({ match }) => {
>
Enviar email
</Typography>
- <EmailInputs email={email} />
+ <EmailInputs email={email} contrast={state.contrast}/>
</CardContent>
- </Card>
+ </StyledCard>
);
}
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index dfb320d805bed3ad175195bbef2eaf886140bff5..55d5b5c9169afbed0cbdd36ce2beb52b91a71c0d 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -15,12 +15,10 @@ 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, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
@@ -28,7 +26,6 @@ import VisibilityIcon from '@material-ui/icons/Visibility';
import { Button, Chip } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
-import TextField from '@material-ui/core/TextField';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded'
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
//Local files
@@ -37,7 +34,11 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -51,25 +52,13 @@ import { apiDomain } from '../../../../env';
//Image Import
import { noAvatar } from "ImportImages.js";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Users = () => {
+
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -82,6 +71,7 @@ const Users = () => {
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
const [showFilter, setShowFilter] = useState(false)
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [name, setName] = useState("");
const [nameValue, setNameValue] = useState("")
@@ -226,7 +216,7 @@ const Users = () => {
setIsLoadingMoreItems(false)
}
)
- }, [currPage, email, name, invertList])
+ }, [currPage, email, name, invertList, forceUpdate])
useEffect(() => {
setNameValue("")
@@ -266,6 +256,7 @@ const Users = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -296,36 +287,39 @@ const Users = () => {
>
{
showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid container direction="row" justify="space-between" alignItems="center">
<Grid item>
- <TextField
- label="Name"
- value={nameValue}
- onChange={(e) => { NameHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Name"
+ handleChange={(e) => { NameHandler(e) }}
+ onBlur={(e) => { setName(e.target.value) }}
+ value={nameValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
<Grid item>
- <TextField
- label="Email"
- value={emailValue}
- onChange={(e) => { EmailHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={(e) => { EmailHandler(e) }}
+ onBlur={(e) => { setEmail(e.target.value) }}
+ value={emailValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
</Grid>
+ </StyledFilter>
) : null
}
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -340,11 +334,12 @@ const Users = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -368,13 +363,12 @@ const Users = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
{
@@ -389,7 +383,9 @@ const Users = () => {
title: "Permissão",
subtitle: row.roles.map((chip) => (
<ChipDiv>
- <Chip label={chip.name} key={chip.id} />
+ <Chip label={chip.name} key={chip.id}
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
+ />
</ChipDiv>
))
},
@@ -399,19 +395,17 @@ const Users = () => {
},
{
title: "Ações rápidas",
- subtitle: <Button
+ subtitle: <StyledButton
variant="contained"
color="primary"
disabled={isUserPublisher(row.roles)}
onClick={() => { turnUserPublisher(row.roles, row.id) }}
- >
- Tornar publicador
- </Button>
+ text="Tornar publicador"
+ />
}
]}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -441,6 +435,7 @@ const Users = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -464,32 +459,34 @@ const Users = () => {
>
{
showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid container direction="row" justify="space-between" alignItems="center">
<Grid item>
- <TextField
- label="Name"
- value={nameValue}
- onChange={(e) => { NameHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Name"
+ handleChange={(e) => { NameHandler(e) }}
+ onBlur={(e) => { setName(e.target.value) }}
+ value={nameValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
<Grid item>
- <TextField
- label="Email"
- value={emailValue}
- onChange={(e) => { EmailHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={(e) => { EmailHandler(e) }}
+ onBlur={(e) => { setEmail(e.target.value) }}
+ value={emailValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
</Grid>
+ </StyledFilter>
) : null
}
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -497,9 +494,9 @@ const Users = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={8}>
<Button
color='primary'
variant='text'
@@ -508,51 +505,65 @@ const Users = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.email ? row.email : ""}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.score}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.score}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.roles.map((chip) => (
<ChipDiv>
- <Chip label={chip.name} key={chip.id} />
+ <Chip label={chip.name} key={chip.id}
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
+ />
</ChipDiv>
))
}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Button
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <StyledButton
variant="contained"
color="primary"
disabled={isUserPublisher(row.roles)}
onClick={() => { turnUserPublisher(row.roles, row.id) }}
- >
- Tornar publicador
- </Button>
- </StyledTableCell>
- <StyledTableCell align="right">
+ text="Tornar publicador"
+ />
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/user?id=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -566,12 +577,4 @@ export default Users;
const ChipDiv = styled.div`
margin-top : 0.5em;
-`
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+`
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index c06b1193cd2e0348f52a3c485fa5d15d7a643cba..3e498b93f3d684f95e705afecd83789e010921ed 100644
--- a/src/App.js
+++ b/src/App.js
@@ -158,15 +158,307 @@ export default function App() {
return () => window.removeEventListener("resize", setWindowSize);
}, [window.innerWidth, window.innerHeight]);
- const LoadingScreen = () => (
- <div style={{
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)"
- }}>
- <LoadingSpinner/>
- </div>
+ return (
+ // add piwik later
+ // history={piwik.connectToHistory(customHistory)}
+ <>
+ {!awaitTest &&
+ <React.Suspense fallback={<LoadingScreen/>}>
+ {/*<BrowserRouter history={piwik.connectToHistory(customHistory)}>*/}
+ <BrowserRouter>
+ <ContrastBar/>
+ <Header/>
+ <div
+ style={{
+ backgroundImage:
+ "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)",
+ height: "5px",
+ }}
+ ></div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
+ rel="stylesheet"
+ />
+ <div id="Conteudo_scroll"></div>
+ <Switch style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}>
+ <Redirect from="/home" to="/" />
+ <Route path="/" exact={true} component={Home} />
+ <Route path="/busca" component={Search} />
+ <Route path="/perfil" component={UserPage} />
+ <Route path="/editarperfil" component={EditProfilePage} />
+ <Route path="/recurso/:recursoId" component={ResourcePage} />
+ <Route path="/termos-publicar-recurso" component={TermsPage} />
+ <Route path="/permission" component={PublicationPermissionsPage} />
+ {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
+ <Route path="/ajuda" component={HelpCenter} />
+ <Route path="/contato" component={Contact} />
+ <Route path="/termos-resumido" component={SummarizedUserTerms} />
+ <Route path="/termos" component={UserTerms} />
+ <Route path="/sobre" component={AboutPage} />
+ <Route path="/mapa-site" component={SiteMap} />
+ <Route path="/acessibilidade" component={Accessibility} />
+ <Route path="/publicando-recurso" component={TabResoursePub} />
+ <Route path="/encontrando-recurso" component={TabResourseFind} />
+ <Route path="/participando-da-rede" component={TabNetPart} />
+ <Route path="/gerenciando-conta" component={TabManageAc} />
+ <Route path="/plataforma-mec" component={TabPlataformaMEC} />
+ <Route path="/recuperar-senha/alterar-senha" component={ChangePasswordPage} />
+ <Route path="/recuperar-senha" component={PasswordRecoveryPage} />
+ <Route path="/usuario-publico/:userId" component={PublicUserPage} />
+ <Route
+ path="/editar-recurso/:recursoId"
+ component={EditLearningObjectPage}
+ />
+ <Route path="/professor" component={PageProfessor} />
+ <Route path="/upload" component={UploadPage} />
+ <Route path="/loja" component={ItemStore} />
+ <Route path="/colecao-do-usuario/:id" component={CollectionPage} />
+ <Route path="/colecao" component={FormationMaterialPage} />
+ <Route path="/topico" component={FormationMaterialPage} />
+ <Route path="/iframe-colecao" component={FormationMaterialIframe} />
+ <Route path="/material-formacao" component={MaterialPage} />
+
+ <Route
+ path="/admin/home"
+ exact={true}
+ render={() => {
+ return <AdminTemplate inner={<Inframe/>}/>
+ }}
+ />
+ <Route
+ path="/admin/institutions"
+ render={() => {
+ return <AdminTemplate inner={<Institution />}/>
+ }}
+ />
+ <Route
+ path="/admin/institution"
+ render={() => {
+ return <AdminTemplate inner={<InstitutionCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/institutionEdit"
+ render={() => {
+ return <AdminTemplate inner={<InstitutionsInput />}/>
+ }}
+ />
+ <Route
+ path="/admin/InstitutionCreate"
+ render={() => {
+ return <AdminTemplate inner={<CreateInstitution />}/>
+ }}
+ />
+ <Route
+ path="/admin/noteVars"
+ render={() => {
+ return <AdminTemplate inner={<NoteVariables />}/>
+ }}
+ />
+ <Route
+ path="/admin/noteVar"
+ render={() => {
+ return <AdminTemplate inner={<NoteVarCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/noteVarEdit"
+ render={() => {
+ return <AdminTemplate inner={<NoteVarInputs />}/>
+ }}
+ />
+ <Route
+ path="/admin/languages"
+ render={() => {
+ return <AdminTemplate inner={<Languages />}/>
+ }}
+ />
+ <Route
+ path="/admin/languageEdit"
+ render={() => {
+ return <AdminTemplate inner={<EditLanguage />}/>
+ }}
+ />
+ <Route
+ path="/admin/languageCreate"
+ render={() => {
+ return <AdminTemplate inner={<CreateLanguage />}/>
+ }}
+ />
+ <Route
+ path="/admin/CommunityQuestions"
+ render={() => {
+ return <AdminTemplate inner={<CommunityQuestions />}/>
+ }}
+ />
+ <Route
+ path="/admin/CommunityQuestion"
+ render={() => {
+ return <AdminTemplate inner={<CommunityCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/Collections"
+ render={() => {
+ return <AdminTemplate inner={<Collections />}/>
+ }}
+ />
+ <Route
+ path="/admin/Collection"
+ render={() => {
+ return <AdminTemplate inner={<CollectionCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/EditCollection"
+ render={() => {
+ return <AdminTemplate inner={<EditCollection />}/>
+ }}
+ />
+ <Route
+ path="/admin/Ratings"
+ render={() => {
+ return <AdminTemplate inner={<Ratings />}/>
+ }}
+ />
+ <Route
+ path="/admin/Rating"
+ render={() => {
+ return <AdminTemplate inner={<RatingCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/EditRating"
+ render={() => {
+ return <AdminTemplate inner={<EditRating />}/>
+ }}
+ />
+ <Route
+ path="/admin/CreateRating"
+ render={() => {
+ return <AdminTemplate inner={<CreateRating />}/>
+ }}
+ />
+ <Route
+ path="/admin/Questions"
+ render={() => {
+ return <AdminTemplate inner={<Questions />}/>
+ }}
+ />
+ <Route
+ path="/admin/CreateQuestion"
+ render={() => {
+ return <AdminTemplate inner={<CreateQuestions />}/>
+ }}
+ />
+ <Route
+ path="/admin/activities"
+ render={() => {
+ return <AdminTemplate inner={<Activity />}/>
+ }}
+ />
+ <Route
+ path="/admin/activity"
+ render={() => {
+ return <AdminTemplate inner={<ActivityCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/learningObjects"
+ render={() => {
+ return <AdminTemplate inner={<EducationalObject />}/>
+ }}
+ />
+ <Route
+ path="/admin/learningObject"
+ render={() => {
+ return <AdminTemplate inner={<EducationalObjectCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/learningObjectEdit"
+ render={() => {
+ return <AdminTemplate inner={<EducationalObjectEdit />}/>
+ }}
+ />
+ <Route
+ path="/admin/complaints"
+ render={() => {
+ return <AdminTemplate inner={<Complaints />}/>
+ }}
+ />
+ <Route
+ path="/admin/complaint"
+ render={() => {
+ return <AdminTemplate inner={<ComplaintCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/users/teacher_requests"
+ render={() => {
+ return <AdminTemplate inner={<AproveTeacher />}/>
+ }}
+ />
+ <Route
+ path="/admin/usersList"
+ render={() => {
+ return <AdminTemplate inner={<UserList />}/>
+ }}
+ />
+ <Route
+ path="/admin/user"
+ render={() => {
+ return <AdminTemplate inner={<UserCard />}/>
+ }}
+ />
+ <Route
+ path="/admin/EditUser"
+ render={() => {
+ return <AdminTemplate inner={<EditUser />}/>
+ }}
+ />
+ <Route
+ path="/admin/permissions"
+ render={() => {
+ return <AdminTemplate inner={<UserPermissions />}/>
+ }}
+ />
+ <Route
+ path="/admin/EditPermissions"
+ render={() => {
+ return <AdminTemplate inner={<EditRole />}/>
+ }}
+ />
+ <Route
+ path="/admin/CreateRole"
+ render={() => {
+ return <AdminTemplate inner={<CreateRole />}/>
+ }}
+ />
+ <Route
+ path="/admin/BlockedUsers"
+ render={() => {
+ return <AdminTemplate inner={<BlockedUser />}/>
+ }}
+ />
+ <Route
+ path="/admin/sendEmail"
+ render={() => {
+ return <AdminTemplate inner={<SendEmail />}/>
+ }}
+ />
+ <Route path='*' component={PageNotFound}/>
+ </Switch>
+ {!hideFooter && (
+ <div id="Rodape_scroll">
+ <EcFooter contrast={state.contrast}/>
+ <GNUAGPLfooter contrast={state.contrast}/>
+ </div>
+ )}
+ </BrowserRouter>
+ </React.Suspense>
+ }
+ </>
);
return (
diff --git a/src/Components/Alert.js b/src/Components/Alert.js
index 747b819931a0cf64cd14804dd23203bd3932be5c..49bbd29e165d171a27a08044aa178f47d6eb0a8a 100644
--- a/src/Components/Alert.js
+++ b/src/Components/Alert.js
@@ -20,5 +20,5 @@ import React from 'react'
import MuiAlert from '@material-ui/lab/Alert';
export default function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 8670178587cacf74b98445342206d7a2a7b04f95..7b982e9397fd0ed2a70b201d92567d56433274e0 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -85,7 +85,7 @@ function ReqResources(props) {
</Grid>
</Grid>
:
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <Carousel className={`${props.contrast}Carousel`} showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.length >= 1 ?
rows.map((row, index) => (
@@ -153,7 +153,7 @@ function ReqCollections(props) {
</Grid>
:
rows.length >= 1 ?
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <Carousel className={`${props.contrast}Carousel`} showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.map((row, index) => (
<Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index 564c07183b23510edf5ba1170651a63fff879122..6b58027046fea63d97251e64167b14ecac362985 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -6,8 +6,8 @@ import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
export default function ButtonGuardarColecao(props) {
const { state } = useContext(Store)
@@ -29,10 +29,6 @@ export default function ButtonGuardarColecao(props) {
setLogin(!loginOpen)
}
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function toggleLoginSnackbar(reason) {
if (reason === 'clickaway') {
return;
@@ -51,12 +47,14 @@ export default function ButtonGuardarColecao(props) {
<LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
- <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
+ <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
<StyledButton onClick={handleGuardar}>
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 1a3057ddf92eb5c358443007ce25c7d700ab70be..743387e0c7093eab378075f1ab7c2c50ddf3d345 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -36,8 +36,8 @@ import { Link } from 'react-router-dom';
import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
//Image Import
import { noAvatar } from "ImportImages.js";
@@ -217,8 +217,109 @@ export default function CollectionCardFunction(props) {
</Grid>
)
}
- </StyledGrid>
- </div>
+ </TagContainer> :
+ null
+ }
+ </SlideContentDiv>
+ )
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
+ }
+
+ return (
+ <>
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
+ <StyledCard>
+ <CardDiv className={`${props.contrast}Border`}>
+ <CardReaDiv className={`${props.contrast}BackColor`}>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
+ <UserInfo style={{ width: '272.5px'}}>
+ {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
+ <img src={userAvatar} alt="user avatar" style={{
+ height: "70px", width: "70px", borderRadius: "50%",
+ zIndex: 1, border: "2px solid white",
+ boxShadow: "0 1px 3px rgba(0,0,0,.45)"
+ }} />
+ <UserAndTitle>
+ <span>{props.author}</span>
+ <span className={"col-name"}>{name}</span>
+ </UserAndTitle>
+ </UserInfo>
+ <StyledGrid container direction="row" style={{ width: '272.5px' }}>
+ {
+ props.thumbnails.map((thumb) =>
+ <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
+ <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
+ </Grid>
+ )
+ }
+ </StyledGrid>
+ </div>
+ {
+ <div className={`slideContentLinkAfterActive${slideIn}`}>
+ <div className="Text" style={{ width: "100%" }}>
+ {SlideAnimationContent(props.contrast)}
+ </div>
+ </div>
+ }
+ </Header>
+ </Link>
+
+ <Description className={`${props.contrast}BackColor`}> {/*renders rating, number of learning objects and likes count*/}
+ {
+ props.authorID !== state.currentUser.id &&
+ <Rating
+ style={props.contrast === "" ? {} : {color: "white"}}
+ name="customized-empty"
+ value={props.rating}
+ readOnly
+ emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
+ />
+ }
+
+ <Footer className={`${props.contrast}Text`}>
+ <Type>
+ <FolderIcon style={props.contrast === "" ? {} : {color: "white"}} />
+ <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
+ <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
+ </Type>
+ <LikeCounter>
+ <span>{likesCount}</span>
+ <ButtonNoWidth onClick={handleLike}>
+ <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
+ </ButtonNoWidth>
+ </LikeCounter>
+ </Footer>
+ </Description>
+
+ </CardReaDiv>
+
{
<div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
<div className="text" >
@@ -474,4 +575,4 @@ const FollowingButton = styled(Button)`
box-shadow : none !important;
}
-`
+`
\ No newline at end of file
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index 4f16d012eb2e8adf52e53e5aed76fb59e63c291d..c0aae8b67962ddd689a163e0d8127b9f3aad4c70 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -24,17 +24,16 @@ import EditIcon from '@material-ui/icons/Edit';
import styled from 'styled-components';
import CommentForm from './ResourcePageComponents/CommentForm.js';
import Comment from './Comment.js';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { getRequest } from '../Components/HelperFunctions/getAxiosConfig'
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import SignUpModal from './SignUpModal.js';
import LoginModal from './LoginModal.js';
-import SnackBarComponent from './SnackbarComponent';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import SnackBar from './SnackbarComponent';
+
//Image Import
import { Comentarios } from "ImportImages.js";
@@ -100,10 +99,6 @@ export default function CollectionCommentSection(props) {
setSignUpOpen(true)
}
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function handleLoadMoreReviews() {
if (reviews.length !== parseInt(totalReviews))
setCurrPageReviews((previous) => previous + 1)
@@ -207,8 +202,8 @@ export default function CollectionCommentSection(props) {
}, [render_state, currPageReviews]);
return (
- <CommentAreaContainer container xs={12} direction="row" justify="center" alignItems="center">
- <SnackBarComponent
+ <CommentAreaContainer contrast={props.contrast} container xs={12} direction="row" justify="center" alignItems="center">
+ <SnackBar
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
severity={snackInfo.severity}
@@ -268,26 +263,18 @@ export default function CollectionCommentSection(props) {
}
</CommentAreaCard>
</Grid>
- <Snackbar
- open={post_snack_open}
- autoHideDuration={6000}
- onClose={handlePostSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handlePostSnackbar} severity="info">
- Seu comentário foi publicado com sucesso!
- </Alert>
- </Snackbar>
- <Snackbar
- open={delete_snack_open}
- autoHideDuration={6000}
- onClose={handleDeleteSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleDeleteSnackbar} severity="info">
- Comentário deletado com sucesso.
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={post_snack_open}
+ handleClose={handlePostSnackbar}
+ severity={"info"}
+ text={"Seu comentário foi publicado com sucesso!"}
+ />
+ <SnackBar
+ snackbarOpen={delete_snack_open}
+ handleClose={handleDeleteSnackbar}
+ severity={"info"}
+ text={"Comentário deletado com sucesso."}
+ />
</CommentAreaContainer>
);
}
diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js
index bda45946d26e9fb373ba79d5e006d4cacb5bb495..950e8f6fc796d797f9d574dc06f6daa5a9cf0eac 100644
--- a/src/Components/CollectionDowloadButton.js
+++ b/src/Components/CollectionDowloadButton.js
@@ -5,12 +5,8 @@ import Button from '@material-ui/core/Button';
import styled from 'styled-components';
import { apiUrl, apiDomain } from '../env';
import { getRequest } from './HelperFunctions/getAxiosConfig'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
const DowloadButton = (props) => {
const [download_url, setDownloadUrl] = useState('');
@@ -85,16 +81,12 @@ const DowloadButton = (props) => {
return (
<>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<DownloadButton
variant="outlined"
color="primary"
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 245eecbccd12abba7a88c5d76643d9302328c0d9..0af714e44ed26f9dce24272dedd761fa1f0aca77 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -23,13 +23,9 @@ import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import {putRequest} from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../SnackbarComponent';
export default function FollowButton (props) {
@@ -67,11 +63,13 @@ export default function FollowButton (props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
@@ -134,11 +132,13 @@ export function NoIcon (props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index 2cf3555c6ac3cae3da3cb7590ae2d149653391e4..3211705803a3e4e63ae586ce05fc539a0b64ed3f 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -31,13 +31,9 @@ import { putRequest } from './HelperFunctions/getAxiosConfig'
import ReportModal from './ReportModal.js'
import {Link} from 'react-router-dom'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
export default function SimpleMenu(props) {
const {state} = useContext(Store)
@@ -87,11 +83,13 @@ export default function SimpleMenu(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index 3eb206b99c272fd8fcf179c1808f778ecbcd3152..6d63135d107c527d6edf29cbe405b3beb0799c94 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -22,13 +22,9 @@ import styled from 'styled-components';
import FormInput from "../Components/FormInput.js"
import {postRequest} from './HelperFunctions/getAxiosConfig'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
const Button = styled.button`
@@ -224,72 +220,76 @@ const Button = styled.button`
- return(
- <React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
- {/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }}
- />
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- {/*----------------------------------------------------------------------------*/}
-
-
- <form onSubmit={e => onSubmit(e)}>
- <FormInput
- inputType={"text"}
- name={"nome"}
- value={nome.dict.value}
- placeholder={"Nome *"}
- error = {nome.dict.key}
- help = {nome.dict.key ? "insira seu nome para o contato " : ""}
- handleChange={e => preencheNome(e)}
- />
- <br/>
- <FormInput
- inputType={"text"}
- name={"email"}
- value={email.dict.value}
- placeholder={"E-mail *"}
- error = {email.dict.key}
- help = {email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
- handleChange={e => preencheEmail(e)}
- />
- <br/>
- <br/>
- <FormInput
- inputType={"text"}
- name={"mensagem"}
- value={mensagem.dict.value}
- placeholder={"Mensagem *"}
- multi = {true}
- rows = "5"
- rowsMax = "6"
- error = {mensagem.dict.key}
- help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
- handleChange={e => preencheMensagem(e)}
- />
- <br/>
- <br/>
- <div style={{display: "flex", justifyContent: "center"}}>
- {
- state.currentUser.id !== '' ? (
- <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
- )
- :
- (
- <Button onClick={e => {e.preventDefault(); handleLogin(true);}} >ENVIAR MENSAGEM</Button>
- )
- }
- </div>
- </form>
- </React.Fragment>
-
-
+ return (
+ <React.Fragment>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
+ {/*-------------------------------MODALS---------------------------------------*/}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ {/*----------------------------------------------------------------------------*/}
+ <div>
+ <form onSubmit={e => onSubmit(e)}>
+ <FormInput
+ contrast={props.contrast}
+
+ inputType={"text"}
+ name={"nome"}
+ value={nome.dict.value}
+ placeholder={"Nome *"}
+ error={nome.dict.key}
+ help={nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
+ />
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"email"}
+ value={email.dict.value}
+ placeholder={"E-mail *"}
+ error={email.dict.key}
+ help={email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
+ handleChange={e => preencheEmail(e)}
+ />
+ <br />
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.dict.value}
+ placeholder={"Mensagem *"}
+ multi={true}
+ rows="5"
+ rowsMax="6"
+ error={mensagem.dict.key}
+ help={mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
+ handleChange={e => preencheMensagem(e)}
+ />
+ <br />
+ <br />
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ {
+ state.currentUser.id !== '' ? (
+ <Button contrast={props.contrast} onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ )
+ :
+ (
+ <Button contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button>
+ )
+ }
+ </div>
+ </form>
+ </div>
+ </React.Fragment>
);
}
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index 6a368a11cf553166280ec8d85dd9ede03562e781..6fd99c1db0cf60a36a8c1a6edbaf7f2a2021a474 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -4,20 +4,41 @@ import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import {LikeCounter, ButtonNoWidth} from '../Components/ResourceCardFunction.js'
import FavoriteIcon from '@material-ui/icons/Favorite';
-import {putRequest} from './HelperFunctions/getAxiosConfig'
+import { putRequest } from './HelperFunctions/getAxiosConfig'
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+
+import SnackBar from './SnackbarComponent';
export default function Firulas (props) {
const [liked, setLiked] = useState(props.liked)
- function handleSuccess (data) {
- setLiked(!liked)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+ function handleSuccessLike(data) {
+ toggleLiked(!liked)
+ setLikesCount(data.count)
}
const handleLike = () => {
putRequest(`/learning_objects/${props.recursoId}/like/`, {}, handleSuccess, (error) => {console.log(error)})
}
return (
- <ConteinerFirulas>
+ <ConteinerFirulas style={props.contrast === "" ? {} : {color: "white"}}>
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<Rating
name="customized-empty"
value={props.rating*10}
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 813877ed5261daf1e1723771ab71b77b07d0696d..5c6a802f04fa80d33d5227373b6de82a7afe4115 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -25,20 +25,70 @@ const StyledTextField = styled(TextField)`
max-width: 100%;
font-size : 15px;
font-weight : lighter;
- color : inherit;
width : 100% !important;
- full-width : 100% !important;
+
+ .MuiFormHelperText-root {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ .Mui-disabled{
+ color: ${props => props.contrast === "" ? "#999" : "white"} !important;
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#999" : "white"} !important;
+ }
+
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
label.Mui-focused {
color : #00bcd4;
}
label.Mui-focused.Mui-error {
- color : red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiInput-underline::after {
- border-bottom: 2px solid #00bcd4;
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
@@ -63,22 +113,34 @@ export default function FormInput(props) {
return (
<StyledTextField
- label={props.placeholder}
- margin="normal"
- id = {props.name}
- name = {props.name}
- type = {props.inputType}
- value = {props.value}
- onChange = {props.handleChange}
- rows = {props.rows}
- error = {props.error}
- rowsMax = {props.rowsMax}
- InputProps={{className: classes.input}}
- required = {props.required}
- helperText ={props.help}
- style={{width:"100%"}}
- mask={props.mask}
- multiline={props.multi}
- />
- );
+ contrast={props.contrast}
+ key={props.key}
+ label={props.placeholder}
+ placeholder={props.placeholder}
+ select={props.selectable ? props.selectable : false}
+ disabled={props.disableField}
+ margin="normal"
+ id={props.id}
+ name={props.name}
+ type={props.inputType}
+ value={props.value}
+ onBlur={props.onBlur}
+ onChange={props.handleChange}
+ onKeyDown={props.onKeyDown}
+ variant="outlined"
+ rows={props.rows}
+ onKeyPress={props.onKeyPress}
+ error={props.error}
+ rowsMax={props.rowsMax}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ required={props.required}
+ // helperText={<span style={props.contrast === "" ? { color: "red" } : { color: "#e75480" }}>{props.help}</span>}
+ helperText={props.help}
+ mask={props.mask}
+ multiline={props.multi}
+ >
+
+ {props.items}
+ </StyledTextField>
+ );
}
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 54e02feaa381434678d74c13bb418de8fa126924..259774ac2597d9770dbcefa70ab38dff94bbf8ad 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -23,19 +23,11 @@ import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
import { Store } from '../Store';
import ColaborarModal from './ColaborarModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { useLocation, useHistory } from 'react-router-dom'
import MenuBarMobile from './MenuBarMobile.js'
import { getRequest, validateGoogleLoginToken } from './HelperFunctions/getAxiosConfig'
-//const StyledButton = styled(Button)`
-// background : #ffa54c !important;
-// boxShadow :none;
-//`
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
export default function Header(props) {
const { state, dispatch } = useContext(Store)
@@ -96,60 +88,47 @@ export default function Header(props) {
return;
}
- handleSuccessfulLogin(false);
- }
-
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
-
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
-
- const handleClickSearch = (open) => {
- dispatch({
- type: "HANDLE_SEARCH_BAR",
- opened: !state.searchOpen
- })
- }
-
- let windowWidth = window.innerWidth
-
- return (
- <React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
- {
- windowWidth > 990 ?
- (
- <React.Fragment>
- <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
-
- )
- :
- (
- <React.Fragment>
- <MenuBarMobile openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
- )
- }
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }} />
- <ColaborarModal open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
- </React.Fragment>
- )
+ let windowWidth = window.innerWidth
+
+ return (
+ <React.Fragment>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
+ {
+ windowWidth > 990 ?
+ (
+ <React.Fragment>
+ <div id="Pesquisa_scroll"></div>
+ <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+
+ )
+ :
+ (
+ <React.Fragment>
+ <div id="Pesquisa_scroll"></div>
+ <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+ )
+ }
+ <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
+ </React.Fragment>
+ )
}
diff --git a/src/Components/ItemCardAction.js b/src/Components/ItemCardAction.js
index ed1cc7dde66752bb622375c25b65172ab3d42e92..05ecb2354594b9ef5fcf70db5b491698124ba05e 100644
--- a/src/Components/ItemCardAction.js
+++ b/src/Components/ItemCardAction.js
@@ -17,8 +17,6 @@ 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';
import styled from 'styled-components';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import Button from '@material-ui/core/Button';
import gem from '../img/gamification/gem.svg';
import Dialog from '@material-ui/core/Dialog';
@@ -29,9 +27,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
import axios from 'axios'
import {apiUrl} from '../env';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
const actionStyle = (operation) => {
var stl = {
@@ -124,42 +120,45 @@ export default function ItemCardAction (props) {
return (
<div>
- <Snackbar open={info} autoHideDuration={6000} onClose={() => handleClose('info')}>
- <Alert onClose={handleClose} severity="info">
- {message}
- </Alert>
- </Snackbar>
- <Snackbar open={success} autoHideDuration={6000} onClose={() => handleClose('success')}>
- <Alert onClose={handleClose} severity="success">
- {message}
- </Alert>
- </Snackbar>
- <Snackbar open={failure} autoHideDuration={6000} onClose={() => handleClose('failure')}>
- <Alert onClose={handleClose} severity="error">
- {message}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={info}
+ handleClose={() => handleClose('info')}
+ severity={"info"}
+ text={message}
+ />
+ <SnackBar
+ snackbarOpen={success}
+ handleClose={() => handleClose('success')}
+ severity={"success"}
+ text={message}
+ />
+ <SnackBar
+ snackbarOpen={failure}
+ handleClose={() => handleClose('failure')}
+ severity={"error"}
+ text={message}
+ />
<span style={actionStyle(props.operation)} onClick={handleClick}>
{props.operation === 'buy' ? <GemImg src={gem}/> : <span/>}
{props.operation === 'buy' ? "COMPRAR" :
props.operation === 'equip' ? "USAR" : "TIRAR"}
</span>
<Dialog
- open={open_dialog}
- onClose={handleClose}
- aria-labelledby="alert-dialog-title"
- aria-describedby="alert-dialog-description"
- >
+ open={open_dialog}
+ onClose={handleClose}
+ aria-labelledby="alert-dialog-title"
+ aria-describedby="alert-dialog-description"
+ >
<DialogTitle id="alert-dialog-title">{"Deseja realmente comprar este item?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
- <strong>Esta compra não envolve nenhum dinheiro real.</strong>
+ <strong>Esta compra não envolve nenhum dinheiro real.</strong>
- <br/><br/>O item que você deseja comprar, <strong>NOME DO ITEM</strong>, custa
- <GemImg src={gem}/><GemSpan>PREÇO</GemSpan> gemas. Você possui
- <GemImg src={gem}/><GemSpan><strong>GEMAS</strong></GemSpan> gemas.
+ <br/><br/>O item que você deseja comprar, <strong>NOME DO ITEM</strong>, custa
+ <GemImg src={gem}/><GemSpan>PREÇO</GemSpan> gemas. Você possui
+ <GemImg src={gem}/><GemSpan><strong>GEMAS</strong></GemSpan> gemas.
- <br/><br/>Comprar este item lhe deixará com <GemImg src={gem}/><GemSpan><strong>TANTAS</strong></GemSpan> gemas.
+ <br/><br/>Comprar este item lhe deixará com <GemImg src={gem}/><GemSpan><strong>TANTAS</strong></GemSpan> gemas.
</DialogContentText>
</DialogContent>
<DialogActions>
diff --git a/src/Components/LoadingSpinner.js b/src/Components/LoadingSpinner.js
index 68c447c4c3be4aee028bf6b4997ceefa956fd197..33a457f59222f62cac93f4e680c3e604d30a4d45 100644
--- a/src/Components/LoadingSpinner.js
+++ b/src/Components/LoadingSpinner.js
@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { Store } from 'Store'
+
import LoadingGif from '../img/loading_busca.gif'
- const LoadingSpinner = (props) => (
- <div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
- <img alt="" src={LoadingGif} />
- <span style={{textTransform:"uppercase"}}>{props.text}</span>
- </div>
- );
+const LoadingSpinner = (props) => {
+ const { state } = useContext(Store);
+
+ return (
+ <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backgroundColor: "inherit" }}>
+ <img alt="" src={LoadingGif} />
+ <span style={state.contrast === "" ? { textTransform: "uppercase" } : { textTransform: "uppercase", color: "white" }}>{props.text}</span>
+ </div>
+ )
+}
export default LoadingSpinner;
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 9ebce1910883371a5c81adb9f36c7166247adea5..93df7e393e56f18c873b187203d912ca47ef4ba8 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -22,10 +22,10 @@ import Backdrop from '@material-ui/core/Backdrop';
import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components'
import LoginContainer from './LoginContainerFunction.js'
-import {Store} from '../Store.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-import {authentication} from './HelperFunctions/getAxiosConfig'
+import { Store } from '../Store.js'
+import { authentication } from './HelperFunctions/getAxiosConfig'
+
+import SnackBar from './SnackbarComponent';
const StyledLogin = styled(Modal)`
margin : 0 !important;
@@ -38,9 +38,6 @@ const StyledLogin = styled(Modal)`
border-radius : 4px;
`
-export function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
export default function LoginModal (props){
const {state, dispatch} = useContext(Store)
@@ -81,30 +78,33 @@ export default function LoginModal (props){
return (
<>
- <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
- </Snackbar>
- <StyledLogin
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- open={props.open}
- centered="true"
- onClose={props.handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
- <LoginContainer handleClose={props.handleClose}
- openSignUp={props.openSignUp}
- handleLoginInfo={handleLoginInfo}
- />
- </Zoom>
- </StyledLogin>
+ <SnackBar
+ snackbarOpen={snackbarOpened}
+ handleClose={handleCloseSnackbar}
+ severity={"error"}
+ text={"Ocorreu um erro ao se conectar!"}
+ />
+ <StyledLogin
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Zoom in={props.open} style={{ transitionDelay: "0.2ms" }}>
+ <LoginContainer
+ contrast={state.contrast}
+ handleClose={props.handleClose}
+ openSignUp={props.openSignUp}
+ handleLoginInfo={handleLoginInfo}
+ />
+ </Zoom>
+ </StyledLogin>
</>
)
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
index 7795876d0203a82bac0c05ddbb531773b505c39e..7f9b7651100527f96b43078297f37bab74213bba 100644
--- a/src/Components/ModalAvaliarRecurso.js
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -28,12 +28,12 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CloseModalButton from './CloseModalButton'
-import Snackbar from '@material-ui/core/Snackbar';
-import TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';
import { getRequest } from './HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../Components/LoadingSpinner'
+import SnackBar from './SnackbarComponent';
+
const StyledRadio = withStyles({
root: {
color: '#666',
@@ -116,9 +116,11 @@ export default function ModalAvaliarRecurso(props) {
return (
<>
- <Snackbar open={snackbarCancelar} autoHideDuration={1000} onClose={toggleSnackbarCancelar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- message="Você cancelou a avaliação deste recurso."
+ <SnackBar
+ snackbarOpen={snackbarCancelar}
+ handleClose={toggleSnackbarCancelar}
+ severity={"info"}
+ text={"Você cancelou a avaliação deste recurso."}
/>
{
options ?
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
index f23b819d88584a3ee2fab19dd94bf3935c90b782..971dc2f54de94fa5ad288b309c2cfbf7d2ab8b0d 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -21,9 +21,9 @@ 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 GreyButton from './GreyButton.js'
-import PurpleButton from './PurpleButton.js'
-import SnackbarComponent from './SnackbarComponent'
+import { ButtonCancelar, ButtonEnviar } from './EditarColecaoForm';
+import CloseModalButton from './CloseModalButton'
+import Snackbar from './SnackbarComponent'
import {deleteRequest} from './HelperFunctions/getAxiosConfig'
export default function ModalExcluirColecao (props) {
@@ -56,8 +56,8 @@ export default function ModalExcluirColecao (props) {
>
<Fade in={props.open}>
<>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluÃda com sucesso"}/>
- <Container>
+ <Snackbar snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluÃda com sucesso"}/>
+ <Container contrast={props.contrast}>
<Header>
<h2>Tem certeza que deseja excluir esta Coleção?</h2>
</Header>
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index ad8fcf9a72464421bb2a467cd1c4b32aa9244db0..02189c34f763aade93655ab8d0bf5b2741d91ad0 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -214,6 +214,68 @@ export default function PartOne (props) {
)
}
+const StyledTextField = styled(TextField)`
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ label.Mui-focused {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ label.Mui-focused.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+`
+
export const ButtonsArea = styled.div`
display : flex;
justify-content : center;
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 079ca75fd3dd6454d6e26263767ac33d3ad3b556..5e0d84fd25f7ac8b487a44029ff98134b7da189d 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -28,7 +28,7 @@ import ReportUserForm from './ReportUserForm.js'
import ReportRecursoForm from './ReportRecursoForm.js'
import ReportColecaoForm from './ReportColecaoForm.js'
import {postRequest} from './HelperFunctions/getAxiosConfig'
-import SnackbarComponent from './SnackbarComponent.js'
+import Snackbar from './SnackbarComponent.js'
function CloseModalButton (props) {
return (
@@ -81,8 +81,7 @@ export default function ReportModal (props) {
return (
<React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}
- />
+ <Snackbar snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index 370865722d5a85cb2b458f326b891dbfe962a3e8..bbb8b5343ae4e71447a939d541b3ec42f3a4b880 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -154,8 +154,54 @@ export const ButtonEnviar = styled(Button)`
}
`
export const StyledTextField = styled(TextField)`
+
+ padding: 20px 20px 20px 20px;
+
.MuiFormHelperText-root {
text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
label.Mui-focused {
@@ -163,11 +209,11 @@ export const StyledTextField = styled(TextField)`
}
label.Mui-focused.Mui-error {
- color : red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiInput-underline::after {
- border-bottom: 2px solid orange;
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index d81a0ade52633603458f126908d9bf1e826c34f6..8e343896a17d19d2b5edb82dc2f170348c51e101 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -35,8 +35,8 @@ import "./ResourceCard.css";
import { putRequest } from './HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
//Image Import
import { noAvatar } from "ImportImages.js";
@@ -57,10 +57,6 @@ export default function ResourceCardFunction(props) {
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
useEffect(() => {
//decide which thumbnail to use
if (props.thumbnail) {
@@ -144,11 +140,13 @@ export default function ResourceCardFunction(props) {
<LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<StyledCard>
<CardDiv>
<CardReaDiv>
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 1ac22f4a6e309b55d70acb582516257aa1def8d0..4da8f13aed88def81334ecfb6769c6885a023734 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -33,7 +33,7 @@ import ShareIcon from '@material-ui/icons/Share';
import AddIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
import ShareModal from './ShareModal'
-import SnackbarComponent from './SnackbarComponent'
+import Snackbar from './SnackbarComponent'
import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
import { getRequest } from './HelperFunctions/getAxiosConfig'
@@ -126,7 +126,7 @@ export default function ResourceCardOptions(props) {
<ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
thumb={props.thumb} title={props.title} link={getShareablePageLink()}
/>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
+ <Snackbar snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
/>
<div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
<ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index e32176c7166f62820cf88517c7f8f5dc8faf503c..1cb58be3b8f254f62e964ff0e305ed721f9d6159 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -26,14 +26,9 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
import GetAppIcon from '@material-ui/icons/GetApp';
import ResourceCardFunction from './ResourceCardFunction.js';
import FloatingDownloadButton from './FloatingDownloadButton.js';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { apiUrl } from '../env.js';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
+import SnackBar from './SnackbarComponent';
export default function ResourceList(props) {
@@ -183,16 +178,12 @@ export default function ResourceList(props) {
);
})}
</Grid>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<FloatingDownloadButton
handleDownloadSelection={handleDownloadSelection}
/>
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 0272d76fc6f63b264b9197d390818729caa46cc1..219198f45ad26764e084f46a2765a0313dcc0d28 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -141,11 +141,61 @@ const OrangeButton = styled(Button)`
const StyledTextField = styled(TextField)`
.MuiInputBase-root {
- margin-bottom : 5px;
+ margin-bottom: 5px;
}
- label.Mui-focused {
- color : ${props => props.colecao ? "#673ab7" : "rgb(255,127,0)"}
+ width: 95%;
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-focused fieldset {
+ border-color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
.MuiInput-underline::after {
@@ -153,11 +203,13 @@ const StyledTextField = styled(TextField)`
}
label.Mui-focused.Mui-error {
- color : red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- width: 95%;
-`
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+`;
const StyledForm = styled.form`
display : flex;
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 1ee202d977fc2d919a473fcb03ac6dbf13c11e47..008d75a58c95eef94697c5e49f4321bc24211c07 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -27,22 +27,17 @@ import CommentForm from './CommentForm.js'
import Comment from '../Comment.js'
import { getRequest } from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import SnackBarComponent from '../../Components/SnackbarComponent';
+
+import SnackBar from '../SnackbarComponent';
//Image Import
import { Comentarios } from "ImportImages.js";
import { noAvatar } from "ImportImages.js";
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
export default function CommentsArea(props) {
const { state } = useContext(Store)
const [comentarios, setComentarios] = useState([])
@@ -125,18 +120,20 @@ export default function CommentsArea(props) {
return (
<React.Fragment>
- <SnackBarComponent
+ <SnackBar
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
severity={snackInfo.severity}
text={snackInfo.text}
color={snackInfo.color}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index 98e7fcd119baab3a54029a86ada0860dc0526dd8..5fee2e19a3cb3307823921537632246493f8b8d1 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -34,14 +34,10 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
import { getRequest } from '../HelperFunctions/getAxiosConfig'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../SnackbarComponent';
function ReportButton(props) {
return (
@@ -144,11 +140,13 @@ export default function Footer(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<ReportModal open={reportOpen} handleClose={() => { toggleReport(false) }}
form="recurso"
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index f1e20fa480dc7e76b4c55a448258f44106e61e65..d6b6fee33228a0262d09e1b92124ef6cdc468843 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -34,18 +34,14 @@ import UpdateIcon from '@material-ui/icons/Update';
import AssignmentIcon from '@material-ui/icons/Assignment';
import ContactCardOptions from '../ContactCardOptions.js'
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from '../SnackbarComponent';
//Image Import
import { License } from "ImportImages.js";
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
-function AdditionalInfoItem (props) {
+function AdditionalInfoItem(props) {
return (
<span className="meta-objeto">
{props.icon}
@@ -171,11 +167,13 @@ export default function Sobre (props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index f19b82e1d1c55de62c7884e36c63827c7fe77b70..b45fb0e43d73f4dcbc3c9a6bed0e3a53ddee7720 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -27,10 +27,10 @@ import EditIcon from '@material-ui/icons/Edit';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import Button from '@material-ui/core/Button';
import {Link, Redirect} from 'react-router-dom'
-import Alert from '../Alert.js';
-import Snackbar from '@material-ui/core/Snackbar';
import {deleteRequest} from '../HelperFunctions/getAxiosConfig'
+import SnackBar from '../SnackbarComponent';
+
export default function TextoObjeto (props) {
const {state} = useContext(Store)
@@ -111,13 +111,13 @@ export default function TextoObjeto (props) {
}}
/>
}
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
- Recurso excluido com sucesso!
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={() => {toggleSnackbar(false)}}
+ severity={"info"}
+ color={"#00acc1"}
+ text={"Recurso excluido com sucesso!"}
+ />
<Grid container style={{paddingLeft : "15px"}}>
<Grid item xs={11}>
<h3>{props.name}</h3>
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index 61c4fb2865b34df44615e742507d94df28e43ad7..6663e78a648dc7b09303c975f11812e4d4256ada 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -21,15 +21,10 @@ 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 {authentication} from './HelperFunctions/getAxiosConfig'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-//import {postRequest} from './HelperFunctions/getAxiosConfig'
-
-export function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import { Store } from '../Store.js'
+import { authentication } from './HelperFunctions/getAxiosConfig'
+
+import SnackBar from './SnackbarComponent';
export default function SignUpModal (props) {
const { state, dispatch } = useContext(Store)
@@ -73,11 +68,12 @@ export default function SignUpModal (props) {
return (
<>
- <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpened}
+ handleClose={handleCloseSnackbar}
+ severity={"error"}
+ text={"Ocorreu um erro ao se conectar!"}
+ />
<StyledModalSignUp
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/SnackbarComponent.js b/src/Components/SnackbarComponent.js
index 60692e9c43f7298f34b9eed84eda31ab36cb640b..0250f3a5c0aed5cd908b2c0752f0b3a0ecb59419 100644
--- a/src/Components/SnackbarComponent.js
+++ b/src/Components/SnackbarComponent.js
@@ -16,16 +16,19 @@ 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 from 'react'
-import Alert from '../Components/Alert.js';
+import React, { useContext } from 'react'
+import Alert from './Alert.js';
import Snackbar from '@material-ui/core/Snackbar';
+import { Store } from '../Store.js'
export default function SnackbarComponent(props) {
+ const { state } = useContext(Store)
+
return (
- <Snackbar open={props.snackbarOpen} autoHideDuration={3000} onClose={props.handleClose}
+ <Snackbar open={props.snackbarOpen} autoHideDuration={2000} onClose={props.handleClose}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
- <Alert severity={props.severity}>
+ <Alert severity={props.severity} style={state.contrast === "" ? props.color ? { backgroundColor: props.color } : {} : { backgroundColor: "black", color: "white", border: "1px solid white" }}>
{props.text}
</Alert>
</Snackbar>
diff --git a/src/Components/Stepper.js b/src/Components/Stepper.js
index b1315b9844bdd5726e5b7589c1adf6be80d87417..18b29b8ab9c97edebf3b771c7dafc6654d3729b9 100644
--- a/src/Components/Stepper.js
+++ b/src/Components/Stepper.js
@@ -7,11 +7,36 @@ export default function Stepper (props) {
<div style={{display:"flex",justifyContent:"center", marginBottom:"50px"}}>
<FeedbackUpload>
{
- props.items.map((item)=>
- <div className={"page-selector " + (item.selected ? 'selected' : '')} >
- {item.value}
- </div>
- )
+ !isInFinalSTep(props.activeStep) ?
+
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "step"}>
+ {
+ index < props.activeStep ?
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : <span>{index + 1}</span>
+ }
+ </div>
+ </Grid>
+ )
+ })
+ :
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "finalStep"}>
+ {
+ index < props.activeStep ?
+ <Check style={{ color: 'white' }} /> :
+ <span style={{ color: 'white' }}>
+ {index + 1}
+ </span>
+ }
+ </div>
+ </Grid>
+ )
+ })
}
</FeedbackUpload>
</div>
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index f8cf40d05116502b80295679b815932d28405f61..95f5a4787c5e805cdc9f7b47e7c5251520a5bba1 100644
--- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -27,7 +27,7 @@ import CloseIcon from '@material-ui/icons/Close';
import GreyButton from '../../GreyButton'
import FormInput from '../../FormInput'
import {Link} from 'react-router-dom'
-import SnackbarComponent from '../../SnackbarComponent.js'
+import Snackbar from '../../SnackbarComponent.js'
import {deleteRequest} from '../../HelperFunctions/getAxiosConfig'
//Image Import
@@ -78,7 +78,7 @@ export default function ModalExcluirConta (props) {
return (
<React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={deletedAccountText}/>
+ <Snackbar snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={deletedAccountText}/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index fa2418b706dc96f56f88f60f7ef1014fd66b40dd..55b9aca1b91ac306a5622398fffc8f72e643c69c 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -74,8 +74,8 @@ function Keywords (props) {
if(event.keyCode === 13){
handleSetKeywords([...keywords, keywordsBuffer])
setKeywordsBuffer('')
- }}
- }
+ }
+ }}
fullWidth
onBlur={() => {props.onBlurCallback("tags", keywords, props.draftID)}}
/>
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index c1f9d40f55c2e4aafba0c44282ed441077853bf0..efa439dfaa11d8fd9c5adb8946c049c831163b92 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -59,14 +59,40 @@ function ColorlibStepIcon(props) {
};
return (
- <div
- className={clsx(classes.root, {
- [classes.active]: active,
- [classes.completed]: completed,
- })}
- >
- {completed ? <Check className={classes.completed} /> : icons[String(props.icon)]}
- </div>
+ <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
+ {
+ !isInFinalSTep(props.activeStep) ?
+
+ [0, 1, 2].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "step"}>
+ {
+ index < props.activeStep ?
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : <span>{index + 1}</span>
+ }
+ </div>
+ </Grid>
+ )
+ })
+ :
+ [0, 1, 2].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "finalStep"}>
+ {
+ index < props.activeStep ?
+ <Check style={{ color: 'white' }} /> :
+ <span style={{ color: 'white' }}>
+ {index + 1}
+ </span>
+ }
+ </div>
+ </Grid>
+ )
+ })
+ }
+ </MainGrid >
);
}
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 3c157e6f38eceec0f2376bcba6a8328fb6b64abe..632e61cb072538dc2c24628ab6b2328cb69a307d 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -367,8 +367,39 @@ export const StyledTextField = styled(TextField)`
width : 100% !important;
full-width : 100% !important;
- .MuiFormControl-root {
- margin : 18px 0 !important;
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
}
@@ -377,20 +408,24 @@ export const StyledTextField = styled(TextField)`
font-size : 14px !important ;
}
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
label.Mui-focused {
color : #00bcd4;
}
label.Mui-focused.Mui-error {
- color : red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiInput-underline::after {
- border-bottom: 2px solid #00bcd4;
- }
- .MuiFormHelperText-root {
- font-size : 12px !important;
- text-align : right !important;
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index b8919a54a0de3a1872de7c5258d32fdecfedc656..f872fe06975ca3b8b06f669bead6a480c898580f 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -27,8 +27,8 @@ import axios from 'axios'
import {apiUrl} from '../../env';
import DoneIcon from '@material-ui/icons/Done';
import DeleteIcon from '@material-ui/icons/Delete';
-import Alert from '../Alert.js';
-import Snackbar from '@material-ui/core/Snackbar';
+
+import SnackBar from '../SnackbarComponent';
export default function UploadFileWrapper (props) {
/*-----------------------------------------------------------------
@@ -222,14 +222,14 @@ export default function UploadFileWrapper (props) {
case "choosingLink":
return (
<React.Fragment>
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
- Link salvo com sucesso!
- </Alert>
- </Snackbar>
- <ChooseLink handleNextStage={handleNextStage} submit={handleChooseLink}/>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={() => { toggleSnackbar(false) }}
+ severity={"info"}
+ color={"#00acc1"}
+ text={"Link salvo com sucesso!"}
+ />
+ <ChooseLink contrast={props.contrast} handleNextStage={handleNextStage} submit={handleChooseLink} />
</React.Fragment>
)
default:
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index e1c5dc424e68875b47dc7a46017780516bf8f1a5..ea66082f51c9f3c07522afd5707b14845e479e54 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -26,10 +26,16 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
-webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
+.Carousel .control-arrow {
+ background: orange !important;
+
+ -webkit-box-shadow: 0px 0px 30px -10px #000000;
+ box-shadow: 0px 0px 15px -5px #000000;
}
-.carousel .slide {
- background-color: inherit !important;
+.ContrastCarousel .control-arrow {
+ background: black !important;
+ border: 1px solid white !important;
}
.MuiPaper-elevation1-209{
@@ -38,12 +44,13 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
.carousel.carousel-slider .control-arrow {
- top: 35%!important;
- bottom: 50%!important;
- border-radius: 100%!important;
- opacity: 1!important;
- text-align: center;
- vertical-align: middle;
- height: 50px;
- width: 50px;
+ top: 35%!important;
+ bottom: 50%!important;
+ border-radius: 100%!important;
+ opacity: 1!important;
+ text-align: center;
+ vertical-align: middle;
+ height: 50px;
+ width: 50px;
+ margin: 10px;
}
diff --git a/src/Pages/ChangePasswordPage.js b/src/Pages/ChangePasswordPage.js
index cf552c07180f6e589cb39e9c697c50f4df2641cc..a40367f6192b56b4e0d723c6eda80fc1f145d2af 100644
--- a/src/Pages/ChangePasswordPage.js
+++ b/src/Pages/ChangePasswordPage.js
@@ -7,16 +7,12 @@ import { CompletarCadastroButton } from '../Components/TabPanels/UserPageTabs/Pa
import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
-import Snackbar from '@material-ui/core/Snackbar'
-import MuiAlert from '@material-ui/lab/Alert'
import Grid from '@material-ui/core/Grid'
import IconButton from '@material-ui/core/IconButton'
import VisibilityIcon from '@material-ui/icons/Visibility'
import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../Components/SnackbarComponent';
export default function ChangePasswordPage(props) {
@@ -175,17 +171,13 @@ export default function ChangePasswordPage(props) {
if (error)
return (
- <BackgroundDiv>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <BackgroundDiv contrast={state.contrast}>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs
values={["Recuperar senha", "Alterar senha"]}
@@ -206,17 +198,13 @@ export default function ChangePasswordPage(props) {
)
else if (success)
return (
- <BackgroundDiv>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <BackgroundDiv contrast={state.contrast}>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs
values={["Recuperar senha", "Alterar senha"]}
@@ -237,17 +225,13 @@ export default function ChangePasswordPage(props) {
)
else
return (
- <BackgroundDiv>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <BackgroundDiv contrast={state.contrast}>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs
values={["Recuperar senha", "Alterar senha"]}
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
index c785bf3564d672834c0ed00f964fcc139040a8c5..e85f508cf7750cc39bbcdf8feb8e42b822717dce 100644
--- a/src/Pages/EditLearningObjectPage.js
+++ b/src/Pages/EditLearningObjectPage.js
@@ -22,8 +22,6 @@ import axios from 'axios'
import {apiUrl, apiDomain} from '../env';
import Grid from '@material-ui/core/Grid';
import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
-import Alert from '../Components/Alert.js';
-import Snackbar from '@material-ui/core/Snackbar';
import {Redirect} from 'react-router-dom'
import {GreyButton, OrangeButton, InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
import {Background} from '../Components/UploadPageComponents/StyledComponents'
@@ -43,6 +41,8 @@ import DisplayThumbnail from '../Components/UploadPageComponents/PartTwoComponen
import DragAndDropThumbnail from '../Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail'
import {getRequest, deleteRequest, putRequest, postRequest} from '../Components/HelperFunctions/getAxiosConfig.js'
+import SnackBar from '../Components/SnackbarComponent';
+
export default function EditLearningObjectPage (props) {
const recursoId = props.match.params.recursoId
const {state} = useContext(Store)
@@ -248,13 +248,13 @@ export default function EditLearningObjectPage (props) {
}}
/>
}
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
- Recurso excluido com sucesso!
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={() => {toggleSnackbar(false)}}
+ severity={"info"}
+ color={"#00acc1"}
+ text={"Recurso excluido com sucesso!"}
+ />
{
!loading ?
(
diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js
index f85c888d5bc7624c7988c6f76119554ba0c5da05..bcdb771107701e9954d5e4cadf0da828ba1d2657 100644
--- a/src/Pages/EditProfilePage.js
+++ b/src/Pages/EditProfilePage.js
@@ -6,13 +6,13 @@ import Paper from '@material-ui/core/Paper';
import TabPanelEditarPerfil from '../Components/TabPanels/UserPageTabs/PanelEditarPerfil.js'
import TabPanelSolicitarContaProfessor from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import TabPanelGerenciarConta from '../Components/TabPanels/UserPageTabs/PanelGerenciarConta.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import { Alert } from '../Components/LoginModal.js'
import Grid from '@material-ui/core/Grid'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
import { Store } from '../Store.js'
+import SnackBar from '../Components/SnackbarComponent';
+
export default function EditProfilePage(props) {
const { state, dispatch } = useContext(Store)
const id = state.currentUser.id
@@ -119,12 +119,13 @@ export default function EditProfilePage(props) {
}
return (
- <div style={{ backgroundColor: "#f4f4f4", color: "#666" }}>
- <Snackbar open={snackbarOpened.open} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity={snackbarOpened.severity} >{snackbarOpened.text}</Alert>
- </Snackbar>
+ <Main contrast={state.contrast}>
+ <SnackBar
+ snackbarOpen={snackbarOpened.open}
+ handleClose={handleCloseSnackbar}
+ severity={snackbarOpened.severity}
+ text={snackbarOpened.text}
+ />
<CustomizedBreadcrumbs
values={["Minha área", "Configurações da Conta", tabs[tabValue]]}
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 37d96115166a1ae2cb2ae97c9b83108c9427fbcc..650b77862996953fd5e8ae2a9d787efdcd8e1b21 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -25,8 +25,6 @@ import TextoObjeto from "../Components/ResourcePageComponents/TextoObjeto.js";
import Footer from "../Components/ResourcePageComponents/Footer.js";
import Sobre from "../Components/ResourcePageComponents/Sobre.js";
import CommentsArea from "../Components/ResourcePageComponents/CommentsArea.js";
-import Snackbar from "@material-ui/core/Snackbar";
-import Alert from "../Components/Alert.js";
import VideoPlayer from "../Components/ResourcePageComponents/VideoPlayer.js";
import LoadingSpinner from "../Components/LoadingSpinner.js";
import { makeStyles } from "@material-ui/core/styles";
@@ -38,6 +36,8 @@ import { getRequest } from "../Components/HelperFunctions/getAxiosConfig";
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
+import SnackBar from '../Components/SnackbarComponent';
+
//Image Import
import { noAvatar } from "ImportImages.js";
@@ -103,240 +103,217 @@ export default function LearningObjectPage(props) {
}
};
- const checkUserRole = (userRole) => {
- return (
- state.currentUser.roles.filter((role) => role.name === userRole).length >
- 0
- );
- };
-
- const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(
- false
- );
- const handleModalConfirmarCuradoria = (value) => {
- toggleModalConfirmarCuradoria(value);
- };
- const [reportCriteria, setReportCriteria] = useState([]);
- const [justificativa, setJustificativa] = useState("");
- const [submissionAccepted, setSubmissionAccepted] = useState("");
-
- const handleConfirm = (criteria, justification, accepted) => {
- setReportCriteria(criteria);
- setJustificativa(justification);
- setSubmissionAccepted(accepted);
- handleModalCuradoria(false);
- handleModalConfirmarCuradoria(true);
- };
-
- const finalizeCuratorshipFlow = () => {
- handleSnackbar(5);
- handleModalConfirmarCuradoria(false);
- const url = `/learning_objects/${id}`;
- getRequest(
- url,
- (data) => {
- setRecurso(data);
- },
- (error) => {
- handleSnackbar(7);
- setErro(true);
- }
- );
- };
-
- if (erro)
- return <LearnObjectNotFound>
- <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
- <Grid item>
- <p className="not-found">
- O recurso não foi encontrado em nossa base de dados.
- </p>
- </Grid>
- <Grid item>
- <Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
- <Button
- variant='contained'
- className="back-button"
- >
- Voltar para a busca de recursos.
- </Button>
- </Link>
- </Grid>
- </Grid>
- </LearnObjectNotFound>
- else
- return (
- <React.Fragment>
- <Snackbar
- open={snackbarOpen}
- autoHideDuration={6000}
- onClose={toggleSnackbar}
- anchorOrigin={{ vertical: "top", horizontal: "right" }}
- >
- <Alert severity="info"
- style={{ backgroundColor: "#00acc1" }}>
- {snackbarText[snackbarIndex]}
- </Alert>
- </Snackbar>
- <ModalAvaliarRecurso
- open={modalCuradoriaOpen}
- handleClose={() => {
- handleModalCuradoria(false);
- }}
- title={recurso.name}
- confirm={handleConfirm}
- setCriteria={setReportCriteria}
- />
- <ModalConfirmarCuradoria
- aceito={submissionAccepted}
- reportCriteria={reportCriteria}
- justificativa={justificativa}
- open={modalConfirmarCuradoriaOpen}
- handleClose={() => {
- handleModalConfirmarCuradoria(false);
- }}
- cancel={() => {
- handleModalCuradoria(true);
- }}
- recursoId={recurso.submission_id}
- finalizeCuratorshipFlow={finalizeCuratorshipFlow}
- handleErrorAprove={() => {
- handleSnackbar(6)
- }}
- />
- <Background>
- {carregando ? (
- <LoadingSpinner text={"Carregando Recurso"} />
- ) : (
- <>
- <Grid container spacing={2}>
- {recurso.object_type === "VÃdeo" && !recurso.link ? (
- <Grid item xs={12}>
- <Card>
- <VideoPlayer
- link={recurso.link}
- urlVerified={false}
- videoUrl={recurso.default_attachment_location}
- videoType={recurso.default_mime_type}
- />
- </Card>
- </Grid>
- ) : (
- urlVerify(recurso.link) && (
- <Grid item xs={12}>
- <Card>
- <VideoPlayer link={recurso.link} urlVerified={true} />
- </Card>
- </Grid>
- )
- )}
-
- <Grid item xs={12}>
- <Card>
- <div>
- {recurso.thumbnail && (
- <img alt="" src={apiDomain + recurso.thumbnail} />
- )}
-
- <TextoObjeto
- name={recurso.name}
- rating={recurso.review_average}
- recursoId={id}
- likesCount={recurso.likes_count}
- likedBool={recurso.liked}
- objType={recurso.object_type}
- subjects={recurso.subjects}
- educationalStages={recurso.educational_stages}
- viewCount={recurso.views_count}
- downloadCount={recurso.downloads_count}
- id={recurso.publisher ? recurso.publisher.id : undefined}
- stateRecurso={recurso.state}
- attachments={recurso.attachments}
- audioUrl={recurso.default_attachment_location}
- />
- </div>
-
- <Footer
- recursoId={id}
- downloadableLink={recurso.default_attachment_location}
- handleSnackbar={handleSnackbar}
- link={recurso.link}
- title={recurso.name}
- thumb={recurso.thumbnail}
- currPageLink={window.location.href}
- complained={recurso.complained}
- />
- </Card>
- </Grid>
-
- <Grid item xs={12}>
- <Card>
- {/*todo: change render method on additional item info*/}
- <Sobre
- avatar={
- recurso.publisher
- ? recurso.publisher.avatar
- ? apiDomain + recurso.publisher.avatar
- : noAvatar
- : noAvatar
- }
- publisher={
- recurso.publisher ? recurso.publisher.name : undefined
- }
- id={recurso.publisher ? recurso.publisher.id : undefined}
- description={recurso.description}
- author={recurso.author}
- tags={recurso.tags}
- attachments={recurso.attachments}
- language={recurso.language}
- mimeType={recurso.default_mime_type}
- createdAt={recurso.created_at}
- updatedAt={recurso.updated_at}
- license={recurso.license}
- followed={recurso.publisher ? recurso.publisher.followed : undefined}
- />
- </Card>
- </Grid>
-
- {recurso.state !== "submitted" && (
- <Grid item xs={12}>
- <Card>
- {/*adicionar funcionalidade ao botao de entrar*/}
- <CommentsArea
- recursoId={id}
- handleSnackbar={handleSnackbar}
- objType={recurso.object_type}
- recurso={true}
- />
- </Card>
- </Grid>
- )}
+ const handleModalConfirmarCuradoria = (value) => {
+ toggleModalConfirmarCuradoria(value);
+ };
+ const [reportCriteria, setReportCriteria] = useState([]);
+ const [justificativa, setJustificativa] = useState("");
+ const [submissionAccepted, setSubmissionAccepted] = useState("");
+
+ const handleConfirm = (criteria, justification, accepted) => {
+ setReportCriteria(criteria);
+ setJustificativa(justification);
+ setSubmissionAccepted(accepted);
+ handleModalCuradoria(false);
+ handleModalConfirmarCuradoria(true);
+ };
+
+ if (erro)
+ return <LearnObjectNotFound contrast={state.contrast}>
+ <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
+ <Grid item>
+ <p className="not-found">
+ O recurso não foi encontrado em nossa base de dados.
+ </p>
</Grid>
-
- {recurso.state === "submitted" && checkAccessLevel("curator") && (
- <AppBar
- position="fixed"
- color="primary"
- className={classes.appBar}
- >
- <StyledAppBarContainer>
- <div className="container">
- <div className="botoes">
- <ButtonAvaliarRecurso
- callback={() => {
- handleModalCuradoria(true);
- }}
- />
- </div>
- </div>
- </StyledAppBarContainer>
- </AppBar>
- )}
- </>
- )}
- </Background>
- </React.Fragment>
- );
+ <Grid item>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
+ <Button
+ variant='contained'
+ className="back-button"
+ >
+ Voltar para a busca de recursos
+ </Button>
+ </Link>
+ </Grid>
+ </Grid>
+ </LearnObjectNotFound>
+ else
+ return (
+ <React.Fragment>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={toggleSnackbar}
+ severity={"info"}
+ color={"#00acc1"}
+ text={snackbarText[snackbarIndex]}
+ />
+
+ <ModalAvaliarRecurso
+ contrast={state.contrast}
+ open={modalCuradoriaOpen}
+ handleClose={() => {
+ handleModalCuradoria(false);
+ }}
+ title={recurso.name}
+ confirm={handleConfirm}
+ setCriteria={setReportCriteria}
+ />
+ <ModalConfirmarCuradoria
+ contrast={state.contrast}
+ aceito={submissionAccepted}
+ reportCriteria={reportCriteria}
+ justificativa={justificativa}
+ open={modalConfirmarCuradoriaOpen}
+ handleClose={() => {
+ handleModalConfirmarCuradoria(false);
+ }}
+ cancel={() => {
+ handleModalCuradoria(true);
+ }}
+ recursoId={recurso.submission_id}
+ finalizeCuratorshipFlow={finalizeCuratorshipFlow}
+ handleErrorAprove={() => {
+ handleSnackbar(6)
+ }}
+ />
+ <Background contrast={state.contrast}>
+ {carregando ? (
+ <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} />
+ ) : (
+ <>
+ <Grid container spacing={2}>
+ {recurso.object_type === "VÃdeo" && !recurso.link ? (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <VideoPlayer
+ contrast={state.contrast}
+ link={recurso.link}
+ urlVerified={false}
+ videoUrl={recurso.default_attachment_location}
+ videoType={recurso.default_mime_type}
+ />
+ </Card>
+ </Grid>
+ ) : (
+ urlVerify(recurso.link) && (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <VideoPlayer contrast={state.contrast} link={recurso.link} urlVerified={true} />
+ </Card>
+ </Grid>
+ )
+ )}
+
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <div>
+ {recurso.thumbnail && (
+ <img alt="recurso" src={apiDomain + recurso.thumbnail} />
+ )}
+
+ <TextoObjeto
+ contrast={state.contrast}
+ name={recurso.name}
+ rating={recurso.review_average}
+ recursoId={id}
+ likesCount={recurso.likes_count}
+ likedBool={recurso.liked}
+ objType={recurso.object_type}
+ subjects={recurso.subjects}
+ educationalStages={recurso.educational_stages}
+ viewCount={recurso.views_count}
+ downloadCount={recurso.downloads_count}
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ stateRecurso={recurso.state}
+ attachments={recurso.attachments}
+ audioUrl={recurso.default_attachment_location}
+ />
+ </div>
+
+ <Footer
+ contrast={state.contrast}
+ recursoId={id}
+ downloadableLink={recurso.default_attachment_location}
+ handleSnackbar={handleSnackbar}
+ link={recurso.link}
+ title={recurso.name}
+ thumb={recurso.thumbnail}
+ currPageLink={window.location.href}
+ complained={recurso.complained}
+ />
+ </Card>
+ </Grid>
+
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ {/*todo: change render method on additional item info*/}
+ <Sobre
+ avatar={
+ recurso.publisher
+ ? recurso.publisher.avatar
+ ? apiDomain + recurso.publisher.avatar
+ : noAvatar
+ : noAvatar
+ }
+ publisher={
+ recurso.publisher ? recurso.publisher.name : undefined
+ }
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ description={recurso.description}
+ author={recurso.author}
+ tags={recurso.tags}
+ attachments={recurso.attachments}
+ language={recurso.language}
+ mimeType={recurso.default_mime_type}
+ createdAt={recurso.created_at}
+ updatedAt={recurso.updated_at}
+ license={recurso.license}
+ followed={recurso.publisher ? recurso.publisher.followed : undefined}
+ />
+ </Card>
+ </Grid>
+
+ {recurso.state !== "submitted" && (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ {/*adicionar funcionalidade ao botao de entrar*/}
+ <CommentsArea
+ recursoId={id}
+ handleSnackbar={handleSnackbar}
+ objType={recurso.object_type}
+ recurso={true}
+ />
+ </Card>
+ </Grid>
+ )}
+ </Grid>
+
+ {recurso.state === "submitted" && checkAccessLevel("curator") && (
+ <AppBar
+ position="fixed"
+ className={classes.appBar}
+ style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black", borderTop: "1px solid white" }}
+ >
+ <StyledAppBarContainer contrast={state.contrast}>
+ <div className="container">
+ <div className="botoes">
+ <ButtonAvaliarRecurso
+ contrast={state.contrast}
+ callback={() => {
+ handleModalCuradoria(true);
+ }}
+ />
+ </div>
+ </div>
+ </StyledAppBarContainer>
+ </AppBar>
+ )}
+ </>
+ )}
+ </Background>
+ </React.Fragment>
+ );
}
const useStyles = makeStyles((theme) => ({
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 15628592193b74b9363dd9d4e139a6858230bd85..9e8b5d7e9cd8a730d653f3177f13bd3754e93a5c 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -36,13 +36,9 @@ import {
filtersStages,
filtersLanguages,
} from '../Components/SearchPageComponents/filters';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { Store } from '../Store'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../Components/SnackbarComponent';
export default function Search() {
const history = useHistory();
@@ -501,30 +497,116 @@ export default function Search() {
/>
</Fragment>
}
- {
- currOption === 'Collection' &&
- <CollectionTemplate
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={collectionsArray}
- totalResources={totalCollections}
- />
- }
- {
- currOption === 'User' &&
- <UserTemplate
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={usersArray}
- totalResources={totalUsers}
- />
- }
- </MainPage>
- )
+
+ getRequest(
+ url,
+ (data, headers) => { handleSuccess(data, headers, searchClass) },
+ handleFail,
+ );
+
+ }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
+
+ if (error)
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPageError>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
+ <Error contrast={state.contrast} />
+ </MainPageError>
+ </div>
+ )
+ else
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPage>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
+ <StyledBreadCrumbs contrast={state.contrast}>
+ <Link to='/'>Página Inicial</Link>
+ <span>Busca</span>
+ </StyledBreadCrumbs>
+ <HeaderFilters
+ contrast={state.contrast}
+ options={options}
+ orders={orders}
+ currOption={currOption}
+ currOrder={currOrder}
+ handleChangeOption={handleChangeOption}
+ handleChangeOrder={handleChangeOrder}
+ />
+ {
+ currOption === 'LearningObject' &&
+ <Fragment>
+ <SearchExpansionPanel
+ contrast={state.contrast}
+ setTag={(tag) => setTag(tag)}
+ curriculumComponents={curriculumComponents}
+ setCurriculum={(array) => { setCurriculumComponents(array) }}
+ typeOfResources={typeOfResources}
+ setTypeRes={(array) => { setTypeOfResources(array) }}
+ teachingStage={teachingStage}
+ setTeachingStage={(array) => { setTeachingStage(array) }}
+ languages={languages}
+ setLanguages={(array) => { setLanguages(array) }}
+ />
+ {
+ <FilterSummary
+ contrast={state.contrast}
+ curriculumComponents={curriculumComponents}
+ typeOfResources={typeOfResources}
+ languages={languages}
+ teachingStage={teachingStage}
+ tag={tag}
+ onButtonClicked={onButtonClicked}
+ />
+ }
+ <ResourceTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={resourcesArray}
+ totalResources={totalResources}
+ />
+ </Fragment>
+ }
+ {
+ currOption === 'Collection' &&
+ <CollectionTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={collectionsArray}
+ totalResources={totalCollections}
+ />
+ }
+ {
+ currOption === 'User' &&
+ <UserTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={usersArray}
+ totalResources={totalUsers}
+ />
+ }
+ </MainPage>
+ </div>
+ )
}
const MainPage = styled.div`