Group modules finished

frontend/src/components/common/CustomComponentForAPI.js

@@ -213,10 +213,14 @@ class CustomComponentForAPI extends Component {
    * Get the data that was read from the api given the `propName`
    *
    * @param {string} propName
+   * @param {boolean} [returnLatest=true] Should the lastest data from read, create or update response be returned?
    * @returns {Any}
    * @memberof CustomComponentForAPI
    */
-  getReadData(propName) {
+  getReadData(propName, returnLatest = true) {
+    if (!returnLatest) {
+      return this.props[propName].readSucceeded.data;
+    }
     return this.getReadDataAndTime(propName).data;
   }
 

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

@@ -29,12 +29,9 @@ function renderCore(rawModelData, classes, outsideData) {
 
 class CountryDri extends Module {
   customRender() {
-    const countryDriItems = this.getReadData("countryDri");
-    const { countries, classes } = this.props;
-
-    const outsideData = {
-      countries
-    };
+    const countryDriItems = this.getReadData("countryDri", false),
+      { countries, classes } = this.props,
+      outsideData = { countries };
 
     return (
       <ModuleGroupWrapper
@@ -42,8 +39,8 @@ class CountryDri extends Module {
         endPoint={"countryDri"}
         editor={CountryDriEditor}
         invalidateGroup={this.props.invalidateData}
+        defaultModelData={{ countries: [this.props.countryId], importance_level: "-" }}
         propsForEditor={{
-          rawModelData: { countries: [this.props.countryId], importance_level: "-" },
           outsideData: outsideData,
           __apiAttr: this.props.countryId,
         }}

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

@@ -44,13 +44,12 @@ function renderCore(rawModelData, classes, outsideData) {
 
 class CountryScholarships extends Module {
   customRender() {
-    const countryScholarshipsItems = this.getReadData("countryScholarships");
-    const { countries, currencies, classes } = this.props;
-
-    const outsideData = {
-      countries,
-      currencies
-    };
+    const countryScholarshipsItems = this.getReadData("countryScholarships", false),
+      { countries, currencies, classes } = this.props,
+      outsideData = {
+        countries,
+        currencies
+      };
 
     return (
       <ModuleGroupWrapper
@@ -58,8 +57,8 @@ class CountryScholarships extends Module {
         endPoint={"countryScholarship"}
         editor={CountryScholarshipEditor}
         invalidateGroup={this.props.invalidateData}
+        defaultModelData={{ countries: [this.props.countryId], importance_level: "-", currency: "EUR", obj_moderation_level: 0 }}
         propsForEditor={{
-          rawModelData: { countries: [this.props.countryId], importance_level: "-", currency: "EUR", obj_moderation_level: 0 },
           outsideData: outsideData,
           __apiAttr: this.props.countryId,
         }}

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

@@ -34,9 +34,8 @@ class UniversityDri extends Module {
 
   customRender() {
     const { universities, classes } = this.props,
-      outsideData = { universities };
-
-    const univDriItems = this.getReadData("universityDri");
+      outsideData = { universities },
+      univDriItems = this.getReadData("universityDri", false);
 
     return (
       <ModuleGroupWrapper
@@ -44,8 +43,8 @@ class UniversityDri extends Module {
         endPoint={"universityDri"}
         editor={UniversityDriEditor}
         invalidateGroup={this.props.invalidateData}
+        defaultModelData={{ universities: [this.props.univId], importance_level: "-" }}
         propsForEditor={{
-          rawModelData: { universities: [this.props.univId], importance_level: "-" },
           outsideData: outsideData,
           __apiAttr: this.props.univId,
         }}

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

@@ -39,13 +39,12 @@ function renderCore(rawModelData, classes, outsideData) {
 
 class UniversityScholarships extends Module {
   customRender() {
-    const univScholarshipsItems = this.getReadData("universityScholarships");
-    const { universities, currencies, classes } = this.props;
-
-    const outsideData = {
-      universities,
-      currencies
-    };
+    const univScholarshipsItems = this.getReadData("universityScholarships", false),
+      { universities, currencies, classes } = this.props,
+      outsideData = {
+        universities,
+        currencies
+      };
 
     return (
       <ModuleGroupWrapper
@@ -53,8 +52,8 @@ class UniversityScholarships extends Module {
         endPoint={"universityScholarship"}
         editor={UniversityScholarshipEditor}
         invalidateGroup={this.props.invalidateData}
+        defaultModelData={{ universities: [this.props.univId], importance_level: "-", currency: "EUR", obj_moderation_level: 0 }}
         propsForEditor={{
-          rawModelData: { universities: [this.props.univId], importance_level: "-", currency: "EUR", obj_moderation_level: 0 },
           outsideData: outsideData,
           __apiAttr: this.props.univId,
         }}

frontend/src/components/university/modules/common/History.js

@@ -38,7 +38,7 @@ import getActions from "../../../../redux/api/getActions";
 class History extends Component {
   // Store the version that is being viewed
   state = {
-    versionInView: 0
+    versionInView: 1
   }
 
   /**

frontend/src/components/university/modules/common/ModuleGroupWrapper.js

@@ -17,32 +17,13 @@ import AddIcon from "@material-ui/icons/Add";
 
 import green from "@material-ui/core/colors/green";
 
-const styles = theme => ({
-  root: {
-    paddingTop: 3 * theme.spacing.unit,
-    paddingBottom: 3 * theme.spacing.unit,
-    paddingRight: 5 * theme.spacing.unit,
-    paddingLeft: 5 * theme.spacing.unit,
-    marginBottom: 2 * theme.spacing.unit,
-    flexGrow: 1,
-  },
-  green: {
-    color: green.A200,
-  },
-  button: {
-    width: 5 * theme.spacing.unit,
-    height: 5 * theme.spacing.unit,
-    boxShadow: "none",
-    marginBottom: theme.spacing.unit,
-  },
-});
-
-
-
 
 /**
+ * Class for wrapping modules that consist of multiple similar stuff.
+ *
+ * It basically enables add feature.
+ *
  * @class ModuleGroupWrapper
- * @extends {CustomComponentForAPI}
  * @extends React.Component
  */
 class ModuleGroupWrapper extends Component {
@@ -50,28 +31,41 @@ class ModuleGroupWrapper extends Component {
     editorOpen: false,
   };
 
-  handleOpenEditor = () => {
+  /**
+   * Opens the editor panel
+   *
+   * @memberof ModuleGroupWrapper
+   */
+  openEditorPanel() {
     this.setState({ editorOpen: true });
   }
 
-  closeEditorPanel = (somethingWasSaved = false) => {
+  /**
+   * Close the editor panel and reset the data if there had been a save.
+   *
+   * @param {boolean} [somethingWasSaved=false]
+   * @memberof ModuleGroupWrapper
+   */
+  closeEditorPanel(somethingWasSaved = false) {
     this.setState({ editorOpen: false });
     if (somethingWasSaved) {
       this.props.invalidateGroup();
     }
-  };
+  }
 
   render() {
-    const { classes, groupTitle, endPoint } = this.props,
+    const { classes, groupTitle, endPoint, defaultModelData } = this.props,
       userCanPostTo = getLatestReadDataFromStore("userDataSpecific").owner_can_post_to,
       disabled = userCanPostTo.indexOf(endPoint) < 0;
-    return <></>; // TODO NOW remove
+
     return (
       <Paper className={classes.root}>
         <this.props.editor
           {...this.props.propsForEditor}
+          rawModelData={defaultModelData}
           open={this.state.editorOpen}
-          closeEditorPanel={this.closeEditorPanel}
+          closeEditorPanel={(somethingWasSaved) => this.closeEditorPanel(somethingWasSaved)}
+          subscribeToModuleWrapper={() => { }}
         />
         <Grid container spacing={8} alignItems='center'>
 
@@ -88,7 +82,7 @@ class ModuleGroupWrapper extends Component {
                   disabled={disabled}
                   style={disabled ? {} : { backgroundColor: green.A700 }}
                   className={classes.button}
-                  onClick={this.handleOpenEditor}
+                  onClick={() => this.openEditorPanel()}
                 >
                   <AddIcon />
                 </Fab>
@@ -105,15 +99,38 @@ class ModuleGroupWrapper extends Component {
 }
 
 ModuleGroupWrapper.propTypes = {
+  classes: PropTypes.object.isRequired,
   groupTitle: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
   endPoint: PropTypes.string.isRequired,
   invalidateGroup: PropTypes.func.isRequired,
-  classes: PropTypes.object.isRequired,
-  propsForEditor: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
+  propsForEditor: PropTypes.shape({
+    outsideData: PropTypes.object,
+    __apiAttr: PropTypes.string,
+  }),
+  defaultModelData: PropTypes.object.isRequired, // to populate the fields of the form with default values
 };
 
 
+const styles = theme => ({
+  root: {
+    paddingTop: 3 * theme.spacing.unit,
+    paddingBottom: 3 * theme.spacing.unit,
+    paddingRight: 5 * theme.spacing.unit,
+    paddingLeft: 5 * theme.spacing.unit,
+    marginBottom: 2 * theme.spacing.unit,
+    flexGrow: 1,
+  },
+  green: {
+    color: green.A200,
+  },
+  button: {
+    width: 5 * theme.spacing.unit,
+    height: 5 * theme.spacing.unit,
+    boxShadow: "none",
+    marginBottom: theme.spacing.unit,
+  },
+});
 
 export default compose(
   withStyles(styles, { withTheme: true }),

frontend/src/components/university/modules/common/ModuleWrapper.js

@@ -26,7 +26,6 @@ import { getLatestReadDataFromStore } from "../../../../redux/api/utils";
  * displaying of certain attributes, etc.
  *
  * @class ModuleWrapper
- * @extends {CustomComponentForAPI}
  * @extends React.Component
  */
 class ModuleWrapper extends Component {

frontend/src/components/university/modules/common/moduleWrapperFunctions/getVersionTooltipAndClass.js

@@ -6,12 +6,12 @@ export default function getVersionTooltipAndClass(nbVersions) {
     };
   }
 
-  if (nbVersions == 0) {
+  if (nbVersions <= 1) {
     return {
       versionTooltip: "Il n'existe pas d'autres versions de ce contenu.",
       versionClass: "disabled"
     };
-  } else if (nbVersions == 1) {
+  } else if (nbVersions == 2) {
     return {
       versionTooltip: "Le contenu actuel constitue la première mise à jour de ce module, vous pouvez voir la version initiale en cliquant sur cette icône.",
       versionClass: "green"
@@ -22,4 +22,4 @@ export default function getVersionTooltipAndClass(nbVersions) {
       versionClass: "green"
     };
   }
-}
\ No newline at end of file
+}

frontend/src/components/university/modules/common/moduleWrapperFunctions/renderFirstRow.js

@@ -71,5 +71,3 @@ export default function renderFirstRow(userCanModerate) {
     </Grid>
   );
 }
-
-// TODO NOW fix positioning of badges.