|
|
@ -11,66 +11,73 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Results List --> |
|
|
|
<div> |
|
|
|
<div class="border-b border-slate-300 flex"> |
|
|
|
<div class="w-1/4"></div> |
|
|
|
<div class="w-1/4">from them</div> |
|
|
|
<div class="w-1/4"></div> |
|
|
|
<div class="w-1/4">to them</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="border-b border-slate-300 flex" |
|
|
|
v-for="record in giveRecords" |
|
|
|
:key="record.id" |
|
|
|
> |
|
|
|
<div class="w-1/4"> |
|
|
|
{{ new Date(record.issuedAt).toLocaleString() }} |
|
|
|
</div> |
|
|
|
<div class="w-1/4"> |
|
|
|
<span v-if="record.agentDid == contact.did"> |
|
|
|
<div class="font-bold"> |
|
|
|
{{ record.amount }} {{ record.unit }} |
|
|
|
<span v-if="record.amountConfirmed" class="tooltip"> |
|
|
|
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" /> |
|
|
|
<span class="tooltiptext">Confirmed</span> |
|
|
|
</span> |
|
|
|
<button v-else class="tooltip" @click="confirm(record)"> |
|
|
|
<fa icon="circle" class="text-blue-600 fa-fw ml-1" /> |
|
|
|
<span class="tooltiptext">Unconfirmed</span> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<br /> |
|
|
|
{{ record.description }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div class="w-1/8"> |
|
|
|
<span v-if="record.agentDid == contact.did"> |
|
|
|
<fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" /> |
|
|
|
</span> |
|
|
|
<span v-else> |
|
|
|
|
|
|
|
<fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" /> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div class="w-1/4"> |
|
|
|
<span v-if="record.agentDid != contact.did"> |
|
|
|
<div class="font-bold"> |
|
|
|
{{ record.amount }} {{ record.unit }} |
|
|
|
<span v-if="record.amountConfirmed" class="tooltip"> |
|
|
|
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" /> |
|
|
|
<span class="tooltiptext">Confirmed</span> |
|
|
|
</span> |
|
|
|
<button v-else class="tooltip" @click="cannotConfirmMessage()"> |
|
|
|
<fa icon="circle" class="text-slate-600 fa-fw ml-1" /> |
|
|
|
<span class="tooltiptext">Unconfirmed</span> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<br /> |
|
|
|
{{ record.description }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<table |
|
|
|
class="table-auto w-full border-t border-slate-300 text-sm sm:text-base text-center" |
|
|
|
> |
|
|
|
<thead class="bg-slate-100"> |
|
|
|
<tr class="border-b border-slate-300"> |
|
|
|
<th></th> |
|
|
|
<th class="px-1 py-2">From Them</th> |
|
|
|
<th></th> |
|
|
|
<th class="px-1 py-2">To Them</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tr |
|
|
|
v-for="record in giveRecords" |
|
|
|
:key="record.id" |
|
|
|
class="border-b border-slate-300" |
|
|
|
> |
|
|
|
<td class="p-1 text-xs sm:text-sm text-left text-slate-500"> |
|
|
|
{{ new Date(record.issuedAt).toLocaleString() }} |
|
|
|
</td> |
|
|
|
<td class="p-1"> |
|
|
|
<span v-if="record.agentDid == contact.did"> |
|
|
|
<div class="font-bold"> |
|
|
|
{{ record.amount }} {{ record.unit }} |
|
|
|
<span v-if="record.amountConfirmed" title="Confirmed"> |
|
|
|
<fa icon="circle-check" class="text-green-600 fa-fw" /> |
|
|
|
</span> |
|
|
|
<button v-else @click="confirm(record)" title="Unconfirmed"> |
|
|
|
<fa icon="circle" class="text-blue-600 fa-fw" /> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div class="italic text-xs sm:text-sm text-slate-500"> |
|
|
|
{{ record.description }} |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</td> |
|
|
|
<td class="p-1"> |
|
|
|
<span v-if="record.agentDid == contact.did"> |
|
|
|
<fa icon="arrow-left" class="text-slate-400 fa-fw" /> |
|
|
|
</span> |
|
|
|
<span v-else> |
|
|
|
<fa icon="arrow-right" class="text-slate-400 fa-fw" /> |
|
|
|
</span> |
|
|
|
</td> |
|
|
|
<td class="p-1"> |
|
|
|
<span v-if="record.agentDid != contact.did"> |
|
|
|
<div class="font-bold"> |
|
|
|
{{ record.amount }} {{ record.unit }} |
|
|
|
<span v-if="record.amountConfirmed" title="Confirmed"> |
|
|
|
<fa icon="circle-check" class="text-green-600 fa-fw" /> |
|
|
|
</span> |
|
|
|
<button |
|
|
|
v-else |
|
|
|
@click="cannotConfirmMessage()" |
|
|
|
title="Unconfirmed" |
|
|
|
> |
|
|
|
<fa icon="circle" class="text-slate-600 fa-fw" /> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div class="italic text-xs sm:text-sm text-slate-500"> |
|
|
|
{{ record.description }} |
|
|
|
</div> |
|
|
|
</span> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
<AlertMessage |
|
|
|
:alertTitle="alertTitle" |
|
|
|
:alertMessage="alertMessage" |
|
|
|