From 88be50f215e005135c88298ab7fefe65e8668e8a Mon Sep 17 00:00:00 2001 From: Ramzan Date: Tue, 27 Oct 2020 17:20:43 -0400 Subject: [PATCH] Contacts: add new group button and adjust ContactEdit for group editing --- src/App.tsx | 5 +- src/Contacts/ContactEdit.tsx | 351 +++++++++++++------------ src/Contacts/Main.tsx | 21 +- src/Contacts/SearchableAddressBook.tsx | 2 + src/Contacts/Sidebar.tsx | 19 +- 5 files changed, 228 insertions(+), 170 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f2b499a..cdd8cb5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,7 +44,10 @@ export const routeResolver = new RouteResolver({ edit: "edit", log: "log", }, - new: "new", + new: { + contact: "contact", + group: "group", + }, }, events: { _id: { diff --git a/src/Contacts/ContactEdit.tsx b/src/Contacts/ContactEdit.tsx index ef023b8..c82c017 100644 --- a/src/Contacts/ContactEdit.tsx +++ b/src/Contacts/ContactEdit.tsx @@ -120,6 +120,7 @@ interface PropsType { collections: CachedCollection[]; initialCollection?: string; item?: ContactType; + group?: boolean; onSave: (contact: ContactType, collectionUid: string, originalContact?: ContactType) => Promise; onDelete: (contact: ContactType, collectionUid: string) => void; onCancel: () => void; @@ -142,6 +143,7 @@ class ContactEdit extends React.PureComponent { org: string; note: string; title: string; + group: boolean; collectionUid: string; showDeleteDialog: boolean; @@ -164,6 +166,7 @@ class ContactEdit extends React.PureComponent { org: "", note: "", title: "", + group: false, collectionUid: "", showDeleteDialog: false, @@ -172,6 +175,7 @@ class ContactEdit extends React.PureComponent { if (this.props.item !== undefined) { const contact = this.props.item; + this.state.group = contact.group; this.state.uid = contact.uid; this.state.fn = contact.fn ? contact.fn : ""; if (contact.n) { @@ -301,6 +305,9 @@ class ContactEdit extends React.PureComponent { comp.updatePropertyWithValue("version", "4.0"); comp.updatePropertyWithValue("uid", this.state.uid); comp.updatePropertyWithValue("rev", ICAL.Time.now()); + if (this.props.group) { + comp.updatePropertyWithValue("kind", "group"); + } const lastName = this.state.lastName.trim(); const firstName = this.state.firstName.trim(); @@ -341,13 +348,6 @@ class ContactEdit extends React.PureComponent { }); } - setProperties("tel", this.state.phone); - setProperties("email", this.state.email); - setProperties("adr", this.state.address); - setProperties("impp", this.state.impp.map((x) => ( - { type: x.type, value: x.type + ":" + x.value } - ))); - function setProperty(name: string, value: string) { comp.removeAllProperties(name); if (value !== "") { @@ -355,10 +355,19 @@ class ContactEdit extends React.PureComponent { } } - setProperty("org", this.state.org); - setProperty("title", this.state.title); - setProperty("note", this.state.note); + if (!this.props.group && !this.state.group) { + setProperties("tel", this.state.phone); + setProperties("email", this.state.email); + setProperties("adr", this.state.address); + setProperties("impp", this.state.impp.map((x) => ( + { type: x.type, value: x.type + ":" + x.value } + ))); + + setProperty("org", this.state.org); + setProperty("title", this.state.title); + setProperty("note", this.state.note); + } this.props.onSave(contact, this.state.collectionUid, this.props.item) .then(() => { @@ -390,7 +399,7 @@ class ContactEdit extends React.PureComponent { return (

- {this.props.item ? "Edit Contact" : "New Contact"} + {this.props.item ? this.state.group ? "Edit Group" : "Edit Contact" : this.props.group ? "New Group" : "New Contact"}

@@ -408,163 +417,175 @@ class ContactEdit extends React.PureComponent { - - - - - - - - - - -
- Phone numbers - this.addValueType("phone")} - title="Add phone number" - > - - -
- {this.state.phone.map((x, idx) => ( - this.removeValueType(name, idx)} - onChange={(name: string, type: string, value: string) => ( - this.handleValueTypeChange(name, idx, { type, value }) - )} + {this.props.group || this.state.group ? + - ))} + : + <> + + + + + + + + + + +
+ Phone numbers + this.addValueType("phone")} + title="Add phone number" + > + + +
+ {this.state.phone.map((x, idx) => ( + this.removeValueType(name, idx)} + onChange={(name: string, type: string, value: string) => ( + this.handleValueTypeChange(name, idx, { type, value }) + )} + /> + ))} -
- Emails - this.addValueType("email")} - title="Add email address" - > - - -
- {this.state.email.map((x, idx) => ( - this.removeValueType(name, idx)} - onChange={(name: string, type: string, value: string) => ( - this.handleValueTypeChange(name, idx, { type, value }) - )} - /> - ))} +
+ Emails + this.addValueType("email")} + title="Add email address" + > + + +
+ {this.state.email.map((x, idx) => ( + this.removeValueType(name, idx)} + onChange={(name: string, type: string, value: string) => ( + this.handleValueTypeChange(name, idx, { type, value }) + )} + /> + ))} -
- IMPP - this.addValueType("impp", "jabber")} - title="Add impp address" - > - - -
- {this.state.impp.map((x, idx) => ( - this.removeValueType(name, idx)} - onChange={(name: string, type: string, value: string) => ( - this.handleValueTypeChange(name, idx, { type, value }) - )} - /> - ))} +
+ IMPP + this.addValueType("impp", "jabber")} + title="Add impp address" + > + + +
+ {this.state.impp.map((x, idx) => ( + this.removeValueType(name, idx)} + onChange={(name: string, type: string, value: string) => ( + this.handleValueTypeChange(name, idx, { type, value }) + )} + /> + ))} -
- Addresses - this.addValueType("address")} - title="Add address" - > - - -
- {this.state.address.map((x, idx) => ( - this.removeValueType(name, idx)} - onChange={(name: string, type: string, value: string) => ( - this.handleValueTypeChange(name, idx, { type, value }) - )} - /> - ))} - - - - - - +
+ Addresses + this.addValueType("address")} + title="Add address" + > + + +
+ {this.state.address.map((x, idx) => ( + this.removeValueType(name, idx)} + onChange={(name: string, type: string, value: string) => ( + this.handleValueTypeChange(name, idx, { type, value }) + )} + /> + ))} + + + + + + + + }