diff --git a/src/EventEdit.tsx b/src/EventEdit.tsx new file mode 100644 index 0000000..863720c --- /dev/null +++ b/src/EventEdit.tsx @@ -0,0 +1,193 @@ +import * as React from 'react'; +import RaisedButton from 'material-ui/RaisedButton'; +import Toggle from 'material-ui/Toggle'; +import TextField from 'material-ui/TextField'; +import SelectField from 'material-ui/SelectField'; +import MenuItem from 'material-ui/MenuItem'; + +import DateTimePicker from './DateTimePicker'; + +import * as ICAL from 'ical.js'; + +import * as EteSync from './api/EteSync'; + +import { EventType } from './pim-types'; + +class EventEdit extends React.Component { + state: { + title: string; + allDay: boolean; + start: string; + end: string; + location: string; + description: string; + journalUid: string; + }; + + props: { + collections: Array, + initialCollection?: string, + event?: EventType, + onSave: (event: EventType, journalUid: string) => void; + }; + + constructor(props: any) { + super(props); + this.state = { + title: '', + allDay: false, + location: '', + description: '', + journalUid: '', + start: '', + end: '' + }; + if (this.props.event !== undefined) { + const event = this.props.event; + + this.state.title = event.title ? event.title : ''; + this.state.allDay = event.startDate.isDate; + this.state.start = event.startDate.toString(); + this.state.end = event.endDate.toString(); + this.state.location = event.location ? event.location : ''; + this.state.description = event.description ? event.description : ''; + } + + if (props.journalUid) { + this.state.journalUid = props.journalUid; + } else { + this.state.journalUid = props.collections[0].uid; + } + this.onSubmit = this.onSubmit.bind(this); + this.handleChange = this.handleChange.bind(this); + this.handleInputChange = this.handleInputChange.bind(this); + this.toggleAllDay = this.toggleAllDay.bind(this); + } + + handleChange(name: string, value: string) { + this.setState({ + [name]: value + }); + + } + + handleInputChange(event: any) { + const name = event.target.name; + const value = event.target.value; + this.handleChange(name, value); + } + + toggleAllDay() { + this.setState({allDay: !this.state.allDay}); + } + + onSubmit(e: any) { + e.preventDefault(); + + if ((this.state.start === '') || (this.state.end === '')) { + return; + } + + let event = new EventType(); + event.summary = this.state.title; + event.startDate = ICAL.Time.fromString(this.state.start); + event.endDate = ICAL.Time.fromString(this.state.end); + event.location = this.state.location; + event.description = this.state.description; + + this.props.onSave(event, this.state.journalUid); + } + + render() { + const styles = { + form: { + }, + fullWidth: { + width: '100%', + boxSizing: 'border-box', + }, + submit: { + marginTop: 40, + textAlign: 'right', + }, + }; + + return ( + +

+ {this.props.event ? 'Edit Event' : 'New Event'} +

+
+ + + this.handleChange('journalUid', payload)} + > + {this.props.collections.map((x) => ( + + ))} + + + + +
+ this.setState({start: date})} + /> +
+ +
+ this.setState({end: date})} + /> +
+ + + + + +
+ +
+ +
+ ); + } +} + +export default EventEdit;