Merge pull request #597 from GSA/594

display additional metadata on desktop and mobile

Author: DanielJDufour

src/app/components/explore-code/repo/repo.component.html

@@ -60,6 +60,18 @@ <h2>{{ repo.name }}</h2>
           </ul>
         <p>{{repo.description}}</p>
         <br>
+        <div *ngIf="repo.additional_data">
+          <div class="metadata-entry" *ngFor="let key of getKeys(repo.additional_data)">
+            <div class="metadata-key" [textContent]="clean(key)"></div>
+            <div class="metadata-value" *ngIf="isArray(repo.additional_data[key])">
+              <div *ngFor="let value of repo.additional_data[key]" [textContent]="value"></div>
+            </div>
+            <div class="metadata-value" *ngIf="!isArray(repo.additional_data[key])">
+              <div [textContent]="repo.additional_data[key]"></div>
+            </div>
+          </div>
+        </div>
+        <br>
         <a *ngIf="getRepositoryUrl() | isdefined" href="{{ getRepositoryUrl() }}">
           <button class="button">Visit Repo</button>
         </a>

src/app/components/explore-code/repo/repo.component.scss

@@ -104,3 +104,28 @@
     display: none;
   }
 }
+
+.metadata-entry {
+  margin-top: 15px;
+  margin-bottom: 15px;
+
+  .metadata-key {
+    display: block;
+    font-weight: bold;
+
+    @media screen and (min-width: $medium-screen) {
+      display: inline-block;
+      width: 200px;
+      vertical-align: top;
+    }
+  }
+
+  .metadata-value {
+    display: block;
+
+    @media screen and (min-width: $medium-screen) {
+      display: inline-block;
+      max-width: calc(100% - 300px);
+    }
+  }
+}

src/app/components/explore-code/repo/repo.component.ts

@@ -38,6 +38,10 @@ export class RepoComponent implements OnInit, OnDestroy {
     if (this.repoSub) this.repoSub.unsubscribe();
   }
 
+  getKeys(object) {
+    return Object.keys(object);
+  }
+
   getRepo(agencyId, releaseId) {
     this.clientService.getRepoByID(releaseId).subscribe(repo => {
       this.repo = repo;
@@ -60,5 +64,18 @@ export class RepoComponent implements OnInit, OnDestroy {
     return this.repo.repositoryURL;
   }
 
+  isArray(input) {
+    return Array.isArray(input);
+  }
+
+  clean(input) {
+    if (typeof input === "number") {
+      return input.toString();
+    } else if (typeof input === "string") {
+      return input.replace(/[_-]/g, " ");
+    } else {
+      return JSON.stringify(input);
+    }
+  }
 
 }