From 6eb3381a98fb3b62921b36cea5198f949cfdd9c2 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Fri, 3 Nov 2023 10:24:48 -0600
Subject: [PATCH] enhancements to contact name edit

---
 src/main.ts                |  2 ++
 src/views/ContactsView.vue | 19 +++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 980b0e8..7bcaade 100644
--- a/src/main.ts
+++ b/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,
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index baac46f..7c0a81e 100644
--- a/src/views/ContactsView.vue
+++ b/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