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

add a tab to open the collection page in other browser tab

parent cc133d53
No related branches found
No related tags found
6 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa,!31Fix console error,!28Training materials
Hide whitespace changes
Inline Side-by-side
src/Components/ColCardPublicOptions.js
+ 127
− 82
View file @ c533565d
......@@ -16,92 +16,137 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState} from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import MenuItem from '@material-ui/core/MenuItem';
import OpenIcon from '@material-ui/icons/OpenInNew';
import {Link} from 'react-router-dom'
import MoreVertIcon from '@material-ui/icons/MoreVert';
import styled from 'styled-components'
import ErrorIcon from '@material-ui/icons/Error';
import ReportModal from './ReportModal.js'
import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'
import axios from 'axios'
import {apiUrl} from '../env';
export default function ColCardPublicOptions (props) {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
setAnchorEl(event.currentTarget);
}
function handleClose() {
setAnchorEl(null);
}
const [reportModalOpen, toggleReportModal] = useState(false)
const handleReportModal = (value) => {toggleReportModal(value)}
const handleUnfollow = () => {
let config = getAxiosConfig()
let payload = {}
import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import MenuItem from "@material-ui/core/MenuItem";
import OpenIcon from "@material-ui/icons/OpenInNew";
import { Link } from "react-router-dom";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import styled from "styled-components";
import ErrorIcon from "@material-ui/icons/Error";
import ReportModal from "./ReportModal.js";
import { getAxiosConfig } from "../Components/HelperFunctions/getAxiosConfig";
import axios from "axios";
import ReportProblemIcon from '@material-ui/icons/ReportProblem';
import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
import { apiUrl } from "../env";
export default function ColCardPublicOptions(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
setAnchorEl(event.currentTarget);
}
axios.put( (`${apiUrl}/collections/` + props.id + '/follow'),payload, config).then(
(response) => {
console.log(response.data)
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
}, (error) => {console.log(error)})
}
function handleClose() {
setAnchorEl(null);
}
return (
<>
<ReportModal open={reportModalOpen} handleClose={() => handleReportModal(false)}
form="colecao" complainableId={props.id}
complainableType={"Collection"}
/>
<div style={{fontSize: "12px"}}>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
<MoreVertIcon style={{color : "inherit"}}/>
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<StyledMenuItem>
<Link to={"/colecao-do-usuario/" + props.id}>
<ListItemIcon><OpenIcon /></ListItemIcon>Abrir
</Link>
</StyledMenuItem>
<StyledMenuItem onClick={handleUnfollow}>
<ListItemIcon><ErrorIcon /></ListItemIcon>Deixar de Seguir
</StyledMenuItem>
<StyledMenuItem onClick={() => {handleReportModal(true)}}>
<ListItemIcon><ErrorIcon /></ListItemIcon>Reportar
</StyledMenuItem>
</Menu>
</div>
const [reportModalOpen, toggleReportModal] = useState(false);
const handleReportModal = (value) => {
toggleReportModal(value);
};
const handleUnfollow = () => {
let config = getAxiosConfig();
let payload = {};
axios
.put(`${apiUrl}/collections/` + props.id + "/follow", payload, config)
.then(
(response) => {
console.log(response.data);
if (response.headers["access-token"]) {
sessionStorage.setItem(
"@portalmec/accessToken",
response.headers["access-token"]
);
}
},
(error) => {
console.log(error);
}
);
};
return (
<>
<ReportModal
open={reportModalOpen}
handleClose={() => handleReportModal(false)}
form="colecao"
complainableId={props.id}
complainableType={"Collection"}
/>
<div style={{ fontSize: "12px" }}>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
style={{ color: "#666" }}
>
<MoreVertIcon style={{ color: "inherit" }} />
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<StyledMenuItem>
<Link to={"/colecao-do-usuario/" + props.id}>
<ListItemIcon>
<OpenIcon />
</ListItemIcon>
Abrir
</Link>
</StyledMenuItem>
<StyledMenuItem
onClick={() =>
window.open("/colecao-do-usuario/" + props.id, "_blank")
}
>
<ListItemIcon>
<OpenInBrowserIcon />
</ListItemIcon>
Abrir em nova guia
</StyledMenuItem>
<StyledMenuItem onClick={handleUnfollow}>
<ListItemIcon>
<ErrorIcon />
</ListItemIcon>
Deixar de Seguir
</StyledMenuItem>
<StyledMenuItem
onClick={() => {
handleReportModal(true);
}}
>
<ListItemIcon>
<ReportProblemIcon />
</ListItemIcon>
Reportar
</StyledMenuItem>
</Menu>
</div>
</>
)
);
}
export const StyledMenuItem = styled(MenuItem)`
color : #666 !important;
color: #666 !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
a {
text-decoration : none !important;
color : #666 !important;
}
`
.MuiSvgIcon-root {
vertical-align: middle !important;
}
a {
text-decoration: none !important;
color: #666 !important;
}
`;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment