Implement contact and calendar event deletion.

master
Tom Hacohen 7 years ago
parent 507c0e3a1a
commit 78b292f1c4

@ -96,6 +96,7 @@ const CollectionRoutes = withRouter(
componentView: any, componentView: any,
items: {[key: string]: any}, items: {[key: string]: any},
onItemSave: (item: Object, journalUid: string, originalContact?: Object) => void; onItemSave: (item: Object, journalUid: string, originalContact?: Object) => void;
onItemDelete: (item: Object, journalUid: string) => void;
onItemCancel: () => void; onItemCancel: () => void;
}; };
@ -111,7 +112,11 @@ const CollectionRoutes = withRouter(
exact={true} exact={true}
render={({match}) => ( render={({match}) => (
<Container style={{maxWidth: 400}}> <Container style={{maxWidth: 400}}>
<ComponentEdit collections={props.collections} onSave={props.onItemSave} /> <ComponentEdit
collections={props.collections}
onSave={props.onItemSave}
onDelete={props.onItemDelete}
/>
</Container> </Container>
)} )}
/> />
@ -120,13 +125,16 @@ const CollectionRoutes = withRouter(
exact={true} exact={true}
render={({match}) => ( render={({match}) => (
<Container style={{maxWidth: 400}}> <Container style={{maxWidth: 400}}>
<ComponentEdit {(match.params.itemUid in props.items) &&
initialCollection={(props.items[match.params.itemUid] as any).journalUid} <ComponentEdit
item={props.items[match.params.itemUid]} initialCollection={(props.items[match.params.itemUid] as any).journalUid}
collections={props.collections} item={props.items[match.params.itemUid]}
onSave={props.onItemSave} collections={props.collections}
onCancel={props.onItemCancel} onSave={props.onItemSave}
/> onDelete={props.onItemDelete}
onCancel={props.onItemCancel}
/>
}
</Container> </Container>
)} )}
/> />
@ -194,6 +202,7 @@ class Pim extends React.PureComponent {
this.onEventSave = this.onEventSave.bind(this); this.onEventSave = this.onEventSave.bind(this);
this.onContactSave = this.onContactSave.bind(this); this.onContactSave = this.onContactSave.bind(this);
this.onCancel = this.onCancel.bind(this); this.onCancel = this.onCancel.bind(this);
this.onItemDelete = this.onItemDelete.bind(this);
} }
onEventSave(event: EventType, journalUid: string, originalEvent?: EventType) { 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() { onCancel() {
this.props.history.goBack(); this.props.history.goBack();
} }
@ -261,6 +287,7 @@ class Pim extends React.PureComponent {
componentEdit={ContactEdit} componentEdit={ContactEdit}
componentView={Contact} componentView={Contact}
onItemSave={this.onContactSave} onItemSave={this.onContactSave}
onItemDelete={this.onItemDelete}
onItemCancel={this.onCancel} onItemCancel={this.onCancel}
/> />
)} )}
@ -276,6 +303,7 @@ class Pim extends React.PureComponent {
componentEdit={EventEdit} componentEdit={EventEdit}
componentView={Event} componentView={Event}
onItemSave={this.onEventSave} onItemSave={this.onEventSave}
onItemDelete={this.onItemDelete}
onItemCancel={this.onCancel} onItemCancel={this.onCancel}
/> />
)} )}

