History view ok

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

@@ -12,19 +12,28 @@ 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 Divider from '@material-ui/core/Divider';
 
 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 { versionsFetchData, versionsInvalidated } from '../../../generated/actions';
 import Loading from '../../other/Loading';
+import dateTimeStrToStr from '../../../utils/dateTimeStrToStr';
 
 import editorStyle from './editors/editorStyle';
 import _ from 'lodash';
 
 const styles = theme => ({
-  ...editorStyle(theme)
+  ...editorStyle(theme),
+  editButton: {
+    display: 'block',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: 2 * theme.spacing.unit,
+    marginBottom: 2 * theme.spacing.unit
+  }
 });
 
 function Transition(props) {
@@ -60,6 +69,9 @@ class History extends React.Component {
   }
 
   dataIsReady() {
+    if (this.props.versions.invalidated) {
+      return false;
+    }
     const { content_type_id, id } = this.getContentTypeAndId();
     const versions = this.getVersions();
     if (!versions) {
@@ -83,6 +95,24 @@ class History extends React.Component {
     }
   }
 
+  renderVersionInfo(rawModelData) {
+    let dateInfo = (<em>(Information non connue.)</em>);
+    const { updated_on } = rawModelData
+    if (updated_on) {
+      const data = dateTimeStrToStr(updated_on)
+      dateInfo = data.date + ' à ' + data.time;
+    }
+    return (
+      <div>
+        <Typography variant='title' align='center'>Version n°{this.state.versionInView + 1} du {dateInfo}</Typography>
+        <Button variant='outlined' color="primary" className={this.props.classes.editButton} onClick={() => console.log("ici")}>
+          Éditer à partir de cette version
+        </Button>
+        <Divider />
+      </div>
+    )
+  }
+
   renderHistory() {
 
     if (this.props.versions.fetchHasError.status) {
@@ -98,7 +128,7 @@ class History extends React.Component {
     const maxSteps = versions.length;
     console.log(versions[activeStep].comment);
     Object.assign(this.newFactory.props.rawModelData, versions[activeStep])
-    console.log(this.newFactory.props.rawModelData.comment);
+    const { rawModelData } = this.newFactory.props;
     return (
       <div>
         <MobileStepper
@@ -120,9 +150,10 @@ class History extends React.Component {
           }
         />
         <br></br>
-
-        {this.newFactory.renderTitle(this.newFactory.props.rawModelData)}
-        {this.newFactory.renderCore(this.newFactory.props.rawModelData)}
+        {this.renderVersionInfo(rawModelData)}
+        <br></br>
+        {this.newFactory.renderTitle(rawModelData)}
+        {this.newFactory.renderCore(rawModelData)}
       </div>
     )
   }
@@ -138,7 +169,7 @@ class History extends React.Component {
         >
           <AppBar className={classes.appBar} >
             <Toolbar>
-              <IconButton color="inherit" onClick={() => this.props.handleCloseHistory()} aria-label="Close">
+              <IconButton color="inherit" onClick={() => { this.props.handleCloseHistory(); this.props.resetVersions(); }} aria-label="Close">
                 <CloseIcon />
               </IconButton>
               <Typography variant="title" color="inherit" className={classes.flex}>
@@ -175,6 +206,7 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = (dispatch) => {
   return {
     fetchVersions: (content_type_id, id) => dispatch(versionsFetchData(content_type_id + "/" + id)),
+    resetVersions: () => dispatch(versionsInvalidated(true)),
   };
 };