show a 'give' button directly on offers in the ProjectView

This commit is contained in:
2024-01-16 15:23:40 -07:00
parent b79c5fcf91
commit be6ec6745a
7 changed files with 119 additions and 58 deletions

View File

@@ -123,7 +123,7 @@
<ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
<li @click="openGiftDialog()">
<EntityIcon
:entityId="null"
:entityId="undefined"
:iconSize="64"
class="mx-auto border border-slate-300 rounded-md mb-1"
></EntityIcon>
@@ -198,12 +198,24 @@
</span>
</div>
<div v-if="offer.objectDescription" class="text-slate-500">
<fa icon="comment" class="fa-fw text-slate-400"></fa>
<fa icon="comment" class="fa-fw text-slate-400" />
{{ offer.objectDescription }}
</div>
<div class="flex justify-between">
<a @click="onClickLoadClaim(offer.jwtId)" class="cursor-pointer">
<fa icon="circle-info" class="pl-2 pt-1 text-blue-500"></fa>
<a
@click="onClickLoadClaim(offer.jwtId as string)"
class="cursor-pointer"
>
<fa icon="circle-info" class="pl-2 pt-1 text-blue-500" />
</a>
<a
v-if="checkIsFulfillable(offer)"
@click="onClickFulfillGiveToOffer(offer)"
>
<fa
icon="hand-holding-heart"
class="text-blue-500 cursor-pointer"
/>
</a>
</div>
</li>
@@ -243,15 +255,15 @@
</span>
</div>
<div v-if="give.description" class="text-slate-500">
<fa icon="comment" class="fa-fw text-slate-400"></fa>
<fa icon="comment" class="fa-fw text-slate-400" />
{{ give.description }}
</div>
<div class="flex justify-between">
<a @click="onClickLoadClaim(give.jwtId)">
<fa icon="circle-info" class="text-blue-500 cursor-pointer"></fa>
<fa icon="circle-info" class="text-blue-500 cursor-pointer" />
</a>
<a v-if="checkIsConfirmable(give)" @click="confirmClaim(give)">
<fa icon="circle-check" class="text-blue-500 cursor-pointer"></fa>
<fa icon="circle-check" class="text-blue-500 cursor-pointer" />
</a>
</div>
</li>
@@ -359,6 +371,7 @@ export default class ProjectViewView extends Vue {
truncateLength = 40;
url = "";
libsUtil = libsUtil;
serverUtil = serverUtil;
async created() {
@@ -370,7 +383,7 @@ export default class ProjectViewView extends Vue {
await accountsDB.open();
const accounts = accountsDB.accounts;
const accountsArr = await accounts?.toArray();
const accountsArr: Account[] = await accounts?.toArray();
this.allMyDids = accountsArr.map((acc) => acc.did);
const account = accountsArr.find((acc) => acc.did === this.activeDid);
const identity = JSON.parse(account?.identity || "null");
@@ -659,7 +672,7 @@ export default class ProjectViewView extends Vue {
);
}
openGiftDialog(contact: GiverInputInfo) {
openGiftDialog(contact?: GiverInputInfo) {
(this.$refs.customGiveDialog as GiftedDialog).open(contact);
}
@@ -674,6 +687,33 @@ export default class ProjectViewView extends Vue {
this.$router.push(route);
}
checkIsFulfillable(offer: OfferServerRecord) {
const offerRecord: GenericServerRecord = {
...BLANK_GENERIC_SERVER_RECORD,
claim: offer.fullClaim,
claimType: "Offer",
issuer: offer.offeredByDid,
};
console.log(
"checking for can fulfill ",
libsUtil.canFulfillOffer(offerRecord),
offerRecord,
);
return libsUtil.canFulfillOffer(offerRecord);
}
onClickFulfillGiveToOffer(offer: OfferServerRecord) {
const offerRecord: GenericServerRecord = {
...BLANK_GENERIC_SERVER_RECORD,
claim: offer.fullClaim,
issuer: offer.offeredByDid,
};
const giver: GiverInputInfo = {
did: libsUtil.offerGiverDid(offerRecord),
};
(this.$refs.customGiveDialog as GiftedDialog).open(giver, offer.handleId);
}
UNIT_CODES: Record<string, Record<string, string>> = {
BTC: {
name: "Bitcoin",
@@ -728,7 +768,7 @@ export default class ProjectViewView extends Vue {
claimType: "GiveAction",
issuer: give.agentDid,
};
return libsUtil.userCanConfirm(giveDetails, this.activeDid);
return libsUtil.giveRecordTheUserCanConfirm(giveDetails, this.activeDid);
}
// similar code is found in ClaimView