New modules and InfiniteScroll init

package.json

@@ -12,54 +12,54 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@pvermeer/dexie-encrypted-addon": "^2.0.5",
+    "@pvermeer/dexie-encrypted-addon": "^3.0.0",
-    "@tweenjs/tween.js": "^20.0.3",
+    "@tweenjs/tween.js": "^21.0.0",
-    "@veramo/core": "^5.1.2",
+    "@veramo/core": "^5.2.0",
-    "@veramo/credential-w3c": "^5.1.4",
+    "@veramo/credential-w3c": "^5.2.0",
-    "@veramo/data-store": "^5.1.2",
+    "@veramo/data-store": "^5.2.0",
     "@veramo/did-manager": "^5.1.2",
     "@veramo/did-provider-ethr": "^5.1.2",
-    "@veramo/did-resolver": "^5.1.2",
+    "@veramo/did-resolver": "^5.2.0",
     "@veramo/key-manager": "^5.1.2",
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.2.0",
     "@zxing/text-encoding": "^0.9.0",
-    "axios": "^1.3.4",
+    "axios": "^1.4.0",
     "buffer": "^6.0.3",
     "class-transformer": "^0.5.1",
-    "core-js": "^3.29.1",
+    "core-js": "^3.31.0",
-    "dexie": "^3.2.3",
+    "dexie": "^3.2.4",
     "dexie-export-import": "^4.0.7",
-    "did-jwt": "^6.11.5",
+    "did-jwt": "^7.2.2",
-    "ethereum-cryptography": "^1.2.0",
+    "ethereum-cryptography": "^2.0.0",
     "ethereumjs-util": "^7.1.5",
     "ethr-did-resolver": "^8.0.0",
-    "js-generate-password": "^0.1.7",
+    "js-generate-password": "^0.1.9",
     "localstorage-slim": "^2.4.0",
     "luxon": "^3.3.0",
-    "merkletreejs": "^0.3.9",
+    "merkletreejs": "^0.3.10",
     "moment": "^2.29.4",
     "papaparse": "^5.4.1",
     "pina": "^0.20.2204228",
     "pinia-plugin-persistedstate": "^3.1.0",
     "qr-code-generator-vue3": "^1.4.21",
-    "ramda": "^0.28.0",
+    "ramda": "^0.29.0",
-    "readable-stream": "^4.3.0",
+    "readable-stream": "^4.4.0",
     "reflect-metadata": "^0.1.13",
     "register-service-worker": "^1.7.2",
-    "three": "^0.152.2",
+    "three": "^0.153.0",
-    "vue": "^3.2.47",
+    "vue": "^3.3.4",
     "vue-axios": "^3.5.2",
     "vue-class-component": "^8.0.0-0",
-    "vue-facing-decorator": "^2.1.19",
+    "vue-facing-decorator": "^2.1.20",
     "vue-property-decorator": "^9.1.2",
-    "vue-router": "^4.1.6",
+    "vue-router": "^4.2.2",
-    "web-did-resolver": "^2.0.22"
+    "web-did-resolver": "^2.0.24"
   },
   "devDependencies": {
-    "@types/ramda": "^0.28.23",
+    "@types/ramda": "^0.29.2",
-    "@types/three": "^0.152.0",
+    "@types/three": "^0.152.1",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.57.0",
+    "@typescript-eslint/parser": "^5.60.0",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-pwa": "~5.0.8",
@@ -67,15 +67,15 @@
     "@vue/cli-plugin-typescript": "~5.0.8",
     "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/eslint-config-typescript": "^11.0.3",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.37.0",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint-plugin-vue": "^9.15.0",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.24",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.2",
-    "typescript": "~5.0.3"
+    "typescript": "~5.1.3"
   }
 }

src/components/InfiniteScroll.vue

@@ -13,24 +13,37 @@ export default class InfiniteScroll extends Vue {
   @Prop({ default: 100 })
   readonly distance!: number;
   private observer!: IntersectionObserver;
+  private isInitialized = false;
 
   mounted() {
-    const options = {
+    this.$nextTick(() => {
-      root: this.$refs.scrollContainer as HTMLElement,
+      this.isInitialized = true;
-      rootMargin: `0px 0px ${this.distance}px 0px`,
+      console.log("onMounted");
-      threshold: 1.0,
+      const options = {
-    };
+        root: this.$refs.scrollContainer as HTMLElement,
-    this.observer = new IntersectionObserver(this.handleIntersection, options);
+        rootMargin: `0px 0px ${this.distance}px 0px`,
-    this.observer.observe(this.$refs.sentinel as HTMLElement);
+        threshold: 1.0,
+      };
+      this.observer = new IntersectionObserver(
+        (entries) => this.handleIntersection(entries),
+        options
+      );
+      this.observer.observe(this.$refs.sentinel as HTMLElement);
+    });
   }
 
   beforeUnmount() {
     this.observer.disconnect();
   }
+
   @Emit("reached-bottom")
   handleIntersection(entries: IntersectionObserverEntry[]) {
+    console.log("handleIntersection");
+    if (!this.isInitialized) {
+      return false;
+    }
     const entry = entries[0];
-    if (entry.isIntersecting) {
+    if (entry.isIntersecting && entry.intersectionRatio > 0) {
       return true;
     }
     return false;

src/views/NewEditProjectView.vue

@@ -226,9 +226,10 @@ export default class NewEditProjectView extends Vue {
         const serverError = error as AxiosError;
         if (serverError) {
           this.isAlertVisible = true;
-          if (serverError.message) {
+          if (Object.prototype.hasOwnProperty.call(serverError, "message")) {
+            console.log(serverError);
             this.alertTitle = "User Message";
-            userMessage = serverError.message; // This is info for the user.
+            userMessage = serverError.response.data.error.message; // This is info for the user.
             this.alertMessage = userMessage;
           } else {
             this.alertTitle = "Server Message";

src/views/ProjectsView.vue

@@ -71,51 +71,89 @@
     </button>
 
     <!-- Results List -->
-    <ul class="">
+    <InfiniteScroll @reached-bottom="loadMoreData">
-      <li
+      <ul>
-        class="border-b border-slate-300"
+        <li
-        v-for="project in projects"
+          class="border-b border-slate-300"
-        :key="project.handleId"
+          v-for="project in projects"
-      >
+          :key="project.handleId"
-        <a
-          @click="onClickLoadProject(project.handleId)"
-          class="block py-4 flex gap-4"
         >
-          <div class="flex-none w-12">
+          <a
-            <img
+            @click="onClickLoadProject(project.handleId)"
-              src="https://picsum.photos/200/200?random=1"
+            class="block py-4 flex gap-4"
-              class="w-full rounded"
+          >
-            />
+            <div class="flex-none w-12">
-          </div>
+              <img
-
+                src="https://picsum.photos/200/200?random=1"
-          <div class="grow overflow-hidden">
+                class="w-full rounded"
-            <h2 class="text-base font-semibold">{{ project.name }}</h2>
+              />
-            <div class="text-sm truncate">
-              {{ project.description }}
             </div>
-          </div>
+
-        </a>
+            <div class="grow overflow-hidden">
-      </li>
+              <h2 class="text-base font-semibold">{{ project.name }}</h2>
-    </ul>
+              <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({
+@Component({
-  components: {},
+  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 = {