enhancements to contact name edit

src/main.ts

@@ -13,6 +13,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faArrowLeft,
   faArrowRight,
+  faBan,
   faBurst,
   faCalendar,
   faChevronLeft,
@@ -59,6 +60,7 @@ import {
 library.add(
   faArrowLeft,
   faArrowRight,
+  faBan,
   faBurst,
   faCalendar,
   faChevronLeft,

src/views/ContactsView.vue

@@ -95,7 +95,10 @@
             {{ contact.name || "(no name)" }}
             <button
               class="text-sm uppercase bg-slate-500 text-white px-1 rounded-md"
-              @click="contactEdit = contact"
+              @click="
+                contactEdit = contact;
+                contactNewName = contact.name;
+              "
               title="Edit"
             >
               <fa icon="pen" class="fa-fw" />
@@ -227,11 +230,18 @@
           v-model="contactNewName"
         />
         <button
-          class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-r-md -ml-1.5 border-l border-blue-400"
+          class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
           @click="onClickSaveName(contactEdit, contactNewName)"
         >
           <fa icon="save" />
         </button>
+        <span class="inline-block w-2" />
+        <button
+          class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
+          @click="onClickCancelName()"
+        >
+          <fa icon="ban" />
+        </button>
       </div>
     </div>
   </section>
@@ -988,6 +998,11 @@ export default class ContactsView extends Vue {
     }
   }
 
+  private async onClickCancelName() {
+    this.contactEdit = null;
+    this.contactNewName = "";
+  }
+
   private async onClickSaveName(contact: Contact, newName: string) {
     contact.name = newName;
     return db.contacts