allow deletion of a contact

src/views/ContactsView.vue

@@ -96,7 +96,12 @@
             {{ contact.name || "(no name)" }}
           </h2>
           <div class="text-sm truncate">{{ contact.did }}</div>
-          <div class="text-sm truncate">{{ contact.publicKeyBase64 }}</div>
+          <div class="text-sm truncate" v-if="contact.publicKeyBase64">
+            Public Key (base 64): {{ contact.publicKeyBase64 }}
+          </div>
+          <button @click="deleteContact(contact)">
+            <fa icon="trash-can" class="text-slate-900 fa-fw ml-1" />
+          </button>
           <div v-if="showGiveTotals" class="float-right">
             <div class="float-right">
               to: {{ givenByMeTotals[contact.did] || 0 }}
@@ -183,7 +188,11 @@ export default class ContactsView extends Vue {
     if (this.showGiveTotals) {
       this.loadGives();
     }
-    this.contacts = await db.contacts.toArray();
+    const allContacts = await db.contacts.toArray();
+    this.contacts = R.sort(
+      (a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
+      allContacts
+    );
   }
 
   async onClickNewContact(): Promise<void> {
@@ -206,7 +215,11 @@ export default class ContactsView extends Vue {
     }
     const newContact = { did, name, publicKeyBase64 };
     await db.contacts.add(newContact);
-    this.contacts = this.contacts.concat([newContact]);
+    const allContacts = this.contacts.concat([newContact]);
+    this.contacts = R.sort(
+      (a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
+      allContacts
+    );
   }
 
   async loadGives() {
@@ -281,6 +294,22 @@ export default class ContactsView extends Vue {
     }
   }
 
+  async deleteContact(contact: Contact) {
+    if (
+      confirm(
+        "Are you sure you want to delete " +
+          this.nameForDid(this.contacts, contact.did) +
+          " with DID " +
+          contact.did +
+          "?"
+      )
+    ) {
+      await db.open();
+      await db.contacts.delete(contact.did);
+      this.contacts = R.without([contact], this.contacts);
+    }
+  }
+
   // from https://stackoverflow.com/a/175787/845494
   //
   private isNumeric(str: string): boolean {