Browse Source

enhancements to contact name edit

why-migrate-fail
Trent Larson 11 months ago
parent
commit
6eb3381a98
  1. 2
      src/main.ts
  2. 19
      src/views/ContactsView.vue

2
src/main.ts

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

19
src/views/ContactsView.vue

@ -95,7 +95,10 @@
{{ contact.name || "(no name)" }} {{ contact.name || "(no name)" }}
<button <button
class="text-sm uppercase bg-slate-500 text-white px-1 rounded-md" class="text-sm uppercase bg-slate-500 text-white px-1 rounded-md"
@click="contactEdit = contact" @click="
contactEdit = contact;
contactNewName = contact.name;
"
title="Edit" title="Edit"
> >
<fa icon="pen" class="fa-fw" /> <fa icon="pen" class="fa-fw" />
@ -227,11 +230,18 @@
v-model="contactNewName" v-model="contactNewName"
/> />
<button <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)" @click="onClickSaveName(contactEdit, contactNewName)"
> >
<fa icon="save" /> <fa icon="save" />
</button> </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>
</div> </div>
</section> </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) { private async onClickSaveName(contact: Contact, newName: string) {
contact.name = newName; contact.name = newName;
return db.contacts return db.contacts

Loading…
Cancel
Save