add display of offers on project page

src/libs/endorserServer.ts

@@ -59,12 +59,22 @@ export interface GiveServerRecord {
   unit: string;
 }
 
+export interface OfferServerRecord {
+  amount: number;
+  amountGiven: number;
+  offeredByDid: string;
+  recipientDid: string;
+  requirementsMet: boolean;
+  unit: string;
+  validThrough: string;
+}
+
 export interface GiveVerifiableCredential {
   "@context"?: string; // optional when embedded, eg. in an Agree
   "@type": "GiveAction";
   agent?: { identifier: string };
   description?: string;
-  fulfills?: { "@type": string; identifier: string };
+  fulfills?: { "@type": string; identifier?: string; lastClaimId?: string };
   identifier?: string;
   object?: { amountOfThisGood: number; unitCode: string };
   recipient?: { identifier: string };
@@ -77,7 +87,7 @@ export interface OfferVerifiableCredential {
   includesObject?: { amountOfThisGood: number; unitCode: string };
   itemOffered?: {
     description?: string;
-    isPartOf?: { handleId?: string; lastClaimId?: string; "@type"?: string };
+    isPartOf?: { identifier?: string; lastClaimId?: string; "@type"?: string };
   };
   offeredBy?: { identifier: string };
   validThrough?: string;
@@ -242,7 +252,7 @@ export async function createAndSubmitOffer(
     vcClaim.itemOffered = vcClaim.itemOffered || {};
     vcClaim.itemOffered.isPartOf = {
       "@type": "PlanAction",
-      handleId: fulfillsProjectHandleId,
+      identifier: fulfillsProjectHandleId,
     };
   }
   return createAndSubmitClaim(

src/views/ProjectViewView.vue

@@ -146,13 +146,38 @@
 
     <!-- Gifts to & from this -->
     <div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4">
-      <!--
       <div class="bg-slate-100 px-4 py-3 rounded-md">
         <h3 class="text-sm uppercase font-semibold mb-3">
           Offered To This Project
         </h3>
+
+        <div v-if="offersToThis.length === 0">
+          (None yet. Record one above.)
+        </div>
+
+        <ul v-else class="text-sm border-t border-slate-300">
+          <li
+            v-for="offer in offersToThis"
+            :key="offer.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(offer.agentDid, activeDid, allMyDids, allContacts) }}
+              </span>
+              <span v-if="offer.amount">
+                <fa icon="coins" class="fa-fw text-slate-400"></fa>
+                {{ offer.amount }}
+              </span>
+            </div>
+            <div v-if="offer.objectDescription" class="text-slate-500">
+              <fa icon="comment" class="fa-fw text-slate-400"></fa>
+              {{ offer.objectDescription }}
+            </div>
+          </li>
+        </ul>
       </div>
-      -->
 
       <div class="bg-slate-100 px-4 py-3 rounded-md">
         <h3 class="text-sm uppercase font-semibold mb-3">
@@ -244,6 +269,7 @@ import {
   didInfo,
   GiverInputInfo,
   GiveServerRecord,
+  OfferServerRecord,
   PlanServerRecord,
 } from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
@@ -272,10 +298,11 @@ export default class ProjectViewView extends Vue {
   fulfilledByThis: PlanServerRecord | null = null;
   fulfillersToThis: Array<PlanServerRecord> = [];
   givesToThis: Array<GiveServerRecord> = [];
+  issuer = "";
   latitude = 0;
   longitude = 0;
   name = "";
-  issuer = "";
+  offersToThis: Array<OfferServerRecord> = [];
   projectId = localStorage.getItem("projectId") || ""; // handle ID
   timeSince = "";
   truncatedDesc = "";
@@ -455,6 +482,42 @@ export default class ProjectViewView extends Vue {
       );
     }
 
+    const offersToUrl =
+      this.apiServer +
+      "/api/v2/report/offersToPlans?planIds=" +
+      encodeURIComponent(JSON.stringify([projectId]));
+    try {
+      const resp = await this.axios.get(offersToUrl, { headers });
+      if (resp.status === 200 && resp.data.data) {
+        this.offersToThis = resp.data.data;
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to retrieve offers to this project.",
+          },
+          -1,
+        );
+      }
+    } catch (error: unknown) {
+      const serverError = error as AxiosError;
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong retrieving offers to this project.",
+        },
+        -1,
+      );
+      console.error(
+        "Error retrieving offers to this project:",
+        serverError.message,
+      );
+    }
+
     const fulfilledByUrl =
       this.apiServer +
       "/api/v2/report/planFulfilledByPlan?planHandleId=" +