New modules and InfiniteScroll init

src/views/ProjectsView.vue

@@ -71,51 +71,89 @@
     </button>
 
     <!-- Results List -->
-    <ul class="">
-      <li
-        class="border-b border-slate-300"
-        v-for="project in projects"
-        :key="project.handleId"
-      >
-        <a
-          @click="onClickLoadProject(project.handleId)"
-          class="block py-4 flex gap-4"
+    <InfiniteScroll @reached-bottom="loadMoreData">
+      <ul>
+        <li
+          class="border-b border-slate-300"
+          v-for="project in projects"
+          :key="project.handleId"
         >
-          <div class="flex-none w-12">
-            <img
-              src="https://picsum.photos/200/200?random=1"
-              class="w-full rounded"
-            />
-          </div>
-
-          <div class="grow overflow-hidden">
-            <h2 class="text-base font-semibold">{{ project.name }}</h2>
-            <div class="text-sm truncate">
-              {{ project.description }}
+          <a
+            @click="onClickLoadProject(project.handleId)"
+            class="block py-4 flex gap-4"
+          >
+            <div class="flex-none w-12">
+              <img
+                src="https://picsum.photos/200/200?random=1"
+                class="w-full rounded"
+              />
             </div>
-          </div>
-        </a>
-      </li>
-    </ul>
+
+            <div class="grow overflow-hidden">
+              <h2 class="text-base font-semibold">{{ project.name }}</h2>
+              <div class="text-sm truncate">
+                {{ project.description }}
+              </div>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </InfiniteScroll>
   </section>
 </template>
 
 <script lang="ts">
 import * as R from "ramda";
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
 import { accountsDB, db } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
+import InfiniteScroll from "@/components/InfiniteScroll";
 
-@Options({
-  components: {},
+@Component({
+  components: { InfiniteScroll },
 })
 export default class ProjectsView extends Vue {
   apiServer = "";
   projects: { handleId: string; name: string; description: string }[] = [];
 
+  async loadMoreData(payload: boolean) {
+    console.log("loadMoreData");
+    console.log(payload);
+    if (this.projects.length > 0) {
+      const afterId = this.projects[this.projects.length - 1]["handleId"];
+      const url =
+        this.apiServer + "/api/v2/report/plansByIssuer?afterId=" + afterId;
+      const token = await accessToken(identity);
+      const headers = {
+        "Content-Type": "application/json",
+        Authorization: "Bearer " + token,
+      };
+
+      try {
+        const resp = await this.axios.get(url, { headers });
+        if (resp.status === 200) {
+          const plans = resp.data.data;
+          for (let i = 0; i < plans.length; i++) {
+            const plan = plans[i];
+            const data = {
+              name: plan.name,
+              description: plan.description,
+              // handleId is new in server v release-1.6.0; remove fullIri when that
+              // version shows up here: https://endorser.ch:3000/api-docs/
+              handleId: plan.handleId || plan.fullIri,
+            };
+            this.projects.push(data);
+          }
+        }
+      } catch (error) {
+        console.error("Got error loading projects: ", error);
+      }
+    }
+  }
+
   onClickLoadProject(id: string) {
     localStorage.setItem("projectId", id);
     const route = {