Skip to content
GitLab
Commit 4a42eb71 authored by Solene Aboud's avatar Solene Aboud Committed by Florent Chehab
Browse files

feat(recommendation list): frontend WIP

parent 8c211bfb
Pipeline #38348 passed with stages
in 3 minutes and 12 seconds
Hide whitespace changes
Inline Side-by-side
frontend/src/components/app/App.js
View file @ 4a42eb71
......@@ -35,6 +35,7 @@ import PageUniversity from "../pages/PageUniversity";
import PageSearch from "../pages/PageSearch";
import PageSettings from "../pages/PageSettings";
import PageUser from "../pages/PageUser";
import PageLists from "../pages/PageLists";
const DRAWER_WIDTH = 240;
......@@ -120,6 +121,7 @@ class App extends CustomComponentForAPI {
<Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} />
<Route path="/app/settings" component={PageSettings} />
<Route path="/app/lists" component={PageLists} />
<Route
exact
path="/app/university/"
......
frontend/src/components/app/listItems.js
View file @ 4a42eb71
......@@ -58,12 +58,14 @@ export const mainListItems = (
export const secondaryListItems = (
<>
<ListItem button>
<ListItemIcon>
<AssignmentIcon />
</ListItemIcon>
<ListItemText primary="Mes listes" />
</ListItem>
<NavLink to={"/app/lists"} style={{ textDecoration: "none" }}>
<ListItem button>
<ListItemIcon>
<AssignmentIcon />
</ListItemIcon>
<ListItemText primary="Mes listes" />
</ListItem>
</NavLink>
{/* eslint-disable-next-line no-undef */}
<NavLink to={`/app/user/${__AppUserId}`} style={{ textDecoration: "none" }}>
......
frontend/src/components/pages/PageLists.js 0 → 100644
View file @ 4a42eb71
import React from "react";
import PropTypes from "prop-types";
import compose from "recompose/compose";
import { connect } from "react-redux";
import withStyles from "@material-ui/core/styles/withStyles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import AddIcon from "@material-ui/icons/Add";
import Fab from "@material-ui/core/Fab";
import Markdown from "../common/Markdown";
import CustomComponentForAPI from "../common/CustomComponentForAPI";
import getActions from "../../redux/api/getActions";
import Recommendation from "../recommendation/Recommendation";
const source = "Ici vous pourrez bientôt voir toutes vos listes d'universités";
const RECOMMENDATIONS = {
content: [
{
name: "List Test 1",
public: true,
user: "UserTest",
descriptive: { id: "1", type: "field", text: "\n **Ajouter** un descriptif " },
content: [
{
type: "univ",
id: "66",
name: "EPFL",
city: "Lausanne",
country: "Suisse",
comment: { id: "2", type: "field", text: "\n Ajouter un commentaire" }
},
{
type: "univ",
id: "33",
name: "Seoul National University Of Science And Technology Seoultech",
city: "Seoul",
country: "République de Corée",
comment: { id: "1", type: "comment", text: "\n Commentaire pour l'**université de Séoul**. Ça à l'air cool comme univ ! :) " }
}
]
},
{
name: "List Test 2",
public: false,
user: "me",
descriptive: { id: "1", type: "comment", text: "\n Ceci est ma listes d'universités pour mes départs en A19 " },
content: [
{
type: "univ",
id: "66",
name: "EPFL",
city: "Lausanne",
country: "Suisse",
comment: { id: "2", type: "comment", text: "\n Une super **bonne univ**, mais il faudra **bosser**.... :/ " }
},
{
type: "univ",
id: "33",
name: "Seoul National University Of Science And Technology Seoultech",
city: "Seoul",
country: "République de Corée",
comment: { id: "1", type: "fiel", text: "" }
}
]
}
]
};
/**
* Component holding the page with the lists of universities
*
* @class PageLists
* @extends {React.Component}
*/
class PageLists extends CustomComponentForAPI {
customRender() {
const { theme } = this.props;
const { classes } = this.props;
return (
<Paper style={theme.myPaper}>
<Typography variant="h4" gutterBottom>
Mes Listes
</Typography>
<Markdown source={source} />
{RECOMMENDATIONS.content.map((el, idx) => <div key={idx}> <Recommendation list={ el } /> </div> )}
<Fab color="primary" className={classes.fab}>
<AddIcon/>
</Fab>
</Paper>
);
}
}
const mapStateToProps = (state) => {
return {
universities: state.api.universitiesAll,
};
};
const mapDispatchToProps = (dispatch) => {
return {
api: {
universities: () => dispatch(getActions("universities").readAll()),
},
};
};
PageLists.propTypes = {
theme: PropTypes.object.isRequired,
};
const styles = theme => ({
fab: {
margin: theme.spacing.unit,
position: "fixed",
bottom: "1rem",
right: "1rem",
},
extendedIcon: {
marginRight: theme.spacing.unit,
},
});
export default compose(
withStyles(styles, { withTheme: true }),
connect(mapStateToProps, mapDispatchToProps)
)(PageLists);
frontend/src/components/pages/PageUniversity.js
View file @ 4a42eb71
......@@ -111,7 +111,7 @@ function renderFirstTimeHere() {
return (
<Paper>
<Typography >
C'est la première fois que vous utilisé cet onglet et vous n'avez pas encore util....
C'est la première fois que vous utilisez cet onglet et vous n'avez pas encore util....
</Typography>
</Paper>
);
......
frontend/src/components/recommendation/Recommendation.js 0 → 100644
View file @ 4a42eb71
import React from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles";
import { Paper } from "@material-ui/core";
import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add";
// import {compose} from "redux";
// import getActions from "../../redux/api/getActions";
// import {connect} from "react-redux";
import TextBlock from "../recommendation/TextBlock";
import UnivBlock from "../recommendation/UnivBlock";
import RecommendationEditor from "../recommendation/RecommendationEditor";
import CustomComponentForAPI from "../common/CustomComponentForAPI";
// import editorStyle from "../university/editors/common/editorStyle.js";
// const RECOMMENDATION = {
// name: "List Test 1",
// public: true,
// user: "UserTest",
// descriptive: { id: "1", type: "field", text: "\n **Ajouter** un descriptif " },
// content: [
// {
// type: "univ",
// id: "66",
// name: "EPFL",
// city: "Lausanne",
// country: "Suisse",
// comment: { id: "2", type: "field", text: "\n Ajouter un commentaire" }
// },
// {
// type: "univ",
// id: "33",
// name: "Seoul National University Of Science And Technology Seoultech",
// city: "Seoul",
// country: "République de Corée",
// comment: { id: "1", type: "comment", text: "\n Commentaire pour l'**université de Séoul**. Ça à l'air cool comme univ ! :) " }
// }
// ]
// };
/**
* Liste de blocks
*
* @class Recommendation
* @extends {React.Component}
*/
class Recommendation extends CustomComponentForAPI {
state = {editorOpen: false};
openEditorPanel() {
this.setState({editorOpen: true});
}
closeEditorPanel() {
this.setState({editorOpen: false});
}
componentDidUpdate(prevProps, prevState, snapshot) {
super.componentDidUpdate(prevProps, prevState, snapshot);
}
customRender() {
const {list, classes} = this.props,
recommendationModelData = list;
return (
<Paper style={{ color: "white", margin: "1em", padding: "1em" }}>
<h2>
{list.name}
</h2>
<p>
{list.public ? "Liste publique" : "liste privée"} créée par : {list.user}
</p>
<div id="Descriptive">
<TextBlock id={list.descriptive.id} type={list.descriptive.type} text={list.descriptive.text} />
</div>
{list.content.map((el, idx) => <div key={idx}> <UnivBlock univ={el} /> </div>)}
<Button variant={"contained"}
color={"secondary"}
onClick={() => this.openEditorPanel()}>
<AddIcon className={classes.rightIcon}/>
</Button>
<RecommendationEditor open={this.state.editorOpen}
closeEditorPanel={() => this.closeEditorPanel()}
rawModelData={recommendationModelData}/>
</Paper>
);
}
}
Recommendation.propTypes = {
classes: PropTypes.object.isRequired,
list: PropTypes.object.isRequired,
};
Recommendation.defaultProps = {
};
const styles = theme => ({
root: {
maxWidth: 650,
marginLeft: "auto",
marginRight: "auto",
flexGrow: 1,
},
header: {
display: "flex",
alignItems: "center",
height: 50,
paddingLeft: theme.spacing.unit * 4,
marginBottom: 20,
backgroundColor: theme.palette.background.default,
},
});
export default withStyles(styles, { withTheme: true })(Recommendation);
frontend/src/components/recommendation/RecommendationEditor.js 0 → 100644
View file @ 4a42eb71
import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import compose from "recompose/compose";
import {connect} from "react-redux";
import {withSnackbar} from "notistack";
import Form from "../form/Form";
import editorStyle from "../editor/editorStyle";
import Editor from "../editor/Editor";
import getMapStateToPropsForEditor from "../editor/getMapStateToPropsForEditor";
import getMapDispatchToPropsForEditor from "../editor/getMapDispatchToPropsForEditor";
import BooleanField from "../form/fields/BooleanField";
const styles = theme => ({
...editorStyle(theme)
});
class RecommendationForm extends Form {
// /**
// * @override
// */
// formLevelErrors = [
// new FormLevelError(
// ["error_recommendation"],
// "Error in Recommendation Form")
// ];
render() {
return (
<>
<BooleanField label={"Liste Publique ou privée ?"}
{...this.getReferenceAndValue("public")}
required={true}
labelIfTrue="(La liste est publique)"
labelIfFalse="(La liste est privée)"/>
</>
);
}
}
class RecommendationEditor extends Editor {
renderForm() {
return <RecommendationForm
modelData={this.props.rawModelData}
ref={this.formRef}
/>;
}
}
export default compose(
withSnackbar,
withStyles(styles, {withTheme: true}),
connect(
getMapStateToPropsForEditor("users"),
getMapDispatchToPropsForEditor("users")
)
)(RecommendationEditor);
frontend/src/components/recommendation/TextBlock.js 0 → 100644
View file @ 4a42eb71
import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import { Paper } from "@material-ui/core";
import TextField from "@material-ui/core/TextField";
import Markdown from "../common/Markdown";
import PropTypes from "prop-types";
/**
* Bloc de commentaire Markdown
*
* @class TextBlock
* @extends React.Component
*/
class TextBlock extends React.Component {
render() {
let { id , type , text } = this.props;
return (
<Paper style={{ color: "white", margin: "1em", padding: "1em" }}>
{type === "comment" ? <Markdown id={id} source={text} /> : <TextField style={{ margin: 8 }} placeholder="Vous pouvez ajouter un commentaire ici" fullWidth margin="normal" InputLabelProps={{ shrink: true, }} />}
</Paper>
);
}
}
TextBlock.propTypes = {
id: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
};
TextBlock.defaultProps = {
};
const styles = theme => ({
root: {
maxWidth: 650,
marginLeft: "auto",
marginRight: "auto",
flexGrow: 1,
},
header: {
display: "flex",
alignItems: "center",
height: 50,
paddingLeft: theme.spacing.unit * 4,
marginBottom: 20,
backgroundColor: theme.palette.background.default,
},
});
export default withStyles(styles, { withTheme: true })(TextBlock);
frontend/src/components/recommendation/UnivBlock.js 0 → 100644
View file @ 4a42eb71
import React from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles";
import { Paper } from "@material-ui/core";
import Markdown from "../common/Markdown";
import TextBlock from "../recommendation/TextBlock.js";
/**
* Bloc de commentaire Markdown
*
* @class UnivBlock
* @extends CustomComponentForAPI
*/
class UnivBlock extends React.Component {
render() {
let { univ } = this.props,
comment = univ.comment,
link = `/app/university/${univ.id}`,
source = `# [${univ.name}](${link}) \n ${univ.city}, ${univ.country}`;
return (
<Paper style={{ color: "white", margin: "1em", padding: "1em" }}>
<Markdown source={source} />
<TextBlock id={comment.id} type={comment.type} text={comment.text} />
</Paper>
);
}
}
UnivBlock.propTypes = {
// coucou: PropTypes.string.isRequired,
univ: PropTypes.object.isRequired,
};
UnivBlock.defaultProps = {
};
const styles = theme => ({
root: {
maxWidth: 650,
marginLeft: "auto",
marginRight: "auto",
flexGrow: 1,
},
header: {
display: "flex",
alignItems: "center",
height: 50,
paddingLeft: theme.spacing.unit * 4,
marginBottom: 20,
backgroundColor: theme.palette.background.default,
},
});
export default withStyles(styles, { withTheme: true })(UnivBlock);
Supports Markdown
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