Commit a33f0b11 authored by Florent Chehab's avatar Florent Chehab
Browse files

History close to working

parent 11d1d93f
...@@ -20,7 +20,7 @@ import { ...@@ -20,7 +20,7 @@ import {
import renderUsefulLinks from './genericModuleFunctions/renderUsefulLinks'; import renderUsefulLinks from './genericModuleFunctions/renderUsefulLinks';
import renderFirstRow from './genericModuleFunctions/renderFirstRow'; import renderFirstRow from './genericModuleFunctions/renderFirstRow';
import renderTitle from './genericModuleFunctions/renderTitle'; import renderTitle from './genericModuleFunctions/renderTitle';
import History from './History';
const styles = theme => ({ const styles = theme => ({
root: { root: {
...@@ -73,27 +73,36 @@ const styles = theme => ({ ...@@ -73,27 +73,36 @@ const styles = theme => ({
class GenericModule extends MyComponent { class GenericModule extends MyComponent {
state = { state = {
fullScreenDialogOpen: false, editorOpen: false,
historyOpen: false,
};
handleOpenEditor = () => {
this.setState({ editorOpen: true });
}; };
handleClickOpenFullScreenDialog = () => { handleCloseEditor = () => {
this.setState({ fullScreenDialogOpen: true }); this.setState({ editorOpen: false });
}; };
handleCloseFullScreenDialog = () => { handleCloseHistory = () => {
this.setState({ fullScreenDialogOpen: false }); this.setState({ historyOpen: false });
}; };
renderTitle = () => ( handleOpenHistory = () => {
this.setState({ historyOpen: true });
};
renderTitle = (rawModelData) => (
<div> <div>
{renderTitle.bind(this)()} {renderTitle(rawModelData, this.props.classes, this.props.buildTitle)}
</div> </div>
) )
renderCore = () => ( renderCore = (rawModelData) => (
<div> <div>
{this.props.renderCore(this.props.rawModelData, this.props.coreClasses)} {this.props.renderCore(rawModelData, this.props.coreClasses)}
{renderUsefulLinks.bind(this)()} {renderUsefulLinks(rawModelData, this.props.classes, this.props.theme)}
</div> </div>
) )
myRender() { myRender() {
...@@ -101,14 +110,19 @@ class GenericModule extends MyComponent { ...@@ -101,14 +110,19 @@ class GenericModule extends MyComponent {
return ( return (
<div> <div>
<this.props.editor <this.props.editor
open={this.state.fullScreenDialogOpen} open={this.state.editorOpen}
handleCloseEditor={this.handleCloseFullScreenDialog} handleCloseEditor={this.handleCloseEditor}
modelData={this.props.parseRawModelData(this.props.rawModelData)} modelData={this.props.parseRawModelData(this.props.rawModelData)}
userData={this.props.userDataEl} userData={this.props.userDataEl}
/> />
<History
factory={this}
open={this.state.historyOpen}
handleCloseHistory={this.handleCloseHistory}
/>
<Paper className={classes.root} square={true}> <Paper className={classes.root} square={true}>
{renderFirstRow.bind(this)()} {renderFirstRow.bind(this)()}
{this.renderCore()} {this.renderCore(this.props.rawModelData, this.props.coreClasses)}
</Paper> </Paper>
</div> </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 { ...@@ -227,13 +227,16 @@ class Editor extends MyComponent {
if (possibleObjModeration.length > 1) { if (possibleObjModeration.length > 1) {
return ( return (
<SelectField label={"Niveau de modération pour ce module"} <div>
required={true} <Typography variant='caption'>Niveau de modération souhaité (en plus TODO </Typography>
value={modelData.obj_moderation_level} <SelectField label={"Niveau de modération pour ce module"}
fieldMapping={"obj_moderation_level"} required={true}
options={possibleObjModeration} value={modelData.obj_moderation_level}
formManager={this} fieldMapping={"obj_moderation_level"}
/> options={possibleObjModeration}
formManager={this}
/>
</div>
) )
} else { } else {
return ( return (
......
...@@ -20,8 +20,12 @@ export default function renderFirstRow() { ...@@ -20,8 +20,12 @@ export default function renderFirstRow() {
const { classes, theme } = this.props; const { classes, theme } = this.props;
const { rawModelData } = this.props; const { rawModelData } = this.props;
const nbVersions = rawModelData.nb_versions; const nbVersions = Math.max(0, rawModelData.nb_versions - 1);
const nbPendingModeration = rawModelData.pending_moderation.length const { pending_moderation } = rawModelData;
let nbPendingModeration = 0;
if (pending_moderation) {
nbPendingModeration = pending_moderation.length
}
const readOnly = rawModelData.model_config.read_only; const readOnly = rawModelData.model_config.read_only;
const { versionTooltip, versionClass } = getVersionTooltipAndClass(nbVersions); const { versionTooltip, versionClass } = getVersionTooltipAndClass(nbVersions);
...@@ -34,7 +38,7 @@ export default function renderFirstRow() { ...@@ -34,7 +38,7 @@ export default function renderFirstRow() {
return ( return (
<Grid container spacing={8}> <Grid container spacing={8}>
<Grid item xs style={{ paddingBottom: theme.spacing.unit }}> <Grid item xs style={{ paddingBottom: theme.spacing.unit }}>
{renderTitle.bind(this)()} {renderTitle(this.props.rawModelData, this.props.classes, this.props.buildTitle)}
{renderUpdateInfo.bind(this)()} {renderUpdateInfo.bind(this)()}
</Grid> </Grid>
<Grid item xs={4} style={{ textAlign: 'right' }}> <Grid item xs={4} style={{ textAlign: 'right' }}>
...@@ -51,7 +55,7 @@ export default function renderFirstRow() { ...@@ -51,7 +55,7 @@ export default function renderFirstRow() {
<Tooltip title={editTooltip} placement="top"> <Tooltip title={editTooltip} placement="top">
<div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip when below is disabled!! */} <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]} /> <CreateIcon className={classes[editClass]} />
</IconButton> </IconButton>
</div> </div>
...@@ -60,7 +64,7 @@ export default function renderFirstRow() { ...@@ -60,7 +64,7 @@ export default function renderFirstRow() {
<Tooltip title={versionTooltip} placement="top"> <Tooltip title={versionTooltip} placement="top">
<div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip when below is disabled!! */} <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"> <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]} /> <SettingsBackRestoreIcon className={classes[versionClass]} />
</IconButton> </IconButton>
</MyBadge> </MyBadge>
......
...@@ -3,11 +3,10 @@ import NotificationImportantIcon from '@material-ui/icons/NotificationImportant' ...@@ -3,11 +3,10 @@ import NotificationImportantIcon from '@material-ui/icons/NotificationImportant'
import Typography from '@material-ui/core/Typography'; 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 { importanceLevel } = rawModelData;
const title = this.props.buildTitle(rawModelData) const title = buildTitle(rawModelData)
if (title) { if (title) {
if (importanceLevel && importanceLevel != '-') { if (importanceLevel && importanceLevel != '-') {
let c = classNames(classes.titleIcon); let c = classNames(classes.titleIcon);
......
...@@ -4,8 +4,7 @@ import Chip from '@material-ui/core/Chip'; ...@@ -4,8 +4,7 @@ import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@material-ui/core/Avatar';
import LinkIcon from '@material-ui/icons/Link'; import LinkIcon from '@material-ui/icons/Link';
export default function renderUsefulLinks() { export default function renderUsefulLinks(rawModelData, classes, theme) {
const { classes, theme, rawModelData } = this.props;
const usefulLinks = rawModelData.useful_links; const usefulLinks = rawModelData.useful_links;
const nbItems = usefulLinks.length; const nbItems = usefulLinks.length;
......
...@@ -11,7 +11,8 @@ import { ...@@ -11,7 +11,8 @@ import {
userDataElReducers, userDataElReducers,
universitiesInfoElReducers, universitiesInfoElReducers,
universitiesSemestersDatesElReducers, universitiesSemestersDatesElReducers,
serverModerationStatusReducers serverModerationStatusReducers,
versionsReducers
} from '../generated/combinedReducers'; } from '../generated/combinedReducers';
import { saveMainMapPosition } from './map'; import { saveMainMapPosition } from './map';
...@@ -41,6 +42,7 @@ const rootReducer = combineReducers({ ...@@ -41,6 +42,7 @@ const rootReducer = combineReducers({
currencies: currenciesReducers, currencies: currenciesReducers,
mainCampuses: mainCampusesReducers, mainCampuses: mainCampusesReducers,
userDataEl: userDataElReducers, userDataEl: userDataElReducers,
versions: versionsReducers,
app: appReducers app: appReducers
}) })
......
...@@ -5300,9 +5300,9 @@ ...@@ -5300,9 +5300,9 @@
} }
}, },
"lodash": { "lodash": {
"version": "4.17.10", "version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
}, },
"lodash-es": { "lodash-es": {
"version": "4.17.10", "version": "4.17.10",
......
Supports Markdown
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