From 7917b1fbe1e03da2829cf91df1b7df8ab05804f3 Mon Sep 17 00:00:00 2001 From: Tom Hacohen Date: Thu, 22 Feb 2018 20:08:56 +0000 Subject: [PATCH] Calendar: Implement clicking on a time slot to add an event You can now click (or select) a time slot to create an event that is automatically populated with the selected times. Fixes #8 --- src/Pim/PimMain.tsx | 18 ++++++++++++++---- src/components/Calendar.tsx | 10 ++++++++++ src/components/EventEdit.tsx | 17 ++++++++++++++++- 3 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/Pim/PimMain.tsx b/src/Pim/PimMain.tsx index 9f363b2..ff31f68 100644 --- a/src/Pim/PimMain.tsx +++ b/src/Pim/PimMain.tsx @@ -41,6 +41,7 @@ class PimMain extends React.PureComponent { this.eventClicked = this.eventClicked.bind(this); this.contactClicked = this.contactClicked.bind(this); this.floatingButtonClicked = this.floatingButtonClicked.bind(this); + this.newEvent = this.newEvent.bind(this); } eventClicked(event: ICAL.Event) { @@ -57,15 +58,20 @@ class PimMain extends React.PureComponent { routeResolver.getRoute('pim.contacts._id', { itemUid: uid })); } + newEvent(start?: Date, end?: Date) { + this.props.history!.push( + routeResolver.getRoute('pim.events.new'), + {start, end} + ); + } + floatingButtonClicked() { if (this.state.tab === addressBookTitle) { this.props.history!.push( routeResolver.getRoute('pim.contacts.new') ); } else if (this.state.tab === calendarTitle) { - this.props.history!.push( - routeResolver.getRoute('pim.events.new') - ); + this.newEvent(); } } @@ -100,7 +106,11 @@ class PimMain extends React.PureComponent { label={calendarTitle} > - + diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index 0e69a6e..18243af 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -32,6 +32,7 @@ class Calendar extends React.PureComponent { props: { entries: Array, onItemClick: (contact: EventType) => void, + onSlotClick?: (start: Date, end: Date) => void, }; constructor(props: any) { @@ -39,18 +40,27 @@ class Calendar extends React.PureComponent { this.state = {}; this.onNavigate = this.onNavigate.bind(this); + this.slotClicked = this.slotClicked.bind(this); } onNavigate(currentDate: Date) { this.setState({currentDate}); } + slotClicked(slotInfo: {start: Date, end: Date}) { + if (this.props.onSlotClick) { + this.props.onSlotClick(slotInfo.start, slotInfo.end); + } + } + render() { return (
void; onDelete: (event: EventType, journalUid: string) => void; onCancel: () => void; + location: Location; }; constructor(props: any) { @@ -57,6 +61,17 @@ class EventEdit extends React.PureComponent { journalUid: '', showDeleteDialog: false, }; + + const locState = this.props.location.state; + // FIXME: Hack to determine if all day. Should be passed as a proper state. + this.state.allDay = (locState.start && + (locState.start.getHours() === 0) && + (locState.start.getMinutes() === 0) && + (locState.start.getHours() === locState.end.getHours()) && + (locState.start.getMinutes() === locState.end.getMinutes())); + this.state.start = (locState.start) ? locState.start : undefined; + this.state.end = (locState.end) ? locState.end : undefined; + if (this.props.item !== undefined) { const event = this.props.item; @@ -306,4 +321,4 @@ class EventEdit extends React.PureComponent { } } -export default EventEdit; +export default withRouter(EventEdit);