allow loading more gives & offers & plans when limits are hit on project view

src/views/ContactsView.vue

@@ -68,11 +68,12 @@
         >
           {{
             showGiveTotals
-              ? "Showing Totals"
+              ? "Totals"
               : showGiveConfirmed
-                ? "Showing Confirmed Amounts"
+                ? "Confirmed Amounts"
-                : "Showing Unconfirmed Amounts"
+                : "Unconfirmed Amounts"
           }}
+          <fa icon="rotate" class="fa-fw" />
         </button>
       </div>
     </div>

src/views/ProjectViewView.vue

@@ -243,6 +243,9 @@
             </div>
           </li>
         </ul>
+        <div v-if="offersHitLimit" class="text-center text-blue-500">
+          <button @click="loadOffers()">Load More</button>
+        </div>
       </div>
 
       <div class="bg-slate-100 px-4 py-3 rounded-md">
@@ -290,12 +293,18 @@
               <a @click="onClickLoadClaim(give.jwtId)">
                 <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
               </a>
-              <a v-if="checkIsConfirmable(give)" @click="confirmConfirmClaim(give)">
+              <a
+                v-if="checkIsConfirmable(give)"
+                @click="confirmConfirmClaim(give)"
+              >
                 <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
               </a>
             </div>
           </li>
         </ul>
+        <div v-if="givesHitLimit" class="text-center text-blue-500">
+          <button @click="loadGives()">Load More</button>
+        </div>
       </div>
 
       <div class="grid items-start grid-cols-1 gap-4">
@@ -316,6 +325,7 @@
                 {{ plan.name }}
               </button>
             </div>
+            <div v-if="fulfillersToHitLimit" class="text-center">Load More</div>
           </div>
         </div>
 
@@ -388,12 +398,15 @@ export default class ProjectViewView extends Vue {
   expanded = false;
   fulfilledByThis: PlanSummaryRecord | null = null;
   fulfillersToThis: Array<PlanSummaryRecord> = [];
+  fulfillersToHitLimit = false;
   givesToThis: Array<GiveSummaryRecord> = [];
+  givesHitLimit = false;
   issuer = "";
   latitude = 0;
   longitude = 0;
   name = "";
   offersToThis: Array<OfferSummaryRecord> = [];
+  offersHitLimit = false;
   projectId = localStorage.getItem("projectId") || ""; // handle ID
   showDidCopy = false;
   startTime = "";
@@ -523,78 +536,17 @@ export default class ProjectViewView extends Vue {
       }
     }
 
-    const givesInUrl =
+    this.loadGives();
-      this.apiServer +
-      "/api/v2/report/givesToPlans?planIds=" +
-      encodeURIComponent(JSON.stringify([projectId]));
-    try {
-      const resp = await this.axios.get(givesInUrl, { headers });
-      if (resp.status === 200 && resp.data.data) {
-        this.givesToThis = resp.data.data;
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to retrieve gives 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 gives to this project.",
-        },
-        -1,
-      );
-      console.error(
-        "Error retrieving gives to this project:",
-        serverError.message,
-      );
-    }
 
-    const offersToUrl =
+    this.loadOffers();
-      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,
-      );
-    }
 
+    this.loadFulfillersTo();
+
+    // now load fulfilled-by, a single project
+    if (identity) {
+      const token = await accessToken(identity);
+      headers["Authorization"] = "Bearer " + token;
+    }
     const fulfilledByUrl =
       this.apiServer +
       "/api/v2/report/planFulfilledByPlan?planHandleId=" +
@@ -630,22 +582,41 @@ export default class ProjectViewView extends Vue {
         serverError.message,
       );
     }
+  }
 
-    const fulfillersToUrl =
+  async loadGives() {
+    const givesUrl =
       this.apiServer +
-      "/api/v2/report/planFulfillersToPlan?planHandleId=" +
+      "/api/v2/report/givesToPlans?planIds=" +
-      encodeURIComponent(projectId);
+      encodeURIComponent(JSON.stringify([this.projectId]));
+    let postfix = "";
+    if (this.givesToThis.length > 0) {
+      postfix =
+        "&beforeId=" + this.givesToThis[this.givesToThis.length - 1].jwtId;
+    }
+    const givesInUrl = givesUrl + 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(fulfillersToUrl, { headers });
+      const resp = await this.axios.get(givesInUrl, { headers });
-      if (resp.status === 200) {
+      if (resp.status === 200 && resp.data.data) {
-        this.fulfillersToThis = resp.data.data;
+        this.givesToThis = this.givesToThis.concat(resp.data.data);
+        this.givesHitLimit = resp.data.hitLimit;
       } else {
         this.$notify(
           {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "Failed to retrieve plan fulfillers to this project.",
+            text: "Failed to retrieve more gives to this project.",
           },
           -1,
         );
@@ -657,12 +628,123 @@ export default class ProjectViewView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "Something went wrong retrieving plan fulfillers to this project.",
+          text: "Something went wrong retrieving more gives to this project.",
         },
         -1,
       );
       console.error(
-        "Error retrieving plan fulfillers to this project:",
+        "Something went wrong retrieving more gives to this project:",
+        serverError.message,
+      );
+    }
+  }
+
+  async loadOffers() {
+    const offersUrl =
+      this.apiServer +
+      "/api/v2/report/offersToPlans?planIds=" +
+      encodeURIComponent(JSON.stringify([this.projectId]));
+    let postfix = "";
+    if (this.offersToThis.length > 0) {
+      postfix =
+        "&beforeId=" + this.offersToThis[this.offersToThis.length - 1].jwtId;
+    }
+    const offersInUrl = offersUrl + 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(offersInUrl, { headers });
+      if (resp.status === 200 && resp.data.data) {
+        this.offersToThis = this.offersToThis.concat(resp.data.data);
+        this.offersHitLimit = resp.data.hitLimit;
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to retrieve more 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 more offers to this project.",
+        },
+        -1,
+      );
+      console.error(
+        "Something went wrong retrieving more offers to this project:",
+        serverError.message,
+      );
+    }
+  }
+
+  async loadFulfillersTo() {
+    const fulfillsUrl =
+      this.apiServer +
+      "/api/v2/report/planFulfillersToPlan?planHandleId=" +
+      encodeURIComponent(this.projectId);
+    let postfix = "";
+    if (this.fulfillersToThis.length > 0) {
+      postfix =
+        "&beforeId=" +
+        this.fulfillersToThis[this.fulfillersToThis.length - 1].jwtId;
+    }
+    const fulfillsInUrl = fulfillsUrl + 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(fulfillsInUrl, { headers });
+      if (resp.status === 200) {
+        this.fulfillersToThis = this.fulfillersToThis.concat(resp.data.data);
+        this.fulfillersToHitLimit = resp.data.hitLimit;
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to retrieve more plans that fullfill this project.",
+          },
+          -1,
+        );
+      }
+    } catch (error: unknown) {
+      const serverError = error as AxiosError;
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong retrieving more plans that fulfull this project.",
+        },
+        -1,
+      );
+      console.error(
+        "Something went wrong retrieving more plans that fulfill this project:",
         serverError.message,
       );
     }