Contact edit: allow editing of name field rather than fn field.

Fixes #80.

src/components/ContactEdit.tsx

@@ -130,6 +130,11 @@ class ContactEdit extends React.PureComponent<PropsType> {
   public state: {
     uid: string;
     fn: string;
+    lastName: string;
+    firstName: string;
+    middleName: string;
+    namePrefix: string;
+    nameSuffix: string;
     phone: ValueType[];
     email: ValueType[];
     address: ValueType[];
@@ -147,6 +152,11 @@ class ContactEdit extends React.PureComponent<PropsType> {
     this.state = {
       uid: '',
       fn: '',
+      lastName: '',
+      firstName: '',
+      middleName: '',
+      namePrefix: '',
+      nameSuffix: '',
       phone: [new ValueType()],
       email: [new ValueType()],
       address: [new ValueType()],
@@ -164,6 +174,29 @@ class ContactEdit extends React.PureComponent<PropsType> {
 
       this.state.uid = contact.uid;
       this.state.fn = contact.fn ? contact.fn : '';
+      if (contact.n) {
+        this.state.lastName = contact.n[0];
+        this.state.firstName = contact.n[1];
+        this.state.middleName = contact.n[2];
+        this.state.namePrefix = contact.n[3];
+        this.state.nameSuffix = contact.n[4];
+      } else {
+        let name = this.state.fn.trim().split(',');
+        if (name.length > 2 && name[0] !== '' && name[name.length - 1] !== '') {
+          this.state.nameSuffix = name.pop() || '';
+        }
+        name = name.join(',').split(' ');
+        if (name.length === 1) {
+          this.state.firstName = name[0];
+        } else if (name.length === 2) {
+          this.state.firstName = name[0];
+          this.state.lastName = name[1];
+        } else if (name.length > 2) {
+          this.state.firstName = name.slice(0, name.length - 2).join(' ');
+          this.state.middleName = name[name.length - 2];
+          this.state.lastName = name[name.length - 1];
+        }
+      }
 
       // FIXME: Am I really getting all the values this way?
       const propToValueType = (comp: ICAL.Component, propName: string) => (
@@ -282,9 +315,33 @@ class ContactEdit extends React.PureComponent<PropsType> {
     comp.updatePropertyWithValue('prodid', '-//iCal.js EteSync Web');
     comp.updatePropertyWithValue('version', '4.0');
     comp.updatePropertyWithValue('uid', this.state.uid);
-    comp.updatePropertyWithValue('fn', this.state.fn);
     comp.updatePropertyWithValue('rev', ICAL.Time.now());
 
+    const lastName = this.state.lastName.trim();
+    const firstName = this.state.firstName.trim();
+    const middleName = this.state.middleName.trim();
+    const namePrefix = this.state.namePrefix.trim();
+    const nameSuffix = this.state.nameSuffix.trim();
+    
+    let fn = `${namePrefix} ${firstName} ${middleName} ${lastName}`.trim();
+
+    if (fn === '') { 
+      fn = nameSuffix;
+    } else if (nameSuffix !== '') { 
+      fn = `${fn}, ${nameSuffix}`;
+    }
+
+    comp.updatePropertyWithValue('fn', fn);
+
+    const name = [lastName,
+      firstName,
+      middleName,
+      namePrefix,
+      nameSuffix,
+    ];
+
+    comp.updatePropertyWithValue('n', name);
+
     function setProperties(name: string, source: ValueType[]) {
       comp.removeAllProperties(name);
       source.forEach((x) => {
@@ -317,6 +374,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
     setProperty('title', this.state.title);
     setProperty('note', this.state.note);
 
+
     this.props.onSave(contact, this.state.journalUid, this.props.item)
       .then(() => {
         this.props.history.goBack();
@@ -366,10 +424,42 @@ class ContactEdit extends React.PureComponent<PropsType> {
           </FormControl>
 
           <TextField
-            name="fn"
+            name="namePrefix"
-            placeholder="Name"
+            placeholder="Prefix"
+            style={{ marginTop: '2rem', ...styles.fullWidth }}
+            value={this.state.namePrefix}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="firstName"
+            placeholder="First name"
+            style={{ marginTop: '2rem', ...styles.fullWidth }}
+            value={this.state.firstName}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="middleName"
+            placeholder="Middle name"
+            style={{ marginTop: '2rem', ...styles.fullWidth }}
+            value={this.state.middleName}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="lastName"
+            placeholder="Last name"
+            style={{ marginTop: '2rem', ...styles.fullWidth }}
+            value={this.state.lastName}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="nameSuffix"
+            placeholder="Suffix"
             style={{ marginTop: '2rem', ...styles.fullWidth }}
-            value={this.state.fn}
+            value={this.state.nameSuffix}
             onChange={this.handleInputChange}
           />
 

src/pim-types.ts

@@ -360,6 +360,10 @@ export class ContactType implements PimType {
     return this.comp.getFirstPropertyValue('fn');
   }
 
+  get n() {
+    return this.comp.getFirstPropertyValue('n');
+  }
+
   get group() {
     const kind = this.comp.getFirstPropertyValue('kind');
     return kind in ['group', 'organization'];