|
|
@ -77,93 +77,115 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<div v-if="activeDid"> |
|
|
|
<div v-if="activeDid" class="text-center"> |
|
|
|
<button |
|
|
|
@click="openDialog({ name: 'you', did: activeDid })" |
|
|
|
class="text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md" |
|
|
|
class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md" |
|
|
|
> |
|
|
|
I gave... |
|
|
|
I gave… |
|
|
|
</button> |
|
|
|
― or: |
|
|
|
<p class="mt-2 mb-4 text-center">Or, record a gift from:</p> |
|
|
|
</div> |
|
|
|
<!-- similar contact selection code is in multiple places --> |
|
|
|
Record a gift from |
|
|
|
<span v-for="contact in allContacts" :key="contact.did"> |
|
|
|
<button @click="openDialog(contact)" class="text-blue-500"> |
|
|
|
{{ contact.name }}</button |
|
|
|
>, |
|
|
|
</span> |
|
|
|
<span v-if="allContacts.length > 0"> or </span> |
|
|
|
<button @click="openDialog()" class="text-blue-500"> |
|
|
|
someone not specified |
|
|
|
</button> |
|
|
|
<p v-if="!activeDid" class="mt-2 mb-4">Record a gift from:</p> |
|
|
|
|
|
|
|
<ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5"> |
|
|
|
<li @click="openDialog()"> |
|
|
|
<div class="mb-1"> |
|
|
|
<fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa> |
|
|
|
</div> |
|
|
|
<h3 |
|
|
|
class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden" |
|
|
|
> |
|
|
|
Anonymous |
|
|
|
</h3> |
|
|
|
</li> |
|
|
|
<li |
|
|
|
v-for="contact in allContacts" |
|
|
|
:key="contact.did" |
|
|
|
@click="openDialog(contact)" |
|
|
|
> |
|
|
|
<div class="mb-1"> |
|
|
|
<fa icon="user" class="fa-fw fa-xl text-slate-400"></fa> |
|
|
|
</div> |
|
|
|
<h3 |
|
|
|
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden" |
|
|
|
> |
|
|
|
{{ contact.name || "(no name)" }} |
|
|
|
</h3> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<!-- Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list (we want to limit the grid count above to 8 or 12 accounts to keep it compact) --> |
|
|
|
<router-link |
|
|
|
v-if="allContacts.length > 7" |
|
|
|
:to="{ name: 'contact-gives' }" |
|
|
|
class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md" |
|
|
|
> |
|
|
|
Show More Contacts… |
|
|
|
</router-link> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Gifts to & from this --> |
|
|
|
<div class="mt-8 flex justify-around"> |
|
|
|
<div> |
|
|
|
<h1 class="text-xl">Given to this Project</h1> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<h1 class="text-xl">... and paid forward from this Project</h1> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex justify-around"> |
|
|
|
<div class="w-1/2"> |
|
|
|
<div v-for="give in givesToThis" :key="give.id"> |
|
|
|
<div class="flex justify-between"> |
|
|
|
<div class="flex gap-3"> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<fa icon="user" class="fa-fw text-slate-400"></fa> |
|
|
|
<span>{{ |
|
|
|
didInfo(give.agentDid, activeDid, allMyDids, allContacts) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="flex gap-2" v-if="give.amount"> |
|
|
|
<fa |
|
|
|
icon="clock" |
|
|
|
v-if="give.unit === 'HUR'" |
|
|
|
class="fa-fw text-slate-400" |
|
|
|
></fa> |
|
|
|
<fa icon="coins" v-else class="fa-fw text-slate-400"></fa> |
|
|
|
<span>{{ give.amount }}</span> |
|
|
|
</div> |
|
|
|
<div class="flex gap-2" v-if="give.description"> |
|
|
|
<fa icon="comment" class="fa-fw text-slate-400"></fa> |
|
|
|
<span>{{ give.description }}</span> |
|
|
|
</div> |
|
|
|
<div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4"> |
|
|
|
<div class="bg-slate-100 px-4 py-3 rounded-md"> |
|
|
|
<h3 class="text-sm uppercase font-semibold mb-3"> |
|
|
|
Given to this Project |
|
|
|
</h3> |
|
|
|
|
|
|
|
<ul class="text-sm border-t border-slate-300"> |
|
|
|
<li |
|
|
|
v-for="give in givesToThis" |
|
|
|
:key="give.id" |
|
|
|
class="py-1.5 border-b border-slate-300" |
|
|
|
> |
|
|
|
<div class="flex justify-between gap-4"> |
|
|
|
<span |
|
|
|
><fa icon="user" class="fa-fw text-slate-400"></fa> |
|
|
|
{{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }} |
|
|
|
</span> |
|
|
|
<span v-if="give.amount" |
|
|
|
><fa icon="coins" class="fa-fw text-slate-400"></fa> |
|
|
|
{{ give.amount }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="give.description" class="text-slate-500"> |
|
|
|
<fa icon="comment" class="fa-fw text-slate-400"></fa> |
|
|
|
{{ give.description }} |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="w-1/2"> |
|
|
|
<div v-for="give in givesByThis" :key="give.id"> |
|
|
|
<div class="flex justify-between"> |
|
|
|
<div class="flex gap-3"> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<fa icon="user" class="fa-fw text-slate-400"></fa> |
|
|
|
<span>{{ |
|
|
|
didInfo(give.agentDid, activeDid, allMyDids, allContacts) |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<div class="flex gap-2" v-if="give.amount"> |
|
|
|
<fa |
|
|
|
icon="clock" |
|
|
|
v-if="give.unit === 'HUR'" |
|
|
|
class="fa-fw text-slate-400" |
|
|
|
></fa> |
|
|
|
<fa icon="coins" v-else class="fa-fw text-slate-400"></fa> |
|
|
|
<span>{{ give.amount }}</span> |
|
|
|
</div> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<fa icon="comment" class="fa-fw text-slate-400"></fa> |
|
|
|
<span>{{ give.description }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="bg-slate-100 px-4 py-3 rounded-md"> |
|
|
|
<h3 class="text-sm uppercase font-semibold mb-3"> |
|
|
|
…and from this Project |
|
|
|
</h3> |
|
|
|
|
|
|
|
<ul class="text-sm border-t border-slate-300"> |
|
|
|
<li |
|
|
|
v-for="give in givesByThis" |
|
|
|
:key="give.id" |
|
|
|
class="py-1.5 border-b border-slate-300" |
|
|
|
> |
|
|
|
<div class="flex justify-between gap-4"> |
|
|
|
<span |
|
|
|
><fa icon="user" class="fa-fw text-slate-400"></fa> |
|
|
|
{{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }} |
|
|
|
</span> |
|
|
|
<span v-if="give.amount" |
|
|
|
><fa icon="coins" class="fa-fw text-slate-400"></fa> |
|
|
|
{{ give.amount }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="give.description" class="text-slate-500"> |
|
|
|
<fa icon="comment" class="fa-fw text-slate-400"></fa> |
|
|
|
{{ give.description }} |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<GiftedDialog |
|
|
|
ref="customDialog" |
|
|
|
@dialog-result="handleDialogResult" |
|
|
|