Pending moderation connected

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

@@ -21,6 +21,7 @@ import renderUsefulLinks from './genericModuleFunctions/renderUsefulLinks';
 import renderFirstRow from './genericModuleFunctions/renderFirstRow';
 import renderTitle from './genericModuleFunctions/renderTitle';
 import History from './History';
+import PendingModeration from './PendingModeration';
 
 const styles = theme => ({
   root: {
@@ -75,6 +76,7 @@ class GenericModule extends MyComponent {
   state = {
     editorOpen: false,
     historyOpen: false,
+    pendingModerationOpen: false,
     rawModelDataForEditor: this.props.rawModelData,
     forceSave: false,
   };
@@ -95,6 +97,23 @@ class GenericModule extends MyComponent {
     this.setState({ historyOpen: true });
   };
 
+  handleOpenPendingModeration = () => {
+    this.setState({ pendingModerationOpen: true });
+  }
+
+  handleClosePendingModeration = () => {
+    this.setState({ pendingModerationOpen: false });
+  }
+
+  handleEditPendingModeration = (rawModelData) => {
+    this.setState({
+      rawModelDataForEditor: rawModelData,
+      forceSave: true,
+    })
+    this.handleClosePendingModeration();
+    this.handleOpenEditor();
+  }
+
   handleEditCurrent = () => {
     this.setState({
       rawModelDataForEditor: this.props.rawModelData,
@@ -142,6 +161,12 @@ class GenericModule extends MyComponent {
           handleCloseHistory={this.handleCloseHistory}
           handleRestoreVersion={this.handleRestoreVersion}
         />
+        <PendingModeration
+          factory={this}
+          open={this.state.pendingModerationOpen}
+          handleClosePendingModeration={this.handleClosePendingModeration}
+          handleEditPendingModeration={this.handleEditPendingModeration}
+        />
         <Paper className={classes.root} square={true}>
           {renderFirstRow.bind(this)()}
           {this.renderCore(this.props.rawModelData, this.props.coreClasses)}

frontend/src/components/university/modules/PendingModeration.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 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, 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),
+  editButton: {
+    display: 'block',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: 2 * theme.spacing.unit,
+    marginBottom: 2 * theme.spacing.unit
+  }
+});
+
+function Transition(props) {
+  return <Slide direction="up" {...props} />;
+}
+
+class PendingModeration extends React.Component {
+  state = {
+    versionInView: 0
+  }
+
+  componentWillMount() {
+    this.newFactory = _.cloneDeep(this.props.factory);
+  }
+
+  renderPendingModerationInfo(rawModelData) {
+    return (
+      <div>
+        <Button
+          variant='outlined'
+          color="primary"
+          className={this.props.classes.editButton}
+          onClick={() => this.props.handleEditPendingModeration(rawModelData)}
+        >
+          Éditer à partir de cette version
+        </Button>
+        <Divider />
+      </div>
+    )
+  }
+
+  renderPendingModeration() {
+    let rawModelData = this.newFactory.props.rawModelData.pending_moderation[0].new_object;
+    // we have to copy the original ID
+    rawModelData.id = this.newFactory.props.rawModelData.id;
+    return (
+      <div>
+        {this.renderPendingModerationInfo(rawModelData)}
+        <br></br>
+        {this.newFactory.renderTitle(rawModelData)}
+        {this.newFactory.renderCore(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.handleClosePendingModeration(); }} aria-label="Close">
+                <CloseIcon />
+              </IconButton>
+              <Typography variant="title" color="inherit" className={classes.flex}>
+                Version en attente de modération
+              </Typography>
+            </Toolbar>
+          </AppBar>
+          <Paper className={classes.paper}>
+            {this.props.open ? this.renderPendingModeration() : <div></div>}
+          </Paper>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+PendingModeration.propTypes = {
+  classes: PropTypes.object.isRequired,
+  factory: PropTypes.object.isRequired,
+  handleEditPendingModeration: PropTypes.func.isRequired,
+};
+
+PendingModeration.defaultProps = {
+  open: false,
+  handleClosePendingModeration: () => console.log("Dev forgot something...")
+};
+
+
+export default compose(
+  withStyles(styles, { withTheme: true }),
+)(PendingModeration);

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

@@ -46,7 +46,7 @@ export default function renderFirstRow() {
         <Tooltip title={moderTooltip} placement="top">
           <div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip when below is disabled! when below is disabled!! */}
             <MyBadge classes={{ badge: classes.badge }} badgeContent={nbPendingModeration} color="secondary">
-              <IconButton aria-label="Modération" disabled={moderClass == 'disabled' || moderClass == 'green'} className={classes.button}>
+              <IconButton aria-label="Modération" disabled={moderClass == 'disabled' || moderClass == 'green'} onClick={this.handleOpenPendingModeration} className={classes.button}>
                 <VerifiedUserIcon className={classes[moderClass]} />
               </IconButton>
             </MyBadge>