Commit a33f0b11 authored by Florent Chehab's avatar Florent Chehab

History close to working

parent 11d1d93f
......@@ -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>
)
......
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);
......@@ -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 (
......
......@@ -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>
......
......@@ -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);
......
......@@ -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;
......
......@@ -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
})
......
......@@ -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",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment