Name and description added to Project View

src/views/NewEditProjectView.vue

@@ -17,23 +17,6 @@
     <!-- Project Details -->
     <!-- Image - (see design model) Empty -->
 
-    <!-- Image - Populated -->
-    <div class="relative mb-4 rounded-md overflow-hidden">
-      <div class="absolute top-3 right-3 flex gap-2">
-        <button
-          class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded"
-        >
-          <fa icon="pen" class="fa-fw"></fa>
-        </button>
-        <button
-          class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded"
-        >
-          <fa icon="trash-can" class="fa-fw"></fa>
-        </button>
-      </div>
-      <img src="https://picsum.photos/800/400" class="w-full" />
-    </div>
-
     <input
       type="text"
       placeholder="Project Name"

src/views/ProjectViewView.vue

@@ -4,27 +4,31 @@
     <ul class="flex text-2xl p-2 gap-2">
       <!-- Home Feed -->
       <li class="basis-1/5 rounded-md text-slate-500">
-        <a href="" class="block text-center py-3 px-1"
+        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
           ><fa icon="house-chimney" class="fa-fw"></fa
-        ></a>
+        ></router-link>
       </li>
       <!-- Search -->
-      <li class="basis-1/5 rounded-md text-slate-500">
-        <a href="search.html" class="block text-center py-3 px-1"
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <router-link
+          :to="{ name: 'discover' }"
+          class="block text-center py-3 px-1"
           ><fa icon="magnifying-glass" class="fa-fw"></fa
-        ></a>
+        ></router-link>
       </li>
       <!-- Projects -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
-        <a href="" class="block text-center py-3 px-1"
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'projects' }"
+          class="block text-center py-3 px-1"
           ><fa icon="folder-open" class="fa-fw"></fa
-        ></a>
+        ></router-link>
       </li>
       <!-- Commitments -->
       <li class="basis-1/5 rounded-md text-slate-500">
-        <a href="" class="block text-center py-3 px-1"
+        <router-link :to="{ name: '' }" class="block text-center py-3 px-1"
           ><fa icon="hand" class="fa-fw"></fa
-        ></a>
+        ></router-link>
       </li>
       <!-- Profile -->
       <li class="basis-1/5 rounded-md text-slate-500">
@@ -62,13 +66,8 @@
 
     <!-- Project Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <!-- Image -->
-      <div class="-mx-4 -mt-3 mb-3">
-        <img src="https://picsum.photos/800/400" class="w-full" />
-      </div>
-
       <div>
-        <h2 class="text-xl font-semibold">Canyon cleanup</h2>
+        <h2 class="text-xl font-semibold">{{ name }}</h2>
         <div class="flex justify-between gap-4 text-sm mb-3">
           <span><fa icon="user" class="fa-fw text-slate-400"></fa> Rotary</span>
           <span
@@ -78,12 +77,21 @@
         </div>
 
         <div class="text-sm text-slate-500">
-          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-          accusantium doloremque laudantium…
-          <a href="" class="uppercase text-xs font-semibold text-slate-700"
+          <div v-if="!expanded">
+            {{ truncatedDesc }}
+            <a v-if="description.length >= truncateLength" @click="expandText"
               >Read More</a
             >
           </div>
+          <div v-else>
+            {{ description }}
+            <a
+              @click="collapseText"
+              class="uppercase text-xs font-semibold text-slate-700"
+              >Read Less</a
+            >
+          </div>
+        </div>
       </div>
     </div>
 
@@ -135,12 +143,25 @@ import { AppString } from "@/constants/app";
   components: {},
 })
 export default class ProjectViewView extends Vue {
+  expanded = false;
+  name = "";
+  description = "";
+  truncatedDesc = "";
+  truncateLength = 40;
   projectId =
     localStorage.getItem("projectId") === null
       ? ""
       : localStorage.getItem("projectId");
+
+  expandText() {
+    this.expanded = true;
+  }
+
+  collapseText() {
+    this.expanded = false;
+  }
+
   async LoadProject(identity: IIdentifier) {
-    console.log("LoadProject", this.projectId);
     const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
     const url = endorserApiServer + "/api/claim/" + this.projectId;
     const token = await accessToken(identity);
@@ -152,6 +173,12 @@ export default class ProjectViewView extends Vue {
     try {
       const resp = await this.axios.get(url, { headers });
       console.log(resp.status, resp.data);
+      if (resp.status === 200) {
+        const claim = resp.data.claim;
+        this.name = claim.name;
+        this.description = claim.description;
+        this.truncatedDesc = this.description.slice(0, this.truncateLength);
+      }
     } catch (error) {
       console.log(error);
     }