/*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, useState } from 'react'; import { Store } from '../Store.js' import styled from 'styled-components' 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 MoreVertIcon from '@material-ui/icons/MoreVert'; import OpenIcon from '@material-ui/icons/OpenInNew'; import ReportIcon from '@material-ui/icons/Error'; import ReportModal from './ReportModal.js' import { Link } from 'react-router-dom' import DownloadIcon from '@material-ui/icons/CloudDownload'; import ShareIcon from '@material-ui/icons/Share'; import AddIcon from '@material-ui/icons/CreateNewFolder'; import GuardarModal from './GuardarModal' import ShareModal from './ShareModal' import SnackbarComponent from './SnackbarComponent' import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser'; import { getRequest } from './HelperFunctions/getAxiosConfig' export default function ResourceCardOptions(props) { const { state } = useContext(Store) const [anchorEl, setAnchorEl] = React.useState(null); function handleClick(event) { setAnchorEl(event.currentTarget); } function handleClose() { setAnchorEl(null); } const [reportModal, toggleReportModal] = useState(false) const handleModalReportar = (value) => { toggleReportModal(value) // {/*if (state.currentUser.id) { // toggleReportModal(!reportModal) // } // else { // toggleLoginModal(true) // }*/} } const [saveToCol, toggleSave] = useState(false) const handleGuardar = () => { if (!state.currentUser.id) { props.handleLogin(); } else { toggleSave(true); } handleClose() } const enableDownload = () => { const url = props.downloadableLink window.open(url, '_blank'); getRequest( `/learning_objects/${props.learningObjectId}/download`, (data, header) => { }, (error) => { } ) toggleSnackbar(true) } const [shareOpen, toggleShare] = useState(false) const handleShare = () => { if (!state.currentUser.id) { props.handleLogin() } else { toggleShare(true); } handleClose() } const getShareablePageLink = () => { return (window.origin + "/recurso/" + props.learningObjectId) } const handleReport = () => { if (!state.currentUser.id) { props.handleLogin() } else { handleModalReportar(true); } handleClose(); } const [snackbarOpen, toggleSnackbar] = useState(false) return ( <> <React.Fragment> <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)} form="recurso" complainableId={props.learningObjectId} complainableType={"LearningObject"} {...props} /> <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }} thumb={props.thumb} title={props.title} recursoId={props.learningObjectId} /> <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }} thumb={props.thumb} title={props.title} link={getShareablePageLink()} /> <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"} /> <div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}> <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}> <MoreVertIcon style={{ color: "#666" }} /> </ButtonNoWidth> <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose} > <StyledMenuItem> <Link to={"/recurso/" + props.learningObjectId}> <ListItemIcon><OpenIcon /></ListItemIcon>Abrir </Link> </StyledMenuItem> <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}> <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia </StyledMenuItem> { props.downloadableLink && <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}> <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar </StyledMenuItem> } <StyledMenuItem onClick={handleShare}> <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar </StyledMenuItem> <StyledMenuItem onClick={handleGuardar}> <ListItemIcon><AddIcon /></ListItemIcon>Guardar </StyledMenuItem> <StyledMenuItem onClick={() => { handleReport() }}> <ListItemIcon><ReportIcon /></ListItemIcon>Reportar </StyledMenuItem> </Menu> </div> </React.Fragment> </> ); } const ButtonNoWidth = styled(Button)` width : 24px !important; min-width : 24px !important; max-height : 24px !important; padding : 0 !important; background-color : #fff !important; color : #a5a5a5 !important; border : 0 !important; .MuiButton-root { width : 24px !important; min-width : 12px !important; } .MuiSvgIcon-root { padding-right : 0 !important; vertical-align : middle; } .MuiButton-label { padding-left : 4px !important; } ` const StyledMenuItem = styled(MenuItem)` color : #666 !important; .MuiSvgIcon-root { vertical-align : middle !important; } a { text-decoration : none !important; color : #666 !important; } `