allow for a project ID in the URL

src/router/index.ts

@@ -148,7 +148,7 @@ const routes: Array<RouteRecordRaw> = [
       ),
   },
   {
-    path: "/project",
+    path: "/project/:id?",
     name: "project",
     component: () =>
       import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),

src/views/ProjectViewView.vue

@@ -137,10 +137,12 @@
     <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4">
       <div class="bg-slate-100 px-4 py-3 rounded-md">
         <h3 class="text-sm uppercase font-semibold mb-3">
-          Given to this Project
+          Given To This Project
         </h3>
 
-        <ul class="text-sm border-t border-slate-300">
+        <div v-if="givesToThis.length === 0">(None yet. Record one above.)</div>
+
+        <ul v-else class="text-sm border-t border-slate-300">
           <li
             v-for="give in givesToThis"
             :key="give.id"
@@ -164,31 +166,33 @@
         </ul>
       </div>
 
-      <div class="bg-slate-100 px-4 py-3 rounded-md">
+      <div v-if="fulfilledByThis" class="bg-slate-100 px-4 py-3 rounded-md">
         <h3 class="text-sm uppercase font-semibold mb-3">
-          &hellip;and from this Project
+          Contributions By This Project
         </h3>
+        <button
+          @click="onClickLoadProject(fulfilledByThis.handleId)"
+          class="text-blue-500"
+        >
+          {{ fulfilledByThis.name }}
+        </button>
+      </div>
 
-        <ul class="text-sm border-t border-slate-300">
-          <li
-            v-for="give in givesByThis"
-            :key="give.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(give.agentDid, activeDid, allMyDids, allContacts) }}
-              </span>
-              <span v-if="give.amount"
-                ><fa icon="coins" class="fa-fw text-slate-400"></fa>
-                {{ give.amount }}
-              </span>
-            </div>
-            <div v-if="give.description" class="text-slate-500">
-              <fa icon="comment" class="fa-fw text-slate-400"></fa>
-              {{ give.description }}
-            </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 Project
+        </h3>
+        <ul>
+          <li v-for="plan in fulfillersToThis" :key="plan.handleId">
+            <button
+              @click="onClickLoadProject(plan.handleId)"
+              class="text-blue-500"
+            >
+              {{ plan.name }}
+            </button>
           </li>
         </ul>
       </div>
@@ -218,6 +222,7 @@ import {
   didInfo,
   GiverInputInfo,
   GiveServerRecord,
+  PlanServerRecord,
 } from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
@@ -242,8 +247,9 @@ export default class ProjectViewView extends Vue {
   apiServer = "";
   description = "";
   expanded = false;
+  fulfilledByThis: PlanServerRecord | null = null;
+  fulfillersToThis: Array<PlanServerRecord> = [];
   givesToThis: Array<GiveServerRecord> = [];
-  givesByThis: Array<GiveServerRecord> = [];
   latitude = 0;
   longitude = 0;
   name = "";
@@ -266,7 +272,12 @@ export default class ProjectViewView extends Vue {
     this.allMyDids = accountsArr.map((acc) => acc.did);
     const account = accountsArr.find((acc) => acc.did === this.activeDid);
     const identity = JSON.parse(account?.identity || "null");
-    this.LoadProject(identity);
+
+    const pathParam = window.location.pathname.substring("/project/".length);
+    if (pathParam) {
+      this.projectId = decodeURIComponent(pathParam);
+    }
+    this.LoadProject(this.projectId, identity);
   }
 
   public async getIdentity(activeDid: string) {
@@ -320,11 +331,11 @@ export default class ProjectViewView extends Vue {
     this.expanded = false;
   }
 
-  async LoadProject(identity: IIdentifier) {
+  async LoadProject(projectId: string, identity: IIdentifier) {
+    this.projectId = projectId;
+
     const url =
-      this.apiServer +
-      "/api/claim/byHandle/" +
-      encodeURIComponent(this.projectId);
+      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(projectId);
     const headers: RawAxiosRequestHeaders = {
       "Content-Type": "application/json",
     };
@@ -389,7 +400,7 @@ export default class ProjectViewView extends Vue {
     const givesInUrl =
       this.apiServer +
       "/api/v2/report/givesForPlans?planIds=" +
-      encodeURIComponent(JSON.stringify([this.projectId]));
+      encodeURIComponent(JSON.stringify([projectId]));
     try {
       const resp = await this.axios.get(givesInUrl, { headers });
       if (resp.status === 200 && resp.data.data) {
@@ -422,21 +433,21 @@ export default class ProjectViewView extends Vue {
       );
     }
 
-    const givesOutUrl =
+    const fulfilledByUrl =
       this.apiServer +
-      "/api/v2/report/givesProvidedBy?providerId=" +
-      encodeURIComponent(this.projectId);
+      "/api/v2/report/planFulfilledByPlan?planHandleId=" +
+      encodeURIComponent(projectId);
     try {
-      const resp = await this.axios.get(givesOutUrl, { headers });
-      if (resp.status === 200 && resp.data.data) {
-        this.givesByThis = resp.data.data;
+      const resp = await this.axios.get(fulfilledByUrl, { headers });
+      if (resp.status === 200) {
+        this.fulfilledByThis = resp.data.data;
       } else {
         this.$notify(
           {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "Failed to retrieve gives by this project.",
+            text: "Failed to retrieve plans fulfilled by this project.",
           },
           -1,
         );
@@ -448,15 +459,64 @@ export default class ProjectViewView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "Something went wrong retrieving gives by project.",
+          text: "Something went wrong retrieving plans fulfilled by this project.",
         },
         -1,
       );
       console.error(
-        "Error retrieving gives by this project:",
+        "Error retrieving plans fulfilled by this project:",
         serverError.message,
       );
     }
+
+    const fulfillersToUrl =
+      this.apiServer +
+      "/api/v2/report/planFulfillersToPlan?planHandleId=" +
+      encodeURIComponent(projectId);
+    try {
+      const resp = await this.axios.get(fulfillersToUrl, { headers });
+      if (resp.status === 200) {
+        this.fulfillersToThis = resp.data.data;
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to retrieve plan fulfillers 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 plan fulfillers to this project.",
+        },
+        -1,
+      );
+      console.error(
+        "Error retrieving plan fulfillers to this project:",
+        serverError.message,
+      );
+    }
+  }
+
+  /**
+   * Handle clicking on a project entry found in the list
+   * @param id of the project
+   **/
+  async onClickLoadProject(projectId: string) {
+    localStorage.setItem("projectId", projectId);
+    const route = {
+      path: "/project/" + encodeURIComponent(projectId),
+    };
+    this.$router.push(route);
+    this.LoadProject(projectId, await this.getIdentity(this.activeDid));
   }
 
   getOpenStreetMapUrl() {