From 880f28a92eb3fee0416aeea3df4833a3ffd343f9 Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Fri, 23 Apr 2021 16:53:22 -0300 Subject: [PATCH 1/6] Fixing minor bugs --- src/Components/AreasSubPagesFunction.js | 8 +- src/Components/ExpansionPanels.js | 2 +- src/Components/ModalAvaliarRecurso.js | 4 +- src/Components/Notifications.js | 3 +- src/Components/SearchBar.js | 115 +++++++++--------- .../TabPanels/UserPageTabs/PanelAtividades.js | 10 +- src/Pages/UserPage.js | 3 +- 7 files changed, 75 insertions(+), 70 deletions(-) diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js index 5a2aa3b9..f0883269 100644 --- a/src/Components/AreasSubPagesFunction.js +++ b/src/Components/AreasSubPagesFunction.js @@ -86,7 +86,7 @@ function ReqResources(props) { { rows.length >= 1 ? rows.map((row, index) => ( - <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}> + <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}> {row.map((card) => ( <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}> <ResourceCardFunction @@ -153,7 +153,7 @@ function ReqCollections(props) { <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}> { rows.map((row, index) => ( - <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}> + <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}> {row.map((card) => ( <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}> <CollectionCardFunction @@ -223,7 +223,7 @@ function TabRecurso() { { window.innerWidth <= 501 && <div style={{ display: "flex", justifyContent: "center" }}> - <Link to={`/busca?query=&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link> + <Link to={`/busca?query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link> </div> } </StyledTab> @@ -320,7 +320,7 @@ function TabColecoes() { { window.innerWidth <= 501 && <div style={{ display: "flex", justifyContent: "center" }}> - <Link to={`/busca?query=&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link> + <Link to={`/busca?query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link> </div> } </StyledTab> diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js index 9a242d21..017816eb 100644 --- a/src/Components/ExpansionPanels.js +++ b/src/Components/ExpansionPanels.js @@ -182,7 +182,7 @@ export default function SimpleExpansionPanel() { <h6 style={{fontSize:"18px",marginBlock: "10px"}}>3.2 É vedado ao usuário:</h6> <ul> <li> - <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</AColorido>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <AColorido href="http://www.onu.org.br/img/2014/09/DUDH.pdf" target="_blank">Direitos Humanos</AColorido> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário à s cláusulas destes Termos de Uso;</p> + <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</AColorido>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <AColorido href="https://www.ohchr.org/EN/UDHR/Pages/Language.aspx?LangID=por" target="_blank">Direitos Humanos</AColorido> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário à s cláusulas destes Termos de Uso;</p> </li> <li> <p>Assumir a identidade de outra pessoa, fÃsica ou jurÃdica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</p> diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js index 71e0a37d..7795876d 100644 --- a/src/Components/ModalAvaliarRecurso.js +++ b/src/Components/ModalAvaliarRecurso.js @@ -162,8 +162,8 @@ export default function ModalAvaliarRecurso(props) { </Grid> <Grid item xs={2}> <RadioGroup row onChange={(e) => { handleRadios(e, option.id) }}> - <FormControlLabel value={"Sim"} control={<StyledRadio />} label="Sim" /> - <FormControlLabel value={"Não"} control={<StyledRadio />} label="Não" /> + <FormControlLabel value={"Sim"} control={<StyledRadio />} label="Não" /> + <FormControlLabel value={"Não"} control={<StyledRadio />} label="Sim" /> </RadioGroup> </Grid> </Grid> diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js index b452b215..c8fbe2ae 100644 --- a/src/Components/Notifications.js +++ b/src/Components/Notifications.js @@ -204,6 +204,7 @@ export default function Notification(props) { </div> { notifications.map((notification) => + (notification.viewed === false) && <ActivityListItem onMenuBar={true} avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : null} @@ -222,7 +223,7 @@ export default function Notification(props) { <Link to="/perfil"> <NoPadButton> MOSTRAR TODAS - </NoPadButton> + </NoPadButton> </Link> </div> </ContainerDiv> diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js index 8dc8b65c..0363f683 100644 --- a/src/Components/SearchBar.js +++ b/src/Components/SearchBar.js @@ -25,6 +25,7 @@ import { RadioGroup, Radio, FormControl, Select, MenuItem, Button, FormControlLa import styled from 'styled-components' import { Store } from '../Store'; import { v4 as uuidv4 } from 'uuid' +import Grid from "@material-ui/core/Grid" const dividerStyled = { @@ -85,12 +86,12 @@ const MenuItemStyled = styled(MenuItem)` fontWeight: bolder; ` -const Bar = styled.div` +/*const Bar = styled.div` display: flex; align-items: center; justify-content: space-between; border-top: 1px rgba(0,0,0,.1) solid; -` +`*/ const Flex = styled.span` display: flex; align-items: center; @@ -145,59 +146,63 @@ export default function SearchBar(props) { }; return ( - <Bar> - {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />} - <TextFieldStyled - id="standard-search" - label="O que você está buscando" - type="search" - margin="normal" - value={query} - onChange={handleChange} - onKeyPress={handleKeyDown} - /> - <Flex> - <Link - to={linkTarget} - > - <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled> - </Link> - - {state.windowSize.width >= 900 ? - <React.Fragment> - <Flex style={{ "justifyContent": 'middle', 'flexDirection': 'column' }}> - <div>Pressione "Enter"</div> - <div>ou click na lupa</div> - </Flex> - <DividerVertical /> - <RadioGroupStyled row={true} - aria-label="Tipo" - name="types" value={searchClass} - onChange={ - (event) => setSearchClass(event.target.value) - } - > - <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" /> - <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" /> - <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" /> - </RadioGroupStyled> - </React.Fragment> - : - <React.Fragment> - <DividerVertical /> - <FormControl> - <SelectStyled - value={searchClass} - onChange={(event) => setSearchClass(event.target.value)} + <Grid container> + <Grid container item md={6} xs={12} sm={12}> + {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />} + <TextFieldStyled + id="standard-search" + label="O que você está buscando" + type="search" + margin="normal" + value={query} + onChange={handleChange} + onKeyPress={handleKeyDown} + /> + </Grid> + <Grid container item md={6} xs={12} sm={12}> + <Flex> + <Link + to={linkTarget} + > + <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled> + </Link> + + {state.windowSize.width >= 900 ? + <React.Fragment> + <Flex style={{ "justifyContent": 'middle', 'flexDirection': 'column' }}> + <div>Pressione "Enter"</div> + <div>ou click na lupa</div> + </Flex> + <DividerVertical /> + <RadioGroupStyled row={true} + aria-label="Tipo" + name="types" value={searchClass} + onChange={ + (event) => setSearchClass(event.target.value) + } > - <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled> - <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled> - <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled> - </SelectStyled> - </FormControl> - </React.Fragment> - } - </Flex> - </Bar> + <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" /> + <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" /> + <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" /> + </RadioGroupStyled> + </React.Fragment> + : + <React.Fragment> + <DividerVertical /> + <FormControl> + <SelectStyled + value={searchClass} + onChange={(event) => setSearchClass(event.target.value)} + > + <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled> + <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled> + <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled> + </SelectStyled> + </FormControl> + </React.Fragment> + } + </Flex> + </Grid> + </Grid> ) } diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js index 0985db2b..694fcfe3 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js +++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js @@ -139,7 +139,7 @@ export default function TabPanelAtividades(props) { </Grid> <Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}> <ShowData disabled={true}> - Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade" : "Atividades"} + Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "} de {totalResults} </ShowData> </Grid> @@ -195,7 +195,7 @@ const NoNotificationsDiv = styled.div` const LoadMoreButton = styled(Button)` outline : none !important; - display : inline-block !important; + display : block !important; cusor : pointer !important; min-height : 36px !important; min-widht : 88px !important; @@ -203,7 +203,7 @@ const LoadMoreButton = styled(Button)` vertical-align: middle !important; border : 0 !important; padding : 0 px !important; - margin : 6px 8px !important; + margin : auto !important; text-decoration : none !important; font-weight : 500 !important; overflow : hidden !important; @@ -218,7 +218,7 @@ const LoadMoreButton = styled(Button)` const ShowData = styled(Button)` outline : none !important; - display : inline-block !important; + display : block !important; cusor : pointer !important; min-height : 36px !important; min-widht : 88px !important; @@ -226,7 +226,7 @@ const ShowData = styled(Button)` vertical-align: middle !important; border : 0 !important; padding : 0 px !important; - margin : 6px 8px !important; + margin : auto !important; text-decoration : none !important; font-weight : 500 !important; overflow : hidden !important; diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js index da97c43e..53a0c9c5 100644 --- a/src/Pages/UserPage.js +++ b/src/Pages/UserPage.js @@ -54,7 +54,6 @@ export default function UserPage(props) { const [follows, setFollows] = useState(0); const [following, setFollowing] = useState(0); const [loading, setLoading] = useState(false); - const [tabValue, setTabValue] = useState(Number(props.location.state) || 0); const [tabs, setTabs] = useState([ "Atividades", @@ -108,7 +107,7 @@ export default function UserPage(props) { }, []); useEffect(() => { - setTabValue(Number(props.location.state)) + setTabValue(Number(props.location.state) || 0) }, [window.history.state.key]) const redirect = () => { -- GitLab From 5228006614a8b11fd4a6e08a00fe99d0982d7385 Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Mon, 26 Apr 2021 15:05:41 -0300 Subject: [PATCH 2/6] Fixing minor bugs --- src/Components/HomeScreenSearchBar.js | 2 +- src/Pages/EditLearningObjectPage.js | 51 ++++++++++++++++++++++++--- 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js index ed3b4cc1..9d46b996 100644 --- a/src/Components/HomeScreenSearchBar.js +++ b/src/Components/HomeScreenSearchBar.js @@ -146,7 +146,7 @@ export default function HomeScreenSearchBar (props) { </Grid> <Grid item md={2} xs={12}> <div style={{height : "100%"}}> - <Link to={`/busca?query=${query}&search_class=${searchClass}`}> + <Link to={`/busca?query=${state.search.query}&search_class=${searchClass}`}> <Button className="custom-button" style={{backgroundColor : options[selectedIndex].color, color : "#fff"}}> { WIDTH < 503 && diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js index 1f929c47..d7510242 100644 --- a/src/Pages/EditLearningObjectPage.js +++ b/src/Pages/EditLearningObjectPage.js @@ -102,6 +102,7 @@ export default function EditLearningObjectPage (props) { const onBlurCallback = (fieldName, payload) => { setUpdatedInfo({...updatedInfo, [fieldName] : payload}) + handleUpdateInfo() } const [snackbarOpen, toggleSnackbar] = useState(false) @@ -123,7 +124,10 @@ export default function EditLearningObjectPage (props) { "learning_object" : updatedInfo } - putRequest(url, payload, (data) => {props.history.goBack()}, (error) => {console.log(error)}) + putRequest(url, payload, + (data) => {}, + (error) => {console.log(error)} + ) } const handlePost = () => { @@ -140,6 +144,34 @@ export default function EditLearningObjectPage (props) { } + const handleSubmit = () => { + if (state.currentUser.id !== "") { + const url = `/submissions/` + + let payload = { + "submission" : { + "learning_object_id" : learningObject.id + } + } + + postRequest(url, payload, + (data) => {props.history.push( `/recurso/${learningObject.id}`)}, + (error) => {console.log(error)} + ) + + } + } + + const checkAccessLevel = (levelToCheck) => { + if (state.currentUser.id !== '') { + return (checkUserRole(levelToCheck)) + } + } + + const checkUserRole = (userRole) => { + return (state.currentUser.roles.filter((role) => role.name === userRole).length > 0) + } + const [thumbnailStage, setThumbnailStage] = useState('default') const [thumbnail, setThumbnail] = useState('') @@ -217,7 +249,7 @@ export default function EditLearningObjectPage (props) { </Grid> <Grid item md={8} xs={12}> <InfoBox> - <form onSubmit={handlePost}> + <form> <div className="cabecalho"> <h2>Editar Recurso</h2> </div> @@ -291,15 +323,26 @@ export default function EditLearningObjectPage (props) { </span> </GreyButton> - <OrangeButton onClick={() => {handleUpdateInfo()}}> + <OrangeButton onClick={() => {handleUpdateInfo(); props.history.push( `/recurso/${learningObject.id}`)}}> SALVAR ALTERAÇÕES </OrangeButton> - { + {/* learningObject.state === "draft" && <OrangeButton type="submit"> PUBLICAR RECURSO </OrangeButton> + */} + { + checkAccessLevel("partner") ? + ( + <OrangeButton onClick={handlePost}>PUBLICAR RECURSO</OrangeButton> + ) + : + ( + <OrangeButton onClick={handleSubmit}>SUBMETER RECURSO</OrangeButton> + ) + } </div> </Grid> -- GitLab From 40e92c75531664fa0eabc1c29690ad428fafd945 Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Wed, 28 Apr 2021 14:17:53 -0300 Subject: [PATCH 3/6] Fixed resource editing not updating in some cases, inability to publish a resource when editing, contact card options not updating the follow icon and grid in the search page. Reworked the search bar in the header, now the distribution of the elements will be more appropriate for the screen length --- .../ResourcePageComponents/Sobre.js | 4 +- src/Components/SearchBar.js | 108 ++++++++++-------- src/Pages/EditLearningObjectPage.js | 18 ++- src/Pages/Search.js | 6 +- 4 files changed, 78 insertions(+), 58 deletions(-) diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js index 341f8fcd..2de37ad9 100644 --- a/src/Components/ResourcePageComponents/Sobre.js +++ b/src/Components/ResourcePageComponents/Sobre.js @@ -244,14 +244,14 @@ export default function Sobre (props) { followed ? ( <> <NoIconFollowing followedID={props.id} toggleFollowed={toggleFollowed}/> - <ContactCardOptions followableID={props.id}/> + <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed}/> </> ) : ( <> <NoIcon followableID={props.id} toggleFollowed={toggleFollowed}/> - <ContactCardOptions followableID={props.id}/> + <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed}/> </> ) } diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js index 0363f683..88993387 100644 --- a/src/Components/SearchBar.js +++ b/src/Components/SearchBar.js @@ -37,7 +37,7 @@ const dividerStyled = { bottom: '0', right: '0', minHeight: '70px', - margin: '0 30px' + margin: '0 20px' } const DividerVertical = () => <em style={dividerStyled}></em> @@ -91,12 +91,12 @@ const MenuItemStyled = styled(MenuItem)` align-items: center; justify-content: space-between; border-top: 1px rgba(0,0,0,.1) solid; -`*/ +` const Flex = styled.span` display: flex; align-items: center; color: #787380; -` +`*/ export default function SearchBar(props) { const [query, setQuery] = useState('') @@ -147,7 +147,7 @@ export default function SearchBar(props) { return ( <Grid container> - <Grid container item md={6} xs={12} sm={12}> + <Grid container item xs={12} sm={12} md={6} lg={6} xl={6}> {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />} <TextFieldStyled id="standard-search" @@ -159,50 +159,64 @@ export default function SearchBar(props) { onKeyPress={handleKeyDown} /> </Grid> - <Grid container item md={6} xs={12} sm={12}> - <Flex> - <Link - to={linkTarget} - > - <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled> - </Link> - - {state.windowSize.width >= 900 ? - <React.Fragment> - <Flex style={{ "justifyContent": 'middle', 'flexDirection': 'column' }}> - <div>Pressione "Enter"</div> - <div>ou click na lupa</div> - </Flex> - <DividerVertical /> - <RadioGroupStyled row={true} - aria-label="Tipo" - name="types" value={searchClass} - onChange={ - (event) => setSearchClass(event.target.value) - } + <Grid container item justify="center" alignItems="center" xs={12} sm={12} md={6} lg={6} xl={6}> + {state.windowSize.width >= 960 ? + <React.Fragment> + <Grid container justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}> + <Link + to={linkTarget} + > + <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled> + </Link> + </Grid> + <Grid container justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}> + <span>Pressione "Enter" ou click na lupa</span> + </Grid> + <Grid container justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}> + <DividerVertical /> + </Grid> + <Grid container justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}> + <RadioGroupStyled row={true} + aria-label="Tipo" + name="types" value={searchClass} + onChange={ + (event) => setSearchClass(event.target.value) + } + > + <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" /> + <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" /> + <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" /> + </RadioGroupStyled> + </Grid> + </React.Fragment> + : + <React.Fragment> + <Grid container justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}> + <FormControl> + <SelectStyled + value={searchClass} + onChange={(event) => setSearchClass(event.target.value)} > - <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" /> - <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" /> - <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" /> - </RadioGroupStyled> - </React.Fragment> - : - <React.Fragment> - <DividerVertical /> - <FormControl> - <SelectStyled - value={searchClass} - onChange={(event) => setSearchClass(event.target.value)} - > - <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled> - <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled> - <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled> - </SelectStyled> - </FormControl> - </React.Fragment> - } - </Flex> + <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled> + <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled> + <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled> + </SelectStyled> + </FormControl> + </Grid> + <Grid container justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}> + <DividerVertical /> + </Grid> + <Grid container justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}> + <Link + to={linkTarget} + > + <span style={{color: "black"}}>Buscar</span> + <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled> + </Link> + </Grid> + </React.Fragment> + } </Grid> </Grid> ) -} +} \ No newline at end of file diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js index d7510242..5f8e84fd 100644 --- a/src/Pages/EditLearningObjectPage.js +++ b/src/Pages/EditLearningObjectPage.js @@ -101,8 +101,14 @@ export default function EditLearningObjectPage (props) { const [updatedInfo, setUpdatedInfo] = useState({}) const onBlurCallback = (fieldName, payload) => { - setUpdatedInfo({...updatedInfo, [fieldName] : payload}) - handleUpdateInfo() + const key = fieldName + let value = payload + if (key === "tags") { + value = payload.map( (tag, index) => + index = { "name" : tag} + ) + } + setUpdatedInfo({...updatedInfo, [fieldName] : value}) } const [snackbarOpen, toggleSnackbar] = useState(false) @@ -125,7 +131,7 @@ export default function EditLearningObjectPage (props) { } putRequest(url, payload, - (data) => {}, + (data) => {props.history.push( `/recurso/${learningObject.id}`)}, (error) => {console.log(error)} ) } @@ -323,7 +329,7 @@ export default function EditLearningObjectPage (props) { </span> </GreyButton> - <OrangeButton onClick={() => {handleUpdateInfo(); props.history.push( `/recurso/${learningObject.id}`)}}> + <OrangeButton onClick={() => {handleUpdateInfo()}}> SALVAR ALTERAÇÕES </OrangeButton> @@ -336,11 +342,11 @@ export default function EditLearningObjectPage (props) { { checkAccessLevel("partner") ? ( - <OrangeButton onClick={handlePost}>PUBLICAR RECURSO</OrangeButton> + <OrangeButton onClick={() => {handleUpdateInfo(); handlePost()}}>PUBLICAR RECURSO</OrangeButton> ) : ( - <OrangeButton onClick={handleSubmit}>SUBMETER RECURSO</OrangeButton> + <OrangeButton onClick={() => {handleUpdateInfo(); handleSubmit()}}>SUBMETER RECURSO</OrangeButton> ) } diff --git a/src/Pages/Search.js b/src/Pages/Search.js index b1ba6498..db1c0201 100644 --- a/src/Pages/Search.js +++ b/src/Pages/Search.js @@ -216,7 +216,7 @@ export default function Search(props) { <Grid item xs> <Grid container justify="center" alignItems="center" spacing={2}> {resultsCollection.map((card) => ( - <Grid item xs key={card.id}> + <Grid container item xs justify="center" alignItems="center" key={card.id}> <CollectionCardFunction name={card.name} tags={card.tags} @@ -277,7 +277,7 @@ export default function Search(props) { <Grid item xs> <Grid container justify="center" spacing={3} alignItems="center" > {resultsResource.map((card) => ( - <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}> + <Grid container justify="center" alignItems="center" item xs={12} sm={6} md={4} lg={3} key={card.id}> <ResourceCardFunction avatar={card.publisher ? card.publisher.avatar : ""} id={card.id} @@ -354,7 +354,7 @@ export default function Search(props) { <Grid item xs > <Grid container spacing={2} justify="center" alignItems="center"> {resultsUser.map((card) => ( - <Grid item xs key={card.id}> + <Grid container justify="center" alignItems="center" item xs key={card.id}> <ContactCard name={card.name} avatar={card.avatar ? apiDomain + card.avatar : null} -- GitLab From dce96c8bca6d8162571ee7bc3d3cbe725c94dc64 Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Fri, 30 Apr 2021 18:03:07 -0300 Subject: [PATCH 4/6] Fixed responsiveness of some items in Editar Perfil page, links to request professor account, professor account form and other minnor things --- src/Components/HomeScreenSearchBar.js | 24 +++++++------- .../PageProfessorComponents/PartThree.js | 7 ++-- src/Components/SearchBar.js | 33 ++++++++++--------- .../UserPageTabs/PanelEditarPerfil.js | 12 +++---- .../PanelSolicitarContaProfessor.js | 12 +++++-- .../UserPageComponents/SubmitterStatus.js | 11 ++++++- src/Pages/EditProfilePage.js | 4 +-- src/Pages/PageProfessor.js | 6 ++-- 8 files changed, 61 insertions(+), 48 deletions(-) diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js index 9d46b996..4427eb29 100644 --- a/src/Components/HomeScreenSearchBar.js +++ b/src/Components/HomeScreenSearchBar.js @@ -25,7 +25,7 @@ import { Store } from '../Store'; import { List, ListItem, ListItemIcon, ListItemText, MenuItem, Button, TextField } from '@material-ui/core' import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import SearchIcon from '@material-ui/icons/Search'; -import {Link} from 'react-router-dom' +/*import {Link} from 'react-router-dom'*/ export default function HomeScreenSearchBar (props) { const [ query, setQuery ] = useState("") @@ -94,8 +94,8 @@ export default function HomeScreenSearchBar (props) { return ( <StyledGrid container> + {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />} <Grid item md={7} xs={12} className="first white"> - {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />} <StyledTextField id="standard-search" placeholder="O que está buscando?" @@ -146,18 +146,16 @@ export default function HomeScreenSearchBar (props) { </Grid> <Grid item md={2} xs={12}> <div style={{height : "100%"}}> - <Link to={`/busca?query=${state.search.query}&search_class=${searchClass}`}> - <Button className="custom-button" style={{backgroundColor : options[selectedIndex].color, color : "#fff"}}> - { - WIDTH < 503 && - <span>Buscar</span> - } - <SearchIcon fontSize="large"/> - </Button> - </Link> + <Button onClick={handleKeyDown} className="custom-button" style={{backgroundColor : options[selectedIndex].color, color : "#fff"}}> + { + WIDTH < 503 && + <span>Buscar</span> + } + <SearchIcon fontSize="large"/> + </Button> </div> - </Grid> - </StyledGrid> + </Grid> + </StyledGrid> ) } diff --git a/src/Components/PageProfessorComponents/PartThree.js b/src/Components/PageProfessorComponents/PartThree.js index d52d17ba..4dc30604 100644 --- a/src/Components/PageProfessorComponents/PartThree.js +++ b/src/Components/PageProfessorComponents/PartThree.js @@ -17,8 +17,8 @@ export default function PartThree (props) { const handleChangePhoneNumber = (event) => { const input = event.target.value.replace(/\D/,'') setPhoneNumber({...phoneNumber, - flagInvalid : (input.length < 9 ? true : false), - number : (input.length > 9 ? phoneNumber.number : input), + flagInvalid : (input.length < 10 ? true : false), + number : (input.length > 10 ? phoneNumber.number : input), }) } @@ -48,14 +48,13 @@ export default function PartThree (props) { <h4>Vamos localizar o seu cadastro:</h4> <Stepper items={props.stepper}/> <form style={{textAlign:"start"}}> - <span>CENTRO EDUC INF MEU PEDACINHO DE CHAO</span> <FormControl required style={{width:"100%"}}> <p>Inserir o telefone da escola:</p> <FormInput inputType={'text'} pattern="[0-9]" name={'DDD e Número'} - placeholder={'DDD e Número'} + placeholder={'Exemplo: 4112345678'} value={phoneNumber.number} handleChange={handleChangePhoneNumber} error={phoneNumber.flagInvalid} diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js index 88993387..1c36964e 100644 --- a/src/Components/SearchBar.js +++ b/src/Components/SearchBar.js @@ -54,11 +54,13 @@ const TextFieldStyled = styled(TextField)` margin: 0 2vw !important; ` +/* const RadioGroupStyled = styled(RadioGroup)` display: flex; flex-direction: row; flex-grow: 1; ` +*/ const FormControlLabelStyled = styled(FormControlLabel)` *{ @@ -82,7 +84,6 @@ const SelectStyled = styled(Select)` ` const MenuItemStyled = styled(MenuItem)` text-transform: uppercase; - color: #ff8a17 !important; fontWeight: bolder; ` @@ -147,7 +148,7 @@ export default function SearchBar(props) { return ( <Grid container> - <Grid container item xs={12} sm={12} md={6} lg={6} xl={6}> + <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}> {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />} <TextFieldStyled id="standard-search" @@ -159,58 +160,58 @@ export default function SearchBar(props) { onKeyPress={handleKeyDown} /> </Grid> - <Grid container item justify="center" alignItems="center" xs={12} sm={12} md={6} lg={6} xl={6}> + <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}> {state.windowSize.width >= 960 ? <React.Fragment> - <Grid container justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}> + <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}> <Link to={linkTarget} > <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled> </Link> </Grid> - <Grid container justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}> + <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}> <span>Pressione "Enter" ou click na lupa</span> </Grid> - <Grid container justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}> + <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}> <DividerVertical /> </Grid> - <Grid container justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}> - <RadioGroupStyled row={true} + <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}> + <RadioGroup row={true} aria-label="Tipo" name="types" value={searchClass} onChange={ (event) => setSearchClass(event.target.value) } + justify="center" alignItems="center" > <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" /> <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" /> <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" /> - </RadioGroupStyled> + </RadioGroup> </Grid> </React.Fragment> : <React.Fragment> - <Grid container justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}> + <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}> <FormControl> <SelectStyled value={searchClass} onChange={(event) => setSearchClass(event.target.value)} > - <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled> - <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled> - <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled> + <MenuItemStyled style={{color : "#ff7f00"}} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled> + <MenuItemStyled style={{color : "#673ab7"}} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled> + <MenuItemStyled style={{color : "#00bcd4"}} value="User" aria-label="Usuários">Usuários</MenuItemStyled> </SelectStyled> </FormControl> </Grid> - <Grid container justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}> + <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}> <DividerVertical /> </Grid> - <Grid container justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}> + <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}> <Link to={linkTarget} > - <span style={{color: "black"}}>Buscar</span> <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled> </Link> </Grid> diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js index 0f2d25af..e8d25332 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js +++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js @@ -150,13 +150,10 @@ export default function TabPanelEditarPerfil(props) { </ProfileAvatarDiv> </HeaderContainer> <br /> - <br /> - <br /> - <br /> </div> <div style={{ paddingTop: "90px" }}> - <div style={{ display: "flex", flexDirection: "row" }}> + <div style={{ display: "flex", flexDirection: "row", justifyContent: "center" }}> <form onSubmit={e => handleSubmit(e)}> <FormInput inputType={"text"} @@ -279,8 +276,11 @@ const ChangeAvatarDiv = styled.div` ` const ProfileAvatarDiv = styled.div` - bottom: -20px; - left : 120px; + top: 70px; + left: 0; + right: 0; + bottom: -40px; + margin: auto; border-radius : 100%; position : absolute; max-width : 100px; diff --git a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js index a31c0676..c631e97d 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js +++ b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js @@ -20,6 +20,7 @@ import React, {useContext} from 'react' import { Store } from '../../../Store.js'; import styled from 'styled-components' import Button from '@material-ui/core/Button'; +import {Link} from 'react-router-dom'; //3 casos //Professor nao cadastrado (nao pediu OU submitter_request = rejected) @@ -42,9 +43,14 @@ export default function TabPanelSolicitarContaProfessor (props) { digitais na plataforma com toda a comunidade escolar do paÃs. </StyledP> <div> - <CompletarCadastroButton> - SIM, COMPLETAR CADASTRO - </CompletarCadastroButton> + <Link to={{ + pathname: '/termos-publicar-recurso', + state: true + }}> + <CompletarCadastroButton > + SIM, COMPLETAR CADASTRO + </CompletarCadastroButton> + </Link> </div> </div> ) diff --git a/src/Components/UserPageComponents/SubmitterStatus.js b/src/Components/UserPageComponents/SubmitterStatus.js index 7795a90d..1cb29365 100644 --- a/src/Components/UserPageComponents/SubmitterStatus.js +++ b/src/Components/UserPageComponents/SubmitterStatus.js @@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, {useContext} from 'react'; import { Store } from '../../Store.js'; import CheckDecagram from '../../img/check-decagram-gray.svg' +import {Link} from 'react-router-dom'; export default function SubmitterStatus (props) { const {state} = useContext(Store) @@ -42,7 +43,15 @@ export default function SubmitterStatus (props) { <img src={CheckDecagram} alt='check icon'/> </span> {text} - <span style={{color:"#00bcd4"}}> SAIBA MAIS</span> + <Link to={{ + pathname: '/editarperfil', + tabValue: { + value: 1 + } + }}> + <span style={{color:"#00bcd4"}}> SAIBA MAIS</span> + </Link> + </span> </p> </React.Fragment> diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js index a7e77555..0cf1e916 100644 --- a/src/Pages/EditProfilePage.js +++ b/src/Pages/EditProfilePage.js @@ -21,7 +21,7 @@ export default function EditProfilePage(props) { const [tabs, setTabs] = useState([ 'Editar Perfil', 'Solicitar conta de Professor', 'Gerenciar Conta' ]) - const [tabValue, setTabValue] = useState(0) + const [tabValue, setTabValue] = useState(props.location.tabValue !== undefined ? props.location.tabValue.value : 0) const handleChangeTab = (e, newValue) => { setTabValue(newValue) } @@ -139,7 +139,7 @@ export default function EditProfilePage(props) { </h4> <StyledTabs orientation="vertical" - variant="scrollable" + variant="fullWidth" value={tabValue} onChange={handleChangeTab} TabIndicatorProps={{ style: { display: "none" } }} diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js index 6ee8588e..96cd46bb 100644 --- a/src/Pages/PageProfessor.js +++ b/src/Pages/PageProfessor.js @@ -78,8 +78,8 @@ export default function PageProfessor (props) { const handleParteTres = (phone, cpf) => { setRegisterInformation({...registerInformation, - teacher_cpf: (phone ? phone : ''), - school_phone: (cpf ? cpf : ''), + teacher_cpf: (cpf ? cpf : ''), + school_phone: (phone ? phone : ''), }) handleModal(); } @@ -141,7 +141,7 @@ export default function PageProfessor (props) { } { stepper[3].selected && - <SuccessfulRequest email={state.currentUser.email}/> + <SuccessfulRequest email={state.currentUser.email} history={props.history}/> } </div> </Paper> -- GitLab From f6375d040061027d1999c5583cbd9c0e44864683 Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Tue, 4 May 2021 13:55:09 -0300 Subject: [PATCH 5/6] added a loading screen after login to prevent the user changing pages if not loaded, avoiding status 401 errors --- src/Components/LoginModal.js | 31 +++++++++++++++---- .../PanelSolicitarContaProfessor.js | 6 ++-- .../UploadPageComponents/ModalCancelar.js | 4 +-- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js index 3f3ea697..f1db5fcb 100644 --- a/src/Components/LoginModal.js +++ b/src/Components/LoginModal.js @@ -26,6 +26,7 @@ import {Store} from '../Store.js' import Snackbar from '@material-ui/core/Snackbar'; import MuiAlert from '@material-ui/lab/Alert'; import {authentication} from './HelperFunctions/getAxiosConfig' +import LoadingSpinner from './LoadingSpinner.js' const StyledLogin = styled(Modal)` margin : 0 !important; @@ -46,6 +47,7 @@ export default function LoginModal (props){ const {state, dispatch} = useContext(Store) const [snackbarOpened, handleSnackbar] = useState(false) + const [loading, setLoading] = useState(false) const handleCloseSnackbar = (event, reason) => { if (reason === 'clickaway') { @@ -55,6 +57,14 @@ export default function LoginModal (props){ handleSnackbar(false); } + async function sleep(ms){ + setLoading(true) + await new Promise(resolve => setTimeout(resolve, ms)) + props.handleClose(); + props.openSnackbar(); + setLoading(false) + } + function handleSuccess (data) { dispatch ({ type: "USER_LOGGED_IN", @@ -62,8 +72,7 @@ export default function LoginModal (props){ login: data.data } ) - props.handleClose(); - props.openSnackbar(); + sleep(4000) } function handleError (error) { handleSnackbar(true) @@ -99,10 +108,20 @@ export default function LoginModal (props){ }} > <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}> - <LoginContainer handleClose={props.handleClose} - openSignUp={props.openSignUp} - handleLoginInfo={handleLoginInfo} - /> + { + loading ? ( + <div style={{backgroundColor: 'white', padding: '10px'}}> + <LoadingSpinner text={'Carregando...'} /> + </div> + ) + : + ( + <LoginContainer handleClose={props.handleClose} + openSignUp={props.openSignUp} + handleLoginInfo={handleLoginInfo} + /> + ) + } </Zoom> </StyledLogin> diff --git a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js index c631e97d..6a7aa888 100644 --- a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js +++ b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js @@ -34,7 +34,7 @@ export default function TabPanelSolicitarContaProfessor (props) { <div className='card-config'> <div className='content-div'> { - state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected' ? + !state.currentUser.roles.some(role => role.name === "teacher") && ( state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected' ) ? ( <div> <ImageDiv/> @@ -60,11 +60,11 @@ export default function TabPanelSolicitarContaProfessor (props) { { state.currentUser.submitter_request === 'requested' ? ( - <span>Requested</span> + <h1>A sua conta de Professor foi solicitada</h1> ) : ( - <span>Professor</span> + <h1>Você já possui uma conta de Professor</h1> ) } </> diff --git a/src/Components/UploadPageComponents/ModalCancelar.js b/src/Components/UploadPageComponents/ModalCancelar.js index 9616436b..fcfbc9b2 100644 --- a/src/Components/UploadPageComponents/ModalCancelar.js +++ b/src/Components/UploadPageComponents/ModalCancelar.js @@ -126,9 +126,9 @@ const Container = styled.div` border-radius : 4px; 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); - @media screen and (max-width : 899px) { + @media screen and (max-width : 599px) { width : 100%; - height : 100%; + height : 40%; } ` const StyledButton = styled(Button)` -- GitLab From ab809f104ec08c8e3195916606930c0f66686121 Mon Sep 17 00:00:00 2001 From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br> Date: Tue, 4 May 2021 14:07:04 -0300 Subject: [PATCH 6/6] Fixed the loading screen not blocking handleClose outside of the login area --- src/Components/LoginModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js index f1db5fcb..627d2da7 100644 --- a/src/Components/LoginModal.js +++ b/src/Components/LoginModal.js @@ -100,7 +100,7 @@ export default function LoginModal (props){ aria-describedby="transition-modal-description" open={props.open} centered="true" - onClose={props.handleClose} + onClose={() => {if (!loading) props.handleClose()}} closeAfterTransition BackdropComponent={Backdrop} BackdropProps={{ -- GitLab