Skip to content
Snippets Groups Projects
Commit d8b76748 authored by lfr20's avatar lfr20
Browse files

start to build gtamefication admi

parent 0f3ae0c8
No related branches found
No related tags found
2 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...
/*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, { useContext, useEffect, useState } from "react";
import moment from "moment";
import Unauthorized from "../../../Components/Components/Unauthorized";
import { Store } from "../../../../Store";
import { Link } from "react-router-dom";
import { getRequest } from "../../../../Components/HelperFunctions/getAxiosConfig";
import { Url } from "../../../Filters";
import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
import { withStyles } from "@material-ui/core/styles";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
import LoadingSpinner from "../../../../Components/LoadingSpinner";
import PageHeader from "../../../Components/Components/PageHeader";
import SnackBar from "../../../../Components/SnackbarComponent";
import TableData from "../../../Components/Components/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import Button from "@material-ui/core/Button";
import CircularProgress from "@material-ui/core/CircularProgress";
import IconButton from "@material-ui/core/IconButton";
import Paper from "@material-ui/core/Paper";
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import styled from 'styled-components'
import { apiDomain } from '../../../../env';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import noAvatar from "../../../../img/default_profile.png";
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 Gamefication = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"ESTADO",
"ID",
"NAME",
"TIPO",
"CRIADO EM",
"ATUALIZADO EM",
"VISUALIZAR"
]; //Labels from Table
const { state } = useContext(Store);
const [currPage, setcurrPage] = useState(0);
const [error, setError] = useState(false);
const [loaded, setLoaded] = useState(true);
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
const [showFilter, setShowFilter] = useState(false);
const [items, setItems] = useState([
{
id: "1",
name: "Doctor strange",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et consectetur tortor. Proin euismod est vitae facilisis porttitor. Fusce et ultricies sapien. Aliquam tincidunt orci sit amet mi malesuada egestas. Donec imperdiet porta dui, in elementum est porttitor sit amet. Proin sapien ante, pretium pretium aliquet vitae, blandit in erat. Sed mollis porta felis, sit amet volutpat diam lacinia nec. Fusce ligula purus, dignissim et blandit vitae, hendrerit et neque. ",
price: "29",
discount: "10",
state: "active",
item_type: "badge",
achievement: null,
image:
"https://64.media.tumblr.com/077441739e9e4fa80f2d7dccdabf7a85/tumblr_oqoib6a5Jj1w7t6tto2_400.png",
created_at: "2021-03-17T14:19:59.603Z",
updated_at: "2021-03-17T14:19:59.603Z",
},
]);
const [snackInfo, setSnackInfo] = useState({
message: "",
icon: "",
open: false,
color: "",
});
//handle snack info
const HandleSnack = (message, state, icon, color) => {
setSnackInfo({
message: message,
icon: icon,
open: state,
color: color,
});
};
const CheckUserPermission = () => {
let canUserEdit = false;
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")
canUserEdit = true;
} else {
canUserEdit = false;
}
return canUserEdit;
};
const DisplayDate = (date) => {
const convertedData = moment.utc(date);
return moment(convertedData)
.format("LLL")
.toString();
};
const StateItem = (status, type) => {
switch (status) {
case "removed":
return (
<Paper
style={{
textAlign: "center",
padding: "0.5em",
backgroundColor: "#FA8072",
fontWeight: "500",
color: "#FFFAFA",
}}
>
Removido
</Paper>
);
case "inactive":
return (
<Paper
style={{
textAlign: "center",
padding: "0.5em",
backgroundColor: "#FF8C00",
fontWeight: "500",
color: "#FFFAFA",
}}
>
Inativo
</Paper>
);
case "active":
return (
<Paper
style={{
textAlign: "center",
padding: "0.5em",
backgroundColor: "#228B22",
fontWeight: "500",
color: "#FFFAFA",
}}
>
Ativo
</Paper>
);
default:
return "NOTHING";
}
};
useEffect(() => {
const arrItems = [...items]
arrItems.concat(ADD_ONE_LENGHT)
setItems(arrItems.concat(ADD_ONE_LENGHT))
}, []);
useEffect(() => {
// setLoaded(false)
getRequest(
Url("items", "", currPage, "DESC"),
(data, header) => {
// setItems(data)
// console.log(data)
// setLoaded(true)
// setError(false)
},
(data) => {
// setLoaded(true)
// setError(true)
// console.log("merda")
},
)
}, [currPage])
if (error) {
return <div>Error</div>;
} else if (!loaded) {
return <LoadingSpinner text="Carregando..." />;
} else {
if (!CheckUserPermission()) {
if (WINDOW_WIDTH <= 770) {
return (
<>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
snackbarOpen={snackInfo.open}
color={snackInfo.color}
handleClose={() =>
setSnackInfo({
message: "",
icon: "",
open: false,
color: "",
})
}
/>
<MobilePageHeader
title="Itens da gameficação"
actions={[
{
name: "Atualizar",
isLoading: false,
func: () => {
setcurrPage(0);
},
icon: <UpdateRoundedIcon />,
},
{
name: "Filtrar",
isLoading: false,
func: () => {
setShowFilter(!showFilter);
},
icon: <FilterListRoundedIcon />,
},
{
name: "Novo",
isLoading: false,
func: () => {
console.log("Changed page!");
},
icon: <AddRoundedIcon />,
},
]}
>
{showFilter ? (
<>
<div style={{ height: "1em" }}> Filter area</div>
</>
) : null}
</MobilePageHeader>
<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={() => {
setcurrPage(currPage+1)
}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
"Carregar mais itens"
)}
</Button>
</StyledDivButton>
) : (
<>
<MobileList
key={index}
title={row.name}
subtitle={row.id}
backColor={"#00bcd4"}
avatar={
<img
src={row.image ? row.image : noAvatar}
alt="user avatar"
style={{
height: "100%",
width: "100%",
borderRadius: "50%",
}}
/>
}
href={`/admin/user/${row.id}`}
reset={() => {}}
data={[
{
title: "Criado em",
subtitle: DisplayDate(row.created_at)
},
{
title: "Atualizado em",
subtitle: DisplayDate(row.updated_at)
},
{
title: "Tipo",
subtitle: row.item_type
},
{
title: "Ações rápidas",
subtitle: row.description
},
{
title: "Estado",
subtitle: StateItem(row.state)
}
]}
/>
<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: "",
})
}
/>
<PageHeader
title="Itens da gameficação"
actions={[
{
name: "Atualizar",
isLoading: false,
func: () => {
setcurrPage(0);
},
icon: <UpdateRoundedIcon />,
},
{
name: "Filtrar",
isLoading: false,
func: () => {
setShowFilter(!showFilter);
},
icon: <FilterListRoundedIcon />,
},
{
name: "Novo",
isLoading: false,
func: () => {
console.log("Changed page!");
},
icon: <AddRoundedIcon />,
},
]}
>
{showFilter ? (
<>
<div style={{ height: "1em" }}> Filter area</div>
</>
) : null}
</PageHeader>
<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={() => {
setcurrPage(currPage + 1);
}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
"Carregar mais itens"
)}
</Button>
</StyledTableCell>
</StyledTableRow>
) : (
<StyledTableRow key={index}>
<StyledTableCell component="th" scope="row">
{StateItem(row.state)}
</StyledTableCell>
<StyledTableCell align="right">{row.id}</StyledTableCell>
<StyledTableCell align="right">{row.name}</StyledTableCell>
<StyledTableCell align="right">
{row.item_type}
</StyledTableCell>
<StyledTableCell align="right">
{DisplayDate(row.created_at)}
</StyledTableCell>
<StyledTableCell align="right">
{DisplayDate(row.updated_at)}
</StyledTableCell>
<StyledTableCell align="right">
<Link>
<IconButton>
<VisibilityIcon style={{ fill: "#00bcd4" }} />
</IconButton>
</Link>
</StyledTableCell>
</StyledTableRow>
)
)}
</TableBody>
</TableData>
</>
);
}
} else return <Unauthorized />;
}
};
export default Gamefication;
const StyledDivButton = styled(Paper)`
width : 100%;
display : flex;
justify-content : center;
align-items : center;
`
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment