Contacts: add new group button and adjust ContactEdit for group editing

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: {

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<void>;
   onDelete: (contact: ContactType, collectionUid: string) => void;
   onCancel: () => void;
@@ -142,6 +143,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
     org: string;
     note: string;
     title: string;
+    group: boolean;
 
     collectionUid: string;
     showDeleteDialog: boolean;
@@ -164,6 +166,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
       org: "",
       note: "",
       title: "",
+      group: false,
 
       collectionUid: "",
       showDeleteDialog: false,
@@ -172,6 +175,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
     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<PropsType> {
     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<PropsType> {
       });
     }
 
-    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<PropsType> {
       }
     }
 
+
+    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<PropsType> {
     return (
       <React.Fragment>
         <h2>
-          {this.props.item ? "Edit Contact" : "New Contact"}
+          {this.props.item ? this.state.group ? "Edit Group" : "Edit Contact" : this.props.group ? "New Group" : "New Contact"}
         </h2>
         <form style={styles.form} onSubmit={this.onSubmit}>
           <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth}>
@@ -408,6 +417,16 @@ class ContactEdit extends React.PureComponent<PropsType> {
             </Select>
           </FormControl>
 
+          {this.props.group || this.state.group ?
+            <TextField
+              name="firstName"
+              placeholder="Name"
+              style={{ marginTop: "2rem", ...styles.fullWidth }}
+              value={this.state.firstName}
+              onChange={this.handleInputChange}
+            />
+            :
+            <>
               <TextField
                 name="namePrefix"
                 placeholder="Prefix"
@@ -565,6 +584,8 @@ class ContactEdit extends React.PureComponent<PropsType> {
                 value={this.state.note}
                 onChange={this.handleInputChange}
               />
+            </>
+          }
 
           <div style={styles.submit}>
             <Button
@@ -605,7 +626,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
           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?
+          {`Are you sure you would like to delete this ${this.state.group ? "group" : "contact"}?`}
         </ConfirmationDialog>
       </React.Fragment>
     );

src/Contacts/Main.tsx

@@ -99,15 +99,31 @@ export default function ContactsMain() {
           onItemClick={(item) => history.push(
             routeResolver.getRoute("pim.contacts._id", { itemUid: getItemNavigationUid(item) })
           )}
+          onNewGroupClick={() => history.push(
+            routeResolver.getRoute("pim.contacts.new.group")
+          )}
         />
         <PimFab
           onClick={() => history.push(
-            routeResolver.getRoute("pim.contacts.new")
+            routeResolver.getRoute("pim.contacts.new.contact")
           )}
         />
       </Route>
       <Route
-        path={routeResolver.getRoute("pim.contacts.new")}
+        path={routeResolver.getRoute("pim.contacts.new.group")}
+        exact
+      >
+        <ContactEdit
+          collections={cachedCollections}
+          onSave={onItemSave}
+          onDelete={onItemDelete}
+          onCancel={onCancel}
+          history={history}
+          group
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("pim.contacts.new.contact")}
         exact
       >
         <ContactEdit
@@ -160,6 +176,7 @@ export default function ContactsMain() {
                   onDelete={onItemDelete}
                   onCancel={onCancel}
                   history={history}
+                  group
                 />
               </Route>
               <Route

src/Contacts/SearchableAddressBook.tsx

@@ -22,6 +22,7 @@ const useStyles = makeStyles((theme) => ({
 interface PropsType {
   entries: ContactType[];
   onItemClick: (contact: ContactType) => void;
+  onNewGroupClick: () => void;
 }
 
 export default function SearchableAddressBook(props: PropsType) {
@@ -66,6 +67,7 @@ export default function SearchableAddressBook(props: PropsType) {
           groups={groups}
           filterByGroup={filterByGroup}
           setFilterByGroup={setFilterByGroup}
+          newGroup={props.onNewGroupClick}
         />
       </Grid>
 

src/Contacts/Sidebar.tsx

@@ -2,6 +2,9 @@ import * as React from "react";
 
 import InboxIcon from "@material-ui/icons/Inbox";
 import LabelIcon from "@material-ui/icons/LabelOutlined";
+import AddIcon from "@material-ui/icons/Add";
+
+import IconButton from "@material-ui/core/IconButton";
 
 import { List, ListItem, ListSubheader } from "../widgets/List";
 import { ContactType } from "../pim-types";
@@ -33,10 +36,11 @@ interface PropsType {
   groups: ContactType[];
   filterByGroup: string | undefined;
   setFilterByGroup: (group: string | undefined) => void;
+  newGroup: () => void;
 }
 
 export default React.memo(function Sidebar(props: PropsType) {
-  const { groups, filterByGroup, setFilterByGroup } = props;
+  const { groups, filterByGroup, setFilterByGroup, newGroup } = props;
 
   const groupList = [...groups].sort((a, b) => a.fn.localeCompare(b.fn)).map((group) => (
     <SidebarListItem
@@ -59,7 +63,18 @@ export default React.memo(function Sidebar(props: PropsType) {
         setFilterByGroup={setFilterByGroup}
       />
 
-      <ListSubheader>Groups</ListSubheader>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <ListSubheader>
+          Groups
+        </ListSubheader>
+        <IconButton
+          edge="end"
+          onClick={newGroup}
+        >
+          <AddIcon />
+        </IconButton>
+      </div>
+
       {groupList}
     </List>
   );