Commit 6726073a authored by Florent Chehab's avatar Florent Chehab
Browse files

Work on fields and cleaning

parent 50b55c85
...@@ -56,8 +56,7 @@ class FullScreenDialog extends React.Component { ...@@ -56,8 +56,7 @@ class FullScreenDialog extends React.Component {
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Paper className={classes.paper}> <Paper className={classes.paper}>
{/* {this.props.children} */} {this.props.children}
<UniversitySemestersDatesEditor />
</Paper> </Paper>
</Dialog> </Dialog>
</div> </div>
......
...@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; ...@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import compose from 'recompose/compose'; 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 FullScreenDialog from '../../shared/FullScreenDialog';
...@@ -88,7 +88,13 @@ class GenericModule extends MyComponent { ...@@ -88,7 +88,13 @@ class GenericModule extends MyComponent {
const { classes } = this.props; const { classes } = this.props;
return ( return (
<div> <div>
<FullScreenDialog open={this.state.fullScreenDialogOpen} handleClose={this.handleCloseFullScreenDialog} /> <FullScreenDialog
open={this.state.fullScreenDialogOpen}
handleClose={this.handleCloseFullScreenDialog}
handleSave={this.props.handleSaveEditor}
>
{this.props.editor}
</FullScreenDialog>
<Paper className={classes.root} square={true}> <Paper className={classes.root} square={true}>
{renderFirstRow.bind(this)()} {renderFirstRow.bind(this)()}
...@@ -110,7 +116,7 @@ GenericModule.defaultProps = { ...@@ -110,7 +116,7 @@ GenericModule.defaultProps = {
GenericModule.propTypes = { GenericModule.propTypes = {
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired, theme: PropTypes.object.isRequired,
modelData: PropTypes.object.isRequired rawModelData: PropTypes.object.isRequired
}; };
......
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import compose from 'recompose/compose'; import compose from 'recompose/compose';
import {connect} from "react-redux"; import { connect } from "react-redux";
import Table from '@material-ui/core/Table'; import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody'; import TableBody from '@material-ui/core/TableBody';
...@@ -19,7 +19,10 @@ import GenericModule from './GenericModule'; ...@@ -19,7 +19,10 @@ import GenericModule from './GenericModule';
import MyComponent from '../../MyComponent'; import MyComponent from '../../MyComponent';
import dateToStr from '../../../utils/dateToStr'; import dateStrToStr from '../../../utils/dateStrToStr';
import dateStrToDate from '../../../utils/dateStrToDate';
import UniversitySemestersDatesEditor from './editors/UniversitySemestersDatesEditor';
import { import {
universitiesSemestersDatesElFetchData, universitiesSemestersDatesElFetchData,
...@@ -42,29 +45,60 @@ const styles = theme => ({ ...@@ -42,29 +45,60 @@ const styles = theme => ({
} }
}); });
function convertDate(date) { function convertDateStrToStr(date) {
if (date) { if (date) {
return dateToStr(date); return dateStrToStr(date);
} else { } else {
return "Non connue." return "Non connue."
} }
} }
function convertDateStrToDate(date) {
if (date) {
return dateStrToDate(date);
} else {
return null
}
}
class UniversitySemestersDates extends MyComponent { class UniversitySemestersDates extends MyComponent {
idToUse = "univId"; idToUse = "univId";
parse(rawModelData) {
// reverse serialization
const semestersDates = this.getFetchedData('universitiesSemestersDatesEl');
let { autumn_begin, autumn_end, spring_begin, spring_end, comment, useful_links } = semestersDates;
const modelData = {
autumn_begin: convertDateStrToDate(autumn_begin),
autumn_end: convertDateStrToDate(autumn_end),
spring_begin: convertDateStrToDate(spring_begin),
spring_end: convertDateStrToDate(spring_end),
useful_links,
id,
comment
}
return modelData;
}
myRender() { myRender() {
const { classes } = this.props; const { classes } = this.props;
const semestersDates = this.getFetchedData('universitiesSemestersDatesEl'); const semestersDates = this.getFetchedData('universitiesSemestersDatesEl');
let { autumn_begin, autumn_end, spring_begin, spring_end, comment } = semestersDates; let { autumn_begin, autumn_end, spring_begin, spring_end, comment } = semestersDates;
autumn_begin = convertDate(autumn_begin); autumn_begin = convertDateStrToStr(autumn_begin);
autumn_end = convertDate(autumn_end); autumn_end = convertDateStrToStr(autumn_end);
spring_begin = convertDate(spring_begin); spring_begin = convertDateStrToStr(spring_begin);
spring_end = convertDate(spring_end); spring_end = convertDateStrToStr(spring_end);
return ( return (
<GenericModule title={"Date des semestres"} modelData={semestersDates}> <GenericModule
title={"Date des semestres"}
rawModelData={semestersDates}
editor={<UniversitySemestersDatesEditor modelData={this.parse()} />}
>
<div className={classes.root}> <div className={classes.root}>
<Table > <Table >
<TableHead> <TableHead>
...@@ -125,7 +159,7 @@ const mapDispatchToProps = (dispatch) => { ...@@ -125,7 +159,7 @@ const mapDispatchToProps = (dispatch) => {
return { return {
fetchData: { fetchData: {
universitiesSemestersDatesEl: (univId) => dispatch(universitiesSemestersDatesElFetchData(univId)), universitiesSemestersDatesEl: (univId) => dispatch(universitiesSemestersDatesElFetchData(univId)),
} },
}; };
}; };
......
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import compose from 'recompose/compose'; import compose from 'recompose/compose';
import {connect} from "react-redux"; import { connect } from "react-redux";
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
...@@ -11,26 +11,65 @@ import DateField from './fields/DateField'; ...@@ -11,26 +11,65 @@ 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';
// import dateToStr from '../../../utils/dateToStr'; import {
universitiesSemestersDatesElSaveData
// import { } from '../../../../generated/actions';
// universitiesSemestersDatesElFetchData,
// } from '../../../generated/actions';
class UniversitySemestersDatesEditor extends MyComponent { class UniversitySemestersDatesEditor extends MyComponent {
// idToUse = "univId"; 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);
}
myRender() { myRender() {
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"}
<DateField label={"Date de fin du semestre de printemps :"} /> required={true}
<DateField label={"Date de début du semestre d'automne :"} /> selectedDate={modelData.spring_begin}
<DateField label={"Date de fin du semestre d'automne :"} /> onChange={(data) => this.setFormDataAndError('spring_begin', data)}
<MarkdownField /> />
<UsefulLinksField /> <DateField label={"Date de fin du semestre de printemps"}
selectedDate={modelData.spring_end}
onChange={(data) => this.setFormDataAndError('spring_end', data)}
/>
<DateField label={"Date de début du semestre d'automne"}
selectedDate={modelData.autumn_begin}
onChange={(data) => this.setFormDataAndError('autumn_begin', data)}
/>
<DateField label={"Date de fin du semestre d'automne"}
selectedDate={modelData.autumn_end}
onChange={(data) => this.setFormDataAndError('autumn_end', data)}
/>
<MarkdownField label={"Éventuel commentaire associé à ces informations"} maxLength={100}
value={modelData.comment}
onChange={(data) => this.setFormDataAndError('comment', data)}
/>
<UsefulLinksField label={"Lien(s) utile(s) (ex : vers ces informations)"}
value={modelData.UsefulLinksField}
onChange={(data) => this.setFormDataAndError('useful_links', data)}
/>
</div> </div>
) )
} }
...@@ -38,28 +77,21 @@ class UniversitySemestersDatesEditor extends MyComponent { ...@@ -38,28 +77,21 @@ class UniversitySemestersDatesEditor extends MyComponent {
// UniversitySemestersDatesEditor.propTypes = { UniversitySemestersDatesEditor.propTypes = {
// classes: PropTypes.object.isRequired, modelData: PropTypes.object.isRequired,
// theme: PropTypes.object.isRequired, };
// univId: PropTypes.string.isRequired
// };
// const mapStateToProps = (state) => { const mapDispatchToProps = (dispatch) => {
// return { return {
// universitiesSemestersDatesEl: state.universitiesSemestersDatesEl, saveData: (data) => universitiesSemestersDatesElSaveData(data)
// }; };
// }; };
// const mapDispatchToProps = (dispatch) => {
// return {
// fetchData: {
// universitiesSemestersDatesEl: (univId) => dispatch(universitiesSemestersDatesElFetchData(univId)),
// }
// };
// };
export default compose( export default compose(
// withStyles(styles, { withTheme: true }), // withStyles(styles, { withTheme: true }),
// connect(mapStateToProps, mapDispatchToProps) connect(null, mapDispatchToProps)
)(UniversitySemestersDatesEditor); )(UniversitySemestersDatesEditor);
\ No newline at end of file
...@@ -11,16 +11,9 @@ import format from 'date-fns/format'; ...@@ -11,16 +11,9 @@ import format from 'date-fns/format';
import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft'; import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
import { Typography } from '@material-ui/core'; import FieldWrapper from './FieldWrapper';
const styles = theme => ({ const styles = theme => ({
datePicker: {
// width: '300px',
},
picker: {
marginBottom: 3 * theme.spacing.unit
}
}); });
...@@ -31,23 +24,37 @@ class LocalizedUtils extends DateFnsUtils { ...@@ -31,23 +24,37 @@ class LocalizedUtils extends DateFnsUtils {
} }
class DateField extends PureComponent { class DateField extends PureComponent {
hasError(date) {
return this.props.required && !date;
}
state = { state = {
selectedDate: this.props.selectedDate, selectedDate: this.props.selectedDate,
hasError: this.hasError(this.props.selectedDate)
} }
handleDateChange = (date) => { handleDateChange = (date) => {
this.setState({ selectedDate: date }); const newState = {
this.props.handleDateChange(date); selectedDate: date,
hasError: this.hasError(date)
}
this.setState(newState);
this.props.onChange({
data: newState.selectedDate,
hasError: newState.hasError
});
} }
render() { render() {
const { classes } = this.props; const { classes } = this.props;
const { props } = this.props;
return ( return (
<MuiPickersUtilsProvider utils={LocalizedUtils} locale={frLocale}> <FieldWrapper
<div className={classes.picker}> required={this.props.required}
<Typography color='textSecondary'>{this.props.label}</Typography> hasError={this.state.hasError}
label={this.props.label}
>
<MuiPickersUtilsProvider utils={LocalizedUtils} locale={frLocale}>
<DatePicker <DatePicker
clearable clearable
format="d MMM YYYY" format="d MMM YYYY"
...@@ -57,24 +64,23 @@ class DateField extends PureComponent { ...@@ -57,24 +64,23 @@ class DateField extends PureComponent {
cancelLabel="annuler" cancelLabel="annuler"
leftArrowIcon={<KeyboardArrowLeftIcon />} leftArrowIcon={<KeyboardArrowLeftIcon />}
rightArrowIcon={<KeyboardArrowRightIcon />} rightArrowIcon={<KeyboardArrowRightIcon />}
className={classes.datePicker}
/> />
</div> </MuiPickersUtilsProvider>
</MuiPickersUtilsProvider> </FieldWrapper >
); );
} }
} }
DateField.defaultProps = { DateField.defaultProps = {
selectedDate: Date.now(), required: false,
handleDateChange: (date) => console.log('Nouvelle date sélectionnée : ', date), label: 'mon label',
label: 'LABEL' selectedDate: Date(),
onChange: (date) => console.log('Nouvelle date sélectionnée : ', date),
} }
DateField.propTypes = { DateField.propTypes = {
selectedDate: PropTypes.instanceOf(Date).isRequired, selectedDate: PropTypes.instanceOf(Date),
handleDateChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
label: PropTypes.string.isRequired
}; };
......
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles';
import compose from 'recompose/compose';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
const styles = theme => ({
formElement: {
marginBottom: 3 * theme.spacing.unit
}
});
class FieldWrapper extends PureComponent {
render() {
const { props } = this;
return (
<FormControl className={props.classes.formElement} required={props.required} error={props.hasError} fullWidth={true}>
<FormLabel>{props.label}</FormLabel>
{props.children}
</FormControl>
);
}
}
FieldWrapper.defaultProps = {
label: 'LABEL',
required: false,
hasError: false,
}
FieldWrapper.propTypes = {
label: PropTypes.string.isRequired,
required: PropTypes.bool.isRequired,
hasError: PropTypes.bool.isRequired,
};
export default compose(
withStyles(styles, { withTheme: true })
)(FieldWrapper);
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import compose from 'recompose/compose'; import compose from 'recompose/compose';
import FieldWrapper from './FieldWrapper';
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
...@@ -14,16 +17,32 @@ const styles = theme => ({ ...@@ -14,16 +17,32 @@ const styles = theme => ({
}) })
class MarkdownField extends React.Component { class MarkdownField extends React.Component {
constructor() { state = {
super(); value: this.props.value,
this.state = { hasError: this.hasError(this.props.value)
value: '' };
};
hasError(value) {
if (this.props.required && value == '') {
return true;
} else if (this.props.maxLength && value.length > this.props.maxLength) {
return true;
} else {
return false;
}
} }
handleChangeValue = (value) => { handleChangeValue = (val) => {
let value = val;
const { maxLength } = this.props;
if (maxLength && value.length > maxLength + 1) {
value = value.substring(0, maxLength + 1);
}
this.setState({ this.setState({
value value,
hasError: this.hasError(value)
}); });
} }
...@@ -32,7 +51,11 @@ class MarkdownField extends React.Component { ...@@ -32,7 +51,11 @@ class MarkdownField extends React.Component {