Basic Project list added

src/views/ProjectViewView.vue

@@ -181,8 +181,6 @@ export default class ProjectViewView extends Vue {
         const eventDate = new Date(issuedAt);
         const now = moment.now();
         this.timeSince = moment.utc(now).to(eventDate);
-
-        console.log(this.timeSince);
         this.name = claim.name;
         this.description = claim.description;
         this.truncatedDesc = this.description.slice(0, this.truncateLength);

src/views/ProjectsView.vue

@@ -29,7 +29,11 @@
 
     <!-- Results List -->
     <ul class="">
-      <li class="border-b border-slate-300">
+      <li
+        class="border-b border-slate-300"
+        v-for="project in projects"
+        :key="project.id"
+      >
         <a href="project-view.html" class="block py-4 flex gap-4">
           <div class="flex-none w-12">
             <img
@@ -39,48 +43,9 @@
           </div>
 
           <div class="grow overflow-hidden">
-            <h2 class="text-base font-semibold">Canyon cleanup</h2>
+            <h2 class="text-base font-semibold">{{ project.name }}</h2>
             <div class="text-sm truncate">
-              The quick brown fox jumps over the lazy dog. The quick brown fox
+              {{ project.description }}
-              jumps over the lazy dog.
-            </div>
-          </div>
-        </a>
-      </li>
-
-      <li class="border-b border-slate-300">
-        <a href="project-view.html" class="block py-4 flex gap-4">
-          <div class="flex-none w-12">
-            <img
-              src="https://picsum.photos/200/200?random=2"
-              class="w-full rounded"
-            />
-          </div>
-
-          <div class="grow overflow-hidden">
-            <h2 class="text-base font-semibold">Potluck with neighbors</h2>
-            <div class="text-sm truncate">
-              The quick brown fox jumps over the lazy dog. The quick brown fox
-              jumps over the lazy dog.
-            </div>
-          </div>
-        </a>
-      </li>
-
-      <li class="border-b border-slate-300">
-        <a href="project-view.html" class="block py-4 flex gap-4">
-          <div class="flex-none w-12">
-            <img
-              src="https://picsum.photos/200/200?random=3"
-              class="w-full rounded"
-            />
-          </div>
-
-          <div class="grow overflow-hidden">
-            <h2 class="text-base font-semibold">Historical site</h2>
-            <div class="text-sm truncate">
-              The quick brown fox jumps over the lazy dog. The quick brown fox
-              jumps over the lazy dog.
             </div>
           </div>
         </a>
@@ -91,11 +56,56 @@
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
+import { accessToken } from "@/libs/crypto";
+import { db } from "../db";
+import { IIdentifier } from "@veramo/core";
+import { AppString } from "@/constants/app";
 
 @Options({
   components: {},
 })
 export default class ProjectsView extends Vue {
+  projects: { id: string; name: string; description: string }[] = [];
+  async LoadProject(identity: IIdentifier) {
+    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+    const url = endorserApiServer + "/api/claim/?claimContents=" + identity.did;
+    const token = await accessToken(identity);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+
+    try {
+      const resp = await this.axios.get(url, { headers });
+      console.log(resp.status, resp.data);
+      if (resp.status === 200) {
+        const claims = resp.data;
+        for (let i = 0; i < claims.length; i++) {
+          const claim = claims[i].claim;
+          this.projects.push({
+            id: claim.id,
+            name: claim.name,
+            description: claim.description,
+          });
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async created() {
+    await db.open();
+    const num_accounts = await db.accounts.count();
+    if (num_accounts === 0) {
+      console.log("Problem!  Should have a profile!");
+    } else {
+      const accounts = await db.accounts.toArray();
+      const identity = JSON.parse(accounts[0].identity);
+      this.LoadProject(identity);
+    }
+  }
+
   onClickNewProject(): void {
     const route = {
       name: "new-edit-project",