Commit 8654dc22 authored by Florent Chehab's avatar Florent Chehab

Fields added need more work

parent c8eb36a5
......@@ -3,10 +3,7 @@ import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import ListItemText from '@material-ui/core/ListItemText';
import ListItem from '@material-ui/core/ListItem';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
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';
......@@ -14,14 +11,20 @@ import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';
const styles = {
import UniversitySemestersDatesEditor from '../university/modules/editors/UniversitySemestersDatesEditor';
const styles = theme => ({
appBar: {
position: 'relative',
},
flex: {
flex: 1,
},
};
paper: {
padding: 2 * theme.spacing.unit,
margin: 2 * theme.spacing.unit,
}
});
function Transition(props) {
return <Slide direction="up" {...props} />;
......@@ -29,7 +32,7 @@ function Transition(props) {
class FullScreenDialog extends React.Component {
render() {
render() {
const { classes } = this.props;
return (
<div>
......@@ -45,22 +48,17 @@ class FullScreenDialog extends React.Component {
<CloseIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Sound
Mode édition
</Typography>
<Button color="inherit" onClick={this.props.handleClose}>
save
Enregistrer
</Button>
</Toolbar>
</AppBar>
<List>
<ListItem button>
<ListItemText primary="Phone ringtone" secondary="Titania" />
</ListItem>
<Divider />
<ListItem button>
<ListItemText primary="Default notification ringtone" secondary="Tethys" />
</ListItem>
</List>
<Paper className={classes.paper}>
{/* {this.props.children} */}
<UniversitySemestersDatesEditor />
</Paper>
</Dialog>
</div>
);
......@@ -72,8 +70,8 @@ FullScreenDialog.propTypes = {
};
FullScreenDialog.defaultProps = {
open: false,
handleClose: () => console.log("Dev forgot something...")
};
open: false,
handleClose: () => console.log("Dev forgot something...")
};
export default withStyles(styles)(FullScreenDialog);
export default withStyles(styles, { withTheme: true })(FullScreenDialog);
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import { compose } from 'recompose';
import TextField from '@material-ui/core/TextField';
import Markdown from './Markdown';
import { Typography } from '@material-ui/core';
import LinkText from '../other/TextLink';
const styles = theme => ({
})
class MarkdownField extends React.Component {
constructor() {
super();
this.state = {
value: ''
};
}
handleChangeValue = (value) => {
this.setState({
value
});
}
render() {
const { classes } = this.props;
return (
<div>
<Grid
container
spacing={16}
>
<Grid item xs={12} md={12} lg={6}>
<Typography variant='caption'>
<em>Saisie du texte
(ce champ supporte en grande partie la syntaxe <LinkText href="https://www.markdownguide.org/basic-syntax">Markdown</LinkText>)
</em>
</Typography>
<TextField fullWidth={true} multiline={true} onChange={(e) => this.handleChangeValue(e.target.value)} />
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography variant='caption'><em>Prévisualisation du texte</em></Typography>
{
this.state.value == '' ?
(<Typography variant='caption'>Le champ est vide</Typography>)
:
(<Markdown source={this.state.value} />)
}
</Grid>
</Grid>
</div>
)
}
}
export default compose(
withStyles(styles, { withTheme: true }),
)(MarkdownField);
\ No newline at end of file
import React, { PureComponent } from 'react';
import DatePicker from 'material-ui-pickers/DatePicker';
import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils';
import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider';
import PropTypes from 'prop-types';
import { compose } from 'recompose';
import { withStyles } from '@material-ui/core/styles';
import frLocale from 'date-fns/locale/fr';
import format from 'date-fns/format';
import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
import { Typography } from '@material-ui/core';
const styles = theme => ({
datePicker: {
// width: '300px',
},
picker: {
marginBottom: 3 * theme.spacing.unit
}
});
class LocalizedUtils extends DateFnsUtils {
getDatePickerHeaderText(date) {
return format(date, 'd MMM YYYY', { locale: this.locale });
}
}
class MyDatePicker extends PureComponent {
state = {
selectedDate: this.props.selectedDate,
}
handleDateChange = (date) => {
this.setState({ selectedDate: date });
this.props.handleDateChange(date);
}
render() {
const { classes } = this.props;
return (
<MuiPickersUtilsProvider utils={LocalizedUtils} locale={frLocale}>
<div className={classes.picker}>
<Typography color='textSecondary'>{this.props.label}</Typography>
<DatePicker
clearable
format="d MMM YYYY"
value={this.state.selectedDate}
onChange={this.handleDateChange}
clearLabel="vider"
cancelLabel="annuler"
leftArrowIcon={<KeyboardArrowLeftIcon />}
rightArrowIcon={<KeyboardArrowRightIcon />}
className={classes.datePicker}
/>
</div>
</MuiPickersUtilsProvider>
);
}
}
MyDatePicker.defaultProps = {
selectedDate: Date.now(),
handleDateChange: (date) => console.log('Nouvelle date sélectionnée : ', date),
label: 'LABEL'
}
MyDatePicker.propTypes = {
selectedDate: PropTypes.instanceOf(Date).isRequired,
handleDateChange: PropTypes.func.isRequired,
label: PropTypes.string.isRequired
};
export default compose(
withStyles(styles, { withTheme: true }),
)(MyDatePicker);
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import { compose } from 'recompose';
import TextField from '@material-ui/core/TextField';
import IconButton from '@material-ui/core/IconButton';
import Button from '@material-ui/core/Button';
import DeleteIcon from '@material-ui/icons/Delete';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
usefulLinkContainer: {
display: 'flex',
flexWrap: 'wrap',
}
})
class UsefulLinksField extends React.Component {
constructor() {
super();
this.state = {
usefulLinks: Array({ url: '', description: '' }),
};
}
handleUsefulLinkUrlChange = (idx, evt) => {
const newUsefulLinks = this.state.usefulLinks.map((usefulLink, sidx) => {
if (idx !== sidx) { return usefulLink; }
return { ...usefulLink, url: evt.target.value };
});
this.setState({ usefulLinks: newUsefulLinks });
}
handleUsefulLinkDescriptionChange = (idx, evt) => {
const newUsefulLinks = this.state.usefulLinks.map((usefulLink, sidx) => {
if (idx !== sidx) { return usefulLink; }
return { ...usefulLink, description: evt.target.value };
});
this.setState({ usefulLinks: newUsefulLinks });
}
handleAddUsefulLink = () => {
this.setState({
usefulLinks: this.state.usefulLinks.concat([{ url: '', description: '' }])
});
}
handleSwipeUsefulLink = (idx, swipeIndexDiff) => {
const { usefulLinks } = this.state;
let newUsefulLinks = usefulLinks.slice();
const b = usefulLinks[idx + swipeIndexDiff];
newUsefulLinks[idx + swipeIndexDiff] = newUsefulLinks[idx];
newUsefulLinks[idx] = b;
this.setState({
usefulLinks: newUsefulLinks
});
}
handleRemoveUsefulLink = (idx) => {
this.setState({
usefulLinks: this.state.usefulLinks.filter((s, sidx) => idx !== sidx)
});
}
areAllUsefulLinksUsed = () => {
const { usefulLinks } = this.state;
for (let idx in usefulLinks) {
const el = usefulLinks[idx];
if (el.url == '' && el.description == '') {
return false;
}
}
return true;
}
render() {
const { classes } = this.props;
const nbOfUsefulLinks = this.state.usefulLinks.length;
console.log("all links used", this.areAllUsefulLinksUsed())
return (
<div>
<Grid
container
spacing={16}
direction="column"
justify="flex-start"
alignItems="flex-start"
>
{this.state.usefulLinks.map((usefulLink, idx) => (
<Grid item>
<Grid
container
spacing={8}
alignItems="center"
>
<Grid item>
<TextField
placeholder={'URL'}
value={usefulLink.url}
onChange={(e) => this.handleUsefulLinkUrlChange(idx, e)}
/>
</Grid>
<Grid item>
<TextField
placeholder={"Description"}
value={usefulLink.description}
onChange={(e) => this.handleUsefulLinkDescriptionChange(idx, e)}
/>
</Grid>
<Grid item>
<IconButton
onClick={() => this.handleSwipeUsefulLink(idx, -1)}
disabled={idx == 0}
color="secondary"
>
<KeyboardArrowUpIcon />
</IconButton>
<IconButton
onClick={() => this.handleSwipeUsefulLink(idx, 1)}
disabled={idx == nbOfUsefulLinks - 1}
color="secondary"
>
<KeyboardArrowDownIcon />
</IconButton>
<IconButton
onClick={() => this.handleRemoveUsefulLink(idx)}
color='secondary'
>
<DeleteIcon />
</IconButton>
</Grid>
</Grid>
</Grid>
))}
<Grid item>
<Button
disabled={!this.areAllUsefulLinksUsed()}
size="small"
variant="outlined"
color="secondary"
onClick={() => this.handleAddUsefulLink()}
>
Ajouter un lien
</Button>
</Grid>
</Grid>
</div>
)
}
}
export default compose(
withStyles(styles, { withTheme: true }),
)(UsefulLinksField);
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { compose } from 'recompose';
import { connect } from "react-redux";
import TextField from '@material-ui/core/TextField';
import MyComponent from '../../../MyComponent';
import MyDatePicker from '../../../shared/MyDatePicker';
import UsefulLinksField from '../../../shared/UsefulLinksField';
import MardownField from '../../../shared/MarkdownField';
// import dateToStr from '../../../utils/dateToStr';
// import {
// universitiesSemestersDatesElFetchData,
// } from '../../../generated/actions';
class UniversitySemestersDatesEditor extends MyComponent {
// idToUse = "univId";
myRender() {
return (
<div>
<MyDatePicker label={"Date de début du semestre de printemps :"} />
<MyDatePicker label={"Date de fin du semestre de printemps :"} />
<MyDatePicker label={"Date de début du semestre d'automne :"} />
<MyDatePicker label={"Date de fin du semestre d'automne :"} />
<MardownField />
<UsefulLinksField />
</div>
)
}
}
// UniversitySemestersDatesEditor.propTypes = {
// classes: PropTypes.object.isRequired,
// theme: PropTypes.object.isRequired,
// univId: PropTypes.string.isRequired
// };
// const mapStateToProps = (state) => {
// return {
// universitiesSemestersDatesEl: state.universitiesSemestersDatesEl,
// };
// };
// const mapDispatchToProps = (dispatch) => {
// return {
// fetchData: {
// universitiesSemestersDatesEl: (univId) => dispatch(universitiesSemestersDatesElFetchData(univId)),
// }
// };
// };
export default compose(
// withStyles(styles, { withTheme: true }),
// connect(mapStateToProps, mapDispatchToProps)
)(UniversitySemestersDatesEditor);
\ No newline at end of file
......@@ -2637,6 +2637,11 @@
"assert-plus": "^1.0.0"
}
},
"date-fns": {
"version": "2.0.0-alpha.16",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.0.0-alpha.16.tgz",
"integrity": "sha1-0kmmybeZJSZS+54/JUYOr53oasc="
},
"date-now": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
......@@ -5340,6 +5345,11 @@
"integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
"dev": true
},
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
},
"long": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
......@@ -5437,6 +5447,34 @@
"resolved": "https://registry.npmjs.org/marked/-/marked-0.5.0.tgz",
"integrity": "sha512-UhjmkCWKu1SS/BIePL2a59BMJ7V42EYtTfksodPRXzPEGEph3Inp5dylseqt+KbU9Jglsx8xcMKmlumfJMBXAA=="
},
"material-ui-pickers": {
"version": "1.0.0-rc.14",
"resolved": "https://registry.npmjs.org/material-ui-pickers/-/material-ui-pickers-1.0.0-rc.14.tgz",
"integrity": "sha512-aOU4juaRst8om8/BTKh54ubX9VoJRLyErTtuvbSR/ON0cQpYLycHjS1v2Jxy+7A9P9ZDrqd231UPs9lZFShUCg==",
"requires": {
"@babel/runtime": "^7.0.0",
"lodash.throttle": "^4.1.1",
"react-event-listener": "^0.6.2",
"react-text-mask": "=5.4.1",
"react-transition-group": "^2.4.0",
"recompose": "^0.28.0"
},
"dependencies": {
"@babel/runtime": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
"integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
"requires": {
"regenerator-runtime": "^0.12.0"
}
},
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
}
}
},
"math-expression-evaluator": {
"version": "1.2.17",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
......@@ -6882,6 +6920,14 @@
}
}
},
"react-text-mask": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.4.1.tgz",
"integrity": "sha512-mGx1n0x0skktwsKcpgAGnrgExFlXDflbWEHh8PC1UaQP8+EdHkW7JYczTghsBo2rnVwU9/4A9x/2bVt3HY46/w==",
"requires": {
"prop-types": "^15.5.6"
}
},
"react-transition-group": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
......@@ -7006,7 +7052,6 @@
"version": "0.28.2",
"resolved": "https://registry.npmjs.org/recompose/-/recompose-0.28.2.tgz",
"integrity": "sha512-baVNKQBQAAAuLRnv6Cb/6/j59a1BVj6c6Pags1KXVyRB0yPfQVUZtuAUnqHDBXoR8iXPrLGWE4RNtCQ/AaRP3g==",
"dev": true,
"requires": {
"@babel/runtime": "7.0.0-beta.56",
"change-emitter": "^0.1.2",
......@@ -7020,7 +7065,6 @@
"version": "7.0.0-beta.56",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.56.tgz",
"integrity": "sha512-vP9XV2VP013UEyZdU9eWClCsm6rQPUYHVNCfmpcv5uKviW7mKmUZq71Y5cr5dYsFKfnGDxSo8h6plUGR60lwHg==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.12.0"
}
......@@ -7028,8 +7072,7 @@
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
"dev": true
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
}
}
},
......
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