Skip to content
Snippets Groups Projects

Update admin system

Closed lfr20 requested to merge Update_Admin_System into sistema_admin
1 file
+ 395
0
Compare changes
  • Side-by-side
  • Inline
+ 395
0
 
/*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, { useEffect, useState } from 'react';
 
import moment from "moment";
 
//Material ui componets
 
import { withStyles } from '@material-ui/core/styles';
 
import TableBody from '@material-ui/core/TableBody';
 
import Grid from "@material-ui/core/Grid";
 
import Paper from "@material-ui/core/Paper";
 
import MenuItem from "@material-ui/core/MenuItem";
 
import TableRow from "@material-ui/core/TableRow";
 
import TextField from "@material-ui/core/TextField";
 
import TableCell from '@material-ui/core/TableCell';
 
import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
 
import VisibilityIcon from '@material-ui/icons/Visibility';
 
import { Button, Typography } from '@material-ui/core';
 
import CircularProgress from '@material-ui/core/CircularProgress';
 
import AddRoundedIcon from '@material-ui/icons/AddRounded';
 
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded'
 
//Local files
 
import TableData from '../../../Components/Components/Table';
 
import SnackBar from '../../../../Components/SnackbarComponent';
 
import LoadingSpinner from '../../../../Components/LoadingSpinner';
 
//Services
 
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
 
import { Url } from '../../../Filters';
 
//routers
 
import { Link } from 'react-router-dom';
 
 
let currPage = 0; //var that controlls the current page that we are
 
let currContentFilter = 1;
 
let transformListToAsc = false;
 
 
const StyledTableCell = withStyles((theme) => ({
 
head: {
 
backgroundColor: theme.palette.common.black,
 
color: theme.palette.common.white,
 
},
 
body: {
 
fontSize: 14,
 
},
 
}))(TableCell);
 
 
const StyledTableRow = withStyles((theme) => ({
 
root: {
 
'&:nth-of-type(odd)': {
 
backgroundColor: theme.palette.action.hover,
 
},
 
},
 
}))(TableRow);
 
 
const BlockedUsers = () => {
 
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
 
const [items, setItems] = useState([]); //Necessary to consult the API, data
 
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
 
const [isUpdating, setIsUpdating] = useState(false)
 
 
const [snackInfo, setSnackInfo] = useState({
 
message: '',
 
icon: '',
 
open: false,
 
color: '',
 
})
 
 
const StateOptions = [
 
{
 
id : 1,
 
name : "Semanal"
 
},
 
{
 
id : 2,
 
name : "Permanente"
 
}
 
];
 
 
// Handle snack infos
 
const HandleSnack = (message, state, icon, color) => {
 
setSnackInfo({
 
message: message,
 
icon: icon,
 
open: state,
 
color: color
 
})
 
}
 
 
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(AddOneLenght))
 
}
 
setIsLoadingMoreItems(false)
 
},
 
(error) => {
 
HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
 
setIsLoadingMoreItems(false)
 
}
 
)
 
}
 
 
const InvertList = async () => {
 
transformListToAsc = !transformListToAsc
 
currPage = 0
 
if (transformListToAsc) {
 
getRequest(
 
Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'),
 
(data, header) => {
 
const arrData = [...data]
 
setItems(arrData.concat(AddOneLenght))
 
},
 
(error) => {
 
HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
 
}
 
)
 
} else {
 
getRequest(
 
Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'),
 
(data, header) => {
 
const arrData = [...data]
 
setItems(arrData.concat(AddOneLenght))
 
},
 
(error) => {
 
HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
 
}
 
)
 
}
 
}
 
 
const UpdateHandler = async (api) => {
 
setIsUpdating(true)
 
getRequest(
 
api,
 
(data, header) => {
 
HandleSnack('A lista de dados foi atualizada', true, 'success', '#228B22')
 
const arrData = [...data]
 
setItems(arrData.concat(AddOneLenght))
 
setIsUpdating(false)
 
},
 
(error) => {
 
HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
 
setIsUpdating(false)
 
}
 
)
 
}
 
 
const BlockStatus = (status) => {
 
switch (status) {
 
case 1:
 
return (
 
<Paper
 
style={{
 
textAlign: "center",
 
padding: "0.5em",
 
backgroundColor: "#FF8C00",
 
fontWeight: "500",
 
color: "#FFFAFA",
 
}}
 
>
 
SEMANAL
 
</Paper>
 
);
 
case 2:
 
return (
 
<Paper
 
style={{
 
textAlign: "center",
 
padding: "0.5em",
 
backgroundColor: "#FA8072",
 
fontWeight: "500",
 
color: "#FFFAFA",
 
}}
 
>
 
PERMANENTE
 
</Paper>
 
);
 
case 3:
 
return (
 
<Paper
 
style={{
 
textAlign: "center",
 
padding: "0.5em",
 
backgroundColor: "#228B22",
 
fontWeight: "500",
 
color: "#FFFAFA",
 
}}
 
>
 
AVALIADO
 
</Paper>
 
);
 
default:
 
return "NOTHING";
 
}
 
};
 
 
const DisplayDate = (date) => {
 
const convertedData = moment.utc(date);
 
return moment(convertedData)
 
.format("LLL")
 
.toString();
 
};
 
 
useEffect(() => {
 
getRequest(
 
Url('users', `"state" : "${currContentFilter}"`, '0', 'DESC'),
 
(data, header) => {
 
setIsLoaded(true);
 
setItems(data.concat(AddOneLenght));
 
},
 
(error) => {
 
setError(true);
 
}
 
)
 
}, []);
 
 
 
if (error) {
 
return <div>Error: {error.message}</div>;
 
} else if (!isLoaded) {
 
return <LoadingSpinner text="Carregando..." />
 
} else {
 
 
//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>
 
</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="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>
 
 
</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'))
 
}
 
}}
 
>
 
{
 
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">{row.email}</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 />}
 
>
 
Desbloquear
 
</Button>
 
<Link to={`/admin/user/${row.id}`}>
 
<Button
 
onClick={() => { currPage = 0; transformListToAsc = false }}
 
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
Loading