Fullscreen merge in an abstract editor class

saving okkkkkk

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

@@ -6,7 +6,6 @@ import compose from 'recompose/compose';
 import { connect } from "react-redux";
 
 import Paper from '@material-ui/core/Paper';
-import FullScreenDialog from '../../shared/FullScreenDialog';
 import red from '@material-ui/core/colors/red';
 import orange from '@material-ui/core/colors/orange';
 import green from '@material-ui/core/colors/green';
@@ -84,17 +83,16 @@ class GenericModule extends MyComponent {
     this.setState({ fullScreenDialogOpen: false });
   };
 
+
   myRender() {
     const { classes } = this.props;
     return (
       <div>
-        <FullScreenDialog
+        <this.props.editor
           open={this.state.fullScreenDialogOpen}
           handleClose={this.handleCloseFullScreenDialog}
-          handleSave={this.props.handleSaveEditor}
-        >
-          {this.props.editor}
-        </FullScreenDialog>
+          modelData={this.props.modelData}
+        />
         <Paper className={classes.root} square={true}>
           {renderFirstRow.bind(this)()}
 

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

@@ -68,7 +68,7 @@ class UniversitySemestersDates extends MyComponent {
   parse(rawModelData) {
     // reverse serialization
     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 = {
       autumn_begin: convertDateStrToDate(autumn_begin),
@@ -76,8 +76,9 @@ class UniversitySemestersDates extends MyComponent {
       spring_begin: convertDateStrToDate(spring_begin),
       spring_end: convertDateStrToDate(spring_end),
       useful_links,
+      comment,
+      university,
       id,
-      comment
     }
 
     return modelData;
@@ -97,7 +98,8 @@ class UniversitySemestersDates extends MyComponent {
       <GenericModule
         title={"Date des semestres"}
         rawModelData={semestersDates}
-        editor={<UniversitySemestersDatesEditor modelData={this.parse()} />}
+        modelData={this.parse()}
+        editor={UniversitySemestersDatesEditor}
       >
         <div className={classes.root}>
           <Table >

frontend/src/components/shared/FullScreenDialog.js → frontend/src/components/university/modules/editors/Editor.js

@@ -11,28 +11,37 @@ import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/Close';
 import Slide from '@material-ui/core/Slide';
 
-import UniversitySemestersDatesEditor from '../university/modules/editors/UniversitySemestersDatesEditor';
+import MyComponent from '../../../MyComponent';
 
-const styles = theme => ({
-  appBar: {
-    position: 'relative',
-  },
-  flex: {
-    flex: 1,
-  },
-  paper: {
-    padding: 2 * theme.spacing.unit,
-    margin: 2 * theme.spacing.unit,
-  }
-});
+import dateToDateStr from '../../../../utils/dateToDateStr';
 
 function Transition(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;
     return (
       <div>
@@ -50,13 +59,13 @@ class FullScreenDialog extends React.Component {
               <Typography variant="title" color="inherit" className={classes.flex}>
                 Mode édition
               </Typography>
-              <Button color="inherit" onClick={this.props.handleClose}>
+              <Button color="inherit" onClick={() => this.handleSaveEditor()}>
                 Enregistrer
               </Button>
             </Toolbar>
           </AppBar>
           <Paper className={classes.paper}>
-            {this.props.children}
+            {this.renderEditor()}
           </Paper>
         </Dialog>
       </div>
@@ -64,13 +73,13 @@ class FullScreenDialog extends React.Component {
   }
 }
 
-FullScreenDialog.propTypes = {
+Editor.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-FullScreenDialog.defaultProps = {
+Editor.defaultProps = {
   open: false,
   handleClose: () => console.log("Dev forgot something...")
 };
 
-export default withStyles(styles, { withTheme: true })(FullScreenDialog);
+export default Editor;
\ No newline at end of file

frontend/src/components/university/modules/editors/UniversitySemestersDatesEditor.js

@@ -6,7 +6,8 @@ import { connect } from "react-redux";
 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 UsefulLinksField from './fields/UsefulLinksField';
 import MarkdownField from './fields/MarkdownField';
@@ -15,52 +16,40 @@ import {
   universitiesSemestersDatesElSaveData
 } from '../../../../generated/actions';
 
+const styles = theme => ({
+  ...editorStyle(theme)
+});
 
 
-class UniversitySemestersDatesEditor extends MyComponent {
-  constructor(props) {
-    super(props);
-
-    this.formData = {};
-    this.formError = {};
-
-    const {modelData} = this.props;
-    for (let fieldKey in modelData){
-      this.formData[fieldKey] = modelData[fieldKey];
-      this.formError[fieldKey] = modelData[fieldKey];
-    }
+class UniversitySemestersDatesEditor extends Editor {
+  handleSaveEditor() {
+    const tmp = Object.assign({}, this.props.modelData, this.formData)
+    console.log(tmp);
+    console.log(this.props);
+    this.props.saveData(tmp);
   }
 
-  setFormDataAndError(field, data) {
-    this.formData[field] = data.data;
-    this.formError[field] = data.hasError;
-  }
-
-  handleSendToServer(data) {
-    this.props.saveData(formData);
-  }
-
-  myRender() {
-    const {modelData} = this.props;
+  renderEditor() {
+    const { modelData } = this.props;
 
     return (
       <div>
         <DateField label={"Date de début du semestre de printemps"}
           required={true}
           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"}
           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"}
           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"}
           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}
           value={modelData.comment}
@@ -85,13 +74,12 @@ UniversitySemestersDatesEditor.propTypes = {
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    saveData: (data) => universitiesSemestersDatesElSaveData(data)
+    saveData: (data) => dispatch(universitiesSemestersDatesElSaveData(data))
   };
 };
 
 
-
 export default compose(
-  // withStyles(styles, { withTheme: true }),
+  withStyles(styles, { withTheme: true }),
   connect(null, mapDispatchToProps)
 )(UniversitySemestersDatesEditor);
\ No newline at end of file

frontend/src/components/university/modules/editors/editorStyle.js

+export default function editorStyle(theme) {
+  return {
+    appBar: {
+      position: 'relative',
+    },
+    flex: {
+      flex: 1,
+    },
+    paper: {
+      padding: 2 * theme.spacing.unit,
+      margin: 2 * theme.spacing.unit,
+    }
+  }
+};

frontend/src/components/university/modules/editors/fields/DateField.js

@@ -33,6 +33,12 @@ class DateField extends PureComponent {
     hasError: this.hasError(this.props.selectedDate)
   }
 
+  componentDidMount(){
+    // store the data in formData
+    this.handleDateChange(this.props.selectedDate);
+  }
+
+
   handleDateChange = (date) => {
     const newState = {
       selectedDate: date,

frontend/src/components/university/modules/editors/fields/MarkdownField.js

@@ -22,6 +22,11 @@ class MarkdownField extends React.Component {
     hasError: this.hasError(this.props.value)
   };
 
+  componentDidMount() {
+    // store the data in formData
+    this.handleChangeValue(this.props.value);
+  }
+
   hasError(value) {
     if (this.props.required && value == '') {
       return true;
@@ -39,10 +44,14 @@ class MarkdownField extends React.Component {
     if (maxLength && value.length > maxLength + 1) {
       value = value.substring(0, maxLength + 1);
     }
-
-    this.setState({
+    const newState = {
       value,
       hasError: this.hasError(value)
+    }
+    this.setState(newState);
+    this.props.onChange({
+      data: newState.value,
+      hasError: newState.hasError
     });
   }
 

frontend/src/components/university/modules/editors/fields/UsefulLinksField.js

@@ -33,6 +33,11 @@ class UsefulLinksField extends React.Component {
     errorMessage: '',
   }
 
+  componentDidMount() {
+    // store the data in formData
+    this.updateUsefulLinks(this.props.usefulLinks);
+  }
+
   hasError(usefulLinks) {
     if (this.props.required && usefulLinks.length == 0) {
       return true;
@@ -42,7 +47,16 @@ class UsefulLinksField extends React.Component {
   }
 
   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) => {

frontend/src/utils/dateToDateStr.js

+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