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] 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