@ -4,12 +4,16 @@ import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField'; import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem'; 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 IconAdd from 'material-ui/svg-icons/content/add';
import IconClear from 'material-ui/svg-icons/content/clear'; import IconClear from 'material-ui/svg-icons/content/clear';
import IconCancel 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 IconSave from 'material-ui/svg-icons/content/save';
import ConfirmationDialog from '../widgets/ConfirmationDialog';
import * as uuid from 'uuid'; import * as uuid from 'uuid';
import * as ICAL from 'ical.js'; import * as ICAL from 'ical.js';
@ -117,6 +121,7 @@ class ContactEdit extends React.PureComponent {
title: string; title: string;
journalUid: string; journalUid: string;
showDeleteDialog: boolean;
}; };
props: { props: {
@ -124,6 +129,7 @@ class ContactEdit extends React.PureComponent {
initialCollection?: string, initialCollection?: string,
item?: ContactType, item?: ContactType,
onSave: (contact: ContactType, journalUid: string, originalContact?: ContactType) => void; onSave: (contact: ContactType, journalUid: string, originalContact?: ContactType) => void;
onDelete: (contact: ContactType, journalUid: string) => void;
onCancel: () => void; onCancel: () => void;
}; };
@ -141,6 +147,7 @@ class ContactEdit extends React.PureComponent {
title: '', title: '',
journalUid: '', journalUid: '',
showDeleteDialog: false,
}; };
if (this.props.item !== undefined) { if (this.props.item !== undefined) {
@ -188,6 +195,7 @@ class ContactEdit extends React.PureComponent {
this.handleValueTypeChange = this.handleValueTypeChange.bind(this); this.handleValueTypeChange = this.handleValueTypeChange.bind(this);
this.addValueType = this.addValueType.bind(this); this.addValueType = this.addValueType.bind(this);
this.removeValueType = this.removeValueType.bind(this); this.removeValueType = this.removeValueType.bind(this);
this.onDeleteRequest = this.onDeleteRequest.bind(this);
} }
componentWillReceiveProps(nextProps: any) { componentWillReceiveProps(nextProps: any) {
@ -299,6 +307,12 @@ class ContactEdit extends React.PureComponent {
this.props.onSave(contact, this.state.journalUid, this.props.item); this.props.onSave(contact, this.state.journalUid, this.props.item);
} }
onDeleteRequest() {
this.setState({
showDeleteDialog: true
});
}
render() { render() {
const styles = { const styles = {
form: { form: {
@ -464,6 +478,17 @@ class ContactEdit extends React.PureComponent {
icon={<IconCancel />} icon={<IconCancel />}
/> />
{this.props.item &&
<RaisedButton
label="Delete"
labelColor={fullWhite}
backgroundColor={red500}
style={{marginLeft: 15}}
icon={<IconDelete color={fullWhite} />}
onClick={this.onDeleteRequest}
/>
}
<RaisedButton <RaisedButton
type="submit" type="submit"
label="Save" label="Save"
@ -478,6 +503,15 @@ class ContactEdit extends React.PureComponent {
the unsupported types will be copied as is. the unsupported types will be copied as is.
</div> </div>
</form> </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> </React.Fragment>
); );
} }

@ -4,12 +4,16 @@ import Toggle from 'material-ui/Toggle';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField'; import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem'; 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 IconCancel from 'material-ui/svg-icons/content/clear';
import IconSave from 'material-ui/svg-icons/content/save'; import IconSave from 'material-ui/svg-icons/content/save';
import DateTimePicker from '../widgets/DateTimePicker'; import DateTimePicker from '../widgets/DateTimePicker';
import ConfirmationDialog from '../widgets/ConfirmationDialog';
import * as uuid from 'uuid'; import * as uuid from 'uuid';
import * as ICAL from 'ical.js'; import * as ICAL from 'ical.js';
@ -29,6 +33,7 @@ class EventEdit extends React.PureComponent {
journalUid: string; journalUid: string;
error?: string; error?: string;
showDeleteDialog: boolean;
}; };
props: { props: {
@ -36,6 +41,7 @@ class EventEdit extends React.PureComponent {
initialCollection?: string, initialCollection?: string,
item?: EventType, item?: EventType,
onSave: (event: EventType, journalUid: string, originalEvent?: EventType) => void; onSave: (event: EventType, journalUid: string, originalEvent?: EventType) => void;
onDelete: (event: EventType, journalUid: string) => void;
onCancel: () => void; onCancel: () => void;
}; };
@ -51,6 +57,7 @@ class EventEdit extends React.PureComponent {
end: '', end: '',
journalUid: '', journalUid: '',
showDeleteDialog: false,
}; };
if (this.props.item !== undefined) { if (this.props.item !== undefined) {
const event = this.props.item; const event = this.props.item;
@ -83,6 +90,7 @@ class EventEdit extends React.PureComponent {
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
this.handleInputChange = this.handleInputChange.bind(this); this.handleInputChange = this.handleInputChange.bind(this);
this.toggleAllDay = this.toggleAllDay.bind(this); this.toggleAllDay = this.toggleAllDay.bind(this);
this.onDeleteRequest = this.onDeleteRequest.bind(this);
} }
componentWillReceiveProps(nextProps: any) { componentWillReceiveProps(nextProps: any) {
@ -149,6 +157,12 @@ class EventEdit extends React.PureComponent {
this.props.onSave(event, this.state.journalUid, this.props.item); this.props.onSave(event, this.state.journalUid, this.props.item);
} }
onDeleteRequest() {
this.setState({
showDeleteDialog: true
});
}
render() { render() {
const styles = { const styles = {
form: { form: {
@ -240,6 +254,17 @@ class EventEdit extends React.PureComponent {
onClick={this.props.onCancel} 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 <RaisedButton
type="submit" type="submit"
label="Save" label="Save"
@ -254,6 +279,15 @@ class EventEdit extends React.PureComponent {
the unsupported types will be copied as is. the unsupported types will be copied as is.
</div> </div>
</form> </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> </React.Fragment>
); );
} }

Loading…
Cancel
Save