Implement contact and calendar event deletion.

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}) => (
               <Container style={{maxWidth: 400}}>
-                <ComponentEdit collections={props.collections} onSave={props.onItemSave} />
+                <ComponentEdit
+                  collections={props.collections}
+                  onSave={props.onItemSave}
+                  onDelete={props.onItemDelete}
+                />
               </Container>
             )}
           />
@@ -120,13 +125,16 @@ const CollectionRoutes = withRouter(
             exact={true}
             render={({match}) => (
               <Container style={{maxWidth: 400}}>
-                <ComponentEdit
-                  initialCollection={(props.items[match.params.itemUid] as any).journalUid}
-                  item={props.items[match.params.itemUid]}
-                  collections={props.collections}
-                  onSave={props.onItemSave}
-                  onCancel={props.onItemCancel}
-                />
+                {(match.params.itemUid in props.items) &&
+                  <ComponentEdit
+                    initialCollection={(props.items[match.params.itemUid] as any).journalUid}
+                    item={props.items[match.params.itemUid]}
+                    collections={props.collections}
+                    onSave={props.onItemSave}
+                    onDelete={props.onItemDelete}
+                    onCancel={props.onItemCancel}
+                  />
+                }
               </Container>
             )}
           />
@@ -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}
             />
           )}

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={<IconCancel />}
             />
 
+            {this.props.item &&
+              <RaisedButton
+                label="Delete"
+                labelColor={fullWhite}
+                backgroundColor={red500}
+                style={{marginLeft: 15}}
+                icon={<IconDelete color={fullWhite} />}
+                onClick={this.onDeleteRequest}
+              />
+            }
+
             <RaisedButton
               type="submit"
               label="Save"
@@ -478,6 +503,15 @@ class ContactEdit extends React.PureComponent {
             the unsupported types will be copied as is.
           </div>
         </form>
+
+      <ConfirmationDialog
+        title="Delete Confirmation"
+        open={this.state.showDeleteDialog}
+        onOk={() => this.props.onDelete(this.props.item!, this.props.initialCollection!)}
+        onCancel={() => this.setState({showDeleteDialog: false})}
+      >
+        Are you sure you would like to delete this contact?
+      </ConfirmationDialog>
       </React.Fragment>
     );
   }

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 &&
+              <RaisedButton
+                label="Delete"
+                labelColor={fullWhite}
+                backgroundColor={red500}
+                style={{marginLeft: 15}}
+                icon={<IconDelete color={fullWhite} />}
+                onClick={this.onDeleteRequest}
+              />
+            }
+
             <RaisedButton
               type="submit"
               label="Save"
@@ -254,6 +279,15 @@ class EventEdit extends React.PureComponent {
             the unsupported types will be copied as is.
           </div>
         </form>
+
+      <ConfirmationDialog
+        title="Delete Confirmation"
+        open={this.state.showDeleteDialog}
+        onOk={() => this.props.onDelete(this.props.item!, this.props.initialCollection!)}
+        onCancel={() => this.setState({showDeleteDialog: false})}
+      >
+        Are you sure you would like to delete this contact?
+      </ConfirmationDialog>
       </React.Fragment>
     );
   }