add section for gives provided by a plan

src/views/ProjectViewView.vue

@@ -256,6 +256,7 @@
           contact above.)
         </div>
 
+        <!-- similar to gift display below -->
         <ul v-else class="text-sm border-t border-slate-300">
           <li
             v-for="give in givesToThis"
@@ -263,8 +264,8 @@
             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>
+              <span>
+                <fa icon="user" class="fa-fw text-slate-400" />
                 {{
                   serverUtil.didInfo(
                     give.agentDid,
@@ -308,12 +309,60 @@
       </div>
 
       <div class="grid items-start grid-cols-1 gap-4">
+        <div
+          v-if="givesProvidedByThis.length > 0"
+          class="bg-slate-100 px-4 py-3 rounded-md"
+        >
+          <h3 class="text-sm uppercase font-semibold mb-3 border-b">
+            Individuals Getting Contributions From This
+          </h3>
+          <!-- similar to gift display above -->
+          <ul class="text-sm border-t border-slate-300">
+            <li
+              v-for="give in givesProvidedByThis"
+              :key="give.id"
+              class="py-1.5 border-b border-slate-300"
+            >
+              <div class="flex justify-between gap-4">
+                <span>
+                  {{
+                    serverUtil.didInfo(
+                      give.agentDid,
+                      activeDid,
+                      allMyDids,
+                      allContacts,
+                    )
+                  }}
+                </span>
+                <span v-if="give.amount" class="whitespace-nowrap">
+                  <fa
+                    :icon="libsUtil.iconForUnitCode(give.unit)"
+                    class="fa-fw text-slate-400"
+                  />{{ give.amount }}
+                </span>
+              </div>
+              <div class="text-slate-500">
+                <fa icon="calendar" class="fa-fw text-slate-400" />
+                {{ give.issuedAt?.substring(0, 10) }}
+              </div>
+              <div v-if="give.description" class="text-slate-500">
+                <fa icon="comment" class="fa-fw text-slate-400" />
+                {{ give.description }}
+              </div>
+              <a @click="onClickLoadClaim(give.jwtId)">
+                <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
+              </a>
+            </li>
+          </ul>
+          <div v-if="fulfillersToHitLimit" class="text-center">Load More</div>
+        </div>
+
         <div
           v-if="fulfillersToThis.length > 0"
           class="bg-slate-100 px-4 py-3 rounded-md"
         >
           <h3 class="text-sm uppercase font-semibold mb-3">
-            Contributions To This Idea
+            Projects That Contribute To This
           </h3>
           <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
           <div class="text-center">
@@ -331,7 +380,7 @@
 
         <div v-if="fulfilledByThis" class="bg-slate-100 px-4 py-3 rounded-md">
           <h3 class="text-sm uppercase font-semibold mb-3">
-            Contributions From This Idea
+            Projects Getting Contributions From This
           </h3>
           <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
           <div class="text-center">
@@ -401,6 +450,8 @@ export default class ProjectViewView extends Vue {
   fulfillersToHitLimit = false;
   givesToThis: Array<GiveSummaryRecord> = [];
   givesHitLimit = false;
+  givesProvidedByThis: Array<GiveSummaryRecord> = [];
+  givesProvidedByHitLimit = false;
   imageUrl = "";
   issuer = "";
   latitude = 0;
@@ -540,9 +591,11 @@ export default class ProjectViewView extends Vue {
 
     this.loadGives();
 
+    this.loadGivesProvidedBy();
+
     this.loadOffers();
 
-    this.loadFulfillersTo();
+    this.loadPlanFulfillersTo();
 
     // now load fulfilled-by, a single project
     if (identity) {
@@ -696,7 +749,7 @@ export default class ProjectViewView extends Vue {
     }
   }
 
-  async loadFulfillersTo() {
+  async loadPlanFulfillersTo() {
     const fulfillsUrl =
       this.apiServer +
       "/api/v2/report/planFulfillersToPlan?planHandleId=" +
@@ -752,6 +805,64 @@ export default class ProjectViewView extends Vue {
     }
   }
 
+  async loadGivesProvidedBy() {
+    const providedByUrl =
+      this.apiServer +
+      "/api/v2/report/givesProvidedBy?providerId=" +
+      encodeURIComponent(this.projectId);
+    let postfix = "";
+    if (this.givesProvidedByThis.length > 0) {
+      postfix =
+        "&beforeId=" +
+        this.givesProvidedByThis[this.givesProvidedByThis.length - 1].jwtId;
+    }
+    const providedByFullUrl = providedByUrl + postfix;
+
+    const headers: RawAxiosRequestHeaders = {
+      "Content-Type": "application/json",
+    };
+    const identity = await this.getIdentity(this.activeDid);
+    if (identity) {
+      const token = await accessToken(identity);
+      headers["Authorization"] = "Bearer " + token;
+    }
+
+    try {
+      const resp = await this.axios.get(providedByFullUrl, { headers });
+      if (resp.status === 200) {
+        this.givesProvidedByThis = this.givesProvidedByThis.concat(
+          resp.data.data,
+        );
+        this.givesProvidedByHitLimit = resp.data.hitLimit;
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to retrieve gives that were provided by this project.",
+          },
+          5000,
+        );
+      }
+    } catch (error: unknown) {
+      const serverError = error as AxiosError;
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong retrieving gives that were provided by this project.",
+        },
+        5000,
+      );
+      console.error(
+        "Something went wrong retrieving gives that were provided by this project:",
+        serverError.message,
+      );
+    }
+  }
+
   /**
    * Handle clicking on a project entry found in the list
    * @param id of the project