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

fixing collection page

parent 696ccf6c
No related branches found
No related tags found
2 merge requests!69Fixed upload page: recaptcha not implemented, lack of blocking (part one, two,...,!63Fix production bugs luis
Hide whitespace changes
Inline Side-by-side
src/Components/CollectionAuthor.js
+ 5
− 5
View file @ 0d3b2e31
...@@ -29,17 +29,17 @@ export default function CollectionAuthor(props) { ...@@ -29,17 +29,17 @@ export default function CollectionAuthor(props) {
direction="column" direction="column"
justify="center" justify="center"
alignItems="center"> alignItems="center">
{props.imgsrc ? {props.imgsrc ?
<UserLink <UserLink
to={`/usuario-publico/${props.author_id}`} to={`/usuario-publico/${props.author_id}`}
> >
<UserAvatar src={props.imgsrc}/> <UserAvatar src={props.imgsrc} />
</UserLink> </UserLink>
: :
<CircularProgress color="secondary"/> <CircularProgress color="secondary" />
} }
<InfoText>Coleção organizada por:</InfoText> <InfoText>Coleção organizada por:</InfoText>
{props.name ? {props.name ?
<UserLink to={`/usuario-publico/${props.author_id}`} > <UserLink to={`/usuario-publico/${props.author_id}`} >
<UserName>{props.name}</UserName> <UserName>{props.name}</UserName>
</UserLink> </UserLink>
......
src/Components/CollectionDowloadButton.js
+ 77
− 25
View file @ 0d3b2e31
...@@ -5,29 +5,62 @@ import Button from '@material-ui/core/Button'; ...@@ -5,29 +5,62 @@ import Button from '@material-ui/core/Button';
import styled from 'styled-components'; import styled from 'styled-components';
import { apiUrl, apiDomain } from '../env'; import { apiUrl, apiDomain } from '../env';
import { getRequest } from './HelperFunctions/getAxiosConfig' import { getRequest } from './HelperFunctions/getAxiosConfig'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
const DowloadButton = (props) => { const DowloadButton = (props) => {
const [download_url, setDownloadUrl] = useState(''); const [download_url, setDownloadUrl] = useState('');
const [snackInfo, setSnackInfo] = useState({
open: false,
text: "",
severity: "",
});
useEffect(() => { useEffect(() => {
const body = { if (props.id && props.id !== "0") {
"package": { const body = {
"object": [{ "type": "Collection", "id": props.id }] "package": {
} "object": [{ "type": "Collection", "id": props.id }]
};
axios
.post(apiUrl + '/package', body)
.catch(err => {
if (err.response && err.response.status === 302) {
setDownloadUrl(apiDomain + '/' + err.response.data.url);
} }
}); };
axios
.post(apiUrl + '/package', body)
.catch(err => {
if (err.response && err.response.status === 302) {
setDownloadUrl(apiDomain + '/' + err.response.data.url);
}
});
}
}, [props.id]); }, [props.id]);
const handleDowloadCollection = () => { const handleDowloadCollection = (e) => {
// there is no error controller here because the router // there is no error controller here because the router
///:type/:id/download is always returning error ///:type/:id/download is always returning error
e.preventDefault()
let snackInfo = {}
if (download_url) {
window.open(download_url, '_blank')
snackInfo = {
open: true,
text: "A coleção está sendo baixada...",
severity: "success",
}
handleSnackInfo(snackInfo)
}
else {
snackInfo = {
open: true,
text: "Não foi possível baixar a coleção",
severity: "warning",
}
handleSnackInfo(snackInfo)
}
getRequest( getRequest(
`/collections/${props.id}/download`, `/collections/${props.id}/download`,
(data, header) => { (data, header) => {
...@@ -37,18 +70,40 @@ const DowloadButton = (props) => { ...@@ -37,18 +70,40 @@ const DowloadButton = (props) => {
) )
} }
const handleSnackInfo = (info) => {
setSnackInfo({ ...info })
}
const handleCloseSnack = () => {
const snackInfo = {
open: false,
text: "",
severity: "",
}
handleSnackInfo(snackInfo)
}
return ( return (
<> <>
<DownloadAnchor href={download_url} > <Snackbar
<DownloadButton open={snackInfo.open}
variant="outlined" autoHideDuration={6000}
color="primary" onClose={handleCloseSnack}
startIcon={<GetAppIcon fontSize="large" />} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
size="small" >
> <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
<ButtonText onClick={handleDowloadCollection}>Baixar Coleção</ButtonText> {snackInfo.text}
</DownloadButton> </Alert>
</DownloadAnchor> </Snackbar>
<DownloadButton
variant="outlined"
color="primary"
startIcon={<GetAppIcon fontSize="large" />}
size="small"
onClick={handleDowloadCollection}
>
<ButtonText>Baixar Coleção</ButtonText>
</DownloadButton>
</> </>
) )
} }
...@@ -62,8 +117,5 @@ const DownloadButton = styled(Button)` ...@@ -62,8 +117,5 @@ const DownloadButton = styled(Button)`
padding-right: 10; padding-right: 10;
width: 250px; width: 250px;
` `
const DownloadAnchor = styled.a`
text-decoration: none !important;
`
export default DowloadButton; export default DowloadButton;
src/Components/FloatingDownloadButton.js
+ 10
− 40
View file @ 0d3b2e31
...@@ -16,54 +16,24 @@ GNU Affero General Public License for more details. ...@@ -16,54 +16,24 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { useState } from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import GetAppIcon from '@material-ui/icons/GetApp'; import GetAppIcon from '@material-ui/icons/GetApp';
import Fab from '@material-ui/core/Fab'; import Fab from '@material-ui/core/Fab';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function FloatingDownloadButton (props) {
const [snackbar, setSnackbar] = useState(false);
const handleClickDownload = () => {
if (props.empty_selection)
setSnackbar(true);
}
const handleClose = () => {
setSnackbar(false);
}
export default function FloatingDownloadButton(props) {
return ( return (
<div> <FloatingDownload
<DownloadAnchor href={props.url} alt="Baixar recursos selecionados"> color="primary"
<FloatingDownload aria-label="download"
color="primary" onClick={props.handleDownloadSelection}
aria-label="download" >
onClick={handleClickDownload} <GetAppIcon />
> </FloatingDownload>
<GetAppIcon />
</FloatingDownload>
</DownloadAnchor>
<Snackbar open={snackbar} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} severity="alert">
Selecione recursos para poder baixar
</Alert>
</Snackbar>
</div>
); );
} }
const DownloadAnchor=styled.a` const FloatingDownload = styled(Fab)`
text-decoration: none !important;
`
const FloatingDownload=styled(Fab)`
position: fixed !important; position: fixed !important;
right: 15px !important; right: 15px !important;
bottom: 25px !important; bottom: 25px !important;
......
src/Components/ResourceList.js
+ 54
− 22
View file @ 0d3b2e31
...@@ -41,7 +41,11 @@ export default function ResourceList(props) { ...@@ -41,7 +41,11 @@ export default function ResourceList(props) {
null, { length: props.resources.length }).map(i => false)); null, { length: props.resources.length }).map(i => false));
const [selectable, setSelectable] = useState(false); const [selectable, setSelectable] = useState(false);
const [download_url, setDownloadUrl] = useState(''); const [download_url, setDownloadUrl] = useState('');
const [snackbar_open, setSnackbarOpen] = useState(false); const [snackInfo, setSnackInfo] = useState({
open: false,
text: "",
severity: "",
});
const updateSelected = (index) => { const updateSelected = (index) => {
let new_selected = selected.slice(); let new_selected = selected.slice();
...@@ -49,6 +53,10 @@ export default function ResourceList(props) { ...@@ -49,6 +53,10 @@ export default function ResourceList(props) {
setSelected(new_selected); setSelected(new_selected);
} }
const handleSnackInfo = (info) => {
setSnackInfo({ ...info })
}
const checkBoxIcon = (s) => { const checkBoxIcon = (s) => {
if (s) if (s)
return <CheckBoxIcon />; return <CheckBoxIcon />;
...@@ -56,9 +64,36 @@ export default function ResourceList(props) { ...@@ -56,9 +64,36 @@ export default function ResourceList(props) {
return <CheckBoxOutlineBlankIcon />; return <CheckBoxOutlineBlankIcon />;
} }
const handleDownloadSelection = () => { const handleDownloadSelection = (e) => {
e.preventDefault()
// const selected_resources = props.resources.filter(resource => selected[props.resources.indexOf(resource)]); // const selected_resources = props.resources.filter(resource => selected[props.resources.indexOf(resource)]);
setSnackbarOpen(true); let snackInfo = {}
if (download_url) {
window.open(download_url, '_blank')
snackInfo = {
open: true,
text: "Os recursos estão sendo baixados...",
severity: "success",
}
handleSnackInfo(snackInfo)
}
else {
snackInfo = {
open: true,
text: "Selecione os recursos que deseja baixar",
severity: "warning",
}
handleSnackInfo(snackInfo)
}
}
const handleCloseSnack = () => {
const snackInfo = {
open: false,
text: "",
severity: "",
}
handleSnackInfo(snackInfo)
} }
useEffect(() => { useEffect(() => {
...@@ -103,16 +138,14 @@ export default function ResourceList(props) { ...@@ -103,16 +138,14 @@ export default function ResourceList(props) {
</Button> </Button>
</Grid> </Grid>
<Grid item> <Grid item>
<UnstyledAnchor href={download_url}> <Button
<Button color="primary"
color="primary" variant="outlined"
variant="outlined" startIcon={<GetAppIcon fontSize="large" />}
startIcon={<GetAppIcon fontSize="large" />} onClick={handleDownloadSelection}
onClick={handleDownloadSelection} >
> <PanelButtonText>baixar seleção</PanelButtonText>
<PanelButtonText>baixar seleção</PanelButtonText> </Button>
</Button>
</UnstyledAnchor>
</Grid> </Grid>
</Grid> </Grid>
<Grid container direction="row" justify="center" alignItems="center"> <Grid container direction="row" justify="center" alignItems="center">
...@@ -151,16 +184,18 @@ export default function ResourceList(props) { ...@@ -151,16 +184,18 @@ export default function ResourceList(props) {
})} })}
</Grid> </Grid>
<Snackbar <Snackbar
open={snackbar_open} open={snackInfo.open}
autoHideDuration={6000} autoHideDuration={6000}
onClose={() => setSnackbarOpen(false)} onClose={handleCloseSnack}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
> >
<Alert onClose={() => setSnackbarOpen(false)} severity="info"> <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
Os recursos serão baixados {snackInfo.text}
</Alert> </Alert>
</Snackbar> </Snackbar>
<FloatingDownloadButton url={download_url} empty={selected.indexOf(true) === -1} /> <FloatingDownloadButton
handleDownloadSelection={handleDownloadSelection}
/>
</ResourceListContainer> </ResourceListContainer>
); );
} }
...@@ -182,7 +217,4 @@ const PanelButtonText = styled.span` ...@@ -182,7 +217,4 @@ const PanelButtonText = styled.span`
` `
const ResourceGrid = styled(Grid)` const ResourceGrid = styled(Grid)`
padding-right: 7px; padding-right: 7px;
` `
const UnstyledAnchor = styled.a` \ No newline at end of file
text-decoration: none !important;
`
src/Pages/CollectionPage.js
+ 14
− 13
View file @ 0d3b2e31
...@@ -22,7 +22,7 @@ import VerticalRuler from '../Components/VerticalRuler.js'; ...@@ -22,7 +22,7 @@ import VerticalRuler from '../Components/VerticalRuler.js';
import CollectionDescription from '../Components/CollectionDescription.js'; import CollectionDescription from '../Components/CollectionDescription.js';
import ResourceList from '../Components/ResourceList.js'; import ResourceList from '../Components/ResourceList.js';
import CollectionCommentSection from '../Components/CollectionCommentSection.js'; import CollectionCommentSection from '../Components/CollectionCommentSection.js';
import { apiDomain } from '../env'; import LoadingSpinner from '../Components/LoadingSpinner';
import styled from 'styled-components'; import styled from 'styled-components';
import DowloadButton from '../Components/CollectionDowloadButton.js'; import DowloadButton from '../Components/CollectionDowloadButton.js';
import Breadcrumbs from "@material-ui/core/Breadcrumbs"; import Breadcrumbs from "@material-ui/core/Breadcrumbs";
...@@ -31,12 +31,13 @@ import FollowCollectionButton from '../Components/FollowCollectionButton'; ...@@ -31,12 +31,13 @@ import FollowCollectionButton from '../Components/FollowCollectionButton';
import { Store } from '../Store.js'; import { Store } from '../Store.js';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import { getRequest } from '../Components/HelperFunctions/getAxiosConfig.js'; import { getRequest } from '../Components/HelperFunctions/getAxiosConfig.js';
import noAvatar from '../img/default_profile.png';
export default function CollectionPage(props) { export default function CollectionPage(props) {
const { state } = useContext(Store); const { state } = useContext(Store);
const [error, setError] = useState(false) const [error, setError] = useState(false)
const [loading, setLoading] = useState(true)
const [collection, setCollection] = useState({ const [collection, setCollection] = useState({
name: '', name: '',
id: 0, id: 0,
...@@ -46,8 +47,7 @@ export default function CollectionPage(props) { ...@@ -46,8 +47,7 @@ export default function CollectionPage(props) {
useEffect(() => { useEffect(() => {
const url = `/collections/${collection_id}` const url = `/collections/${collection_id}`
getRequest(url, (data) => { setCollection(Object.assign({}, data)); setLoading(false) }, (error) => { setError(true); setLoading(false) })
getRequest(url, (data) => { setCollection(Object.assign({}, data)) }, (error) => { setError(true) })
}, [state.currentUser.id]); }, [state.currentUser.id]);
const handleScrollToComments = () => { const handleScrollToComments = () => {
...@@ -74,6 +74,8 @@ export default function CollectionPage(props) { ...@@ -74,6 +74,8 @@ export default function CollectionPage(props) {
</Grid> </Grid>
</Grid> </Grid>
</CollectionNotFound> </CollectionNotFound>
if (loading)
return <LoadingSpinner text="Carregando coleção..." />
else else
return ( return (
<> <>
...@@ -86,9 +88,9 @@ export default function CollectionPage(props) { ...@@ -86,9 +88,9 @@ export default function CollectionPage(props) {
<Grid container direction="row" justify="center" alignItems="center"> <Grid container direction="row" justify="center" alignItems="center">
<Grid item md={3}> <Grid item md={3}>
<CollectionAuthor <CollectionAuthor
author_id={collection.owner ? collection.owner.id : 0} author_id={collection.owner.id ? collection.owner.id : 0}
name={collection.owner ? collection.owner.name : ""} name={collection.owner.name ? collection.owner.name : ""}
imgsrc={collection.owner ? apiDomain + collection.owner.avatar : ''} /> imgsrc={collection.owner.avatar ? collection.owner.avatar : noAvatar} />
</Grid> </Grid>
...@@ -99,12 +101,12 @@ export default function CollectionPage(props) { ...@@ -99,12 +101,12 @@ export default function CollectionPage(props) {
liked={collection.liked} liked={collection.liked}
scrollToComments={handleScrollToComments} scrollToComments={handleScrollToComments}
title={collection.name ? collection.name : ""} title={collection.name ? collection.name : ""}
collection_id={collection.id ? collection.id : 0} /> collection_id={collection_id} />
</Grid> </Grid>
<Grid item md={3}> <Grid item md={3}>
<DowloadButton <DowloadButton
id={collection.id ? collection.id : 0} id={collection_id}
/> />
<div style={{ height: 12 }}></div> <div style={{ height: 12 }}></div>
<FollowCollectionButton <FollowCollectionButton
...@@ -143,10 +145,9 @@ export default function CollectionPage(props) { ...@@ -143,10 +145,9 @@ export default function CollectionPage(props) {
</Grid> </Grid>
<Grid container item xs={12} style={{ marginTop: 40, paddingBottom: 40 }} ref={comment_ref}> <Grid container item xs={12} style={{ marginTop: 40, paddingBottom: 40 }} ref={comment_ref}>
<CollectionCommentSection <CollectionCommentSection
id={collection_id} id={collection_id}
currentUserId={state.currentUser.id} currentUserId={state.currentUser.id}
/> />
</Grid> </Grid>
</Grid> </Grid>
......
src/env.js
+ 8
− 8
View file @ 0d3b2e31
...@@ -17,15 +17,15 @@ You should have received a copy of the GNU Affero General Public License ...@@ -17,15 +17,15 @@ 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
var apiDomain = 'https://api.portalmec.c3sl.ufpr.br', var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
apiVersion = 'v1', apiVersion = 'v1',
apiUrl = apiDomain + '/' + apiVersion; apiUrl = apiDomain + '/' + apiVersion;
var simcaqAPIDomain = 'https://www.simcaq.c3sl.ufpr.br/api', var simcaqAPIDomain = 'https://www.simcaq.c3sl.ufpr.br/api',
apiSimcaqVersion = 'v1', apiSimcaqVersion = 'v1',
simcaqAPIurl = simcaqAPIDomain + '/' + apiSimcaqVersion simcaqAPIurl = simcaqAPIDomain + '/' + apiSimcaqVersion
export {apiUrl}; export { apiUrl };
export {apiDomain}; export { apiDomain };
export {simcaqAPIurl} export { simcaqAPIurl }
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