|
|
@ -93,6 +93,16 @@ |
|
|
|
class="inline-block align-text-bottom border border-slate-300 rounded" |
|
|
|
></EntityIcon> |
|
|
|
{{ contact.name || "(no name)" }} |
|
|
|
<button |
|
|
|
class="text-sm uppercase bg-slate-500 text-white px-1 rounded-md" |
|
|
|
@click=" |
|
|
|
contactEdit = contact; |
|
|
|
contactNewName = contact.name; |
|
|
|
" |
|
|
|
title="Edit" |
|
|
|
> |
|
|
|
<fa icon="pen" class="fa-fw" /> |
|
|
|
</button> |
|
|
|
</h2> |
|
|
|
<div class="text-sm truncate">{{ contact.did }}</div> |
|
|
|
<div class="text-sm truncate" v-if="contact.publicKeyBase64"> |
|
|
@ -209,6 +219,31 @@ |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<p v-else>This identity has no contacts.</p> |
|
|
|
|
|
|
|
<div v-if="contactEdit !== null" class="dialog-overlay"> |
|
|
|
<div class="dialog"> |
|
|
|
<h1 class="text-xl font-bold text-center mb-4">Edit Name</h1> |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2" |
|
|
|
placeholder="Name" |
|
|
|
v-model="contactNewName" |
|
|
|
/> |
|
|
|
<button |
|
|
|
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> |
|
|
|
</template> |
|
|
|
|
|
|
@ -251,6 +286,8 @@ export default class ContactsView extends Vue { |
|
|
|
contacts: Array<Contact> = []; |
|
|
|
contactEndorserUrl = localStorage.getItem("contactEndorserUrl") || ""; |
|
|
|
contactInput = ""; |
|
|
|
contactEdit: Contact | null = null; |
|
|
|
contactNewName = ""; |
|
|
|
// { "did:...": concatenated-descriptions } entry for each contact |
|
|
|
givenByMeDescriptions: Record<string, string> = {}; |
|
|
|
// { "did:...": amount } entry for each contact |
|
|
@ -961,6 +998,18 @@ 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 |
|
|
|
.update(contact.did, { name: newName }) |
|
|
|
.then(() => (this.contactEdit = null)); |
|
|
|
} |
|
|
|
|
|
|
|
public toggleShowGiveTotals() { |
|
|
|
if (this.showGiveTotals) { |
|
|
|
this.showGiveTotals = false; |
|
|
@ -985,6 +1034,26 @@ export default class ContactsView extends Vue { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.dialog-overlay { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
padding: 1.5rem; |
|
|
|
} |
|
|
|
.dialog { |
|
|
|
background-color: white; |
|
|
|
padding: 1rem; |
|
|
|
border-radius: 0.5rem; |
|
|
|
width: 100%; |
|
|
|
max-width: 500px; |
|
|
|
} |
|
|
|
|
|
|
|
/* Tooltip from https://www.w3schools.com/css/css_tooltip.asp */ |
|
|
|
/* Tooltip container */ |
|
|
|
.tooltip { |
|
|
@ -992,7 +1061,6 @@ export default class ContactsView extends Vue { |
|
|
|
display: inline-block; |
|
|
|
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Tooltip text */ |
|
|
|
.tooltip .tooltiptext { |
|
|
|
visibility: hidden; |
|
|
|