list the gives to a plan and gives to which this plan contributed

project.task.yaml

@@ -7,6 +7,7 @@ tasks:
 - 08 search by location, endpoint, etc assignee:trent
 - 01 add a location for a project via map pin (see API by clicking on "Nearby")
 - 01 remove all the "form" fields (or at least investigate to see if that page refresh is desired)
+- .2 change "errorMessage" to "alertMessage" on ProjectViewView.vue
 
 - 08 Scan QR code to import into contacts.
 

src/main.ts

@@ -19,6 +19,7 @@ import {
   faCircleUser,
   faClock,
   faCoins,
+  faComment,
   faCopy,
   faEllipsisVertical,
   faEye,
@@ -58,6 +59,7 @@ library.add(
   faCircleUser,
   faClock,
   faCoins,
+  faComment,
   faCopy,
   faEllipsisVertical,
   faEye,

src/views/ProjectViewView.vue

@@ -23,7 +23,7 @@
       </h1>
     </div>
 
-    <div>
+    <div class="text-red-500">
       {{ errorMessage }}
     </div>
 
@@ -89,7 +89,6 @@
     </div>
 
     <!-- Gifts to & from this -->
-    <!--
     <div class="mt-8 flex justify-around">
       <div>
         <h1 class="text-xl">Given to this Project</h1>
@@ -98,8 +97,52 @@
         <h1 class="text-xl">... and from this Project</h1>
       </div>
     </div>
-    -->
+    <div class="flex justify-around">
-
+      <div class="w-1/2">
+        <div v-for="give in givesToThis" :key="give.id">
+          <div class="flex justify-between">
+            <div class="flex gap-3">
+              <div class="flex gap-2">
+                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                <span>{{
+                  didInfo(give.agentDid, activeDid, accounts, allContacts)
+                }}</span>
+              </div>
+              <div class="flex gap-2" v-if="give.amount">
+                <fa icon="coins" class="fa-fw text-slate-400"></fa>
+                <span>{{ give.amount }}</span>
+              </div>
+              <div class="flex gap-2" v-if="give.description">
+                <fa icon="comment" class="fa-fw text-slate-400"></fa>
+                <span>{{ give.description }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="w-1/2">
+        <div v-for="give in givesByThis" :key="give.id">
+          <div class="flex justify-between">
+            <div class="flex gap-3">
+              <div class="flex gap-2">
+                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                <span>{{
+                  didInfo(give.agentDid, activeDid, accounts, allContacts)
+                }}</span>
+              </div>
+              <div class="flex gap-2" v-if="give.amount">
+                <fa icon="coins" class="fa-fw text-slate-400"></fa>
+                <span>{{ give.amount }}</span>
+              </div>
+              <div class="flex gap-2">
+                <fa icon="comment" class="fa-fw text-slate-400"></fa>
+                <span>{{ give.description }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <GiftedDialog
       ref="customDialog"
       @dialog-result="handleDialogResult"
@@ -116,6 +159,7 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import * as moment from "moment";
+import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
@@ -123,9 +167,12 @@ import { accountsDB, db } from "@/db";
 import { AccountsSchema } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { createAndSubmitGive } from "@/libs/endorserServer";
 import { accessToken } from "@/libs/crypto";
-import { IIdentifier } from "@veramo/core";
+import {
+  createAndSubmitGive,
+  didInfo,
+  GiveServerRecord,
+} from "@/libs/endorserServer";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 
@@ -142,8 +189,8 @@ export default class ProjectViewView extends Vue {
   description = "";
   errorMessage = "";
   expanded = false;
-  givesToThis: Array<any> = [];
+  givesToThis: Array<GiveServerRecord> = [];
-  givesFromThis: Array<any> = [];
+  givesByThis: Array<GiveServerRecord> = [];
   name = "";
   numAccounts = 0;
   projectId = localStorage.getItem("projectId") || ""; // handle ID
@@ -204,6 +251,11 @@ export default class ProjectViewView extends Vue {
     this.$router.push(route);
   }
 
+  // Isn't there a better way to make this available to the template?
+  didInfo(did, activeDid, identities, contacts) {
+    return didInfo(did, activeDid, identities, contacts);
+  }
+
   expandText() {
     this.expanded = true;
   }
@@ -228,6 +280,8 @@ export default class ProjectViewView extends Vue {
     try {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
+        // feel free to remove this; I haven't yet because it's helpful
+        console.log('Loaded project: ', resp.data);
         const startTime = resp.data.startTime;
         if (startTime != null) {
           const eventDate = new Date(startTime);
@@ -252,6 +306,42 @@ export default class ProjectViewView extends Vue {
         console.error("Error retrieving project:", error);
       }
     }
+
+    const givesInUrl =
+      this.apiServer +
+      "/api/v2/report/givesForPlans?planIds=" +
+      encodeURIComponent(JSON.stringify([this.projectId]));
+    try {
+      const resp = await this.axios.get(givesInUrl, { headers });
+      if (resp.status === 200 && resp.data.data) {
+        this.givesToThis = resp.data.data;
+      } else {
+        this.errorMessage = "Failed to retrieve gives to this project.";
+      }
+    } catch (error: unknown) {
+      console.error("Error retrieving gives to this project:", error);
+      const serverError = error as AxiosError;
+      this.errorMessage =
+        "Something went wrong retrieving gives to this project.";
+    }
+
+    const givesOutUrl =
+      this.apiServer +
+      "/api/v2/report/givesProvidedBy?providerId=" +
+      encodeURIComponent(this.projectId);
+    try {
+      const resp = await this.axios.get(givesOutUrl, { headers });
+      if (resp.status === 200 && resp.data.data) {
+        this.givesByThis = resp.data.data;
+      } else {
+        this.errorMessage = "Failed to retrieve gives by this project.";
+      }
+    } catch (error: unknown) {
+      console.error("Error retrieving gives by this project:", error);
+      const serverError = error as AxiosError;
+      this.errorMessage =
+        "Something went wrong retrieving gives by project.";
+    }
   }
 
   openDialog(contact) {