trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 23 Releases 5 Wiki Activity

give-detail page: add more-correct parameters from confirm-give page, and allow toggling of project & user-recipient

Browse Source
This commit is contained in:
Trent Larson
2024-06-21 19:13:19 -06:00
parent 15256bf698
commit b87142d3ed
3 changed files with 122 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main.ts
View File

@@ -69,6 +69,7 @@ import {
faRotate,
faShareNodes,
faSpinner,
faSquare,
faSquareCaretDown,
faSquareCaretUp,
faSquarePlus,
@@ -138,6 +139,7 @@ library.add(
faRotate,
faShareNodes,
faSpinner,
faSquare,
faSquareCaretDown,
faSquareCaretUp,
faSquarePlus,

163
src/views/ConfirmGiftView.vue
View File

@@ -27,7 +27,7 @@
</h1>
</div>
<div v-if="detailsForGive">
<div v-if="giveDetails">
<div class="flex justify-center">
<button
class="col-span-1 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
@@ -69,19 +69,19 @@
{{ giverName }}
</div>
<div class="ml-6">gave</div>
<div v-if="veriClaim.claim?.object">
<div v-if="giveDetails.amount">
<fa icon="hand-holding-dollar" class="fa-fw text-slate-400" />
{{
displayAmount(
veriClaim.claim.object.unitCode,
veriClaim.claim.object.amountOfThisGood,
giveDetails.unit,
giveDetails.amount,
)
}}
</div>
<div>
<div v-if="giveDetails.description">
<fa icon="message" class="fa-fw text-slate-400" />
{{ veriClaim.claim?.object ? "and:" : "" }}
{{ veriClaim.claim?.description }}
{{ giveDetails.amount ? "and:" : "" }}
{{ giveDetails.description }}
</div>
<div class="ml-6">to</div>
<div>
@@ -91,17 +91,17 @@
<div>
<fa icon="calendar" class="fa-fw text-slate-400" />
on
{{ veriClaim.issuedAt?.substring(0, 10) }}
{{ giveDetails.issuedAt.substring(0, 10) }}
</div>
<!-- Fullfills Links -->
<!-- fullfills links for a give -->
<div class="mt-2" v-if="detailsForGive?.fulfillsPlanHandleId">
<div class="mt-2" v-if="giveDetails?.fulfillsPlanHandleId">
<router-link
:to="
'/project/' +
encodeURIComponent(detailsForGive?.fulfillsPlanHandleId)
encodeURIComponent(giveDetails?.fulfillsPlanHandleId)
"
class="text-blue-500 mt-2 cursor-pointer"
target="_blank"
@@ -113,16 +113,16 @@
<!-- if there's another, it's probably fulfilling an offer, too -->
<div
v-if="
detailsForGive?.fulfillsType &&
detailsForGive?.fulfillsType !== 'PlanAction' &&
detailsForGive?.fulfillsHandleId
giveDetails?.fulfillsType &&
giveDetails?.fulfillsType !== 'PlanAction' &&
giveDetails?.fulfillsHandleId
"
>
<!-- router-link to /claim/ only changes URL path -->
<router-link
:to="
'/claim/' +
encodeURIComponent(detailsForGive?.fulfillsHandleId)
encodeURIComponent(giveDetails?.fulfillsHandleId)
"
class="text-blue-500 mt-2 cursor-pointer"
target="_blank"
@@ -130,7 +130,7 @@
This fulfills
{{
capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
detailsForGive.fulfillsType,
giveDetails.fulfillsType,
)
}}
<fa icon="arrow-up-right-from-square" class="fa-fw" />
@@ -254,7 +254,7 @@
<div v-if="confirmerIdList.includes(activeDid)">
You have confirmed this claim.
</div>
<div v-else-if="veriClaim.issuer == activeDid">
<div v-else-if="giveDetails.agentDid == activeDid">
You cannot confirm this because you issued this claim, so you already
count as confirming it.
</div>
@@ -428,7 +428,7 @@ export default class ClaimView extends Vue {
confirmerIdList: string[] = []; // list of DIDs that have confirmed this claim excluding the issuer
confsVisibleErrorMessage = "";
confsVisibleToIdList: string[] = []; // list of DIDs that can see any confirmer
detailsForGive = null;
giveDetails = null;
giverName = "";
issuerName = "";
numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
@@ -449,7 +449,7 @@ export default class ClaimView extends Vue {
this.confirmerIdList = [];
this.confsVisibleErrorMessage = "";
this.confsVisibleToIdList = [];
this.detailsForGive = null;
this.giveDetails = null;
this.numConfsNotVisible = 0;
this.urlForNewGive = "";
this.veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
@@ -603,64 +603,7 @@ export default class ClaimView extends Vue {
this.issuerName = this.didInfo(this.veriClaim.issuer);
this.urlForNewGive = "/gifted-details?";
if (this.veriClaim.claim.object) {
if (this.veriClaim.claim.object.amountOfThisGood) {
this.urlForNewGive +=
"&amountInput=" +
encodeURIComponent(
String(this.veriClaim.claim.object.amountOfThisGood),
);
}
if (this.veriClaim.claim.object.unitCode) {
this.urlForNewGive +=
"&unitCode=" +
encodeURIComponent(this.veriClaim.claim.object.unitCode as string);
}
}
if (this.veriClaim.claim.description) {
this.urlForNewGive +=
"&description=" +
encodeURIComponent(this.veriClaim.claim.description as string);
}
this.giverName = this.didInfo(
this.veriClaim.claim.agent?.identifier as string,
);
if (this.veriClaim.claim.agent) {
this.urlForNewGive +=
"&giverDid=" +
encodeURIComponent(this.veriClaim.claim.agent.identifier as string) +
"&giverName=" +
encodeURIComponent(this.giverName);
}
this.recipientName = this.didInfo(
this.veriClaim.claim.recipient?.identifier as string,
);
if (this.veriClaim.claim.recipient) {
this.urlForNewGive +=
"&recipientDid=" +
encodeURIComponent(
this.veriClaim.claim.recipient.identifier as string,
) +
"&recipientName=" +
encodeURIComponent(this.recipientName);
}
if (this.veriClaim.claim.image) {
this.urlForNewGive +=
"&image=" + encodeURIComponent(this.veriClaim.claim.image as string);
}
if (this.veriClaim.claim.fulfills) {
this.urlForNewGive += this.fulfillsUrlSnippet(
this.veriClaim.claim.fulfills,
);
if (Array.isArray(this.veriClaim.claim.fulfills)) {
for (const fulfills of this.veriClaim.claim.fulfills) {
console.log("adding fulfills:", fulfills);
this.urlForNewGive += this.fulfillsUrlSnippet(fulfills);
}
}
}
// use give record when possible since it may include edits
const giveUrl =
this.apiServer +
"/api/v2/report/gives?handleId=" +
@@ -671,7 +614,7 @@ export default class ClaimView extends Vue {
});
// giveResp.data is a Give from https://api.endorser.ch/api-docs/
if (giveResp.status === 200) {
this.detailsForGive = giveResp.data.data[0];
this.giveDetails = giveResp.data.data[0];
} else {
console.error("Error getting detailed give info:", giveResp);
this.$notify(
@@ -685,6 +628,52 @@ export default class ClaimView extends Vue {
);
}
this.urlForNewGive = "/gifted-details?";
if (this.giveDetails.amount) {
this.urlForNewGive +=
"&amountInput=" + encodeURIComponent(String(this.giveDetails.amount));
}
if (this.giveDetails.unit) {
this.urlForNewGive +=
"&unitCode=" + encodeURIComponent(this.giveDetails.unit);
}
if (this.giveDetails.description) {
this.urlForNewGive +=
"&description=" + encodeURIComponent(this.giveDetails.description);
}
this.giverName = this.didInfo(this.giveDetails.agentDid);
if (this.giveDetails.agentDid) {
this.urlForNewGive +=
"&giverDid=" +
encodeURIComponent(this.giveDetails.agentDid) +
"&giverName=" +
encodeURIComponent(this.giverName);
}
this.recipientName = this.didInfo(this.giveDetails.recipientDid);
if (this.giveDetails.recipientDid) {
this.urlForNewGive +=
"&recipientDid=" +
encodeURIComponent(this.giveDetails.recipientDid) +
"&recipientName=" +
encodeURIComponent(this.recipientName);
}
if (this.giveDetails.fullClaim.image) {
this.urlForNewGive +=
"&image=" + encodeURIComponent(this.giveDetails.fullClaim.image);
}
if (
this.giveDetails.type == "Offer" &&
this.giveDetails.fulfillsHandleId
) {
this.urlForNewGive +=
"&offerId=" + encodeURIComponent(this.giveDetails.fulfillsHandleId);
}
if (this.giveDetails.fulfillsPlanHandleId) {
this.urlForNewGive +=
"&projectId=" +
encodeURIComponent(this.giveDetails.fulfillsPlanHandleId);
}
// retrieve the list of confirmers
const confirmUrl =
this.apiServer +
@@ -698,7 +687,7 @@ export default class ClaimView extends Vue {
const resultList1 = response.data.result || [];
const resultList2 = R.reject(serverUtil.isHiddenDid, resultList1);
const resultList3 = R.reject(
(did: string) => did === this.veriClaim.issuer,
(did: string) => did === this.giveDetails.agentDid,
resultList2,
);
this.confirmerIdList = resultList3;
@@ -729,16 +718,6 @@ export default class ClaimView extends Vue {
}
}
fulfillsUrlSnippet(object) {
if (object["@type"] === "PlanAction") {
return "&projectId=" + encodeURIComponent(object.identifier);
} else if (object["@type"] === "OfferAction") {
return "&offerId=" + encodeURIComponent(object.identifier);
} else {
return "";
}
}
confirmConfirmClaim() {
this.$notify(
{
@@ -785,7 +764,7 @@ export default class ClaimView extends Vue {
title: "Success",
text: "Confirmation submitted.",
},
5000,
3000,
);
} else {
console.error("Got error submitting the confirmation:", result);
@@ -818,7 +797,7 @@ export default class ClaimView extends Vue {
(this.$refs.customGiveDialog as GiftedDialog).open(
giver,
undefined,
this.veriClaim.handleId,
this.giveDetails.handleId,
"Offer fulfilled by " + (giver?.name || "someone not named"),
);
}
@@ -860,7 +839,7 @@ export default class ClaimView extends Vue {
},
3000,
);
} else if (this.veriClaim.issuer == this.activeDid) {
} else if (this.giveDetails.agentDid == this.activeDid) {
this.$notify(
{
group: "alert",
@@ -870,7 +849,7 @@ export default class ClaimView extends Vue {
},
3000,
);
} else if (serverUtil.containsHiddenDid(this.veriClaim.claim)) {
} else if (serverUtil.containsHiddenDid(this.giveDetails.fullClaim)) {
this.$notify(
{
group: "alert",

60
src/views/GiftedDetails.vue
View File

@@ -76,17 +76,40 @@
</div>
<ImageMethodDialog ref="imageDialog" />
<div v-if="projectId" class="mt-4">
<fa
icon="check"
class="bg-slate-500 text-white h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
<div class="mt-4">
<input
v-if="!givenToUser"
type="checkbox"
class="h-6 w-6 mr-2"
v-model="givenToProject"
/>
<label class="text-sm">This is given to {{ projectName }}</label>
<fa
v-else
icon="square"
class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
@click="
notifyUser('Cannot be both given to you and also given to a project.')
"
/>
<label class="text-sm">This was given to {{ projectName }}</label>
</div>
<div v-if="showGivenToUser" class="mt-4">
<input type="checkbox" class="h-6 w-6 mr-2" v-model="givenToUser" />
<label class="text-sm">Given to you</label>
<div class="mt-4">
<input
v-if="!givenToProject"
type="checkbox"
class="h-6 w-6 mr-2"
v-model="givenToUser"
/>
<fa
v-else
icon="square"
class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
@click="
notifyUser('Cannot be both given to a project and also given to you.')
"
/>
<label class="text-sm">This was given to you</label>
</div>
<div class="mt-4">
@@ -148,6 +171,7 @@ export default class GiftedDetails extends Vue {
amountInput = "0";
description = "";
destinationNameAfter = "";
givenToProject = false;
givenToUser = false;
giverDid: string | undefined;
giverName = "";
@@ -215,7 +239,8 @@ export default class GiftedDetails extends Vue {
this.recipientName =
this.recipientDid === this.activeDid ? "you" : "someone not named";
}
this.showGivenToUser =
this.givenToProject = !!this.projectId;
this.givenToUser =
!this.projectId && this.recipientDid === this.activeDid;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -241,7 +266,7 @@ export default class GiftedDetails extends Vue {
this.axios,
this.apiServer,
);
// console.log("Got project name from cache", project);
console.log("Got project name from cache", project);
this.projectName = project?.name
? "the project: " + project.name
: "a project";
@@ -413,6 +438,18 @@ export default class GiftedDetails extends Vue {
await this.recordGive();
}
notifyUser(message: string) {
this.$notify(
{
group: "alert",
type: "warning",
title: "Error",
text: message,
},
3000,
);
}
/**
*
* @param giverDid may be null
@@ -429,6 +466,7 @@ export default class GiftedDetails extends Vue {
? this.activeDid
: undefined
: this.recipientDid;
const projectId = this.givenToProject ? this.projectId : undefined;
const result = await createAndSubmitGive(
this.axios,
this.apiServer,
@@ -438,7 +476,7 @@ export default class GiftedDetails extends Vue {
this.description,
parseFloat(this.amountInput),
this.unitCode,
this.projectId,
projectId,
this.offerId,
this.isTrade,
this.imageUrl,