History close to working

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

@@ -20,7 +20,7 @@ import {
 import renderUsefulLinks from './genericModuleFunctions/renderUsefulLinks';
 import renderFirstRow from './genericModuleFunctions/renderFirstRow';
 import renderTitle from './genericModuleFunctions/renderTitle';
-
+import History from './History';
 
 const styles = theme => ({
   root: {
@@ -73,27 +73,36 @@ const styles = theme => ({
 
 class GenericModule extends MyComponent {
   state = {
-    fullScreenDialogOpen: false,
+    editorOpen: false,
+    historyOpen: false,
+  };
+
+  handleOpenEditor = () => {
+    this.setState({ editorOpen: true });
   };
 
-  handleClickOpenFullScreenDialog = () => {
-    this.setState({ fullScreenDialogOpen: true });
+  handleCloseEditor = () => {
+    this.setState({ editorOpen: false });
   };
 
-  handleCloseFullScreenDialog = () => {
-    this.setState({ fullScreenDialogOpen: false });
+  handleCloseHistory = () => {
+    this.setState({ historyOpen: false });
   };
 
-  renderTitle = () => (
+  handleOpenHistory = () => {
+    this.setState({ historyOpen: true });
+  };
+
+  renderTitle = (rawModelData) => (
     <div>
-      {renderTitle.bind(this)()}
+      {renderTitle(rawModelData, this.props.classes, this.props.buildTitle)}
     </div>
   )
 
-  renderCore = () => (
+  renderCore = (rawModelData) => (
     <div>
-      {this.props.renderCore(this.props.rawModelData, this.props.coreClasses)}
-      {renderUsefulLinks.bind(this)()}
+      {this.props.renderCore(rawModelData, this.props.coreClasses)}
+      {renderUsefulLinks(rawModelData, this.props.classes, this.props.theme)}
     </div>
   )
   myRender() {
@@ -101,14 +110,19 @@ class GenericModule extends MyComponent {
     return (
       <div>
         <this.props.editor
-          open={this.state.fullScreenDialogOpen}
-          handleCloseEditor={this.handleCloseFullScreenDialog}
+          open={this.state.editorOpen}
+          handleCloseEditor={this.handleCloseEditor}
           modelData={this.props.parseRawModelData(this.props.rawModelData)}
           userData={this.props.userDataEl}
         />
+        <History
+          factory={this}
+          open={this.state.historyOpen}
+          handleCloseHistory={this.handleCloseHistory}
+        />
         <Paper className={classes.root} square={true}>
           {renderFirstRow.bind(this)()}
-          {this.renderCore()}
+          {this.renderCore(this.props.rawModelData, this.props.coreClasses)}
         </Paper>
       </div>
     )

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

+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '@material-ui/core/styles/withStyles';
+import compose from 'recompose/compose';
+import { connect } from "react-redux";
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import Paper from '@material-ui/core/Paper';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import CloseIcon from '@material-ui/icons/Close';
+import Slide from '@material-ui/core/Slide';
+
+import MobileStepper from '@material-ui/core/MobileStepper';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+
+import { versionsFetchData } from '../../../generated/actions';
+import Loading from '../../other/Loading';
+
+import editorStyle from './editors/editorStyle';
+import _ from 'lodash';
+
+const styles = theme => ({
+  ...editorStyle(theme)
+});
+
+function Transition(props) {
+  return <Slide direction="up" {...props} />;
+}
+
+class History extends React.Component {
+  state = {
+    versionInView: 0
+  }
+
+  handleGoBy(step) {
+    this.setState({ versionInView: this.state.versionInView + step })
+  }
+
+  componentWillMount() {
+    this.newFactory = _.cloneDeep(this.props.factory);
+  }
+
+  getVersions() {
+    if (!this.props.versions.fetched.fetchedAt) {
+      return null;
+    } else {
+      const h = this.props.versions.fetched.data;
+      return h.map((el) => { return el.data }).slice(1);
+    }
+  }
+
+  getContentTypeAndId() {
+    const { rawModelData } = this.props.factory.props;
+    const { content_type_id, id } = rawModelData;
+    return { content_type_id, id };
+  }
+
+  dataIsReady() {
+    const { content_type_id, id } = this.getContentTypeAndId();
+    const versions = this.getVersions();
+    if (!versions) {
+      return false;
+    }
+    const lastVersion = versions[0];
+    if (versions && lastVersion.content_type_id == content_type_id && lastVersion.id == id) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.open) {
+      if (!this.dataIsReady() && !this.props.versions.isLoading) {
+        const { content_type_id, id } = this.getContentTypeAndId();
+        console.log(content_type_id, id)
+        this.props.fetchVersions(content_type_id, id);
+      }
+    }
+  }
+
+  renderHistory() {
+
+    if (this.props.versions.fetchHasError.status) {
+      return <p>Sorry! There was an error loading the history</p>;
+    }
+
+    if (!this.dataIsReady()) {
+      return <Loading />;
+    }
+    const theme = this.props;
+    const versions = this.getVersions()
+    const activeStep = this.state.versionInView;
+    const maxSteps = versions.length;
+    console.log(versions[activeStep].comment);
+    Object.assign(this.newFactory.props.rawModelData, versions[activeStep])
+    console.log(this.newFactory.props.rawModelData.comment);
+    return (
+      <div>
+        <MobileStepper
+          steps={versions.length}
+          position="static"
+          activeStep={activeStep}
+          // className={classes.mobileStepper}
+          nextButton={
+            <Button color="secondary" size="small" onClick={() => this.handleGoBy(1)} disabled={activeStep >= maxSteps - 1}>
+              Version suivante
+          {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+            </Button>
+          }
+          backButton={
+            <Button color="secondary" size="small" onClick={() => this.handleGoBy(-1)} disabled={activeStep === 0}>
+              {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+              Version précédente
+        </Button>
+          }
+        />
+        <br></br>
+
+        {this.newFactory.renderTitle(this.newFactory.props.rawModelData)}
+        {this.newFactory.renderCore(this.newFactory.props.rawModelData)}
+      </div>
+    )
+  }
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <Dialog
+          fullScreen
+          open={this.props.open}
+          TransitionComponent={Transition}
+        >
+          <AppBar className={classes.appBar} >
+            <Toolbar>
+              <IconButton color="inherit" onClick={() => this.props.handleCloseHistory()} aria-label="Close">
+                <CloseIcon />
+              </IconButton>
+              <Typography variant="title" color="inherit" className={classes.flex}>
+                Parcours de l'historique
+              </Typography>
+            </Toolbar>
+          </AppBar>
+          <Paper className={classes.paper}>
+            {this.props.open ? this.renderHistory() : <div></div>}
+          </Paper>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+History.propTypes = {
+  classes: PropTypes.object.isRequired,
+  factory: PropTypes.object.isRequired,
+};
+
+History.defaultProps = {
+  open: false,
+  handleCloseHistory: () => console.log("Dev forgot something...")
+};
+
+
+const mapStateToProps = (state) => {
+  return {
+    versions: state.versions
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    fetchVersions: (content_type_id, id) => dispatch(versionsFetchData(content_type_id + "/" + id)),
+  };
+};
+
+
+export default compose(
+  withStyles(styles, { withTheme: true }),
+  connect(mapStateToProps, mapDispatchToProps)
+)(History);

frontend/src/components/university/modules/editors/Editor.js

@@ -227,13 +227,16 @@ class Editor extends MyComponent {
 
     if (possibleObjModeration.length > 1) {
       return (
-        <SelectField label={"Niveau de modération pour ce module"}
-          required={true}
-          value={modelData.obj_moderation_level}
-          fieldMapping={"obj_moderation_level"}
-          options={possibleObjModeration}
-          formManager={this}
-        />
+        <div>
+          <Typography variant='caption'>Niveau de modération souhaité (en plus TODO </Typography>
+          <SelectField label={"Niveau de modération pour ce module"}
+            required={true}
+            value={modelData.obj_moderation_level}
+            fieldMapping={"obj_moderation_level"}
+            options={possibleObjModeration}
+            formManager={this}
+          />
+        </div>
       )
     } else {
       return (

frontend/src/components/university/modules/genericModuleFunctions/renderFirstRow.js

@@ -20,8 +20,12 @@ export default function renderFirstRow() {
   const { classes, theme } = this.props;
   const { rawModelData } = this.props;
 
-  const nbVersions = rawModelData.nb_versions;
-  const nbPendingModeration = rawModelData.pending_moderation.length
+  const nbVersions = Math.max(0, rawModelData.nb_versions - 1);
+  const { pending_moderation } = rawModelData;
+  let nbPendingModeration = 0;
+  if (pending_moderation) {
+    nbPendingModeration = pending_moderation.length
+  }
   const readOnly = rawModelData.model_config.read_only;
 
   const { versionTooltip, versionClass } = getVersionTooltipAndClass(nbVersions);
@@ -34,7 +38,7 @@ export default function renderFirstRow() {
   return (
     <Grid container spacing={8}>
       <Grid item xs style={{ paddingBottom: theme.spacing.unit }}>
-        {renderTitle.bind(this)()}
+        {renderTitle(this.props.rawModelData, this.props.classes, this.props.buildTitle)}
         {renderUpdateInfo.bind(this)()}
       </Grid>
       <Grid item xs={4} style={{ textAlign: 'right' }}>
@@ -51,7 +55,7 @@ export default function renderFirstRow() {
 
         <Tooltip title={editTooltip} placement="top">
           <div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip when below is disabled!! */}
-            <IconButton aria-label="Éditer" className={classes.button} disabled={editClass == 'disabled'} onClick={this.handleClickOpenFullScreenDialog}>
+            <IconButton aria-label="Éditer" className={classes.button} disabled={editClass == 'disabled'} onClick={this.handleOpenEditor}>
               <CreateIcon className={classes[editClass]} />
             </IconButton>
           </div>
@@ -60,7 +64,7 @@ export default function renderFirstRow() {
         <Tooltip title={versionTooltip} placement="top">
           <div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip when below is disabled!! */}
             <MyBadge classes={{ badge: classes.badge }} badgeContent={nbVersions} color="secondary">
-              <IconButton aria-label="Restorer" disabled={versionClass == 'disabled'} className={classes.button}>
+              <IconButton aria-label="Restorer" disabled={versionClass == 'disabled'} className={classes.button} onClick={this.handleOpenHistory}>
                 <SettingsBackRestoreIcon className={classes[versionClass]} />
               </IconButton>
             </MyBadge>

frontend/src/components/university/modules/genericModuleFunctions/renderTitle.js

@@ -3,11 +3,10 @@ import NotificationImportantIcon from '@material-ui/icons/NotificationImportant'
 import Typography from '@material-ui/core/Typography';
 
 
-export default function renderTitle() {
+export default function renderTitle(rawModelData, classes, buildTitle) {
 
-  const { classes, rawModelData } = this.props;
   const { importanceLevel } = rawModelData;
-  const title = this.props.buildTitle(rawModelData)
+  const title = buildTitle(rawModelData)
   if (title) {
     if (importanceLevel && importanceLevel != '-') {
       let c = classNames(classes.titleIcon);

frontend/src/components/university/modules/genericModuleFunctions/renderUsefulLinks.js

@@ -4,8 +4,7 @@ import Chip from '@material-ui/core/Chip';
 import Avatar from '@material-ui/core/Avatar';
 import LinkIcon from '@material-ui/icons/Link';
 
-export default function renderUsefulLinks() {
-  const { classes, theme, rawModelData  } = this.props;
+export default function renderUsefulLinks(rawModelData, classes, theme) {
   const usefulLinks = rawModelData.useful_links;
   
   const nbItems = usefulLinks.length;

frontend/src/reducers/index.js

@@ -11,7 +11,8 @@ import {
   userDataElReducers,
   universitiesInfoElReducers,
   universitiesSemestersDatesElReducers,
-  serverModerationStatusReducers
+  serverModerationStatusReducers,
+  versionsReducers
 } from '../generated/combinedReducers';
 
 import { saveMainMapPosition } from './map';
@@ -41,6 +42,7 @@ const rootReducer = combineReducers({
   currencies: currenciesReducers,
   mainCampuses: mainCampusesReducers,
   userDataEl: userDataElReducers,
+  versions: versionsReducers,
   app: appReducers
 })
 

package-lock.json

@@ -5300,9 +5300,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.10",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
-      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
     },
     "lodash-es": {
       "version": "4.17.10",

package.json

@@ -27,6 +27,7 @@
     "fuzzysort": "^1.1.4",
     "js-cookie": "^2.2.0",
     "leaflet.markercluster": "^1.3.0",
+    "lodash": "^4.17.11",
     "material-ui-pickers": "^1.0.0-rc.14",
     "react-awesome-slider": "^0.5.2",
     "react-markdown": "^3.6.0",