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';
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)()}
......
......@@ -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 >
......
......@@ -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
......@@ -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];
}
}
setFormDataAndError(field, data) {
this.formData[field] = data.data;
this.formError[field] = data.hasError;
}
handleSendToServer(data) {
this.props.saveData(formData);
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);
}
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
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 {
hasError: this.hasError(this.props.selectedDate)
}
componentDidMount(){
// store the data in formData
this.handleDateChange(this.props.selectedDate);
}
handleDateChange = (date) => {
const newState = {
selectedDate: date,
......
......@@ -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
});
}
......
......@@ -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) => {
......
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