diff --git a/src/Pim/index.tsx b/src/Pim/index.tsx index 329acef..8d6ec81 100644 --- a/src/Pim/index.tsx +++ b/src/Pim/index.tsx @@ -96,6 +96,7 @@ const CollectionRoutes = withRouter( componentView: any, items: {[key: string]: any}, onItemSave: (item: Object, journalUid: string, originalContact?: Object) => void; + onItemDelete: (item: Object, journalUid: string) => void; onItemCancel: () => void; }; @@ -111,7 +112,11 @@ const CollectionRoutes = withRouter( exact={true} render={({match}) => ( - + )} /> @@ -120,13 +125,16 @@ const CollectionRoutes = withRouter( exact={true} render={({match}) => ( - + {(match.params.itemUid in props.items) && + + } )} /> @@ -194,6 +202,7 @@ class Pim extends React.PureComponent { this.onEventSave = this.onEventSave.bind(this); this.onContactSave = this.onContactSave.bind(this); this.onCancel = this.onCancel.bind(this); + this.onItemDelete = this.onItemDelete.bind(this); } onEventSave(event: EventType, journalUid: string, originalEvent?: EventType) { @@ -230,6 +239,23 @@ class Pim extends React.PureComponent { }); } + onItemDelete(item: any, journalUid: string) { + const syncJournal = this.props.syncInfo.get(journalUid); + + if (syncJournal === undefined) { + return; + } + + const journal = syncJournal.journal; + + let action = EteSync.SyncEntryAction.Delete; + let deleteItem = store.dispatch( + createJournalEntry(this.props.etesync, journal, syncJournal.journalEntries, action, item.toIcal())); + (deleteItem as any).then(() => { + this.props.history.push(routeResolver.getRoute('pim')); + }); + } + onCancel() { this.props.history.goBack(); } @@ -261,6 +287,7 @@ class Pim extends React.PureComponent { componentEdit={ContactEdit} componentView={Contact} onItemSave={this.onContactSave} + onItemDelete={this.onItemDelete} onItemCancel={this.onCancel} /> )} @@ -276,6 +303,7 @@ class Pim extends React.PureComponent { componentEdit={EventEdit} componentView={Event} onItemSave={this.onEventSave} + onItemDelete={this.onItemDelete} onItemCancel={this.onCancel} /> )} diff --git a/src/components/ContactEdit.tsx b/src/components/ContactEdit.tsx index 4640527..51ac7c5 100644 --- a/src/components/ContactEdit.tsx +++ b/src/components/ContactEdit.tsx @@ -4,12 +4,16 @@ import RaisedButton from 'material-ui/RaisedButton'; import TextField from 'material-ui/TextField'; import SelectField from 'material-ui/SelectField'; import MenuItem from 'material-ui/MenuItem'; +import { red500, fullWhite } from 'material-ui/styles/colors'; +import IconDelete from 'material-ui/svg-icons/action/delete'; import IconAdd from 'material-ui/svg-icons/content/add'; import IconClear from 'material-ui/svg-icons/content/clear'; import IconCancel from 'material-ui/svg-icons/content/clear'; import IconSave from 'material-ui/svg-icons/content/save'; +import ConfirmationDialog from '../widgets/ConfirmationDialog'; + import * as uuid from 'uuid'; import * as ICAL from 'ical.js'; @@ -117,6 +121,7 @@ class ContactEdit extends React.PureComponent { title: string; journalUid: string; + showDeleteDialog: boolean; }; props: { @@ -124,6 +129,7 @@ class ContactEdit extends React.PureComponent { initialCollection?: string, item?: ContactType, onSave: (contact: ContactType, journalUid: string, originalContact?: ContactType) => void; + onDelete: (contact: ContactType, journalUid: string) => void; onCancel: () => void; }; @@ -141,6 +147,7 @@ class ContactEdit extends React.PureComponent { title: '', journalUid: '', + showDeleteDialog: false, }; if (this.props.item !== undefined) { @@ -188,6 +195,7 @@ class ContactEdit extends React.PureComponent { this.handleValueTypeChange = this.handleValueTypeChange.bind(this); this.addValueType = this.addValueType.bind(this); this.removeValueType = this.removeValueType.bind(this); + this.onDeleteRequest = this.onDeleteRequest.bind(this); } componentWillReceiveProps(nextProps: any) { @@ -299,6 +307,12 @@ class ContactEdit extends React.PureComponent { this.props.onSave(contact, this.state.journalUid, this.props.item); } + onDeleteRequest() { + this.setState({ + showDeleteDialog: true + }); + } + render() { const styles = { form: { @@ -464,6 +478,17 @@ class ContactEdit extends React.PureComponent { icon={} /> + {this.props.item && + } + onClick={this.onDeleteRequest} + /> + } + + + this.props.onDelete(this.props.item!, this.props.initialCollection!)} + onCancel={() => this.setState({showDeleteDialog: false})} + > + Are you sure you would like to delete this contact? + ); } diff --git a/src/components/EventEdit.tsx b/src/components/EventEdit.tsx index edf10cb..fc514f4 100644 --- a/src/components/EventEdit.tsx +++ b/src/components/EventEdit.tsx @@ -4,12 +4,16 @@ 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 { red500, fullWhite } from 'material-ui/styles/colors'; +import IconDelete from 'material-ui/svg-icons/action/delete'; import IconCancel from 'material-ui/svg-icons/content/clear'; import IconSave from 'material-ui/svg-icons/content/save'; import DateTimePicker from '../widgets/DateTimePicker'; +import ConfirmationDialog from '../widgets/ConfirmationDialog'; + import * as uuid from 'uuid'; import * as ICAL from 'ical.js'; @@ -29,6 +33,7 @@ class EventEdit extends React.PureComponent { journalUid: string; error?: string; + showDeleteDialog: boolean; }; props: { @@ -36,6 +41,7 @@ class EventEdit extends React.PureComponent { initialCollection?: string, item?: EventType, onSave: (event: EventType, journalUid: string, originalEvent?: EventType) => void; + onDelete: (event: EventType, journalUid: string) => void; onCancel: () => void; }; @@ -51,6 +57,7 @@ class EventEdit extends React.PureComponent { end: '', journalUid: '', + showDeleteDialog: false, }; if (this.props.item !== undefined) { const event = this.props.item; @@ -83,6 +90,7 @@ class EventEdit extends React.PureComponent { this.handleChange = this.handleChange.bind(this); this.handleInputChange = this.handleInputChange.bind(this); this.toggleAllDay = this.toggleAllDay.bind(this); + this.onDeleteRequest = this.onDeleteRequest.bind(this); } componentWillReceiveProps(nextProps: any) { @@ -149,6 +157,12 @@ class EventEdit extends React.PureComponent { this.props.onSave(event, this.state.journalUid, this.props.item); } + onDeleteRequest() { + this.setState({ + showDeleteDialog: true + }); + } + render() { const styles = { form: { @@ -240,6 +254,17 @@ class EventEdit extends React.PureComponent { onClick={this.props.onCancel} /> + {this.props.item && + } + onClick={this.onDeleteRequest} + /> + } + + + this.props.onDelete(this.props.item!, this.props.initialCollection!)} + onCancel={() => this.setState({showDeleteDialog: false})} + > + Are you sure you would like to delete this contact? + ); }