Work on scholarship and tweaks

frontend/src/components/university/modules/GenericModule.js

@@ -11,6 +11,7 @@ import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import Chip from '@material-ui/core/Chip';
 import Avatar from '@material-ui/core/Avatar';
+import Divider from '@material-ui/core/Divider';
 
 import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
 import CreateIcon from '@material-ui/icons/Create';
@@ -131,7 +132,7 @@ function renderFirstRow() {
 
   return (
     <Grid container spacing={8}>
-      <Grid item xs>
+      <Grid item xs style={{paddingBottom: theme.spacing.unit}}>
         {renderTitle.bind(this)()}
         {renderUpdateInfo.bind(this)()}
       </Grid>
@@ -173,7 +174,7 @@ function renderFirstRow() {
 }
 
 function renderUsefulLinks() {
-  const { classes, usefulLinks } = this.props;
+  const { classes, usefulLinks, theme} = this.props;
   const nbItems = usefulLinks.length;
   if (nbItems == 0) {
     return (<div></div>)
@@ -181,7 +182,7 @@ function renderUsefulLinks() {
   const s = nbItems > 1 ? "s" : "";
   return (
     <div>
-      <Typography variant='caption'> Source{s} :</Typography>
+      <Typography variant='caption' style={{paddingTop:2*theme.spacing.unit}}> Source{s} :</Typography>
       <div className={classes.rootLinks}>
         {
           usefulLinks.map((el, index) => {
@@ -228,7 +229,7 @@ class GenericModule extends React.Component {
         <FullScreenDialog open={this.state.fullScreenDialogOpen} handleClose={this.handleCloseFullScreenDialog} />
         <Paper className={classes.root} square={true}>
           {renderFirstRow.bind(this)()}
-
+          
           <div>
             {this.props.children}
           </div>

frontend/src/components/university/modules/Scholarship.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+
+import Markdown from '../../shared/Markdown';
+
+
+import Typography from '@material-ui/core/Typography';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import ArrowBackwardIosIcon from '@material-ui/icons/ArrowBackIos';
+import PersonIcon from '@material-ui/icons/Person';
+
+import MyComponent from '../../MyComponent';
+import TextLink from '../../other/TextLink';
+import GenericModule from './GenericModule';
+import Grid from '@material-ui/core/Grid';
+import Divider from '@material-ui/core/Divider';
+
+
+const styles = theme => {
+  const textAmountsVariant = 'title';
+  const textAmountsColor = theme.palette.text.secondary;
+  return {
+    content: {
+      display: "flex",
+      alignItems: "center",
+    },
+    textAmount: {
+      color: theme.typography.body1.color,
+      fontSize: theme.typography[textAmountsVariant].fontSize,
+      fontWeight: theme.typography.fontWeightMedium
+    },
+    icon: {
+      paddingRight: 0.5 * theme.spacing.unit,
+      paddingLeft: 0.5 * theme.spacing.unit,
+      fontSize: theme.typography[textAmountsVariant].fontSize,
+      color: theme.palette.text.primary
+    },
+    frequency: {
+      color: theme.palette.text.primary,
+      fontSize: theme.typography[textAmountsVariant].fontSize,
+      paddingLeft: theme.spacing.unit
+    },
+    item: {
+      color: theme.palette.text.secondary,
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }
+};
+
+// function renderTypography(str) {
+//   return (
+//     <Typography variant='title' color="textSecondary">str</Typography>
+//   );
+// }
+
+// function renderAmount(amount, currency) {
+//   if (currency == 'EUR') {
+//     return String(amount) + '€';
+//   } else {
+//     return String(amount) + ' ' + currency;
+//   }
+// }
+
+// function renderAmounts() {
+//   const { amountMin, amountMax, currency, frequency, theme } = this.props;
+
+//   let output = renderAmount(amountMin, currency) + ' – ' + renderAmount(amountMax, currency);
+//   if (amountMin == amountMax) {
+//     return (
+//       renderTypography(renderAmount(amountMin, currency))
+//       renderTypography('/semestre')
+//     )
+//   } else {
+//     return (
+//       <div>
+
+//       </div>
+//     )
+//   }
+
+// if (currency != 'EUR') {
+//   output += ' (~ ' + renderAmount(amountMin, 'EUR') + ' – ' + renderAmount(amountMax, 'EUR') + ')';
+// }
+// output += ' /'+frequency.toLowerCase();
+// return output;
+// if (amountMin == amountMax) {
+//   return (
+//     <Typography variant='title' color="textSecondary">{renderAmount(amountMin, amountCurrency)}</Typography>
+//   )
+// } else {
+//   return (
+//     <Typography variant='caption'>Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography>
+//   )
+// }
+
+// }
+
+
+class Scholarship extends React.Component {
+  render() {
+    const { classes, theme } = this.props;
+    const comment = 'Mon commentaire des familles';
+    return (
+      <GenericModule title={"Bourse Mermoz"} usefulLinks={[{ description: "ENT", url: "https://epfl.ch" }]}>
+        <Typography className={classes.item} variant='headline'> Avantage financier : </Typography>
+        <Typography className={classes.textAmount} >300 CHF – 400 CHF /mois</Typography>
+        <Typography variant='caption' ><em>(≈ 300€ – 400€ /mois)</em></Typography>
+        <div style={{ height: 2 * theme.spacing.unit }} />
+        <Typography className={classes.item} variant='headline' > Autres avantages : </Typography>
+        <Markdown source={comment} />
+        <Typography className={classes.item} variant='headline'> Informations complémentaires : </Typography>
+        <Markdown source={comment} />
+      </GenericModule >
+    )
+  }
+}
+
+Scholarship.defaultProps = {
+  amountMin: 0,
+  amountMax: 200,
+  frequency: 'Semestre',
+  currency: 'CHF',
+};
+
+export default withStyles(styles, { withTheme: true })(Scholarship);

frontend/src/components/university/tabs/ScholarshipsTab.js

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import MyComponent from '../../MyComponent';
 
+import GenericGroupModules from '../modules/GenericGroupModule';
+import Scholarship from '../modules/Scholarship';
+
 const styles = theme => ({
   root: {},
 });
@@ -12,7 +15,11 @@ class ScholarshipsTab extends MyComponent {
   myRender() {
     return (
       <div>
-        Toutes les informations sur les bourses
+        <GenericGroupModules groupTitle={"Bourse(s) qui concerne 'le pays'"}>
+          <Scholarship/>
+          <Scholarship/>
+        </GenericGroupModules>
+        <GenericGroupModules groupTitle={"Bourse(s) qui concerne l'université"} />
       </div>
     );
   }