Commit a6c0ea70 authored by Florent Chehab's avatar Florent Chehab

Fullscreen merge in an abstract editor class

saving okkkkkk
parent 6726073a
Pipeline #27262 passed with stages
in 2 minutes and 43 seconds
...@@ -6,7 +6,6 @@ import compose from 'recompose/compose'; ...@@ -6,7 +6,6 @@ import compose from 'recompose/compose';
import { connect } from "react-redux"; import { connect } from "react-redux";
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import FullScreenDialog from '../../shared/FullScreenDialog';
import red from '@material-ui/core/colors/red'; import red from '@material-ui/core/colors/red';
import orange from '@material-ui/core/colors/orange'; import orange from '@material-ui/core/colors/orange';
import green from '@material-ui/core/colors/green'; import green from '@material-ui/core/colors/green';
...@@ -84,17 +83,16 @@ class GenericModule extends MyComponent { ...@@ -84,17 +83,16 @@ class GenericModule extends MyComponent {
this.setState({ fullScreenDialogOpen: false }); this.setState({ fullScreenDialogOpen: false });
}; };
myRender() { myRender() {
const { classes } = this.props; const { classes } = this.props;
return ( return (
<div> <div>
<FullScreenDialog <this.props.editor
open={this.state.fullScreenDialogOpen} open={this.state.fullScreenDialogOpen}
handleClose={this.handleCloseFullScreenDialog} handleClose={this.handleCloseFullScreenDialog}
handleSave={this.props.handleSaveEditor} modelData={this.props.modelData}
> />
{this.props.editor}
</FullScreenDialog>
<Paper className={classes.root} square={true}> <Paper className={classes.root} square={true}>
{renderFirstRow.bind(this)()} {renderFirstRow.bind(this)()}
......
...@@ -68,7 +68,7 @@ class UniversitySemestersDates extends MyComponent { ...@@ -68,7 +68,7 @@ class UniversitySemestersDates extends MyComponent {
parse(rawModelData) { parse(rawModelData) {
// reverse serialization // reverse serialization
const semestersDates = this.getFetchedData('universitiesSemestersDatesEl'); const semestersDates = this.getFetchedData('universitiesSemestersDatesEl');
let { autumn_begin, autumn_end, spring_begin, spring_end, comment, useful_links } = semestersDates; let { autumn_begin, autumn_end, spring_begin, spring_end, comment, useful_links, id, university } = semestersDates;
const modelData = { const modelData = {
autumn_begin: convertDateStrToDate(autumn_begin), autumn_begin: convertDateStrToDate(autumn_begin),
...@@ -76,8 +76,9 @@ class UniversitySemestersDates extends MyComponent { ...@@ -76,8 +76,9 @@ class UniversitySemestersDates extends MyComponent {
spring_begin: convertDateStrToDate(spring_begin), spring_begin: convertDateStrToDate(spring_begin),
spring_end: convertDateStrToDate(spring_end), spring_end: convertDateStrToDate(spring_end),
useful_links, useful_links,
comment,
university,
id, id,
comment
} }
return modelData; return modelData;
...@@ -97,7 +98,8 @@ class UniversitySemestersDates extends MyComponent { ...@@ -97,7 +98,8 @@ class UniversitySemestersDates extends MyComponent {
<GenericModule <GenericModule
title={"Date des semestres"} title={"Date des semestres"}
rawModelData={semestersDates} rawModelData={semestersDates}
editor={<UniversitySemestersDatesEditor modelData={this.parse()} />} modelData={this.parse()}
editor={UniversitySemestersDatesEditor}
> >
<div className={classes.root}> <div className={classes.root}>
<Table > <Table >
......
...@@ -11,28 +11,37 @@ import Typography from '@material-ui/core/Typography'; ...@@ -11,28 +11,37 @@ import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close'; import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide'; import Slide from '@material-ui/core/Slide';
import UniversitySemestersDatesEditor from '../university/modules/editors/UniversitySemestersDatesEditor'; import MyComponent from '../../../MyComponent';
const styles = theme => ({ import dateToDateStr from '../../../../utils/dateToDateStr';
appBar: {
position: 'relative',
},
flex: {
flex: 1,
},
paper: {
padding: 2 * theme.spacing.unit,
margin: 2 * theme.spacing.unit,
}
});
function Transition(props) { function Transition(props) {
return <Slide direction="up" {...props} />; return <Slide direction="up" {...props} />;
} }
class FullScreenDialog extends React.Component { class Editor extends MyComponent {
constructor(props) {
super(props);
this.formData = {};
this.formError = {};
}
setFormDataAndError(field, data, type = null) {
console.log(data, type)
let correctData = data.data;
if (type == 'date') {
correctData = dateToDateStr(correctData);
}
this.formData[field] = correctData;
this.formError[field] = data.hasError;
}
renderEditor() {
return (<div>No editor set</div>)
}
render() { myRender() {
const { classes } = this.props; const { classes } = this.props;
return ( return (
<div> <div>
...@@ -50,13 +59,13 @@ class FullScreenDialog extends React.Component { ...@@ -50,13 +59,13 @@ class FullScreenDialog extends React.Component {
<Typography variant="title" color="inherit" className={classes.flex}> <Typography variant="title" color="inherit" className={classes.flex}>
Mode édition Mode édition
</Typography> </Typography>
<Button color="inherit" onClick={this.props.handleClose}> <Button color="inherit" onClick={() => this.handleSaveEditor()}>
Enregistrer Enregistrer
</Button> </Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Paper className={classes.paper}> <Paper className={classes.paper}>
{this.props.children} {this.renderEditor()}
</Paper> </Paper>
</Dialog> </Dialog>
</div> </div>
...@@ -64,13 +73,13 @@ class FullScreenDialog extends React.Component { ...@@ -64,13 +73,13 @@ class FullScreenDialog extends React.Component {
} }
} }
FullScreenDialog.propTypes = { Editor.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
}; };
FullScreenDialog.defaultProps = { Editor.defaultProps = {
open: false, open: false,
handleClose: () => console.log("Dev forgot something...") handleClose: () => console.log("Dev forgot something...")
}; };
export default withStyles(styles, { withTheme: true })(FullScreenDialog); export default Editor;
\ No newline at end of file
...@@ -6,7 +6,8 @@ import { connect } from "react-redux"; ...@@ -6,7 +6,8 @@ import { connect } from "react-redux";
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
import MyComponent from '../../../MyComponent'; import Editor from './Editor';
import editorStyle from './editorStyle';
import DateField from './fields/DateField'; import DateField from './fields/DateField';
import UsefulLinksField from './fields/UsefulLinksField'; import UsefulLinksField from './fields/UsefulLinksField';
import MarkdownField from './fields/MarkdownField'; import MarkdownField from './fields/MarkdownField';
...@@ -15,52 +16,40 @@ import { ...@@ -15,52 +16,40 @@ import {
universitiesSemestersDatesElSaveData universitiesSemestersDatesElSaveData
} from '../../../../generated/actions'; } from '../../../../generated/actions';
const styles = theme => ({
...editorStyle(theme)
});
class UniversitySemestersDatesEditor extends MyComponent { class UniversitySemestersDatesEditor extends Editor {
constructor(props) { handleSaveEditor() {
super(props); const tmp = Object.assign({}, this.props.modelData, this.formData)
console.log(tmp);
this.formData = {}; console.log(this.props);
this.formError = {}; this.props.saveData(tmp);
const {modelData} = this.props;
for (let fieldKey in modelData){
this.formData[fieldKey] = modelData[fieldKey];
this.formError[fieldKey] = modelData[fieldKey];
}
}
setFormDataAndError(field, data) {
this.formData[field] = data.data;
this.formError[field] = data.hasError;
}
handleSendToServer(data) {
this.props.saveData(formData);
} }
myRender() { renderEditor() {
const {modelData} = this.props; const { modelData } = this.props;
return ( return (
<div> <div>
<DateField label={"Date de début du semestre de printemps"} <DateField label={"Date de début du semestre de printemps"}
required={true} required={true}
selectedDate={modelData.spring_begin} selectedDate={modelData.spring_begin}
onChange={(data) => this.setFormDataAndError('spring_begin', data)} onChange={(data) => this.setFormDataAndError('spring_begin', data, 'date')}
/> />
<DateField label={"Date de fin du semestre de printemps"} <DateField label={"Date de fin du semestre de printemps"}
selectedDate={modelData.spring_end} selectedDate={modelData.spring_end}
onChange={(data) => this.setFormDataAndError('spring_end', data)} onChange={(data) => this.setFormDataAndError('spring_end', data, 'date')}
/> />
<DateField label={"Date de début du semestre d'automne"} <DateField label={"Date de début du semestre d'automne"}
selectedDate={modelData.autumn_begin} selectedDate={modelData.autumn_begin}
onChange={(data) => this.setFormDataAndError('autumn_begin', data)} onChange={(data) => this.setFormDataAndError('autumn_begin', data, 'date')}
/> />
<DateField label={"Date de fin du semestre d'automne"} <DateField label={"Date de fin du semestre d'automne"}
selectedDate={modelData.autumn_end} selectedDate={modelData.autumn_end}
onChange={(data) => this.setFormDataAndError('autumn_end', data)} onChange={(data) => this.setFormDataAndError('autumn_end', data, 'date')}
/> />
<MarkdownField label={"Éventuel commentaire associé à ces informations"} maxLength={100} <MarkdownField label={"Éventuel commentaire associé à ces informations"} maxLength={100}
value={modelData.comment} value={modelData.comment}
...@@ -85,13 +74,12 @@ UniversitySemestersDatesEditor.propTypes = { ...@@ -85,13 +74,12 @@ UniversitySemestersDatesEditor.propTypes = {
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
saveData: (data) => universitiesSemestersDatesElSaveData(data) saveData: (data) => dispatch(universitiesSemestersDatesElSaveData(data))
}; };
}; };
export default compose( export default compose(
// withStyles(styles, { withTheme: true }), withStyles(styles, { withTheme: true }),
connect(null, mapDispatchToProps) connect(null, mapDispatchToProps)
)(UniversitySemestersDatesEditor); )(UniversitySemestersDatesEditor);
\ No newline at end of file
export default function editorStyle(theme) {
return {
appBar: {
position: 'relative',
},
flex: {
flex: 1,
},
paper: {
padding: 2 * theme.spacing.unit,
margin: 2 * theme.spacing.unit,
}
}
};
...@@ -33,6 +33,12 @@ class DateField extends PureComponent { ...@@ -33,6 +33,12 @@ class DateField extends PureComponent {
hasError: this.hasError(this.props.selectedDate) hasError: this.hasError(this.props.selectedDate)
} }
componentDidMount(){
// store the data in formData
this.handleDateChange(this.props.selectedDate);
}
handleDateChange = (date) => { handleDateChange = (date) => {
const newState = { const newState = {
selectedDate: date, selectedDate: date,
......
...@@ -22,6 +22,11 @@ class MarkdownField extends React.Component { ...@@ -22,6 +22,11 @@ class MarkdownField extends React.Component {
hasError: this.hasError(this.props.value) hasError: this.hasError(this.props.value)
}; };
componentDidMount() {
// store the data in formData
this.handleChangeValue(this.props.value);
}
hasError(value) { hasError(value) {
if (this.props.required && value == '') { if (this.props.required && value == '') {
return true; return true;
...@@ -39,10 +44,14 @@ class MarkdownField extends React.Component { ...@@ -39,10 +44,14 @@ class MarkdownField extends React.Component {
if (maxLength && value.length > maxLength + 1) { if (maxLength && value.length > maxLength + 1) {
value = value.substring(0, maxLength + 1); value = value.substring(0, maxLength + 1);
} }
const newState = {
this.setState({
value, value,
hasError: this.hasError(value) hasError: this.hasError(value)
}
this.setState(newState);
this.props.onChange({
data: newState.value,
hasError: newState.hasError
}); });
} }
......
...@@ -33,6 +33,11 @@ class UsefulLinksField extends React.Component { ...@@ -33,6 +33,11 @@ class UsefulLinksField extends React.Component {
errorMessage: '', errorMessage: '',
} }
componentDidMount() {
// store the data in formData
this.updateUsefulLinks(this.props.usefulLinks);
}
hasError(usefulLinks) { hasError(usefulLinks) {
if (this.props.required && usefulLinks.length == 0) { if (this.props.required && usefulLinks.length == 0) {
return true; return true;
...@@ -42,7 +47,16 @@ class UsefulLinksField extends React.Component { ...@@ -42,7 +47,16 @@ class UsefulLinksField extends React.Component {
} }
updateUsefulLinks(newUsefullLinks) { updateUsefulLinks(newUsefullLinks) {
this.setState({ usefulLinks: newUsefullLinks }); const newState = {
usefulLinks: newUsefullLinks,
hasError: this.hasError(newUsefullLinks)
}
this.setState(newState);
this.props.onChange({
data: newState.usefulLinks,
hasError: newState.hasError
});
} }
handleUsefulLinkUrlChange = (idx, evt) => { handleUsefulLinkUrlChange = (idx, evt) => {
......
export default function dateToDateStr(date) {
if (!date) {
return null;
}
let yyyy = date.getFullYear(),
mm = date.getMonth() + 1,
dd = date.getDate();
mm = mm < 10 ? '0' + mm : mm;
dd = dd < 10 ? '0' + dd : dd;
return yyyy + '-' + mm + '-' + dd;
}
\ No newline at end of file
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