diff --git a/src/Admin/Components/Components/DataCards/ComplaintsCard.js b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
index d079c8148176da7d432259a2aa95c16ed2bb437b..72afd79ad3058e9b24ea4819508574a60b13ba6c 100644
--- a/src/Admin/Components/Components/DataCards/ComplaintsCard.js
+++ b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
@@ -683,7 +683,10 @@ const CollectionCard = ({ match }) => {
color="inherit"
gutterBottom
>
- Recurso #{item.complainable_id}
+ {
+
+ item.complainable_type === "User" ? `Usuário #${item.complainable_id}` : `Recurso #${item.complainable_id}`
+ }
</Typography>
</Grid>
<Grid item>
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 04cf45c736f7dc411ab71a0a9234a1966a2a3e6b..e455706258f0ae86a984beaefa02f17a6b902803 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -29,14 +29,13 @@ import MenuItem from "@material-ui/core/MenuItem";
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import Unauthorized from '../Unauthorized';
-import { getRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { EditFilter, GetAData } from '../../../Filters';
//routers
import { Link } from 'react-router-dom';
-//joadit
-// import JoditEditor from 'jodit-react';
+import ReactRichEditor from "react-rich-text-editor";
const EditCollection = ({ match }) => {
const { state, dispatch } = useContext(Store);
@@ -67,33 +66,6 @@ const EditCollection = ({ match }) => {
color: '',
})
- const editor = useRef(null);
-
- //Configs for jodit
- const config = {
- zIndex: 0,
- readonly: false,
- activeButtonsInReadOnly: ["source", "fullsize", "print", "about"],
- toolbarButtonSize: "middle",
- theme: "default",
- saveModeInCookie: false,
- spellcheck: true,
- editorCssClass: false,
- triggerChangeEvent: true,
- height: 400,
- direction: "ltr",
- debugLanguage: false,
- tabIndex: -1,
- toolbar: true,
- enter: "P",
- useSplitMode: false,
- colorPickerDefaultTab: "background",
- imageDefaultWidth: 100,
- events: {},
- placeholder: "Digite a descrição...",
- showXPathInStatusbar: false,
- };
-
const NameHandler = (e) => {
if (errorInName.error) {
setErrorInName({
@@ -174,16 +146,15 @@ const EditCollection = ({ match }) => {
const onSubmit = async () => {
setIsLoading(true)
- if (!isEmpty(name) && !isEmpty(privacy)) {
- const api = EditFilter('collections', id)
+ const api = EditFilter('collections', id)
let body = {
- collection: {
- name: name,
- privacy: privacy,
- description : description ? description : ""
+ "collection": {
+ "name": name,
+ "privacy": privacy,
+ "description": description
}
}
- postRequest(
+ putRequest(
api,
body,
(data) => {
@@ -196,23 +167,6 @@ const EditCollection = ({ match }) => {
}
)
}
- else {
- HandleSnack('Você precisa preencher algumas informações obrigatórias', true, 'warning', '#FFC125')
- if (isEmpty(name)) {
- setErrorInName({
- error: true,
- message: 'Este campo precisa ser preenchido'
- })
- }
- if (isEmpty(privacy)) {
- setErrorInPrivacy({
- error: true,
- message: 'Este campo precisa ser preenchido'
- })
- }
- setIsLoading(false)
- }
- }
useEffect(() => {
getRequest(
@@ -309,14 +263,13 @@ const EditCollection = ({ match }) => {
</MenuItem>
))}
</TextField>
- {/* <JoditEditor
- ref={editor}
- value={description}
- config={config}
- tabIndex={1} // tabIndex of textarea
- onBlur={(newContent) => setDescription(newContent.target.innerHTML)} // preferred to use only this option to update the content for performance reasons
- onChange={(newContent) => { }}
- /> */}
+ <ReactRichEditor
+ height={200}
+ onCodeChange={(word) => {
+ setDescription(word)
+ }}
+ showAll={true}
+ />
</form>
</CardContent>
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index 90afe03c6b7d4106e005f57be616619c427fee39..7c6c3ef96ebf3422df1eff9f9bfe800ec9203f8f 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -19,7 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useRef, useContext } from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
-import moment from 'moment';
+import moment from "moment";
//imports material ui components
import { Typography, TextField, Button, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -27,8 +27,8 @@ 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 Chip from "@material-ui/core/Chip";
+import MenuItem from "@material-ui/core/MenuItem";
import { useTheme, makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
@@ -36,15 +36,17 @@ import Box from "@material-ui/core/Box";
import SaveIcon from "@material-ui/icons/Save";
//imports local files
import SnackBar from "../../../../Components/SnackbarComponent";
-import { Store } from '../../../../Store';
-import Unauthorized from '../Unauthorized';
-import LoadingSpinner from '../../../../Components/LoadingSpinner';
-import { fetchAllRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { Store } from "../../../../Store";
+import Unauthorized from "../Unauthorized";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import {
+ fetchAllRequest,
+ putRequest,
+} from "../../../../Components/HelperFunctions/getAxiosConfig";
import { EditFilter } from "../../../Filters";
//routers
import { Link } from "react-router-dom";
-//jodit
-// import JoditEditor from "jodit-react";
+import ReactRichEditor from "react-rich-text-editor";
const useStyles = makeStyles((theme) => ({
root: {
@@ -57,41 +59,16 @@ const useStyles = makeStyles((theme) => ({
},
}));
+let text;
+
const EditEducationalObject = ({ match }) => {
const { state, dispatch } = useContext(Store);
const theme = useTheme();
const classes = useStyles();
- //Configs for jodit
- const JODIT_CONFIG = {
- zIndex: 0,
- readonly: false,
- activeButtonsInReadOnly: ["source", "fullsize", "print", "about"],
- toolbarButtonSize: "middle",
- theme: "default",
- saveModeInCookie: false,
- spellcheck: true,
- editorCssClass: false,
- triggerChangeEvent: true,
- height: 400,
- direction: "ltr",
- debugLanguage: false,
- tabIndex: -1,
- toolbar: true,
- enter: "P",
- useSplitMode: false,
- colorPickerDefaultTab: "background",
- imageDefaultWidth: 100,
- events: {},
- placeholder: "Digite a descrição...",
- showXPathInStatusbar: false,
- };
-
const id = match.params.id;
- const editor = useRef(null);
-
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 [isLoading, setIsLoading] = useState(false); //is loading to submit
@@ -169,11 +146,6 @@ const EditEducationalObject = ({ match }) => {
setAuthor(e.target.value);
};
- //Verify if the string is empty
- const isEmpty = (text) => {
- return text.length === 0 ? true : false;
- };
-
function TabPanel(props) {
const { children, value, index, ...other } = props;
@@ -205,12 +177,10 @@ const EditEducationalObject = ({ match }) => {
const handleChangeLan = (id, value) => {
const currLanguagesId = [...languagesID];
- currLanguagesId.push(
- {
- id: id,
- name: value,
- }
- )
+ currLanguagesId.push({
+ id: id,
+ name: value,
+ });
setListOfLanguages((chips) => chips.filter((chip) => chip.id !== id));
setLanguagesID(currLanguagesId);
};
@@ -219,29 +189,31 @@ const EditEducationalObject = ({ match }) => {
const currLanguageList = [...listOfLanguages];
currLanguageList.push({
id: chipToDelete.id,
- name: chipToDelete.name
- })
- setListOfLanguages(currLanguageList)
- setLanguagesID((chips) => chips.filter((chip) => chip.id !== chipToDelete.id));
+ name: chipToDelete.name,
+ });
+ setListOfLanguages(currLanguageList);
+ setLanguagesID((chips) =>
+ chips.filter((chip) => chip.id !== chipToDelete.id)
+ );
};
const handleChangeObj = (id, value) => {
- let currListOfObjs = [...listOfObjectTypes]
+ let currListOfObjs = [...listOfObjectTypes];
currListOfObjs.push({
id: objectType.id,
- name: objectType.name
- })
- currListOfObjs = currListOfObjs.filter((chip) => chip.id !== id)
+ name: objectType.name,
+ });
+ currListOfObjs = currListOfObjs.filter((chip) => chip.id !== id);
setListOfObjectTypes(currListOfObjs);
setObjectType({
id: id,
- name: value
+ name: value,
});
};
const handleChangeTab = (event, newValue) => {
setValue(newValue);
- }
+ };
const handleChangeIndex = (index) => {
setValue(index);
@@ -277,59 +249,55 @@ const EditEducationalObject = ({ match }) => {
.toString();
};
-
//handle submit
const onSubmit = async () => {
setIsLoading(true);
- if (
- !isEmpty(name) &&
- !isEmpty(owner) &&
- !isEmpty(author) &&
- !isEmpty(languagesID) &&
- !isEmpty(objectTypeID)
- ) {
- const api = EditFilter("learning_objects", id);
- const body = {
- "learning_object": {
- "author": author,
- "name": name,
- "description": description,
- "object_type_id": objectTypeID,
- "language_ids": languagesID,
- },
- };
- putRequest(
- api,
- body,
- (data, header) => {
+ const api = EditFilter("learning_objects", id);
+ const body = {
+ "learning_object": {
+ "author": author,
+ "name": name,
+ "description": text,
+ "object_type_id": [objectType.id],
+ "language_ids": languagesID,
+ },
+ };
+ console.log(text)
+ putRequest(
+ api,
+ body,
+ (data, header) => {
+ if (data.id) {
HandleSnack(
"O objeto educacional foi alterada com sucesso",
true,
"success",
"#228B22"
);
- setIsLoading(false);
- },
- (error) => {
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- setIsLoading(false);
+ } else {
+ if (data.author) {
+ let authorError = "";
+ data.author.map((msg) => (authorError = authorError + msg + " e "));
+ setErrorInAuthor({
+ error: true,
+ message: authorError,
+ });
+ }
+ if (data.language) {
+ let languageErr = "";
+ data.language.map(
+ (msg) => (languageErr = languageErr + msg + " e ")
+ );
+ HandleSnack("LÃngua" + languageErr, true, "warning", "#FFC125");
+ }
}
- )
- } else {
- HandleSnack(
- "Você precisa preencher algumas informações obrigatórias",
- true,
- "warning",
- "#FFC125"
- );
- if (isEmpty(name)) {
- setErrorInName({
- error: true,
- message: "Este campo precisa ser preenchido",
- });
+ setIsLoading(false);
+ },
+ (error) => {
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ setIsLoading(false);
}
- setIsLoading(false);
- }
+ );
};
// Fields
@@ -417,62 +385,64 @@ const EditEducationalObject = ({ match }) => {
if (state.userIsLoggedIn) {
const roles = [...state.currentUser.roles];
for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ if (roles[i].name === "admin" || roles[i].name === "editor")
canUserEdit = true;
- }
- else {
+ } else {
canUserEdit = false;
}
return canUserEdit;
- }
+ };
useEffect(() => {
- const urls = [`/learning_objects/${match.params.id}`, "/languages", "/object_types"]
+ const urls = [
+ `/learning_objects/${match.params.id}`,
+ "/languages",
+ "/object_types",
+ ];
fetchAllRequest(
urls,
(data) => {
- const auxiliarLanguages = [...data[1]]
- const auxiliarLanguagesId = []
- const objectLanguagesId = []
- data[0].language.map((lan) => (objectLanguagesId.push(lan.id)))
- data[1].map((lan) => (auxiliarLanguagesId.push(lan.id)))
+ const auxiliarLanguages = [...data[1]];
+ const auxiliarLanguagesId = [];
+ const objectLanguagesId = [];
+ data[0].language.map((lan) => objectLanguagesId.push(lan.id));
+ data[1].map((lan) => auxiliarLanguagesId.push(lan.id));
objectLanguagesId.map((lan) => {
const index = auxiliarLanguagesId.indexOf(lan);
auxiliarLanguages.splice(index, 1);
auxiliarLanguagesId.splice(index, 1);
- })
+ });
- const auxiliarObjects = [...data[2]]
- const auxiliarObjectsName = []
+ const auxiliarObjects = [...data[2]];
+ const auxiliarObjectsName = [];
const objectTypeName = data[0].object_type;
- data[2].map((obj) => (auxiliarObjectsName.push(obj.name)))
+ data[2].map((obj) => auxiliarObjectsName.push(obj.name));
const index = auxiliarObjectsName.indexOf(objectTypeName);
setObjectType({
id: auxiliarObjects[index].id,
- name: auxiliarObjects[index].name
- })
+ name: auxiliarObjects[index].name,
+ });
auxiliarObjects.splice(index, 1);
auxiliarObjectsName.splice(index, 1);
-
- SaveData(data[0])
- setLanguagesID(data[0].language)
- setListOfLanguages(auxiliarLanguages)
- setListOfObjectTypes(auxiliarObjects)
+ SaveData(data[0]);
+ setLanguagesID(data[0].language);
+ setListOfLanguages(auxiliarLanguages);
+ setListOfObjectTypes(auxiliarObjects);
setIsLoaded(true);
},
(error) => {
- console.log(error)
+ console.log(error);
setError(true);
}
- )
+ );
}, []);
if (error) {
return <div> Houve um erro... </div>;
} else if (!isLoaded) {
- return <LoadingSpinner text="Carregando..." />
+ return <LoadingSpinner text="Carregando..." />;
} else if (CheckUserPermission()) {
return (
<Card variant="outlined">
@@ -555,10 +525,15 @@ const EditEducationalObject = ({ match }) => {
))}
{languagesID.map((data) => {
return (
- <li key={data.id} style={{ listStyleType: "none", marginBottom: "0.5em" }}>
+ <li
+ key={data.id}
+ style={{ listStyleType: "none", marginBottom: "0.5em" }}
+ >
<Chip
label={data.name}
- onDelete={data === 'React' ? undefined : handleDeleteLan(data)}
+ onDelete={
+ data === "React" ? undefined : handleDeleteLan(data)
+ }
className={classes.chip}
/>
</li>
@@ -568,29 +543,38 @@ const EditEducationalObject = ({ match }) => {
id="standard-select-currency"
select
label="LÃnguas"
- style={{ width: '250px', marginBottom: '1em' }}
+ style={{ width: "250px", marginBottom: "1em" }}
>
{listOfLanguages.map((option) => (
- <MenuItem key={option.id} value={option.name} onClick={() => { handleChangeLan(option.id, option.name) }}>
+ <MenuItem
+ key={option.id}
+ value={option.name}
+ onClick={() => {
+ handleChangeLan(option.id, option.name);
+ }}
+ >
{option.name}
</MenuItem>
))}
</TextField>
<li style={{ listStyleType: "none", marginBottom: "0.5em" }}>
- <Chip
- label={objectType.name}
- className={classes.chip}
- />
+ <Chip label={objectType.name} className={classes.chip} />
</li>
<TextField
id="standard-select-currency"
select
label="Object type"
- style={{ width: '250px', marginBottom: '1em' }}
+ style={{ width: "250px", marginBottom: "1em" }}
>
{listOfObjectTypes.map((option) => (
- <MenuItem key={option.id} value={option.name} onClick={() => { handleChangeObj(option.id, option.name) }}>
+ <MenuItem
+ key={option.id}
+ value={option.name}
+ onClick={() => {
+ handleChangeObj(option.id, option.name);
+ }}
+ >
{option.name}
</MenuItem>
))}
@@ -599,16 +583,14 @@ const EditEducationalObject = ({ match }) => {
</TabPanel>
<TabPanel value={value} index={1} dir={theme.direction}>
- {/* <JoditEditor
- ref={editor}
- value={description}
- config={JODIT_CONFIG}
- tabIndex={1} // tabIndex of textarea
- onBlur={(newContent) =>
- setDescription(newContent.target.innerHTML)
- } // preferred to use only this option to update the content for performance reasons
- onChange={(newContent) => { }}
- /> */}
+ <ReactRichEditor
+ height={200}
+ onCodeChange={(word) => {
+ text = word
+ }}
+ showAll={true}
+
+ />
</TabPanel>
<TabPanel value={value} index={2} dir={theme.direction}>
@@ -642,7 +624,7 @@ const EditEducationalObject = ({ match }) => {
</CardAction>
</Card>
);
- } else return <Unauthorized />
+ } else return <Unauthorized />;
};
export default EditEducationalObject;
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index 53073aa52bfa3ffbd7f8d70c9f386a8d9d742519..646bdbebca9bfda683e335f478fba4c4b501d7ec 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -26,19 +26,31 @@ 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 CloseRoundedIcon from "@material-ui/icons/CloseRounded";
-import Paper from "@material-ui/core/Paper";
-import IconButton from "@material-ui/core/IconButton";
+import { makeStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
//imports from local files
import SnackBar from "../../../../Components/SnackbarComponent";
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-//Jodit
-// import JoditEditor from "jodit-react";
+import ReactRichEditor from "react-rich-text-editor";
let sendToAll = false;
-let rolesArr = [];
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ justifyContent: 'center',
+ flexWrap: 'wrap',
+ listStyle: 'none',
+ padding: theme.spacing(0.5),
+ margin: 0,
+ },
+ chip: {
+ margin: theme.spacing(0.5),
+ },
+}));
const EmailInputs = (props) => {
+ const classes = useStyles();
const [option, setOption] = useState("Todos os usuários"); //labels of the text field 'to'
const [index, setIndex] = useState(0); //Used to display something above the text field 'to' depending on what the user clicks
@@ -50,33 +62,6 @@ const EmailInputs = (props) => {
const [isSending, setIsSending] = useState(false);
- const editor = useRef(null);
-
- //Configs for jodit
- const config = {
- zIndex: 0,
- readonly: false,
- activeButtonsInReadOnly: ["source", "fullsize", "print", "about"],
- toolbarButtonSize: "middle",
- theme: "default",
- saveModeInCookie: false,
- spellcheck: true,
- editorCssClass: false,
- triggerChangeEvent: true,
- height: 400,
- direction: "ltr",
- debugLanguage: false,
- tabIndex: -1,
- toolbar: true,
- enter: "P",
- useSplitMode: false,
- colorPickerDefaultTab: "background",
- imageDefaultWidth: 100,
- events: {},
- placeholder: "Digite sua mensagem...",
- showXPathInStatusbar: false,
- };
-
//Handle snack bar
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -95,10 +80,6 @@ const EmailInputs = (props) => {
error: false,
message: "",
});
- const [errorInMessage, setErrorInMessage] = useState({
- error: false,
- message: "",
- });
const options = [
{
@@ -183,42 +164,15 @@ const EmailInputs = (props) => {
const currState = [...roles];
currState[i].isChecked = !currState[i].isChecked;
setRoles(currState);
- if (currState[i].isChecked) {
- rolesArr[i] = currState[i].value;
- } else {
- rolesArr[i] = null;
- }
};
const EmailsHandler = (e) => {
- setEmails(e.target.value);
- if (emails.length <= 1) {
- const obj = { ...errorInEmails };
- obj.error = true;
- obj.message = "* O email é pequeno";
- setErrorInEmail(obj);
- } else {
- const obj = { ...errorInEmails };
- obj.error = false;
- obj.message = "";
- setErrorInEmail(obj);
- const tam = emails.length;
- if (emails[tam - 1] !== "@") {
- const obj = { ...errorInEmails };
- if (!obj.arroba) {
- obj.error = true;
- obj.message =
- "* Está faltando o caracter @ para ser identificado como um email válido";
- setErrorInEmail(obj);
- }
- } else {
- const obj = { ...errorInEmails };
- obj.arroba = true;
- obj.error = false;
- obj.message = "";
- setErrorInEmail(obj);
- }
- }
+ if (errorInEmails.error)
+ setErrorInSubject({
+ error: false,
+ message: "",
+ });
+ setEmails(e.target.value)
};
const SubjectHandler = (e) => {
@@ -266,7 +220,6 @@ const EmailInputs = (props) => {
const copyEmail = [...emailsAdress];
copyEmail.splice(i, 1);
setEmailsAdress(copyEmail);
- console.log(copyEmail);
};
const isEmpty = (text) => {
@@ -290,63 +243,43 @@ const EmailInputs = (props) => {
};
const submitRequest = async () => {
- setIsSending(true);
- if (
- !isEmpty(message) &&
- !isEmpty(subject) &&
- (!isEmpty(emailsAdress) || !isEmpty(rolesArr) || sendToAll)
- ) {
- const api = `/email`;
- const body = {
- "email": {
- "all_users": sendToAll,
- "subject": subject,
- "body": message,
- "emails": emailsAdress,
- "roles": rolesArr,
- },
- };
- postRequest(
- api,
- body,
- (data, header) => {
- HandleSnack(
- "O email foi enviado com sucesso",
- true,
- "success",
- "#228B22"
- );
- setIsSending(false);
- CleanFields();
- },
- (error) => {
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- setIsSending(false);
- CleanFields();
- }
- )
- } else {
- HandleSnack(
- "Você precisa preencher algumas informações obrigatórias",
- true,
- "warning",
- "#FFC125"
- );
- if (isEmpty(message)) {
- setErrorInMessage({
- error: true,
- message: "Esse campo precisa ser preenchido",
- });
+ // setIsSending(true);
+ const rolesArr = [];
+ roles.map((role) => {
+ if (role.isChecked)
+ rolesArr.push(role.value)
+ })
+ console.log(rolesArr)
+ console.log(sendToAll)
+ const api = `/email`;
+ const body = {
+ "email": {
+ "all_users": sendToAll,
+ "subject": subject,
+ "body": message,
+ "emails": emailsAdress,
+ "roles": rolesArr,
+ },
+ };
+ postRequest(
+ api,
+ body,
+ (data, header) => {
+ HandleSnack(
+ "O email foi enviado com sucesso",
+ true,
+ "success",
+ "#228B22"
+ );
+ setIsSending(false);
+ CleanFields();
+ },
+ (error) => {
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ setIsSending(false);
+ CleanFields();
}
- if (isEmpty(subject)) {
- setErrorInSubject({
- error: true,
- message: "Esse campo precisa ser preenchido",
- });
- }
- setIsSending(false);
- CleanFields();
- }
+ )
};
return (
@@ -433,29 +366,17 @@ const EmailInputs = (props) => {
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "Space-between",
+ marginBottom: "1em"
}}
>
{emailsAdress.map((email, index) => (
- <Paper
- elevation={3}
- key={index}
- style={{
- borderRadius: 28,
- paddingLeft: "0.5em",
- marginBottom: "1em",
- marginRight: "1em",
- backgroundColor: "#D3D3D3",
- fontSize: 14,
- display: "flex",
- flexDirection: "row",
- alignItems: "center",
- }}
- >
- {email}
- <IconButton onClick={() => HandleDelete(index)}>
- <CloseRoundedIcon color="primary" />
- </IconButton>
- </Paper>
+ <li key={index} style={{ listStyleType: "none", marginBottom: "0.5em" }}>
+ <Chip
+ label={email}
+ onDelete={HandleDelete}
+ classes={classes.chip}
+ />
+ </li>
))}
</div>
@@ -491,14 +412,13 @@ const EmailInputs = (props) => {
<div style={{ height: "1em" }} />
<div style={{ flex: 1 }}>
- {/* <JoditEditor
- ref={editor}
- value={message}
- config={config}
- tabIndex={1} // tabIndex of textarea
- onBlur={(newContent) => setMessage(newContent.target.innerHTML)} // preferred to use only this option to update the content for performance reasons
- onChange={(newContent) => { }}
- /> */}
+ <ReactRichEditor
+ height={200}
+ onCodeChange={(word) => {
+ setMessage(word)
+ }}
+ showAll={true}
+ />
</div>
<div style={{ fontSize: 14 }}>
diff --git a/src/Admin/Components/Components/MobileComponents/SimpleList.js b/src/Admin/Components/Components/MobileComponents/SimpleList.js
new file mode 100644
index 0000000000000000000000000000000000000000..f7afb24bc6b5a48f775d7561b71ceb57fe65b392
--- /dev/null
+++ b/src/Admin/Components/Components/MobileComponents/SimpleList.js
@@ -0,0 +1,123 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import clsx from "clsx";
+import Card from "@material-ui/core/Card";
+import CardHeader from "@material-ui/core/CardHeader";
+import CardContent from "@material-ui/core/CardContent";
+import Collapse from "@material-ui/core/Collapse";
+import Avatar from "@material-ui/core/Avatar";
+import IconButton from "@material-ui/core/IconButton";
+import Typography from "@material-ui/core/Typography";
+import VisibilityIcon from "@material-ui/icons/Visibility";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { Link } from "react-router-dom";
+
+const useStyles = makeStyles((theme) => ({
+ expand: {
+ transform: "rotate(0deg)",
+ marginLeft: "auto",
+ transition: theme.transitions.create("transform", {
+ duration: theme.transitions.duration.shortest,
+ }),
+ },
+ expandOpen: {
+ transform: "rotate(180deg)",
+ },
+ displayColumn: {
+ display: "flex",
+ flexDirection: "column",
+ marginBottom: "1em",
+ },
+ subTitle: {
+ fontSize: 14,
+ fontWeight: "500",
+ },
+}));
+
+export default function MobileList(props) {
+ const classes = useStyles();
+ const [expanded, setExpanded] = React.useState(false);
+
+ const handleExpandClick = () => {
+ setExpanded(!expanded);
+ };
+
+ return (
+ <Card className={classes.root}>
+ <CardHeader
+ avatar={
+ <Avatar
+ aria-label="avatar"
+ style={
+ props.backColor
+ ? { backgroundColor: props.backColor }
+ : { backgroundColor: "grey" }
+ }
+ >
+ {props.avatar}
+ </Avatar>
+ }
+ title={props.title}
+ subheader={props.subtitle}
+ action={
+ <>
+ {
+ props.href ?
+ <Link to={props.href}>
+ <IconButton
+ onClick={props.reset}
+ >
+ <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ </IconButton>
+ </Link> : null
+ }
+
+ <IconButton
+ className={clsx(classes.expand, {
+ [classes.expandOpen]: expanded,
+ })}
+ onClick={handleExpandClick}
+ aria-expanded={expanded}
+ aria-label="show more"
+ >
+ <ExpandMoreIcon />
+ </IconButton>
+ </>
+ }
+ />
+ <Collapse in={expanded} timeout="auto" unmountOnExit>
+ <CardContent>
+ {props.data.map((info, index) => (
+ <div className={classes.displayColumn} key={index}>
+ <Typography color="initial" className={classes.subTitle}>
+ {info.title}
+ </Typography>
+ <Typography color="textSecondary">
+ {info.subtitle}
+ </Typography>
+ </div>
+ ))}
+ </CardContent>
+ </Collapse>
+ </Card>
+ );
+}
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index d01a5c573e97794762b4692b393b37e10734f32a..4a6e9220d8adc0596a297ce8fa8aabcef86e1528 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -38,8 +38,11 @@ import AddRoundedIcon from "@material-ui/icons/AddRounded";
import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
+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"
let currPage = 0;
@@ -70,6 +73,7 @@ const Activity = () => {
"PRIVACIDADE",
"VISUALIZAR",
]; //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
@@ -211,153 +215,316 @@ const Activity = () => {
return <LoadingSpinner text="Carregando..." />
} else {
- return <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
- }
- />
+ if (WINDOW_WIDTH <= 758) {
+ return <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">Atividades</Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0;
- UpdateHandler(
- Url("activities", "", `${currPage}`, "DESC")
- );
- }}
- startIcon={<UpdateRoundedIcon />}
- >
- {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
- </Button>
- </Grid>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- setShowFilter(!showFilter);
- }}
- startIcon={<FilterListRoundedIcon />}
- >
- Filtrar
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">Atividades</Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ UpdateHandler(
+ Url("activities", "", `${currPage}`, "DESC")
+ );
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ setShowFilter(!showFilter);
+ }}
+ startIcon={<FilterListRoundedIcon />}
+ >
+ Filtrar
</Button>
+ </Grid>
</Grid>
</Grid>
</Grid>
- </Grid>
-
- {showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
-
- <div style={{ alignSelf: "flex-end" }}>
- <TextField
- select
- label="Filtro"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
+
+ {showFilter ? (
+ <>
+ <div style={{ height: "1em" }}></div>
+
+ <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.value}
+ >
+ {option.label}
+ </MenuItem>
+ ))}
+ </TextField>
+ </div>
+ </>
+ ) : null}
+ </Paper>
+
+ <div style={{ height: "2em" }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++;
+ if (showFilter) {
+ LoadMoreItens(
+ Url("activities", `"privacy" : "${option}"`, `${currPage}`, "DESC")
+ );
+ } else {
+ LoadMoreItens(
+ Url("activities", "", `${currPage}`, "DESC")
+ );
+ }
+ }}
>
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.value}
- >
- {option.label}
- </MenuItem>
- ))}
- </TextField>
- </div>
- </>
- ) : null}
- </Paper>
-
- <div style={{ height: "2em" }}></div>
-
- <TableData top={TOP_LABELS}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={index} style={{ padding: "1em" }}>
- {/* Button to load more data */}
- <StyledTableCell>
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.id}
+ subtitle={row.privacy}
+ backColor={"#673ab7"}
+ avatar={<AllOutIcon />}
+ href={`/admin/activity/${row.id}`}
+ reset={() => {
+ currPage = 0;
+ }}
+ data={
+ [
+ {
+ title: "Dono(a)",
+ subtitle: row.owner ? row.owner.name : "Sem dados"
+
+ },
+ {
+ title: "Criado em",
+ subtitle: DisplayDate(row.created_at)
+ },
+ {
+ title: "Atividade",
+ subtitle: row.activity
+ }
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </>
+ }
+ else {
+ return <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">Atividades</Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
onClick={() => {
- currPage++;
- if (showFilter) {
- LoadMoreItens(
- Url("activities", `"privacy" : "${option}"`, `${currPage}`, "DESC")
- );
- } else {
- LoadMoreItens(
- Url("activities", "", `${currPage}`, "DESC")
- );
- }
+ currPage = 0;
+ UpdateHandler(
+ Url("activities", "", `${currPage}`, "DESC")
+ );
}}
+ startIcon={<UpdateRoundedIcon />}
>
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
</Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
- <StyledTableRow key={index}>
- <StyledTableCell component="th" scope="row">
- {DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- {
- row.owner === null ? '' : row.owner.name
- }
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.activity}
- </StyledTableCell>
- <StyledTableCell align="right">{row.privacy}</StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/activity/${row.id}`}>
- <IconButton onClick={() => {currPage = 0}}>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
+ </Grid>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ setShowFilter(!showFilter);
+ }}
+ startIcon={<FilterListRoundedIcon />}
+ >
+ Filtrar
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+
+ {showFilter ? (
+ <>
+ <div style={{ height: "1em" }}></div>
+
+ <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.value}
+ >
+ {option.label}
+ </MenuItem>
+ ))}
+ </TextField>
+ </div>
+ </>
+ ) : null}
+ </Paper>
+
+ <div style={{ height: "2em" }}></div>
+
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledTableRow key={index} style={{ padding: "1em" }}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++;
+ if (showFilter) {
+ LoadMoreItens(
+ Url("activities", `"privacy" : "${option}"`, `${currPage}`, "DESC")
+ );
+ } else {
+ LoadMoreItens(
+ Url("activities", "", `${currPage}`, "DESC")
+ );
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
</StyledTableCell>
</StyledTableRow>
- )
- )}
- </TableBody>
- </TableData>
- </>
+ ) : (
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">
+ {DisplayDate(row.created_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {
+ row.owner ? row.owner.name : ""
+ }
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.activity}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.privacy}</StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/activity/${row.id}`}>
+ <IconButton onClick={() => { currPage = 0 }}>
+ <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ </IconButton>
+ </Link>
+ </StyledTableCell>
+ </StyledTableRow>
+ )
+ )}
+ </TableBody>
+ </TableData>
+ </>
+ }
}
};
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 29d6988a36bcda9735524140dec70d41cdead60f..40359292c8b3fd08e100b1067992e7b4301f6988 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -47,6 +47,11 @@ import CloseRoundedIcon from "@material-ui/icons/CloseRounded";
//routers
import { Link } from "react-router-dom";
import Unauthorized from "../../../Components/Components/Unauthorized";
+import styled from "styled-components";
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList";
+import { apiDomain } from '../../../../env';
+import noAvatar from "../../../../img/default_profile.png";
+import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
let currPage = 0;
let currStateFilter = "requested";
@@ -73,6 +78,7 @@ const StyledTableRow = withStyles((theme) => ({
const AproveTeacher = () => {
const { state, dispatch } = useContext(Store);
+ const WINDOW_WIDTH = window.innerWidth;
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -218,7 +224,7 @@ const AproveTeacher = () => {
const NameHandler = (e) => {
currPage = 0;
- currNameFilter = e.target.value
+ currNameFilter = e.target.value;
setName(currNameFilter);
getRequest(
Url(
@@ -242,7 +248,7 @@ const AproveTeacher = () => {
const EmailHandler = (e) => {
currPage = 0;
- currEmailFilter = e.target.value
+ currEmailFilter = e.target.value;
setEmail(currEmailFilter);
getRequest(
Url(
@@ -428,222 +434,478 @@ const AproveTeacher = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />;
} else if (CheckUserPermission()) {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
- }
- />
-
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">
- Lista de pedidos para professores
- </Typography>
+ if (WINDOW_WIDTH <= 1075) {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de pedidos para professores
+ </Typography>
+ </Grid>
+
+ <Grid item xs={6}>
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ UpdateHandler(
+ Url(
+ "users",
+ `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {isUpdating ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Atualizar"
+ )}
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ setShowFilter(!showFilter);
+ }}
+ startIcon={<FilterListRoundedIcon />}
+ >
+ Filtrar
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
</Grid>
- <Grid item xs={6}>
- <Grid container justify="flex-end" spacing={3}>
+ {showFilter ? (
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ alignContent="flex-end"
+ spacing={3}
+ xs={12}
+ >
<Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0;
- UpdateHandler(
- Url(
- "users",
- `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
- `${currPage}`,
- "DESC"
- )
- );
- }}
- startIcon={<UpdateRoundedIcon />}
+ <TextField
+ select
+ label="Estado"
+ value={option ? option : ""}
+ onChange={handleChange}
+ helperText="Por favor, selecione uma das opções"
>
- {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
- </Button>
+ {StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.id}
+ value={option.name}
+ name={option.id}
+ onClick={() =>
+ ApplyFilter(option.id, "submitter_request")
+ }
+ >
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
</Grid>
<Grid item>
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- setShowFilter(!showFilter);
- }}
- startIcon={<FilterListRoundedIcon />}
- >
- Filtrar
- </Button>
+ <TextField label="Nome" onChange={NameHandler} value={name} />
+ </Grid>
+ <Grid item>
+ <TextField
+ label="Email"
+ onChange={EmailHandler}
+ value={email}
+ />
</Grid>
</Grid>
- </Grid>
- </Grid>
+ ) : null}
+ </Paper>
- {showFilter ? (
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- alignContent="flex-end"
- spacing={3}
- xs={12}
- >
- <Grid item>
- <TextField
- select
- label="Estado"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
+ <div style={{ height: "2em" }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++;
+ LoadMoreItens(
+ Url(
+ "users",
+ `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }}
>
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.id}
- value={option.name}
- name={option.id}
- onClick={() =>
- ApplyFilter(option.id, "submitter_request")
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#00bcd4"}
+ avatar={
+ <img
+ src={row.avatar ? apiDomain + row.avatar : noAvatar}
+ alt="user avatar"
+ style={{
+ height: "100%",
+ width: "100%",
+ borderRadius: "50%",
+ }}
+ />
+ }
+ href={`/admin/user/${row.id}`}
+ reset={() => {
+ currPage = 0;
+ currNameFilter = "";
+ currEmailFilter = "";
+ }}
+ data={[
+ {
+ title: "Email",
+ subtitle: row.email ?
+ <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+ <Button
+ variant='text'
+ color='primary'
+ startIcon={<EmailRoundedIcon />}
+ >
+ {row.email}
+ </Button>
+ </Link> : null
+
+ },
+ {
+ title: "Pedido em",
+ subtitle: DisplayDate(row.created_at),
+ },
+ {
+ title: "Situação do pedido",
+ subtitle: ComplaintStatus(row.submitter_request),
+ },
+ {
+ title: "Ações rápidas",
+ subtitle: <>
+ <Button
+ variant="contained"
+ color="secondary"
+ style={{ width: "100%" }}
+ disabled={
+ row.submitter_request === "requested" ? false : true
+ }
+ startIcon={
+ <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
+ }
+ onClick={() => {
+ handleReject(row.id, row.name);
+ }}
+ >
+ Recusar
+ </Button>
+ <div style={{ height: "0.5em" }} />
+ <Button
+ variant="contained"
+ color="primary"
+ style={{ width: "100%" }}
+ disabled={
+ row.submitter_request === "requested" ? false : true
+ }
+ startIcon={
+ <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
+ }
+ onClick={() => {
+ handleAprove(row.id, row.name);
+ }}
+ >
+ Aceitar
+ </Button>
+ </>
}
- >
- {option.name}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
- <Grid item>
- <TextField label="Nome" onChange={NameHandler} value={name} />
+ ]}
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </>
+ );
+ } else {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de pedidos para professores
+ </Typography>
</Grid>
- <Grid item>
- <TextField
- label="Email"
- onChange={EmailHandler}
- value={email}
- />
+
+ <Grid item xs={6}>
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ UpdateHandler(
+ Url(
+ "users",
+ `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {isUpdating ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Atualizar"
+ )}
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ setShowFilter(!showFilter);
+ }}
+ startIcon={<FilterListRoundedIcon />}
+ >
+ Filtrar
+ </Button>
+ </Grid>
+ </Grid>
</Grid>
</Grid>
- ) : null}
- </Paper>
-
- <div style={{ height: "2em" }}></div>
-
- <Grid xs={12} container>
- <TableData top={TOP_LABELS}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
- <Button
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
- onClick={() => {
- currPage++;
- LoadMoreItens(
- Url(
- "users",
- `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
- `${currPage}`,
- "DESC"
- )
- );
- }}
+
+ {showFilter ? (
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ alignContent="flex-end"
+ spacing={3}
+ 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.id}
+ value={option.name}
+ name={option.id}
+ onClick={() =>
+ ApplyFilter(option.id, "submitter_request")
+ }
>
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
- </Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
- <StyledTableRow
- key={index}
- style={{ flex: 1, width: "100%" }}
- >
- <StyledTableCell component="th" scope="row">
- {ComplaintStatus(row.submitter_request)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.email}</StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/user/${row.id}`}>
- <IconButton
- onClick={() => {
- currPage = 0;
- currNameFilter = ""
- currEmailFilter = ""
- }}
- >
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- <Button
- variant="contained"
- color="secondary"
- style={{ width: "100%" }}
- disabled={
- row.submitter_request === "requested" ? false : true
- }
- startIcon={
- <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
- }
- onClick={() => {
- handleReject(row.id, row.name);
- }}
- >
- Recusar
- </Button>
- <div style={{ height: "0.5em" }} />
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ <Grid item>
+ <TextField label="Nome" onChange={NameHandler} value={name} />
+ </Grid>
+ <Grid item>
+ <TextField
+ label="Email"
+ onChange={EmailHandler}
+ value={email}
+ />
+ </Grid>
+ </Grid>
+ ) : null}
+ </Paper>
+
+ <div style={{ height: "2em" }}></div>
+
+ <Grid xs={12} container>
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
<Button
- variant="contained"
color="primary"
- style={{ width: "100%" }}
- disabled={
- row.submitter_request === "requested" ? false : true
- }
- startIcon={
- <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
- }
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
onClick={() => {
- handleAprove(row.id, row.name);
+ currPage++;
+ LoadMoreItens(
+ Url(
+ "users",
+ `"submitter_request":"${currStateFilter}","name":"${currNameFilter}","email":"${currEmailFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
}}
>
- Aceitar
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
</Button>
</StyledTableCell>
</StyledTableRow>
- )
- )}
- </TableBody>
- </TableData>
- </Grid>
- </>
- );
+ ) : (
+ <StyledTableRow
+ key={index}
+ style={{ flex: 1, width: "100%" }}
+ >
+ <StyledTableCell component="th" scope="row">
+ {ComplaintStatus(row.submitter_request)}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">
+ {row.name}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.email}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {DisplayDate(row.created_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/user/${row.id}`}>
+ <IconButton
+ onClick={() => {
+ currPage = 0;
+ currNameFilter = "";
+ currEmailFilter = "";
+ }}
+ >
+ <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ </IconButton>
+ </Link>
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Button
+ variant="contained"
+ color="secondary"
+ style={{ width: "100%" }}
+ disabled={
+ row.submitter_request === "requested" ? false : true
+ }
+ startIcon={
+ <CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
+ }
+ onClick={() => {
+ handleReject(row.id, row.name);
+ }}
+ >
+ Recusar
+ </Button>
+ <div style={{ height: "0.5em" }} />
+ <Button
+ variant="contained"
+ color="primary"
+ style={{ width: "100%" }}
+ disabled={
+ row.submitter_request === "requested" ? false : true
+ }
+ startIcon={
+ <CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
+ }
+ onClick={() => {
+ handleAprove(row.id, row.name);
+ }}
+ >
+ Aceitar
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+ )
+ )}
+ </TableBody>
+ </TableData>
+ </Grid>
+ </>
+ );
+ }
} else return <Unauthorized />;
};
export default AproveTeacher;
+
+const StyledDivButton = styled(Paper)`
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 86b10055cafc7a5ebbba84e03badb9e66ae17145..81bd15d905c72b4d7c69a83fb6cdeb259728da9f 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -42,6 +42,10 @@ import { getRequest, putRequest } from '../../../../Components/HelperFunctions/g
import { Url } from '../../../Filters';
//routers
import { Link } from 'react-router-dom';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import styled from "styled-components"
+import { apiDomain } from '../../../../env';
+import noAvatar from "../../../../img/default_profile.png";
let currPage = 0; //var that controlls the current page that we are
let currContentFilter = 1;
@@ -67,6 +71,7 @@ const StyledTableRow = withStyles((theme) => ({
const BlockedUsers = () => {
const AddOneLenght = [''];
+ 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
@@ -280,8 +285,7 @@ const BlockedUsers = () => {
(data) => {
if (data.errors)
HandleSnack('Erro!', true, 'warning', '#FA8072')
- else
- {
+ else {
currPage = 0
HandleSnack('Usuário foi reativado com sucesso!', true, 'success', '#228B22')
UpdateHandler(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
@@ -322,164 +326,334 @@ const BlockedUsers = () => {
//Words in the top part of the table
const topTable = ['ID', 'ESTADO', 'NAME', 'EMAIL', 'BLOQUEADO EM', 'AÇÕES'];
-
- return (
- <div>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <Paper style={{ padding: '1em' }}>
- <Grid container direction="row" alignItems="center">
- <Grid container spacing={3} >
- <Grid item xs={6}>
- <Typography variant="h4">
- Lista de usuários bloqueados
- </Typography>
+ if (WINDOW_WIDTH <= 899) {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <Paper style={{ padding: '1em' }}>
+ <Grid container direction="row" alignItems="center">
+ <Grid container spacing={3} >
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de usuários bloqueados
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
+ }
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
</Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0
- transformListToAsc = false
- UpdateHandler(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
- }}
- startIcon={<UpdateRoundedIcon />}
+ <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.id}
+ value={option.name}
+ name={option.id}
>
- {
- isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
- }
- </Button>
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+
+ </Grid>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#e81f4f"}
+ avatar={
+ <img
+ src={row.avatar ? apiDomain + row.avatar : noAvatar}
+ alt="user avatar"
+ style={{
+ height: "100%",
+ width: "100%",
+ borderRadius: "50%",
+ }}
+ />
+ }
+ href={`/admin/user/${row.id}`}
+ reset={() => {
+ currPage = 0; transformListToAsc = false; currContentFilter = 1
+ }}
+ data={
+ [
+ {
+ title: "Email",
+ subtitle: row.email ?
+ <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+ <Button
+ variant='text'
+ color='primary'
+ startIcon={<EmailRoundedIcon />}
+ >
+ {row.email}
+ </Button>
+ </Link> : null
+
+ },
+ {
+ title: "Estado",
+ subtitle: BlockStatus(currContentFilter)
+ },
+ {
+ title: "Ações rápidas",
+ subtitle: <Button
+ style={{ width: "100%", marginBottom: "0.5em" }}
+ variant="contained"
+ color="secondary"
+ startIcon={<RemoveCircleOutlineRoundedIcon />}
+ onClick={() => ReactiveUser(row.id)}
+ >
+ Desbloquear
+ </Button>
+ }
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </div>
+ )
+ }
+ else {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <Paper style={{ padding: '1em' }}>
+ <Grid container direction="row" alignItems="center">
+ <Grid container spacing={3} >
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de usuários bloqueados
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
+ }
+ </Button>
+ </Grid>
</Grid>
</Grid>
</Grid>
+ <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.id}
+ value={option.name}
+ name={option.id}
+ >
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+
</Grid>
- <Grid item>
- <TextField
- select
- label="Motivo"
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.id}
- value={option.name}
- name={option.id}
- >
- {option.name}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
+ </Paper>
- </Grid>
- </Paper>
-
- <div style={{ height: '2em' }}></div>
-
- <TableData
- top={topTable}
- onIconPressed={InvertList}
- >
- <TableBody>
- {items.map((row, index) => (
- index === items.length - 1 ?
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
- <Button
- color='primary'
- variant='text'
- disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- onClick={() => {
- currPage++
- if (transformListToAsc) {
- LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'))
- } else {
- LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
+ <div style={{ height: '2em' }}></div>
+
+ <TableData
+ top={topTable}
+ onIconPressed={InvertList}
+ >
+ <TableBody>
+ {items.map((row, index) => (
+ index === items.length - 1 ?
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color='primary'
+ variant='text'
+ disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {
+ isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
- }}
- >
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+
+ :
+
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">
+ {BlockStatus(currContentFilter)}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.name}</StyledTableCell>
+ <StyledTableCell align="right">
{
- isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ row.email ?
+ <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+ <Button
+ variant='text'
+ color='primary'
+ startIcon={<EmailRoundedIcon />}
+ >
+ {row.email}
+ </Button>
+ </Link> : null
}
- </Button>
- </StyledTableCell>
- </StyledTableRow>
-
- :
-
- <StyledTableRow key={index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
- {BlockStatus(currContentFilter)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">
- {
- row.email ?
- <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
- </Link> : null
- }
- </StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.suspended_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Button
- style={{ width: "100%", marginBottom: "0.5em" }}
- variant="contained"
- color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
- onClick={() => ReactiveUser(row.id)}
- >
- Desbloquear
- </Button>
- <Link to={`/admin/user/${row.id}`}>
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {DisplayDate(row.suspended_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
<Button
- onClick={() => { currPage = 0; transformListToAsc = false; currContentFilter = 1}}
- style={{ width: "100%" }}
+ style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
- color="primary"
- startIcon={<VisibilityIcon />}
+ color="secondary"
+ startIcon={<RemoveCircleOutlineRoundedIcon />}
+ onClick={() => ReactiveUser(row.id)}
>
- Visualizar
+ Desbloquear
</Button>
- </Link>
- </StyledTableCell>
- </StyledTableRow>
- ))}
- </TableBody>
- </TableData>
- </div>
- )
+ <Link to={`/admin/user/${row.id}`}>
+ <Button
+ onClick={() => { currPage = 0; transformListToAsc = false; currContentFilter = 1 }}
+ style={{ width: "100%" }}
+ variant="contained"
+ color="primary"
+ startIcon={<VisibilityIcon />}
+ >
+ Visualizar
+ </Button>
+ </Link>
+ </StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </TableData>
+ </div>
+ )
+ }
}
}
-export default BlockedUsers;
\ No newline at end of file
+export default BlockedUsers;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
\ 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 0950588baedb6be69c2c3fea0d54f5c5acd6ed6f..4a62e4a1dfe1456fc0c635d72b3dac8d02b9476c 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -27,6 +27,7 @@ import LoadingSpinner from "../../../../Components/LoadingSpinner";
//imports from material ui
import { withStyles } 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";
@@ -45,6 +46,8 @@ import {
} from "../../../../Components/HelperFunctions/getAxiosConfig";
//routers
import { Link } from "react-router-dom";
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import styled from 'styled-components'
let currPage = 0;
let currPrivacyFilter = "";
@@ -81,6 +84,8 @@ const Collections = () => {
"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
@@ -304,125 +309,215 @@ const Collections = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />;
} else {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
- }
- />
-
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">Coleções</Typography>
- </Grid>
- <Grid item xs={6}>
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0;
- UpdateHandler(
- Url(
- "collections",
- `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
- `${currPage}`,
- "DESC"
- )
- );
- }}
- startIcon={<UpdateRoundedIcon />}
- >
- {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
- </Button>
- </Grid>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- setShowFilter(!showFilter);
- }}
- startIcon={<FilterListRoundedIcon />}
- >
- Filtrar
- </Button>
+ if (WINDOW_WIDTH <= 954) {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">Coleções</Typography>
+ </Grid>
+ <Grid item xs={6}>
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ UpdateHandler(
+ Url(
+ "collections",
+ `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ setShowFilter(!showFilter);
+ }}
+ startIcon={<FilterListRoundedIcon />}
+ >
+ Filtrar
+ </Button>
+ </Grid>
</Grid>
</Grid>
</Grid>
- </Grid>
-
- {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 ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
- <MenuItem key={index} value={option.value} onClick={() => { ApplyFilter(option.value) }}>
- {option.label}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
- <Grid item>
- <TextField
- label="Pesquisa"
- value={search}
- onChange={(event) => HandleSearch(event)}
- ></TextField>
+ {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 ? option : ""}
+ onChange={handleChange}
+ helperText="Por favor, selecione uma das opções"
+ >
+ {options.map((option, index) => (
+ <MenuItem key={index} value={option.value} onClick={() => { ApplyFilter(option.value) }}>
+ {option.label}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+
+ <Grid item>
+ <TextField
+ label="Pesquisa"
+ value={search}
+ onChange={(event) => HandleSearch(event)}
+ ></TextField>
+ </Grid>
</Grid>
+ </>
+ ) : null}
+ </Paper>
+
+ <div style={{ height: "2em" }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++;
+ LoadMoreItens(
+ Url(
+ "collections",
+ `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.privacy}
+ backColor={"#e81f4f"}
+ avatar={<PeopleRoundedIcon />}
+ href={`/admin/Collection/${row.id}`}
+ reset={() => {
+ currPage = 0;
+ currPrivacyFilter = "";
+ currNameFilter = "";
+ }}
+ 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)
+ }
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </>
+ );
+ }
+ else {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">Coleções</Typography>
</Grid>
- </>
- ) : null}
- </Paper>
-
- <div style={{ height: "2em" }}></div>
-
- <TableData top={TOP_LABELS}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={index}>
- <StyledTableCell>
+ <Grid item xs={6}>
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
- key={index}
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
onClick={() => {
- currPage++;
- LoadMoreItens(
+ currPage = 0;
+ UpdateHandler(
Url(
"collections",
`"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
@@ -431,80 +526,176 @@ const Collections = () => {
)
);
}}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ setShowFilter(!showFilter);
+ }}
+ startIcon={<FilterListRoundedIcon />}
>
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
+ Filtrar
</Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+
+ {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 ? option : ""}
+ onChange={handleChange}
+ helperText="Por favor, selecione uma das opções"
+ >
+ {options.map((option, index) => (
+ <MenuItem key={index} value={option.value} onClick={() => { ApplyFilter(option.value) }}>
+ {option.label}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+
+ <Grid item>
+ <TextField
+ label="Pesquisa"
+ value={search}
+ onChange={(event) => HandleSearch(event)}
+ ></TextField>
+ </Grid>
+ </Grid>
+ </>
+ ) : null}
+ </Paper>
+
+ <div style={{ height: "2em" }}></div>
+
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
<StyledTableRow key={index}>
- <StyledTableCell component="th" scope="row">
- {row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
- <div
- dangerouslySetInnerHTML={{ __html: row.description }}
- ></div>
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.owner === null ? "" : row.owner.name}
- </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/${row.id}`}>
- <IconButton
- onClick={() => {
- currPage = 0;
- currPrivacyFilter = "";
- currNameFilter = "";
- }}
- >
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
+ <StyledTableCell>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++;
+ LoadMoreItens(
+ Url(
+ "collections",
+ `"privacy" : "${currPrivacyFilter}" , "name" : "${currNameFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
</StyledTableCell>
- <StyledTableCell align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
+ </StyledTableRow>
+ ) : (
+ <StyledTableRow key={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/${row.id}`}>
<IconButton
onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
+ currPage = 0;
+ currPrivacyFilter = "";
+ currNameFilter = "";
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <VisibilityIcon style={{ fill: "#00bcd4" }} />
</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);
- }}
- />
- </>
- );
+ </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>
+ )
+ )}
+ </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);
+ }}
+ />
+ </>
+ );
+ }
}
};
export default Collections;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 6b346b7559cab49d528347e6da95fafe1d00dfa5..424b15eaa0effea1e0738960fa6c9c74e6fd00f0 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -42,8 +42,11 @@ import CancelRoundedIcon from '@material-ui/icons/CancelRounded';
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
+import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
//routers
import { Link } from 'react-router-dom';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import styled from "styled-components"
let currPage = 0;
@@ -77,6 +80,7 @@ const CommunityQuestion = () => {
"MENSAGEM",
"VISUALIZAR"
]; //Labels from Table
+ const WINDOW_WIDTH = window.innerWidth
const [anchorEl, setAnchorEl] = React.useState(null);
@@ -260,258 +264,523 @@ const CommunityQuestion = () => {
}
)
}, []);
-
+
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
- return <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
- }
- />
+ if (WINDOW_WIDTH <= 1200) {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">Dúvidas da comunidade</Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">Dúvidas da comunidade</Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ UpdateHandler(
+ Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
+ );
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={(e) => {
+ handleClick(e);
+ }}
+ startIcon={<FilterListRoundedIcon />}
+ >
+ Filtrar
+ </Button>
+ <Popover
+ id={id}
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ >
+ <Button
+ onClick={() => setShowEmailFilter(!showEmailFilter)}
+ color={showEmailFilter ? 'primary' : 'default'}
+ variant='text'
+ >
+ EMAIL
+ </Button>
+
+ <Button
+ onClick={() => setShowMessageFilter(!showMessageFilter)}
+ color={showMessageFilter ? 'primary' : 'default'}
+ variant='text'
+ >
+ MENSAGEM
+ </Button>
+
+ <Button
+ onClick={() => setShowNameFilter(!showNameFilter)}
+ color={showNameFilter ? 'primary' : 'default'}
+ variant='text'
+ >
+ NOME
+ </Button>
+ </Popover>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+
+ <div style={{ height: '1.5em' }}></div>
+
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {
+ showMessageFilter ?
+ <Grid item >
+ <TextField
+ label='Mensagem'
+ type="search"
+ onChange={(e) => MessageFilterHandler(e)}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={() => {
+ currPage = 0;
+ setMessage("")
+ UpdateHandler(
+ Url("contacts", `"message" : "", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
+ );
+ setShowMessageFilter(false)
+ }}
+ >
+ <CancelRoundedIcon />
+ </IconButton>
+ </Grid> : null
+ }
+ {
+ showEmailFilter ?
+ <Grid item>
+ <TextField
+ label='Email'
+ type="search"
+ onChange={(e) => EmailFilterHandler(e)}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={() => {
+ currPage = 0;
+ setEmail("")
+ UpdateHandler(
+ Url("contacts", `"message" : "${message}", "email" : "", "name" : "${name}"`, `${currPage}`, "DESC")
+ );
+ setShowEmailFilter(false)
+ }}
+ >
+ <CancelRoundedIcon />
+ </IconButton>
+ </Grid> : null
+ }
+ {
+ showNameFilter ?
+ <Grid item>
+ <TextField
+ label='Nome'
+ type="search"
+ onChange={(e) => NameFilterHandler(e)}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={() => {
+ currPage = 0;
+ setName("")
+ UpdateHandler(
+ Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : ""`, `${currPage}`, "DESC")
+ );
+ setShowNameFilter(false)
+ }}
+ >
+ <CancelRoundedIcon />
+ </IconButton>
+ </Grid> : null
+ }
+ </Grid>
+ </Grid>
+ </Paper>
+
+ <div style={{ height: "2em" }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
<Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
onClick={() => {
- currPage = 0;
- UpdateHandler(
+ currPage++;
+ LoadMoreItens(
Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
);
}}
- startIcon={<UpdateRoundedIcon />}
- >
- {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
- </Button>
- </Grid>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- onClick={(e) => {
- handleClick(e);
- }}
- startIcon={<FilterListRoundedIcon />}
>
- Filtrar
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
</Button>
- <Popover
- id={id}
- open={open}
- anchorEl={anchorEl}
- onClose={handleClose}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}
- >
- <Button
- onClick={() => setShowEmailFilter(!showEmailFilter)}
- color={showEmailFilter ? 'primary' : 'default'}
- variant='text'
- >
- EMAIL
- </Button>
-
- <Button
- onClick={() => setShowMessageFilter(!showMessageFilter)}
- color={showMessageFilter ? 'primary' : 'default'}
- variant='text'
- >
- MENSAGEM
- </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#00bcd4"}
+ avatar={<ContactSupportRoundedIcon />}
+ href={`/admin/CommunityQuestion/${row.id}`}
+ reset={() => {
+ currPage = 0;
- <Button
- onClick={() => setShowNameFilter(!showNameFilter)}
- color={showNameFilter ? 'primary' : 'default'}
- variant='text'
- >
- NOME
- </Button>
- </Popover>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
-
- <div style={{ height: '1.5em' }}></div>
-
- <Grid item xs={12}>
- <Grid container justify="space-between" spacing={3}>
- {
- showMessageFilter ?
- <Grid item >
- <TextField
- label='Mensagem'
- type="search"
- onChange={(e) => MessageFilterHandler(e)}
+ }}
+ data={
+ [
+ {
+ title: "Email",
+ subtitle:
+ row.email ?
+ <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+ <Button
+ variant='text'
+ color='primary'
+ startIcon={<EmailRoundedIcon />}
+ >
+ {row.email}
+ </Button>
+ </Link> : null
+
+ },
+ {
+ title: "Mensagem",
+ subtitle: row.message
+
+ },
+ {
+ title: "Criado em",
+ subtitle: DisplayDate(row.created_at)
+ },
+ ]
+ }
/>
- <IconButton
- size="small"
- color="primary"
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </>
+ )
+ }
+ else {
+ return <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">Dúvidas da comunidade</Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
onClick={() => {
currPage = 0;
- setMessage("")
UpdateHandler(
- Url("contacts", `"message" : "", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
+ Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
);
- setShowMessageFilter(false)
}}
+ startIcon={<UpdateRoundedIcon />}
>
- <CancelRoundedIcon />
- </IconButton>
- </Grid> : null
- }
- {
- showEmailFilter ?
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
<Grid item>
- <TextField
- label='Email'
- type="search"
- onChange={(e) => EmailFilterHandler(e)}
- />
- <IconButton
- size="small"
- color="primary"
- onClick={() => {
- currPage = 0;
- setEmail("")
- UpdateHandler(
- Url("contacts", `"message" : "${message}", "email" : "", "name" : "${name}"`, `${currPage}`, "DESC")
- );
- setShowEmailFilter(false)
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={(e) => {
+ handleClick(e);
}}
+ startIcon={<FilterListRoundedIcon />}
>
- <CancelRoundedIcon />
- </IconButton>
- </Grid> : null
- }
- {
- showNameFilter ?
- <Grid item>
- <TextField
- label='Nome'
- type="search"
- onChange={(e) => NameFilterHandler(e)}
- />
- <IconButton
- size="small"
- color="primary"
- onClick={() => {
- currPage = 0;
- setName("")
- UpdateHandler(
- Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : ""`, `${currPage}`, "DESC")
- );
- setShowNameFilter(false)
+ Filtrar
+ </Button>
+ <Popover
+ id={id}
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
}}
>
- <CancelRoundedIcon />
- </IconButton>
- </Grid> : null
- }
- </Grid>
- </Grid>
- </Paper>
+ <Button
+ onClick={() => setShowEmailFilter(!showEmailFilter)}
+ color={showEmailFilter ? 'primary' : 'default'}
+ variant='text'
+ >
+ EMAIL
+ </Button>
- <div style={{ height: "2em" }}></div>
+ <Button
+ onClick={() => setShowMessageFilter(!showMessageFilter)}
+ color={showMessageFilter ? 'primary' : 'default'}
+ variant='text'
+ >
+ MENSAGEM
+ </Button>
- <TableData top={TOP_LABELS}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={index} style={{ padding: "1em" }}>
- {/* Button to load more data */}
- <StyledTableCell>
- <Button
- color="primary"
- variant="text"
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
- onClick={() => {
- currPage++;
- LoadMoreItens(
- Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
- );
- }}
- >
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
+ <Button
+ onClick={() => setShowNameFilter(!showNameFilter)}
+ color={showNameFilter ? 'primary' : 'default'}
+ variant='text'
+ >
+ NOME
</Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
- <StyledTableRow key={index}>
- <StyledTableCell component="th" scope="row">
- {row.id}
- </StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
- {
- row.email ?
- <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
- </Link> : null
- }
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.message}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/CommunityQuestion/${row.id}`}>
- <IconButton onClick={() => { currPage = 0 }}>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
+ </Popover>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+
+ <div style={{ height: '1.5em' }}></div>
+
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {
+ showMessageFilter ?
+ <Grid item >
+ <TextField
+ label='Mensagem'
+ type="search"
+ onChange={(e) => MessageFilterHandler(e)}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={() => {
+ currPage = 0;
+ setMessage("")
+ UpdateHandler(
+ Url("contacts", `"message" : "", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
+ );
+ setShowMessageFilter(false)
+ }}
+ >
+ <CancelRoundedIcon />
+ </IconButton>
+ </Grid> : null
+ }
+ {
+ showEmailFilter ?
+ <Grid item>
+ <TextField
+ label='Email'
+ type="search"
+ onChange={(e) => EmailFilterHandler(e)}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={() => {
+ currPage = 0;
+ setEmail("")
+ UpdateHandler(
+ Url("contacts", `"message" : "${message}", "email" : "", "name" : "${name}"`, `${currPage}`, "DESC")
+ );
+ setShowEmailFilter(false)
+ }}
+ >
+ <CancelRoundedIcon />
+ </IconButton>
+ </Grid> : null
+ }
+ {
+ showNameFilter ?
+ <Grid item>
+ <TextField
+ label='Nome'
+ type="search"
+ onChange={(e) => NameFilterHandler(e)}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={() => {
+ currPage = 0;
+ setName("")
+ UpdateHandler(
+ Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : ""`, `${currPage}`, "DESC")
+ );
+ setShowNameFilter(false)
+ }}
+ >
+ <CancelRoundedIcon />
+ </IconButton>
+ </Grid> : null
+ }
+ </Grid>
+ </Grid>
+ </Paper>
+
+ <div style={{ height: "2em" }}></div>
+
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledTableRow key={index} style={{ padding: "1em" }}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color="primary"
+ variant="text"
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++;
+ LoadMoreItens(
+ Url("contacts", `"message" : "${message}", "email" : "${email}", "name" : "${name}"`, `${currPage}`, "DESC")
+ );
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
</StyledTableCell>
</StyledTableRow>
- )
- )}
- </TableBody>
- </TableData>
- </>
+ ) : (
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">
+ {row.id}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {DisplayDate(row.created_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.name}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+ <Button
+ variant='text'
+ color='primary'
+ startIcon={<EmailRoundedIcon />}
+ >
+ {row.email}
+ </Button>
+ </Link> : null
+ }
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.message}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/CommunityQuestion/${row.id}`}>
+ <IconButton onClick={() => { currPage = 0 }}>
+ <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ </IconButton>
+ </Link>
+ </StyledTableCell>
+ </StyledTableRow>
+ )
+ )}
+ </TableBody>
+ </TableData>
+ </>
+ }
+
} else return <Unauthorized />
}
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 a99d2b8b560e6b9a7b0c888d120f0b81cbf5de51..f4466ddac9f401c399c4ee645e1f3d27fddcb41c 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -43,6 +43,9 @@ import LaunchRoundedIcon from "@material-ui/icons/LaunchRounded";
//routers
import { Link } from "react-router-dom";
import Unauthorized from "../../../Components/Components/Unauthorized";
+import styled from "styled-components"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
let currPage = 0;
let currStateFilter = "0"
@@ -69,6 +72,7 @@ const StyledTableRow = withStyles((theme) => ({
const Complaints = () => {
const { state, dispatch } = useContext(Store);
+ const WINDOW_WIDTH = window.innerWidth
const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
@@ -400,255 +404,485 @@ const Complaints = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
- }
- />
-
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">Denúncias</Typography>
+ if (WINDOW_WIDTH <= 994) {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">Denúncias</Typography>
+ </Grid>
+
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ if (currComplainReasonId) {
+ UpdateHandler(
+ Url("complaints",
+ `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }
+ else {
+ UpdateHandler(
+ Url("complaints",
+ `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ setShowFilter(!showFilter);
+ }}
+ startIcon={<FilterListRoundedIcon />}
+ >
+ Filtrar
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
</Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
+ {showFilter ? (
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ alignContent="flex-end"
+ spacing={3}
+ xs={12}
+ >
<Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0;
- if (currComplainReasonId) {
- UpdateHandler(
- Url("complaints",
- `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
- `${currPage}`,
- "DESC"
- )
- );
- }
- else {
- UpdateHandler(
- Url("complaints",
- `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
- `${currPage}`,
- "DESC"
- )
- );
- }
- }}
- startIcon={<UpdateRoundedIcon />}
+ <TextField
+ select
+ label="Motivo"
+ value={complainOption}
+ onChange={handleChangeComplain}
+ helperText="Por favor, selecione uma das opções"
>
- {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
- </Button>
+ {ComplaintReasons.map((option, index) => (
+ <MenuItem
+ key={option.id}
+ value={option.name}
+ name={option.id}
+ onClick={() =>
+ ApplyFilterComplainReason(option.id, "complaint_reason_id")
+ }
+ >
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
</Grid>
<Grid item>
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- setShowFilter(!showFilter);
- }}
- startIcon={<FilterListRoundedIcon />}
+ <TextField
+ select
+ label="Estado"
+ value={stateOption}
+ onChange={handleChangeState}
+ helperText="Por favor, selecione uma das opções"
>
- Filtrar
- </Button>
+ {StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.id}
+ value={option.name}
+ name={option.id}
+ onClick={() => ApplyFilterState(option.id, "state")}
+ >
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ <Grid item>
+ <TextField label="Descrição" onChange={DescriptionHandler} value={description} />
</Grid>
</Grid>
- </Grid>
- </Grid>
+ ) : null}
+ </Paper>
- {showFilter ? (
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- alignContent="flex-end"
- spacing={3}
- xs={12}
- >
- <Grid item>
- <TextField
- select
- label="Motivo"
- value={complainOption}
- onChange={handleChangeComplain}
- helperText="Por favor, selecione uma das opções"
+ <div style={{ height: "2em" }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++;
+ if (currComplainReasonId) {
+ LoadMoreItens(
+ Url("complaints",
+ `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }
+ else {
+ LoadMoreItens(
+ Url("complaints",
+ `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }
+ }}
>
- {ComplaintReasons.map((option, index) => (
- <MenuItem
- key={option.id}
- value={option.name}
- name={option.id}
- onClick={() =>
- ApplyFilterComplainReason(option.id, "complaint_reason_id")
- }
- >
- {option.name}
- </MenuItem>
- ))}
- </TextField>
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.complainable_type}
+ subtitle={row.id}
+ backColor={"#673ab7"}
+ avatar={<AnnouncementRoundedIcon />}
+ href={`/admin/complaint/${row.id}`}
+ reset={() => {
+ currPage = 0
+ currStateFilter = "0"
+ currDescriptionFilter = ""
+ currComplainReasonId = null;
+ }}
+ data={
+ [
+ {
+ title: "ID do objeto",
+ subtitle: row.complainable_id
+
+ },
+ {
+ title: "Criado em",
+ subtitle: DisplayDate(row.created_at)
+ },
+ {
+ title: "Descrição",
+ subtitle: row.description
+ },
+ {
+ title: "Estado",
+ subtitle: ComplaintStatus(row.state, row.complainable_type)
+ }
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </>
+ );
+ }
+ else {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">Denúncias</Typography>
</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.id}
- value={option.name}
- name={option.id}
- onClick={() => ApplyFilterState(option.id, "state")}
+
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ if (currComplainReasonId) {
+ UpdateHandler(
+ Url("complaints",
+ `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }
+ else {
+ UpdateHandler(
+ Url("complaints",
+ `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }
+ }}
+ startIcon={<UpdateRoundedIcon />}
>
- {option.name}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
- <Grid item>
- <TextField label="Descrição" onChange={DescriptionHandler} value={description} />
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ setShowFilter(!showFilter);
+ }}
+ startIcon={<FilterListRoundedIcon />}
+ >
+ Filtrar
+ </Button>
+ </Grid>
+ </Grid>
</Grid>
</Grid>
- ) : null}
- </Paper>
-
- <div style={{ height: "2em" }}></div>
-
- <Grid xs={12} container>
- <TableData top={TOP_LABELS}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
- <Button
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
- onClick={() => {
- currPage++;
- if (currComplainReasonId) {
- LoadMoreItens(
- Url("complaints",
- `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
- `${currPage}`,
- "DESC"
- )
- );
- }
- else {
- LoadMoreItens(
- Url("complaints",
- `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
- `${currPage}`,
- "DESC"
- )
- );
- }
- }}
+
+ {showFilter ? (
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ alignContent="flex-end"
+ spacing={3}
+ 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.id}
+ value={option.name}
+ name={option.id}
+ onClick={() =>
+ ApplyFilterComplainReason(option.id, "complaint_reason_id")
+ }
>
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
- </Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
- <StyledTableRow
- key={index}
- style={{ flex: 1, width: "100%" }}
- >
- <StyledTableCell component="th" scope="row">
- {ComplaintStatus(row.state, row.complainable_type)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
- {row.description}
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.complainable_id}
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.complainable_type}
- </StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/complaint/${row.id}`}>
- <IconButton
- onClick={() => {
- currPage = 0
- currStateFilter = "0"
- currDescriptionFilter = ""
- currComplainReasonId = null;
- }}
- >
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
+ </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.id}
+ value={option.name}
+ name={option.id}
+ onClick={() => ApplyFilterState(option.id, "state")}
+ >
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ <Grid item>
+ <TextField label="Descrição" onChange={DescriptionHandler} value={description} />
+ </Grid>
+ </Grid>
+ ) : null}
+ </Paper>
+
+ <div style={{ height: "2em" }}></div>
+
+ <Grid xs={12} container>
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
<Button
+ color="primary"
variant="text"
- secondary={true}
- startIcon={
- <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
- }
- >
- <a
- style={{
- textDecoration: "none",
- color: "#FA8072",
- }}
- target="_blank"
- href={
- PORTAL_MEC +
- convertToLink(
- row.complainable_type,
- row.complainable_id
- )
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++;
+ if (currComplainReasonId) {
+ LoadMoreItens(
+ Url("complaints",
+ `"state" : "${currStateFilter}", "complaint_reason_id" : "${currComplainReasonId}", "description" : "${currDescriptionFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
}
- >
- MEC RED
- </a>
+ else {
+ LoadMoreItens(
+ Url("complaints",
+ `"state" : "${currStateFilter}", "description" : "${currDescriptionFilter}"`,
+ `${currPage}`,
+ "DESC"
+ )
+ );
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
</Button>
</StyledTableCell>
</StyledTableRow>
- )
- )}
- </TableBody>
- </TableData>
- </Grid>
- </>
- );
+ ) : (
+ <StyledTableRow
+ key={index}
+ style={{ flex: 1, width: "100%" }}
+ >
+ <StyledTableCell component="th" scope="row">
+ {ComplaintStatus(row.state, row.complainable_type)}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">
+ {row.description}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.complainable_id}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.complainable_type}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {DisplayDate(row.created_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/complaint/${row.id}`}>
+ <IconButton
+ onClick={() => {
+ currPage = 0
+ currStateFilter = "0"
+ currDescriptionFilter = ""
+ currComplainReasonId = null;
+ }}
+ >
+ <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ </IconButton>
+ </Link>
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Button
+ variant="text"
+ secondary={true}
+ startIcon={
+ <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
+ }
+ >
+ <a
+ style={{
+ textDecoration: "none",
+ color: "#FA8072",
+ }}
+ target="_blank"
+ href={
+ PORTAL_MEC +
+ convertToLink(
+ row.complainable_type,
+ row.complainable_id
+ )
+ }
+ >
+ MEC RED
+ </a>
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+ )
+ )}
+ </TableBody>
+ </TableData>
+ </Grid>
+ </>
+ );
+ }
} else return <Unauthorized />
};
export default Complaints;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index e22a367f10e7fb4be02d42e3be5752714c78d915..1f2f3b543be97c65f8e86618d06f32e738333b29 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -48,552 +48,755 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Url, DeleteFilter } from "../../../Filters";
//router
import { Link } from 'react-router-dom';
+import styled from 'styled-components'
+import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
let currPage = 0;
const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
+ 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,
- },
+ root: {
+ "&:nth-of-type(odd)": {
+ backgroundColor: theme.palette.action.hover,
},
+ },
}))(TableRow);
const useStyles = makeStyles((theme) => ({
- root: {
- flexGrow: 1,
- },
- paper: {
- padding: theme.spacing(1),
- textAlign: "start",
- },
- button: {
- margin: theme.spacing(1),
- alignSelf: "flex-end",
- },
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ padding: theme.spacing(1),
+ textAlign: "start",
+ },
+ button: {
+ margin: theme.spacing(1),
+ alignSelf: "flex-end",
+ },
}));
const EducationalObjects = () => {
- const classes = useStyles();
-
- const addOndeLenght = [""];
-
- 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 [deleteItem, setDeleteItem] = useState({}); //Delete Item
- const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
- const [isUpdating, setIsUpdating] = useState(false);
- const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
-
- const [openAlertDialog, setOpenAlertDialog] = useState(false);
-
- const [snackInfo, setSnackInfo] = useState({
- message: "",
- icon: "",
- open: false,
- color: "",
+ const classes = useStyles();
+ const WINDOW_WIDTH = window.innerWidth
+
+ const addOndeLenght = [""];
+
+ 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 [deleteItem, setDeleteItem] = useState({}); //Delete Item
+ const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [isUpdating, setIsUpdating] = useState(false);
+ const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+
+ const [openAlertDialog, setOpenAlertDialog] = useState(false);
+
+ const [snackInfo, setSnackInfo] = useState({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ });
+
+ // **************** About the PopOver Menu ****************
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const [showAuthorField, setShowAuthorField] = useState(false); //show the text field of filter by Author
+ const [showDescriptionField, setShowDescriptionField] = useState(false); //show the text field of the filter by description
+ const [showStandadSearch, setShowStandarSearchField] = useState(false);
+
+ const [search, setSeacrh] = useState("");
+ const [author, setAuthor] = useState("");
+ const [description, setDescription] = useState(null);
+
+ const AuthorHandler = () => {
+ setAuthor("")
+ setShowAuthorField(!showAuthorField);
+ let url;
+ if (description)
+ url = Url("learning_objects", `"name" : "${search}", "author" : "", "description" : "${description}"`, currPage, "DESC")
+ else
+ url = Url("learning_objects", `"name" : "${search}", "author" : ""`, currPage, "DESC")
+ Filter(url);
+ };
+
+ const DescHandler = () => {
+ setDescription(null)
+ setShowDescriptionField(!showDescriptionField);
+ let url;
+ url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
+ Filter(url);
+ };
+
+ const StandartHandler = () => {
+ setSeacrh("")
+ setShowStandarSearchField(!showStandadSearch);
+ let url;
+ if (description)
+ url = Url("learning_objects", `"name" : "", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
+ else
+ url = Url("learning_objects", `"name" : "", "author" : "${author}"`, currPage, "DESC")
+ Filter(url);
+ };
+
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const open = Boolean(anchorEl);
+ const id = open ? "simple-popover" : undefined;
+
+ const OnChangeSearchHandler = (e) => {
+ setSeacrh(e.target.value);
+ let url;
+ if (description)
+ url = Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
+ else
+ url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
+ Filter(url);
+ };
+
+ const onChangeAuthorHandler = (e) => {
+ setAuthor(e.target.value);
+ let url;
+ if (description)
+ url = Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
+ else
+ url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
+ Filter(url);
+ };
+
+ const onChangeDescriptionHandler = (e) => {
+ setDescription(e.target.value);
+ let url;
+ if (description)
+ url = Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
+ else
+ url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
+ Filter(url);
+ };
+ // **************** About the PopOverMenu ****************
+
+ //Controlls the state of the Alert Dialog
+ const HandleStateAlertDialog = (i) => {
+ const obj = { ...items[i] };
+ setDeleteItem(obj);
+ setOpenAlertDialog(!openAlertDialog);
+ };
+
+ //Controlls the state and the informations of the snack
+ const HandleSnack = (message, state, icon, color) => {
+ setSnackInfo({
+ message: message,
+ icon: icon,
+ open: state,
+ color: color,
});
-
- // **************** About the PopOver Menu ****************
- const [anchorEl, setAnchorEl] = React.useState(null);
- const [showAuthorField, setShowAuthorField] = useState(false); //show the text field of filter by Author
- const [showDescriptionField, setShowDescriptionField] = useState(false); //show the text field of the filter by description
- const [showStandadSearch, setShowStandarSearchField] = useState(false);
-
- const [search, setSeacrh] = useState("");
- const [author, setAuthor] = useState("");
- const [description, setDescription] = useState(null);
-
- const AuthorHandler = () => {
- setAuthor("")
- setShowAuthorField(!showAuthorField);
- let url;
- if (description)
- url = Url("learning_objects", `"name" : "${search}", "author" : "", "description" : "${description}"`, currPage, "DESC")
- else
- url = Url("learning_objects", `"name" : "${search}", "author" : ""`, currPage, "DESC")
- Filter(url);
- };
-
- const DescHandler = () => {
- setDescription(null)
- setShowDescriptionField(!showDescriptionField);
- let url;
- url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
- Filter(url);
- };
-
- const StandartHandler = () => {
- setSeacrh("")
- setShowStandarSearchField(!showStandadSearch);
- let url;
- if (description)
- url = Url("learning_objects", `"name" : "", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
- else
- url = Url("learning_objects", `"name" : "", "author" : "${author}"`, currPage, "DESC")
- Filter(url);
- };
-
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
-
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- const open = Boolean(anchorEl);
- const id = open ? "simple-popover" : undefined;
-
- const OnChangeSearchHandler = (e) => {
- setSeacrh(e.target.value);
- let url;
- if (description)
- url = Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
- else
- url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
- Filter(url);
- };
-
- const onChangeAuthorHandler = (e) => {
- setAuthor(e.target.value);
- let url;
- if (description)
- url = Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
- else
- url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
- Filter(url);
- };
-
- const onChangeDescriptionHandler = (e) => {
- setDescription(e.target.value);
- let url;
- if (description)
- url = Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC")
- else
- url = Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC")
- Filter(url);
- };
- // **************** About the PopOverMenu ****************
-
- //Controlls the state of the Alert Dialog
- const HandleStateAlertDialog = (i) => {
- const obj = { ...items[i] };
- setDeleteItem(obj);
- setOpenAlertDialog(!openAlertDialog);
- };
-
- //Controlls the state and the informations of the snack
- 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);
- };
-
- //Filters the search
- const Filter = (api) => {
- getRequest(
- api,
- (data, header) => {
- const arrData = [...data];
- setItems(arrData.concat(addOndeLenght));
- },
- (error) => {
- setError(true);
- }
- )
- };
-
- //This function updates List every time the content of the api changes
- const UpdtateListData = (api) => {
- getRequest(
- api,
- (data, header) => {
- setItems([...data.concat(addOndeLenght)]);
- HandleSnack(
- "A lista de dados foi atualizada",
- true,
- "success",
- "#228B22"
- );
- setIsUpdating(false);
- },
- (error) => {
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- setIsUpdating(false);
+ };
+
+ //Defines which row must show the circular progress
+ const HandleStateCircularProgress = (i) => {
+ setIsLoadingToDelete(i);
+ };
+
+ //Filters the search
+ const Filter = (api) => {
+ getRequest(
+ api,
+ (data, header) => {
+ const arrData = [...data];
+ setItems(arrData.concat(addOndeLenght));
+ },
+ (error) => {
+ setError(true);
+ }
+ )
+ };
+
+ //This function updates List every time the content of the api changes
+ const UpdtateListData = (api) => {
+ getRequest(
+ api,
+ (data, header) => {
+ setItems([...data.concat(addOndeLenght)]);
+ HandleSnack(
+ "A lista de dados foi atualizada",
+ true,
+ "success",
+ "#228B22"
+ );
+ setIsUpdating(false);
+ },
+ (error) => {
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ setIsUpdating(false);
+ }
+ )
+ };
+
+ //Called when user want to delete one institution
+ async function DeleteHandler() {
+ const id = deleteItem.id;
+ HandleStateAlertDialog(null);
+ deleteRequest(
+ DeleteFilter("institutions", id),
+ (data) => {
+ if (data.errors)
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ else {
+ HandleSnack(
+ "A instituição foi deletada com sucesso",
+ true,
+ "success",
+ "#228B22"
+ );
+ currPage = 0;
+ UpdtateListData(Url("institutions", "", `${currPage}`, "DESC"));
+ HandleStateCircularProgress(null);
+ }
+ },
+ (error) => {
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ HandleStateCircularProgress(null);
+ }
+ )
+ }
+
+ const LoadMoreItens = async (api) => {
+ setIsLoadingMoreItems(true);
+ getRequest(
+ api,
+ (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];
+ 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(addOndeLenght));
+ }
+ setIsLoadingMoreItems(false);
+ },
+ (error) => {
+ HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
+ setIsLoadingMoreItems(false);
+ }
+ )
+ };
+
+ const DisplayDate = (date) => {
+ const convertedData = moment.utc(date);
+ return moment(convertedData)
+ .format("LLL")
+ .toString();
+ };
+
+ useEffect(() => {
+ getRequest(
+ Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, `${currPage}`, "DESC"),
+ (data, header) => {
+ setIsLoaded(true);
+ setItems(data.concat(addOndeLenght));
+ },
+ (error) => {
+ setError(true);
+
+ }
+ )
+ }, []);
+
+ if (error) {
+ return <div>Error: {error.message}</div>;
+ }
+ if (!isLoaded) {
+ return <LoadingSpinner text="Carregando..." />
+ } else {
+ //Words that defines that column
+ const topTable = [
+ "CRIADO EM",
+ "NOME",
+ "DESCRIÇÃO",
+ "AUTOR",
+ "SCORE",
+ "VISUALIZAR",
+ "DELETAR",
+ ];
+
+ //Buttons from PopOverMenu
+ const flatButtonsFromPopOverMenu = [
+ {
+ label: "Pesquisa padrão",
+ onClick: StandartHandler,
+ color: showStandadSearch ? "primary" : "default",
+ },
+ {
+ label: "Autor",
+ onClick: AuthorHandler,
+ color: showAuthorField ? "primary" : "default",
+ },
+ {
+ label: "Descrição",
+ onClick: DescHandler,
+ color: showDescriptionField ? "primary" : "default",
+ },
+ ];
+
+ //Field of the Filter
+ const TextFieldOfTheFilter = [
+ {
+ label: "Pesquisar",
+ show: showStandadSearch,
+ onChange: (event) => OnChangeSearchHandler(event),
+ hide: StandartHandler,
+ },
+ {
+ label: "Autor",
+ show: showAuthorField,
+ onChange: (event) => onChangeAuthorHandler(event),
+ hide: AuthorHandler,
+ },
+ {
+ label: "Descrição",
+ show: showDescriptionField,
+ onChange: (event) => onChangeDescriptionHandler(event),
+ hide: DescHandler,
+ },
+ ];
+ if (WINDOW_WIDTH <= 1058) {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
}
- )
- };
-
- //Called when user want to delete one institution
- async function DeleteHandler() {
- const id = deleteItem.id;
- HandleStateAlertDialog(null);
- deleteRequest(
- DeleteFilter("institutions", id),
- (data) => {
- if (data.errors)
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- else {
- HandleSnack(
- "A instituição foi deletada com sucesso",
- true,
- "success",
- "#228B22"
- );
- currPage = 0;
- UpdtateListData(Url("institutions", "", `${currPage}`, "DESC"));
- HandleStateCircularProgress(null);
- }
- },
- (error) => {
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- HandleStateCircularProgress(null);
- }
- )
+ />
+ {/************** Start of the header **************/}
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography className={classes.paper} variant="h4">
+ Lista de objetos educacionais
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ aria-describedby={id}
+ variant="contained"
+ color="secondary"
+ className={classes.button}
+ onClick={(event) => {
+ handleClick(event)
+ }}
+ startIcon={
+ <FilterListRoundedIcon style={{ fill: "white" }} />
+ }
+ >
+ Filtrar
+ </Button>
+ <Popover
+ id={id}
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: "bottom",
+ horizontal: "center",
+ }}
+ transformOrigin={{
+ vertical: "top",
+ horizontal: "center",
+ }}
+ >
+ {flatButtonsFromPopOverMenu.map((flat, index) => (
+ <Button
+ key={index}
+ onClick={flat.onClick}
+ color={flat.color}
+ >
+ {flat.label}
+ </Button>
+ ))}
+ </Popover>
+ </Grid>
+
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ className={classes.button}
+ startIcon={<UpdateRoundedIcon />}
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ setIsUpdating(true);
+ if (description)
+ UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
+ else
+ UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
+ }}
+ >
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={index}>
+ {field.show ? (
+ <div>
+ <TextField
+ id={index}
+ label={field.label}
+ type="search"
+ onChange={field.onChange}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={field.hide}
+ >
+ <CancelRoundedIcon />
+ </IconButton>
+ </div>
+ ) : null}
+ </Grid>
+ ))}
+ </Grid>
+ </Grid>
+ </Paper>
+ {/************** 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
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (description)
+ LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
+ else
+ LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#673ab7"}
+ avatar={<MenuBookRoundedIcon />}
+ href={`/admin/learningObject/${row.id}`}
+ reset={() => {
+ currPage = 0;
+ }}
+ data={
+ [
+ {
+ title: "Criado em",
+ subtitle: DisplayDate(row.created_at)
+ },
+ {
+ title: "Descrição",
+ subtitle: row.description
+ },
+ {
+ title: "Autor(a)",
+ subtitle: row.author
+ },
+ {
+ title: "Score",
+ subtitle: row.score
+ },
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ {/************** End of display data in table **************/}
+ </div>
+ )
}
-
- const LoadMoreItens = async (api) => {
- setIsLoadingMoreItems(true);
- getRequest(
- api,
- (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];
- 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(addOndeLenght));
- }
- setIsLoadingMoreItems(false);
- },
- (error) => {
- HandleSnack("Erro ao carregar os dados", true, "warning", "#FA8072");
- setIsLoadingMoreItems(false);
+ else {
+ return (
+ <div>
+ <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();
- };
-
- useEffect(() => {
- getRequest(
- Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, `${currPage}`, "DESC"),
- (data, header) => {
- setIsLoaded(true);
- setItems(data.concat(addOndeLenght));
- },
- (error) => {
- setError(true);
-
- }
- )
- }, []);
-
- if (error) {
- return <div>Error: {error.message}</div>;
- }
- if (!isLoaded) {
- return <LoadingSpinner text="Carregando..." />
- } else {
- //Words that defines that column
- const topTable = [
- "CRIADO EM",
- "NOME",
- "DESCRIÇÃO",
- "AUTOR",
- "SCORE",
- "VISUALIZAR",
- "DELETAR",
- ];
-
- //Buttons from PopOverMenu
- const flatButtonsFromPopOverMenu = [
- {
- label: "Pesquisa padrão",
- onClick: StandartHandler,
- color: showStandadSearch ? "primary" : "default",
- },
- {
- label: "Autor",
- onClick: AuthorHandler,
- color: showAuthorField ? "primary" : "default",
- },
- {
- label: "Descrição",
- onClick: DescHandler,
- color: showDescriptionField ? "primary" : "default",
- },
- ];
-
- //Field of the Filter
- const TextFieldOfTheFilter = [
- {
- label: "Pesquisar",
- show: showStandadSearch,
- onChange: (event) => OnChangeSearchHandler(event),
- hide: StandartHandler,
- },
- {
- label: "Autor",
- show: showAuthorField,
- onChange: (event) => onChangeAuthorHandler(event),
- hide: AuthorHandler,
- },
- {
- label: "Descrição",
- show: showDescriptionField,
- onChange: (event) => onChangeDescriptionHandler(event),
- hide: DescHandler,
- },
- ];
-
- return (
- <div>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
- }
- />
- {/************** Start of the header **************/}
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography className={classes.paper} variant="h4">
- Lista de objetos educacionais
- </Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- aria-describedby={id}
- variant="contained"
- color="secondary"
- className={classes.button}
- onClick={(event) => {
- handleClick(event)
- }}
- startIcon={
- <FilterListRoundedIcon style={{ fill: "white" }} />
- }
- >
- Filtrar
- </Button>
- <Popover
- id={id}
- open={open}
- anchorEl={anchorEl}
- onClose={handleClose}
- anchorOrigin={{
- vertical: "bottom",
- horizontal: "center",
- }}
- transformOrigin={{
- vertical: "top",
- horizontal: "center",
- }}
- >
- {flatButtonsFromPopOverMenu.map((flat, index) => (
- <Button
- key={index}
- onClick={flat.onClick}
- color={flat.color}
- >
- {flat.label}
- </Button>
- ))}
- </Popover>
- </Grid>
-
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- className={classes.button}
- startIcon={<UpdateRoundedIcon />}
- disabled={isUpdating}
- onClick={() => {
- currPage = 0;
- setIsUpdating(true);
- if (description)
- UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
- else
- UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
- }}
- >
- {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
- </Button>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- <Grid item xs={12}>
- <Grid container justify="space-between" spacing={3}>
- {TextFieldOfTheFilter.map((field, index) => (
- <Grid item key={index}>
- {field.show ? (
- <div>
- <TextField
- id={index}
- label={field.label}
- type="search"
- onChange={field.onChange}
- />
- <IconButton
- size="small"
- color="primary"
- onClick={field.hide}
- >
- <CancelRoundedIcon />
- </IconButton>
- </div>
- ) : null}
- </Grid>
- ))}
- </Grid>
- </Grid>
- </Paper>
- {/************** End of the header **************/}
-
- <div style={{ height: "2em" }}></div>
-
- {/************** Start of display data in table **************/}
- <TableData top={topTable}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
- <Button
- color="primary"
- variant="text"
- startIcon={<AddRoundedIcon />}
- disabled={
- isLoadingMoreItems
- }
- onClick={() => {
- currPage++
- if (description)
- LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
- else
- LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
- }}
- >
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
+ />
+ {/************** Start of the header **************/}
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography className={classes.paper} variant="h4">
+ Lista de objetos educacionais
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ aria-describedby={id}
+ variant="contained"
+ color="secondary"
+ className={classes.button}
+ onClick={(event) => {
+ handleClick(event)
+ }}
+ startIcon={
+ <FilterListRoundedIcon style={{ fill: "white" }} />
+ }
+ >
+ Filtrar
</Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
- <StyledTableRow key={index}>
- <StyledTableCell component="th" scope="row">
- {DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.description}
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.author}
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.score}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/learningObject/${row.id}`}>
- <IconButton onClick={() => {
- currPage = 0
-
- }}>
- <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>
- )
- )}
- </TableBody>
- </TableData>
- {/************** End of display data in table **************/}
-
- {/* 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);
- }}
- />
- </div>
- )
+ <Popover
+ id={id}
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: "bottom",
+ horizontal: "center",
+ }}
+ transformOrigin={{
+ vertical: "top",
+ horizontal: "center",
+ }}
+ >
+ {flatButtonsFromPopOverMenu.map((flat, index) => (
+ <Button
+ key={index}
+ onClick={flat.onClick}
+ color={flat.color}
+ >
+ {flat.label}
+ </Button>
+ ))}
+ </Popover>
+ </Grid>
+
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ className={classes.button}
+ startIcon={<UpdateRoundedIcon />}
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ setIsUpdating(true);
+ if (description)
+ UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
+ else
+ UpdtateListData(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
+ }}
+ >
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={index}>
+ {field.show ? (
+ <div>
+ <TextField
+ id={index}
+ label={field.label}
+ type="search"
+ onChange={field.onChange}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={field.hide}
+ >
+ <CancelRoundedIcon />
+ </IconButton>
+ </div>
+ ) : null}
+ </Grid>
+ ))}
+ </Grid>
+ </Grid>
+ </Paper>
+ {/************** End of the header **************/}
+
+ <div style={{ height: "2em" }}></div>
+
+ {/************** Start of display data in table **************/}
+ <TableData top={topTable}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color="primary"
+ variant="text"
+ startIcon={<AddRoundedIcon />}
+ disabled={
+ isLoadingMoreItems
+ }
+ onClick={() => {
+ currPage++
+ if (description)
+ LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}", "description" : "${description}"`, currPage, "DESC"))
+ else
+ LoadMoreItens(Url("learning_objects", `"name" : "${search}", "author" : "${author}"`, currPage, "DESC"))
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+ ) : (
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">
+ {DisplayDate(row.created_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.name}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.description}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.author}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.score}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/learningObject/${row.id}`}>
+ <IconButton onClick={() => {
+ currPage = 0
+
+ }}>
+ <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>
+ )
+ )}
+ </TableBody>
+ </TableData>
+ {/************** End of display data in table **************/}
+
+ {/* 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);
+ }}
+ />
+ </div>
+ )
}
+ }
};
export default EducationalObjects;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index 81710dbff2df774ceba79f04e505a5f1311ade57..c33932641bd59f4921d3bad487fe2a75e27ec797 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -47,6 +47,9 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Url, GetOneOfAllUrl, DeleteFilter } from "../../../Filters";
//router
import { Link } from 'react-router-dom';
+import styled from "styled-components"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
let currPage = 0;
let transformListToAsc = false
@@ -85,6 +88,7 @@ const useStyles = makeStyles((theme) => ({
const Institutions = () => {
const classes = useStyles();
+ const WINDOW_WIDTH = window.innerWidth
const addOndeLenght = [""];
@@ -255,8 +259,7 @@ const Institutions = () => {
(data) => {
if (data.errors)
HandleSnack("Ocorreu algum erro!", true, "warning", "#FA8072");
- else
- {
+ else {
HandleSnack(
"A instituição foi deletada com sucesso",
true,
@@ -415,236 +418,453 @@ const Institutions = () => {
},
];
- return (
- <div>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
- }
- />
- {/************** Start of the header **************/}
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography className={classes.paper} variant="h4">
- Lista de Instituições
- </Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- aria-describedby={id}
- variant="contained"
- color="secondary"
- className={classes.button}
- onClick={handleClick}
- startIcon={
- <FilterListRoundedIcon style={{ fill: "white" }} />
- }
- >
- Filtrar
- </Button>
- <Popover
- id={id}
- open={open}
- anchorEl={anchorEl}
- onClose={handleClose}
- anchorOrigin={{
- vertical: "bottom",
- horizontal: "center",
- }}
- transformOrigin={{
- vertical: "top",
- horizontal: "center",
- }}
- >
- {flatButtonsFromPopOverMenu.map((flat, index) => (
+ if (WINDOW_WIDTH <= 977) {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+ {/************** Start of the header **************/}
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography className={classes.paper} variant="h4">
+ Lista de Instituições
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ aria-describedby={id}
+ variant="contained"
+ color="secondary"
+ className={classes.button}
+ onClick={handleClick}
+ startIcon={
+ <FilterListRoundedIcon style={{ fill: "white" }} />
+ }
+ >
+ Filtrar
+ </Button>
+ <Popover
+ id={id}
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: "bottom",
+ horizontal: "center",
+ }}
+ transformOrigin={{
+ vertical: "top",
+ horizontal: "center",
+ }}
+ >
+ {flatButtonsFromPopOverMenu.map((flat, index) => (
+ <Button
+ key={index}
+ onClick={flat.onClick}
+ color={flat.color}
+ >
+ {flat.label}
+ </Button>
+ ))}
+ </Popover>
+ </Grid>
+
+ <Grid item>
+ <Link style={{ textDecoration: 'none' }} to={'/admin/InstitutionCreate'}>
<Button
- key={index}
- onClick={flat.onClick}
- color={flat.color}
+ variant="contained"
+ color="secondary"
+ className={classes.button}
+ startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ }}
>
- {flat.label}
+ Novo
</Button>
- ))}
- </Popover>
- </Grid>
+ </Link>
+ </Grid>
- <Grid item>
- <Link style={{ textDecoration: 'none' }} to={'/admin/InstitutionCreate'}>
+ <Grid item>
<Button
variant="contained"
color="secondary"
className={classes.button}
- startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
+ startIcon={<UpdateRoundedIcon />}
+ disabled={isUpdating}
onClick={() => {
- currPage = 0
+ currPage = 0;
transformListToAsc = false
+ setIsUpdating(true);
+ UpdtateListData(
+ Url("institutions", "", `${currPage}`, "DESC")
+ );
}}
>
- Novo
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
</Button>
- </Link>
- </Grid>
-
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- className={classes.button}
- startIcon={<UpdateRoundedIcon />}
- disabled={isUpdating}
- onClick={() => {
- currPage = 0;
- transformListToAsc = false
- setIsUpdating(true);
- UpdtateListData(
- Url("institutions", "", `${currPage}`, "DESC")
- );
- }}
- >
- {isUpdating ? <CircularProgress size={24}/> : "Atualizar"}
- </Button>
+ </Grid>
</Grid>
</Grid>
</Grid>
- </Grid>
- <Grid item xs={12}>
- <Grid container justify="space-between" spacing={3}>
- {TextFieldOfTheFilter.map((field, index) => (
- <Grid item key={index}>
- {field.show ? (
- <div>
- <TextField
- id={index}
- label={field.label}
- type="search"
- onChange={field.onChange}
- />
- <IconButton
- size="small"
- color="primary"
- onClick={field.hide}
- >
- <CancelRoundedIcon />
- </IconButton>
- </div>
- ) : null}
- </Grid>
- ))}
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={index}>
+ {field.show ? (
+ <div>
+ <TextField
+ id={index}
+ label={field.label}
+ type="search"
+ onChange={field.onChange}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={field.hide}
+ >
+ <CancelRoundedIcon />
+ </IconButton>
+ </div>
+ ) : null}
+ </Grid>
+ ))}
+ </Grid>
</Grid>
- </Grid>
- </Paper>
- {/************** End of the header **************/}
-
- <div style={{ height: "2em" }}></div>
-
- {/************** Start of display data in table **************/}
- <TableData top={topTable} onIconPressed={InvertList}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
+ </Paper>
+ {/************** 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
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('institutions', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('institutions', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#ff7f00"}
+ avatar={<AccountBalanceRoundedIcon />}
+ href={`/admin/institution/${row.id}`}
+ reset={() => {
+ currPage = 0
+ transformListToAsc = false
+ }}
+ 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"
+ },
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ {/************** End of display data in table **************/}
+
+ {/* This alert will be displayed if the user click to delete an institution */}
+ </div>
+ )
+ }
+ else {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+ {/************** Start of the header **************/}
+ <Paper style={{ padding: "1em" }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography className={classes.paper} variant="h4">
+ Lista de Instituições
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
- color="primary"
- variant="text"
- startIcon={<AddRoundedIcon />}
- disabled={
- isLoadingMoreItems ||
- isFilteringByCity ||
- isFilteringByCounty ||
- isFilteringByDesc ||
- isFilteringByName
+ aria-describedby={id}
+ variant="contained"
+ color="secondary"
+ className={classes.button}
+ onClick={handleClick}
+ startIcon={
+ <FilterListRoundedIcon style={{ fill: "white" }} />
}
- onClick={() => {
- currPage++
- if (transformListToAsc) {
- LoadMoreItens(Url('institutions', '', `${currPage}`, 'ASC'))
- } else {
- LoadMoreItens(Url('institutions', '', `${currPage}`, 'DESC'))
- }
- }}
>
- {isLoadingMoreItems ? (
- <CircularProgress size={24}/>
- ) : (
- "Carregar mais itens"
- )}
+ Filtrar
</Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
- <StyledTableRow key={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/${row.id}`}>
- <IconButton onClick={() => {
+ <Popover
+ id={id}
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: "bottom",
+ horizontal: "center",
+ }}
+ transformOrigin={{
+ vertical: "top",
+ horizontal: "center",
+ }}
+ >
+ {flatButtonsFromPopOverMenu.map((flat, index) => (
+ <Button
+ key={index}
+ onClick={flat.onClick}
+ color={flat.color}
+ >
+ {flat.label}
+ </Button>
+ ))}
+ </Popover>
+ </Grid>
+
+ <Grid item>
+ <Link style={{ textDecoration: 'none' }} to={'/admin/InstitutionCreate'}>
+ <Button
+ variant="contained"
+ color="secondary"
+ className={classes.button}
+ startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
+ onClick={() => {
currPage = 0
transformListToAsc = false
- }}>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ }}
+ >
+ Novo
+ </Button>
+ </Link>
+ </Grid>
+
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ className={classes.button}
+ startIcon={<UpdateRoundedIcon />}
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0;
+ transformListToAsc = false
+ setIsUpdating(true);
+ UpdtateListData(
+ Url("institutions", "", `${currPage}`, "DESC")
+ );
+ }}
+ >
+ {isUpdating ? <CircularProgress size={24} /> : "Atualizar"}
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={index}>
+ {field.show ? (
+ <div>
+ <TextField
+ id={index}
+ label={field.label}
+ type="search"
+ onChange={field.onChange}
+ />
+ <IconButton
+ size="small"
+ color="primary"
+ onClick={field.hide}
+ >
+ <CancelRoundedIcon />
</IconButton>
- </Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteIcon style={{ fill: "#FF0000" }} />
- </IconButton>
- )}
+ </div>
+ ) : null}
+ </Grid>
+ ))}
+ </Grid>
+ </Grid>
+ </Paper>
+ {/************** End of the header **************/}
+
+ <div style={{ height: "2em" }}></div>
+
+ {/************** Start of display data in table **************/}
+ <TableData top={topTable} onIconPressed={InvertList}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color="primary"
+ variant="text"
+ startIcon={<AddRoundedIcon />}
+ disabled={
+ isLoadingMoreItems ||
+ isFilteringByCity ||
+ isFilteringByCounty ||
+ isFilteringByDesc ||
+ isFilteringByName
+ }
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('institutions', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('institutions', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
</StyledTableCell>
</StyledTableRow>
- )
- )}
- </TableBody>
- </TableData>
- {/************** End of display data in table **************/}
-
- {/* 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);
- }}
- />
- </div>
- )
+ ) : (
+ <StyledTableRow key={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/${row.id}`}>
+ <IconButton onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ }}>
+ <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>
+ )
+ )}
+ </TableBody>
+ </TableData>
+ {/************** End of display data in table **************/}
+
+ {/* 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);
+ }}
+ />
+ </div>
+ )
+ }
}
};
export default Institutions;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index 42c397aeb9d800a21c4d03b4b41741409145ae53..9c003e96d51178a8f2efb572daad321800e0bd19 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -39,6 +39,9 @@ import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
//router
import { Link } from 'react-router-dom';
+import styled from "styled-components"
+import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
let currPage = 0;
let transformListToAsc = false;
@@ -63,7 +66,8 @@ const StyledTableRow = withStyles((theme) => ({
const Languages = () => {
const ADD_ONE_LENGHT = [""];
- const TOP_LABELS = ['ID', 'Nome', 'Code', 'Editar', 'Deletar'] //Labels from Table
+ const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', '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
@@ -142,10 +146,9 @@ const Languages = () => {
deleteRequest(
DeleteFilter("languages", id),
(data) => {
- if(data.errors)
+ if (data.errors)
HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- else
- {
+ else {
HandleSnack(
"A lÃngua foi deletada com sucesso",
true,
@@ -223,145 +226,275 @@ const Languages = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
} else {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
-
- <Paper style={{ padding: '1em' }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">
- Linguagens
- </Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0
- transformListToAsc = false
- UpdateHandler(Url('languages', '', `${currPage}`, 'DESC'))
- }}
- startIcon={<UpdateRoundedIcon />}
- >
- {
- isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
- }
- </Button>
- </Grid>
- <Grid item>
+ if (WINDOW_WIDTH <= 755) {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
- <Link style={{ textDecoration: 'none' }} to={'/admin/languageCreate'}>
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Linguagens
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
variant="contained"
color="secondary"
- startIcon={<AddRoundedIcon />}
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('languages', '', `${currPage}`, 'DESC'))
+ }}
+ startIcon={<UpdateRoundedIcon />}
>
- Novo
+ {
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
+ }
</Button>
- </Link>
+ </Grid>
+ <Grid item>
+
+ <Link style={{ textDecoration: 'none' }} to={'/admin/languageCreate'}>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<AddRoundedIcon />}
+ >
+ Novo
+ </Button>
+ </Link>
+ </Grid>
</Grid>
</Grid>
</Grid>
- </Grid>
- </Paper>
-
- <div style={{ height: '2em' }}></div>
-
- <TableData
- top={TOP_LABELS}
- onIconPressed={InvertList}
- >
- <TableBody>
- {items.map((row, index) => (
- index === items.length - 1 ?
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('languages', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('languages', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#e81f4f"}
+ avatar={<LanguageRoundedIcon />}
+ href={`/admin/languageEdit/${row.id}`}
+ reset={() => {
+ currPage = 0;
+ transformListToAsc = false
+ }}
+ data={
+ [
+ {
+ title: "Code",
+ subtitle: row.code
+
+ },
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </>
+ );
+ }
+ else {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Linguagens
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
- color='primary'
- variant='text'
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
onClick={() => {
- currPage++
- if (transformListToAsc) {
- LoadMoreItens(Url('languages', '', `${currPage}`, 'ASC'))
- } else {
- LoadMoreItens(Url('languages', '', `${currPage}`, 'DESC'))
- }
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('languages', '', `${currPage}`, 'DESC'))
}}
+ startIcon={<UpdateRoundedIcon />}
>
{
- isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
-
- :
-
- <StyledTableRow key={index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.code}</StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/languageEdit/${row.id}`}>
- <IconButton onClick={() => {currPage = 0}}>
- <EditRoundedIcon style={{ fill: '#00bcd4' }} />
- </IconButton>
+ </Grid>
+ <Grid item>
+
+ <Link style={{ textDecoration: 'none' }} to={'/admin/languageCreate'}>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<AddRoundedIcon />}
+ >
+ Novo
+ </Button>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ <TableData
+ top={TOP_LABELS}
+ onIconPressed={InvertList}
+ >
+ <TableBody>
+ {items.map((row, index) => (
+ index === items.length - 1 ?
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color='primary'
+ variant='text'
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('languages', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('languages', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {
+ isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ }
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+
+ :
+
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">{row.name}</StyledTableCell>
+ <StyledTableCell align="right">{row.code}</StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/languageEdit/${row.id}`}>
+ <IconButton onClick={() => { currPage = 0; transformListToAsc = false }}>
+ <EditRoundedIcon style={{ fill: '#00bcd4' }} />
</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);
- }}
- />
- </>
- );
+ </Link>
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {isLoadingToDelete === index ? (
+ <CircularProgress size={24} color="primary" />
+ ) : (
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteRoundedIcon 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);
+ }}
+ />
+ </>
+ );
+ }
}
}
-export default Languages;
\ No newline at end of file
+export default Languages;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index dbeec3d8acebdfa8533982b7e72d9d6569fcff52..4769edd9d2a27c65b393770d5163a42f70bdfc1c 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -40,6 +40,9 @@ import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfi
import { Url } from '../../../Filters';
//routers
import { Link } from 'react-router-dom';
+import styled from "styled-components"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
let currPage = 0; //var that controlls the current page that we are
let transformListToAsc = false;
@@ -63,6 +66,7 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const NoteVariables = () => {
+ const WINDOW_WIDTH = window.innerWidth
const AddOneLenght = [''];
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
@@ -178,123 +182,247 @@ const NoteVariables = () => {
//Words in the top part of the table
const topTable = ['ID', 'NOME', 'CÓDIGO', 'PESO', 'ATIVO', 'SCORE TYPE', 'VISUALIZAR'];
- return (
- <div>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <Paper style={{ padding: '1em' }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">
- Variáveis de nota
- </Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0
- transformListToAsc = false
- UpdateHandler(Url('scores', '', `${currPage}`, 'DESC'))
- }}
- startIcon={<UpdateRoundedIcon />}
- >
- {
- isUpdating ? <CircularProgress /> : 'Atualizar'
- }
- </Button>
+ if (WINDOW_WIDTH <= 961) {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Variáveis de nota
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('scores', '', `${currPage}`, 'DESC'))
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
+ }
+ </Button>
+ </Grid>
</Grid>
</Grid>
</Grid>
- </Grid>
- </Paper>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
- <div style={{ height: '2em' }}></div>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('scores', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('scores', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#e81f4f"}
+ avatar={<TrendingUpRoundedIcon />}
+ href={`/admin/noteVar/${row.id}`}
+ reset={() => {
+ currPage = 0;
+ }}
+ data={
+ [
+ {
+ title: "Código",
+ subtitle: row.code
- <TableData
- top={topTable}
- onIconPressed={InvertList}
- >
- <TableBody>
- {items.map((row, index) => (
- index === items.length - 1 ?
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
+ },
+ {
+ title: "Score Type",
+ subtitle: row.score_type
+
+ },
+ {
+ title: "Ativo",
+ subtitle: row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ },
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </div>
+ )
+ }
+ else {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Variáveis de nota
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
- color='primary'
- variant='text'
- disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
onClick={() => {
- currPage++
- if (transformListToAsc) {
- LoadMoreItens(Url('scores', '', `${currPage}`, 'ASC'))
- } else {
- LoadMoreItens(Url('scores', '', `${currPage}`, 'DESC'))
- }
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('scores', '', `${currPage}`, 'DESC'))
}}
+ startIcon={<UpdateRoundedIcon />}
>
{
- isLoadingMoreItems ? <CircularProgress /> : 'Carregar mais itens'
+ isUpdating ? <CircularProgress size={24}/> : 'Atualizar'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Paper>
- :
+ <div style={{ height: '2em' }}></div>
- <StyledTableRow key={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">
- {
- row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
- }
- </StyledTableCell>
- <StyledTableCell align="right">
- {
- row['score_type'].map((item) => (
- <Typography key={item} style={{ fontSize: 14 }}>
- {item}
- </Typography>
- ))
- }
- </StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/noteVar/${row.id}`}>
- <IconButton onClick={() => {currPage = 0; transformListToAsc=false}}>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
- </IconButton>
- </Link>
- </StyledTableCell>
- </StyledTableRow>
- ))}
- </TableBody>
- </TableData>
- </div>
- )
+ <TableData
+ top={topTable}
+ onIconPressed={InvertList}
+ >
+ <TableBody>
+ {items.map((row, index) => (
+ index === items.length - 1 ?
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color='primary'
+ variant='text'
+ disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('scores', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('scores', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {
+ isLoadingMoreItems ? <CircularProgress /> : 'Carregar mais itens'
+ }
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+
+ :
+
+ <StyledTableRow key={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">
+ {
+ row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ }
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {
+ row['score_type'].map((item) => (
+ <Typography key={item} style={{ fontSize: 14 }}>
+ {item}
+ </Typography>
+ ))
+ }
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/noteVar/${row.id}`}>
+ <IconButton onClick={() => { currPage = 0; transformListToAsc = false }}>
+ <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ </IconButton>
+ </Link>
+ </StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </TableData>
+ </div>
+ )
+ }
}
}
-export default NoteVariables;
\ No newline at end of file
+export default NoteVariables;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index 1ac3bda5a63bd59c1a2834830dddee310f6b6754..a22f19f944b2870d42f59b6f981f64f2f1d84701 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -39,6 +39,9 @@ import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
//router
import { Link } from 'react-router-dom';
+import styled from "styled-components"
+import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
let currPage = 0;
let transformListToAsc = false;
@@ -63,7 +66,8 @@ const StyledTableRow = withStyles((theme) => ({
const UserPermissions = () => {
const ADD_ONE_LENGHT = [""];
- const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //Labels from Table
+ const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //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
@@ -142,10 +146,9 @@ const UserPermissions = () => {
deleteRequest(
DeleteFilter("roles", id),
(data) => {
- if(data.errors)
+ if (data.errors)
HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- else
- {
+ else {
HandleSnack(
"A lÃngua foi deletada com sucesso",
true,
@@ -223,156 +226,286 @@ const UserPermissions = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
} else {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
-
- <Paper style={{ padding: '1em' }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">
- Lista de permissões de usuário
- </Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0
- transformListToAsc = false
- UpdateHandler(Url('roles', '', `${currPage}`, 'DESC'))
- }}
- startIcon={<UpdateRoundedIcon />}
- >
- {
- isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
- }
- </Button>
- </Grid>
- <Grid item>
-
- <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRole'}>
+ if (WINDOW_WIDTH <= 760) {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de permissões de usuário
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
variant="contained"
color="secondary"
- startIcon={<AddRoundedIcon />}
- onClick={() => {currPage = 0}}
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('roles', '', `${currPage}`, 'DESC'))
+ }}
+ startIcon={<UpdateRoundedIcon />}
>
- Novo
+ {
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
+ }
</Button>
- </Link>
+ </Grid>
+ <Grid item>
+
+ <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRole'}>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<AddRoundedIcon />}
+ onClick={() => { currPage = 0 }}
+ >
+ Novo
+ </Button>
+ </Link>
+ </Grid>
</Grid>
</Grid>
</Grid>
- </Grid>
- </Paper>
-
- <div style={{ height: '2em' }}></div>
-
- <TableData
- top={TOP_LABELS}
- onIconPressed={InvertList}
- >
- <TableBody>
- {items.map((row, index) => (
- index === items.length - 1 ?
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('roles', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('roles', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#ff7f00"}
+ avatar={<AccountCircleRoundedIcon />}
+ href={`/admin/EditPermissions/${row.id}`}
+ reset={() => {
+ currPage = 0;
+ }}
+ data={
+ [
+ {
+ title: "Descrição",
+ subtitle: row.description
+
+ },
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </>
+ );
+ }
+ else {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de permissões de usuário
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
- color='primary'
- variant='text'
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
onClick={() => {
- currPage++
- if (transformListToAsc) {
- LoadMoreItens(Url('roles', '', `${currPage}`, 'ASC'))
- } else {
- LoadMoreItens(Url('roles', '', `${currPage}`, 'DESC'))
- }
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('roles', '', `${currPage}`, 'DESC'))
}}
+ startIcon={<UpdateRoundedIcon />}
>
{
- isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </Grid>
+ <Grid item>
- :
-
- <StyledTableRow key={index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/EditPermissions/${row.id}`}>
+ <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRole'}>
<Button
- style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
- color="primary"
- onClick={() => {currPage = 0}}
- startIcon={<EditRoundedIcon />}
+ color="secondary"
+ startIcon={<AddRoundedIcon />}
+ onClick={() => { currPage = 0 }}
>
- Editar
+ Novo
</Button>
</Link>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ <TableData
+ top={TOP_LABELS}
+ onIconPressed={InvertList}
+ >
+ <TableBody>
+ {items.map((row, index) => (
+ index === items.length - 1 ?
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color='primary'
+ variant='text'
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('roles', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('roles', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {
+ isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ }
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+
+ :
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">{row.name}</StyledTableCell>
+ <StyledTableCell align="right">{row.description}</StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/EditPermissions/${row.id}`}>
<Button
- style={{ width: "100%" }}
+ style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index)
- HandleStateCircularProgress(index)
- }}
- startIcon={<DeleteRoundedIcon />}
+ color="primary"
+ onClick={() => { currPage = 0 }}
+ startIcon={<EditRoundedIcon />}
>
- Deletar
+ Editar
</Button>
- )}
-
- </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);
- }}
- />
- </>
- );
+ </Link>
+
+ {isLoadingToDelete === index ? (
+ <CircularProgress size={24} color="primary" />
+ ) : (
+ <Button
+ style={{ width: "100%" }}
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index)
+ HandleStateCircularProgress(index)
+ }}
+ startIcon={<DeleteRoundedIcon />}
+ >
+ Deletar
+ </Button>
+ )}
+
+ </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);
+ }}
+ />
+ </>
+ );
+ }
}
}
-export default UserPermissions;
\ No newline at end of file
+export default UserPermissions;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index 87de31919c530f0def4f0b8cec257c4402a3c311..e56f81bc768c5b3614ee2b9808a6478985e490a4 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -40,6 +40,9 @@ import CancelRoundedIcon from '@material-ui/icons/CancelRounded';
import Switch from '@material-ui/core/Switch';
//router
import { Link } from 'react-router-dom';
+import styled from "styled-components"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
let currPage = 0;
let transformListToAsc = false;
@@ -66,6 +69,7 @@ const Questions = () => {
const { state, dispatch } = useContext(Store);
const ADD_ONE_LENGHT = [""];
+ const WINDOW_WIDTH = window.innerWidth
const TOP_LABELS = ['ID', 'CRIAÇÃO EM', 'DESCRIÇÃO', 'STATUS', 'ATUALIZAÇÃO EM'] //Labels from Table
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -257,149 +261,315 @@ const Questions = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
-
- <Paper style={{ padding: '1em' }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">
- Perguntas da curadoria
- </Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0
- transformListToAsc = false
- UpdateHandler(Url('questions', '', `${currPage}`, 'DESC'))
- }}
- startIcon={<UpdateRoundedIcon />}
- >
- {
- isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
- }
- </Button>
- </Grid>
- <Grid item>
-
- <Link style={{ textDecoration: 'none' }} to={'/admin/CreateQuestion'}>
+ if (WINDOW_WIDTH <= 761) {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Perguntas da curadoria
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
variant="contained"
color="secondary"
- startIcon={<AddRoundedIcon />}
- onClick={() => { currPage = 0 }}
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('questions', '', `${currPage}`, 'DESC'))
+ }}
+ startIcon={<UpdateRoundedIcon />}
>
- Novo
+ {
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
+ }
</Button>
- </Link>
+ </Grid>
+ <Grid item>
+
+ <Link style={{ textDecoration: 'none' }} to={'/admin/CreateQuestion'}>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<AddRoundedIcon />}
+ onClick={() => { currPage = 0 }}
+ >
+ Novo
+ </Button>
+ </Link>
+ </Grid>
</Grid>
</Grid>
</Grid>
- </Grid>
- </Paper>
-
- <div style={{ height: '2em' }}></div>
-
- <TableData
- top={TOP_LABELS}
- onIconPressed={InvertList}
- >
- <TableBody>
- {items.map((row, index) => (
- index === items.length - 1 ?
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('questions', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('questions', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.id}
+ subtitle={DisplayDate(row.created_at)}
+ backColor={"#673ab7"}
+ avatar={<HelpRoundedIcon />}
+ reset={() => {
+ currPage = 0; transformListToAsc = false
+ }}
+ data={
+ [
+ {
+ title: "Descrição",
+ subtitle: row.description
+ },
+ {
+ title: "Status",
+ subtitle:
+ row.status === 'active' ?
+ <Grid container direction='row'>
+ <Grid item>
+ <CheckCircleRoundedIcon style={{ fill: '#3CB371' }} />
+
+ <Switch
+ checked={true}
+ onChange={() => handleChange(index, row.status)}
+ name="checkedB"
+ color="primary"
+ />
+ </Grid>
+ </Grid>
+
+ :
+
+ <Grid container justify='flex-end' alignItems='center' direction='row'>
+ <Grid item>
+ <CancelRoundedIcon style={{ fill: '#FA8072' }} />
+ </Grid>
+
+ <Grid item>
+ <Switch
+ checked={false}
+ onChange={() => handleChange(index, row.status)}
+ name="checkedB"
+ color="primary"
+ />
+ </Grid>
+ </Grid>
+ },
+ {
+ title : "Atualizado em",
+ subtitle : DisplayDate(row.updated_at)
+ }
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </>
+ );
+ }
+ else {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Perguntas da curadoria
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
- color='primary'
- variant='text'
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
onClick={() => {
- currPage++
- if (transformListToAsc) {
- LoadMoreItens(Url('questions', '', `${currPage}`, 'ASC'))
- } else {
- LoadMoreItens(Url('questions', '', `${currPage}`, 'DESC'))
- }
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('questions', '', `${currPage}`, 'DESC'))
}}
+ startIcon={<UpdateRoundedIcon />}
>
{
- isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
-
- :
-
- <StyledTableRow key={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' ?
- <Grid container direction='row'>
- <Grid item>
- <CheckCircleRoundedIcon style={{ fill: '#3CB371' }} />
-
- <Switch
- checked={true}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- </Grid>
- </Grid>
+ </Grid>
+ <Grid item>
+
+ <Link style={{ textDecoration: 'none' }} to={'/admin/CreateQuestion'}>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<AddRoundedIcon />}
+ onClick={() => { currPage = 0; transformListToAsc = false }}
+ >
+ Novo
+ </Button>
+ </Link>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ <TableData
+ top={TOP_LABELS}
+ onIconPressed={InvertList}
+ >
+ <TableBody>
+ {items.map((row, index) => (
+ index === items.length - 1 ?
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color='primary'
+ variant='text'
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('questions', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('questions', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {
+ isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ }
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
- :
+ :
- <Grid container justify='flex-end' alignItems='center' direction='row'>
- <Grid item>
- <CancelRoundedIcon style={{ fill: '#FA8072' }} />
+ <StyledTableRow key={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' ?
+ <Grid container direction='row'>
+ <Grid item>
+ <CheckCircleRoundedIcon style={{ fill: '#3CB371' }} />
+
+ <Switch
+ checked={true}
+ onChange={() => handleChange(index, row.status)}
+ name="checkedB"
+ color="primary"
+ />
+ </Grid>
</Grid>
- <Grid item>
- <Switch
- checked={false}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
+ :
+
+ <Grid container justify='flex-end' alignItems='center' direction='row'>
+ <Grid item>
+ <CancelRoundedIcon style={{ fill: '#FA8072' }} />
+ </Grid>
+
+ <Grid item>
+ <Switch
+ checked={false}
+ onChange={() => handleChange(index, row.status)}
+ name="checkedB"
+ color="primary"
+ />
+ </Grid>
</Grid>
- </Grid>
- }
- </StyledTableCell>
- <StyledTableCell align="right">{DisplayDate(row.updated_at)}</StyledTableCell>
- </StyledTableRow>
- ))}
- </TableBody>
- </TableData>
- </>
- );
+ }
+ </StyledTableCell>
+ <StyledTableCell align="right">{DisplayDate(row.updated_at)}</StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </TableData>
+ </>
+ );
+ }
} else return <Unauthorized />
}
-export default Questions;
\ No newline at end of file
+export default Questions;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index fc7534cc763d685b4db6c66ca8354549c41d6049..77a8e50b56c8d4167bc62f5a8a39d7ff0a652b23 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -42,6 +42,9 @@ import { DeleteFilter } from '../../../Filters';
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//routers
import { Link } from 'react-router-dom';
+import StarRoundedIcon from "@material-ui/icons/StarRounded";
+import styled from "styled-components"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
let currPage = 0; //var that controlls the current page that we are
let transformListToAsc = false;
@@ -65,6 +68,7 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const Ratings = () => {
+ const WINDOW_WIDTH = window.innerWidth
const AddOneLenght = [''];
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
@@ -223,149 +227,278 @@ const Ratings = () => {
//Words in the top part of the table
const topTable = ['ID', 'NOME', 'DESCRIÇÃO', 'VISUALIZAR', 'DELETAR'];
-
- return (
- <div>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <Paper style={{ padding: '1em' }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">
- Lista de ratings
- </Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0
- transformListToAsc = false
- UpdateHandler(Url('ratings', '', `${currPage}`, 'DESC'))
- }}
- startIcon={<UpdateRoundedIcon />}
- >
- {
- isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
- }
- </Button>
- </Grid>
- <Grid item>
- <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRating'}>
+ if (WINDOW_WIDTH <= 760) {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de ratings
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
variant="contained"
color="secondary"
- startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
+ disabled={isUpdating}
onClick={() => {
currPage = 0
transformListToAsc = false
+ UpdateHandler(Url('ratings', '', `${currPage}`, 'DESC'))
}}
+ startIcon={<UpdateRoundedIcon />}
>
- Novo
+ {
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
+ }
</Button>
- </Link>
+ </Grid>
+ <Grid item>
+ <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRating'}>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ }}
+ >
+ Novo
+ </Button>
+ </Link>
+ </Grid>
</Grid>
</Grid>
</Grid>
- </Grid>
- </Paper>
-
- <div style={{ height: '2em' }}></div>
-
- <TableData
- top={topTable}
- onIconPressed={InvertList}
- >
- <TableBody>
- {items.map((row, index) => (
- index === items.length - 1 ?
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('ratings', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('ratings', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#00bcd4"}
+ avatar={<StarRoundedIcon />}
+ href={`/admin/Rating/${row.id}`}
+ reset={() => {
+ currPage = 0;
+ }}
+ data={
+ [
+ {
+ title: "Descrição",
+ subtitle: row.description
+ }
+ ]
+ }
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </div>
+ )
+ }
+ else {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de ratings
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
- color='primary'
- variant='text'
- disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
onClick={() => {
- currPage++
- if (transformListToAsc) {
- LoadMoreItens(Url('ratings', '', `${currPage}`, 'ASC'))
- } else {
- LoadMoreItens(Url('ratings', '', `${currPage}`, 'DESC'))
- }
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('ratings', '', `${currPage}`, 'DESC'))
}}
+ startIcon={<UpdateRoundedIcon />}
>
{
- isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
-
- :
-
- <StyledTableRow key={index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/Rating/${row.id}`}>
- <IconButton onClick={() => { currPage = 0 }}>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
- </IconButton>
+ </Grid>
+ <Grid item>
+ <Link style={{ textDecoration: 'none' }} to={'/admin/CreateRating'}>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<AddRoundedIcon style={{ fill: "white" }} />}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ }}
+ >
+ Novo
+ </Button>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ <TableData
+ top={topTable}
+ onIconPressed={InvertList}
+ >
+ <TableBody>
+ {items.map((row, index) => (
+ index === items.length - 1 ?
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color='primary'
+ variant='text'
+ disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('ratings', '', `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('ratings', '', `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {
+ isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ }
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+
+ :
+
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">{row.name}</StyledTableCell>
+ <StyledTableCell align="right">{row.description}</StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/Rating/${row.id}`}>
+ <IconButton onClick={() => { currPage = 0 }}>
+ <VisibilityIcon style={{ fill: '#00bcd4' }} />
</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);
- }}
- />
- </div>
- )
+ </Link>
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {isLoadingToDelete === index ? (
+ <CircularProgress size={24} color="primary" />
+ ) : (
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteRoundedIcon 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);
+ }}
+ />
+ </div>
+ )
+ }
}
}
-export default Ratings;
\ No newline at end of file
+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/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index 0c990e2a77124c95ccab5959156b7b8fa9b6f783..d709707b22bee75d4141c3df31e2ba5e30e09eda 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -41,6 +41,10 @@ import { Url } from '../../../Filters';
import { Link } from 'react-router-dom';
import moment from 'moment';
import styled from 'styled-components'
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
+import { apiDomain } from '../../../../env';
+import noAvatar from "../../../../img/default_profile.png";
let currPage = 0; //var that controlls the current page that we are
let transformListToAsc = false;
@@ -66,7 +70,7 @@ const StyledTableRow = withStyles((theme) => ({
const Users = () => {
const AddOneLenght = [''];
-
+ 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
@@ -264,180 +268,380 @@ const Users = () => {
//Words in the top part of the table
const topTable = ['ID', 'NOME', 'EMAIL', 'CRIADO EM', 'SCORE', 'PERMISSÃO', 'AÇÃO', "VISUALIZAR"];
-
- return (
- <div>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <Paper style={{ padding: '1em' }}>
- <Grid container spacing={3} direction="row" alignItems="center">
- <Grid item xs={6}>
- <Typography variant="h4">
- Lista de usuários
- </Typography>
- </Grid>
- <Grid
- item
- xs={6}
- >
- <Grid container justify="flex-end" spacing={3}>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- disabled={isUpdating}
- onClick={() => {
- currPage = 0
- transformListToAsc = false
- UpdateHandler(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
- }}
- startIcon={<UpdateRoundedIcon />}
- >
- {
- isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
- }
- </Button>
- </Grid>
- <Grid item>
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- setShowFilter(!showFilter)
- }}
- startIcon={<UpdateRoundedIcon />}
- >
- filtrar
- </Button>
- </Grid>
- <Grid item>
- <Link to="/admin/EditUser/-1">
+ if (WINDOW_WIDTH <= 1150) {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de usuários
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
+ }
+ </Button>
+ </Grid>
+ <Grid item>
<Button
variant="contained"
color="secondary"
- startIcon={<AddRoundedIcon />}
+ onClick={() => {
+ setShowFilter(!showFilter)
+ }}
+ startIcon={<UpdateRoundedIcon />}
>
- Novo
- </Button>
- </Link>
+ filtrar
+ </Button>
+ </Grid>
+ <Grid item>
+ <Link to="/admin/EditUser/-1">
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<AddRoundedIcon />}
+ >
+ Novo
+ </Button>
+ </Link>
+ </Grid>
</Grid>
</Grid>
</Grid>
- </Grid>
- {
- showFilter ? (
- <Grid container direction="row" justify="space-between" alignItems="center">
- <Grid item>
- <TextField
- label="Name"
- value={name}
- onChange={(e) => { NameHandler(e) }}
- />
+ {
+ showFilter ? (
+ <Grid container direction="row" justify="space-between" alignItems="center">
+ <Grid item>
+ <TextField
+ label="Name"
+ value={name}
+ onChange={(e) => { NameHandler(e) }}
+ />
+ </Grid>
+ <Grid item>
+ <TextField
+ label="Email"
+ value={email}
+ onChange={(e) => { EmailHandler(e) }}
+ />
+ </Grid>
</Grid>
- <Grid item>
- <TextField
- label="Email"
- value={email}
- onChange={(e) => { EmailHandler(e) }}
+ ) : null
+ }
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#00bcd4"}
+ avatar={
+ <img
+ src={row.avatar ? apiDomain + row.avatar : noAvatar}
+ alt="user avatar"
+ style={{
+ height: "100%",
+ width: "100%",
+ borderRadius: "50%",
+ }}
+ />
+ }
+ href={`/admin/user/${row.id}`}
+ reset={() => {
+ currPage = 0;
+ transformListToAsc = false
+ nameFilter = ""
+ emailFilter = ""
+ }}
+ data={[
+ {
+ title: "Email",
+ subtitle: row.email ?
+ <Link to={`/admin/sendEmail/${row.email}`} style={{ textDecoration: 'none' }}>
+ <Button
+ variant='text'
+ color='primary'
+ startIcon={<EmailRoundedIcon />}
+ >
+ {row.email}
+ </Button>
+ </Link> : null
+ },
+ {
+ title: "Criado em",
+ subtitle: DisplayDate(row.created_at)
+ },
+ {
+ title: "Score",
+ subtitle: row.score
+ },
+ {
+ title: "Permissão",
+ subtitle: row.roles.map((chip) => (
+ <ChipDiv>
+ <Chip label={chip.name} key={chip.id} />
+ </ChipDiv>
+ ))
+ },
+ {
+ title: "Score",
+ subtitle: row.score
+ },
+ {
+ title: "Ações rápidas",
+ subtitle: <Button
+ variant="contained"
+ color="primary"
+ disabled={isUserPublisher(row.roles)}
+ onClick={() => { turnUserPublisher(row.roles, row.id) }}
+ >
+ Tornar publicador
+ </Button>
+ }
+
+ ]}
/>
- </Grid>
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </div>
+ )
+ }
+ else {
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <Paper style={{ padding: '1em' }}>
+ <Grid container spacing={3} direction="row" alignItems="center">
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de usuários
+ </Typography>
</Grid>
- ) : null
- }
- </Paper>
-
- <div style={{ height: '2em' }}></div>
-
- <TableData
- top={topTable}
- onIconPressed={InvertList}
- >
- <TableBody>
- {items.map((row, index) => (
- index === items.length - 1 ?
- <StyledTableRow key={index}>
- {/* Button to load more data */}
- <StyledTableCell>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
<Button
- color='primary'
- variant='text'
- disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
onClick={() => {
- currPage++
- if (transformListToAsc) {
- LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'ASC'))
- } else {
- LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
- }
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
}}
+ startIcon={<UpdateRoundedIcon />}
>
{
- isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
-
- :
-
- <StyledTableRow key={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">
- {DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.score}</StyledTableCell>
- <StyledTableCell align="right">
- {
- row.roles.map((chip) => (
- <ChipDiv>
- <Chip label={chip.name} key={chip.id} />
- </ChipDiv>
- ))
- }
- </StyledTableCell>
- <StyledTableCell align="right">
+ </Grid>
+ <Grid item>
<Button
variant="contained"
- color="primary"
- disabled={isUserPublisher(row.roles)}
- onClick={() => { turnUserPublisher(row.roles, row.id) }}
+ color="secondary"
+ onClick={() => {
+ setShowFilter(!showFilter)
+ }}
+ startIcon={<UpdateRoundedIcon />}
>
- Tornar publicador
+ filtrar
</Button>
- </StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/user/${row.id}`}>
- <IconButton onClick={() =>
- {
- currPage = 0;
- transformListToAsc = false
+ </Grid>
+ <Grid item>
+ <Link to="/admin/EditUser/-1">
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<AddRoundedIcon />}
+ >
+ Novo
+ </Button>
+ </Link>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ {
+ showFilter ? (
+ <Grid container direction="row" justify="space-between" alignItems="center">
+ <Grid item>
+ <TextField
+ label="Name"
+ value={name}
+ onChange={(e) => { NameHandler(e) }}
+ />
+ </Grid>
+ <Grid item>
+ <TextField
+ label="Email"
+ value={email}
+ onChange={(e) => { EmailHandler(e) }}
+ />
+ </Grid>
+ </Grid>
+ ) : null
+ }
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ <TableData
+ top={topTable}
+ onIconPressed={InvertList}
+ >
+ <TableBody>
+ {items.map((row, index) => (
+ index === items.length - 1 ?
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color='primary'
+ variant='text'
+ disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('users', `"name" : "${nameFilter}", "email" : "${emailFilter}"`, `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {
+ isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ }
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+
+ :
+
+ <StyledTableRow key={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">
+ {DisplayDate(row.created_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.score}</StyledTableCell>
+ <StyledTableCell align="right">
+ {
+ row.roles.map((chip) => (
+ <ChipDiv>
+ <Chip label={chip.name} key={chip.id} />
+ </ChipDiv>
+ ))
+ }
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Button
+ variant="contained"
+ color="primary"
+ disabled={isUserPublisher(row.roles)}
+ onClick={() => { turnUserPublisher(row.roles, row.id) }}
+ >
+ Tornar publicador
+ </Button>
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/user/${row.id}`}>
+ <IconButton onClick={() => {
+ currPage = 0;
+ transformListToAsc = false
nameFilter = ""
emailFilter = ""
}
- }>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
- </IconButton>
- </Link>
- </StyledTableCell>
- </StyledTableRow>
- ))}
- </TableBody>
- </TableData>
- </div>
- )
+ }>
+ <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ </IconButton>
+ </Link>
+ </StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </TableData>
+ </div>
+ )
+ }
}
}
@@ -445,4 +649,12 @@ export default Users;
const ChipDiv = styled.div`
margin-top : 0.5em;
-`
\ No newline at end of file
+`
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+