GuardarModal.js 14.24 KiB
/*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 { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import { Store } from '../Store.js'
import { apiDomain } from '../env';
import CloseIcon from '@material-ui/icons/Close';
import PublicIcon from '@material-ui/icons/Public';
import LockIcon from '@material-ui/icons/Lock';
import LoadingSpinner from './LoadingSpinner.js'
import CriarColecaoForm from './CriarColecaoForm.js'
import SnackbarComponent from './SnackbarComponent'
import { getRequest, postRequest } from './HelperFunctions/getAxiosConfig'
function CloseModalButton(props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
<CloseIcon />
</StyledCloseModalButton>
)
}
export default function GuardarModal(props) {
const { state } = useContext(Store)
const [collsArr, setcolls] = useState([])
const [loading, toggleLoading] = useState(true)
const [creatingCol, setCreating] = useState(false)
const [snackbarOpen, setSnackOpen] = useState({
open: false,
severity: "",
text: "",
color: ""
})
function handleSuccessGetCols(data) {
setcolls(data)
toggleLoading(false)
}
function handleError(error) {
toggleLoading(false)
setSnackOpen({
open: true,
severity: "error",
text: "Error ao guardar o recurso",
color: "red",
})
}
const getCols = () => {
if (collsArr.length === 0) {
const id = state.currentUser.id
const url = `/users/${id}/collections/`
getRequest(url, handleSuccessGetCols, handleError)
}
}
function handleSuccessPostToCol(data) {
setSnackOpen({
open: true,
severity: "info",
text: "O Recurso foi guardado na coleção!",
color: ""
})
setCreating(false)
props.handleClose()
}
const postToCol = (colId) => {
const url = `/collections/${colId}/items`
const payload = {
"collection": {
"items": [{ "id": props.recursoId, "type": "LearningObject" }]
}
}
postRequest(url, payload, handleSuccessPostToCol, handleError)
}
return (
<React.Fragment>
<SnackbarComponent
snackbarOpen={snackbarOpen.open}
severity={snackbarOpen.severity}
handleClose={() => {
setSnackOpen({
open: false,
severity: "",
text: "",
color: ""
})
}}
text={snackbarOpen.text}
color={snackbarOpen.color}
/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
centered="true"
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
onRendered={() => { getCols() }}
>
<Fade in={props.open}>
<Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
<Header>
<span style={{ width: "32px" }} />
<h2>Guardar recurso</h2>
<CloseModalButton handleClose={props.handleClose} />
</Header> <Content style={{ paddingTop: "0" }}>
<ResourceInfo>
<img src={apiDomain + props.thumb} alt="thumbnail recurso" />
<div>
<h3>{props.title}</h3>
</div>
</ResourceInfo>
{
loading ?
(
<LoadingSpinner text="Carregando coleções" />
)
:
(
<ChooseColContainer>
{
creatingCol ?
(
<CriarColecaoForm
handleClose={() => setCreating(false)}
finalize={postToCol}
/>
)
:
(
collsArr.length === 0 ?
(
<>
<div classname="no-cols">
<h2>Você não possui coleções ainda.</h2>
</div>
</>
)
:
(
<>
<ChooseCol>
<h2>Escolha uma Coleção: </h2>
<div className="cols-list">
{
collsArr.map(collection =>
<div className="row" key={collection.id}>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
{
collection.privacy === "public" ?
<PublicIcon className="icon" />
: <LockIcon className="icon" />
}
<h5>{collection.name}</h5>
</div>
<GuardarBotao className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
</div>
)
}
</div>
</ChooseCol>
</>
)
)
}
<div style={{ display: "flex", justifyContent: "center" }}>
<CriarColButton className={`${props.contrast}LinkColor ContrastText`} style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}} onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
</div>
</ChooseColContainer>
)
}
</Content>
</Container>
</Fade> </StyledModal>
</React.Fragment>
)
}
const GuardarBotao = styled(Button)`
max-height : 36px !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
padding-left : 32px !important;
padding-right : 32px !important;
`
const ChooseCol = styled.div`
display : flex;
flex-direction : column;
h2 {
margin-top : 20px;
margin-bottom : 10px;
font-size : 24px;
font-weight : 500;
}
.icon {
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
font-size : 24px !important;
line-height : 1 !important;
letter-spacing : normal !important;
text-transform : none !important;
display : inline-block !important;
white-space : nowrap !important;
word-wrap : normal !important;
direction : ltr !important;
padding-right : 2px;
}
.cols-list {
overflow-x : hidden;
overflow-y : auto;
.row {
display : flex;
flex-direction : row;
padding : 10px;
border-radius : 5px;
max-height : 60px;
align-items : center;
align-content : center;
max-width : 100%;
justify-content : space-between;
h5 {
padding : 0 20px;
margin : 0;
font-size : 14px;
font-weight : 600;
}
}
}
`
const CriarColButton = styled(Button)`
width : 200px !important;
margin-top : 16px !important;
margin-left : auto !important;
margin-right : auto !important;
font-weight : 600 !important;
box-shadow : !important;
padding-left : 0 2px 5px 0 rgba(0,0,0,.26) 16px !important; padding-right : 16px !important;
`
const ChooseColContainer = styled.div`
display : flex;
flex-direction : column;
.no-cols {
align-self : center;
margin-top : 20px;
margin-bottom : 30px;
font-size : 24px;
font-weight : 500;
}
`
const ResourceInfo = styled.div`
margin-top : 0;
overflow : hidden;
border-radius : 5px;
display : flex;
flex-direction : row;
align-items : center;
align-content : center;
max-wdith : 100%;
justify-content : space-between;
.text {
max-height : 100%;
max-width : 66.66%;
display : flex;
flex-direction : column;
text-align : center;
h3 {
font-size : 20px;
font-weight : 500;
padding : 10px;
}
}
img {
object-fit : cover;
height : 115px;
max-width : 165px;
background-color : #e5e5e5;
float : left;
padding : 0;
@media screen and (min-width : 600px) {
margin-right : 20px;
margin-bottom : 0;
}
@media screen and (max-width : 768px) {
width : 100%;
}
}
`
const Content = styled.div`
padding : 20px 30px;
overflow-y : scroll;
`
const Header = styled.div`
display : flex;
flex-direction : row;
padding : 10px 26px 0 26px; align-items : center;
justify-content : space-between;
height : 64px;
h2 {
font-size : 26px;
font-weight : lighter;
}
`
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
`
const StyledModal = styled(Modal)`
.djXaxP{
margin : 0 !important;
}
display : flex;
align-items: center;
justify-content : center;
text-align : center;
padding : 10px !important;
max-width : none;
max-height : none;
`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
align : center;
display : flex;
flex-direction : column;
min-width : 240px;
max-height : none;
position : relative;
padding : 10px;
border-radius : 4px;
@media screen and (min-width : 700px) {
max-width : 600px;
max-height : 600px;
}
@media screen and (max-width : 699px) {
width : 100%;
height : 100%;
}
`