From 417cd5f0e36c0b5f9e766c896096da52908d5ec1 Mon Sep 17 00:00:00 2001
From: Jorge Revuelta <jrevuelta@usal.es>
Date: Tue, 17 Apr 2018 19:49:21 +0200
Subject: [PATCH] Human readable pipe using Moment.js

---
 package.json                               | 2 ++
 web/app/app.module.ts                      | 3 +++
 web/app/dashboard/dashboard.component.html | 3 +--
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 63801010..bbbb20db 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,9 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "@types/moment": "^2.13.0",
     "core-js": "^2.4.1",
+    "ngx-moment": "^2.0.0-rc.0",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },
diff --git a/web/app/app.module.ts b/web/app/app.module.ts
index 9b0bb2a5..0fe4bc39 100644
--- a/web/app/app.module.ts
+++ b/web/app/app.module.ts
@@ -4,6 +4,7 @@ import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
 import {MatTableModule} from '@angular/material/table';
 import {BrowserModule} from '@angular/platform-browser';
+import {MomentModule} from 'ngx-moment';
 
 import {AppRoutingModule} from './/app-routing.module';
 import {AppComponent} from './app.component';
@@ -20,6 +21,8 @@ import {DataService} from './services/data.service';
     MatCardModule,
     MatTableModule,
     MatIconModule,
+    /** Third-Party Module Imports */
+    MomentModule,
   ],
   providers: [DataService],
   bootstrap: [AppComponent]
diff --git a/web/app/dashboard/dashboard.component.html b/web/app/dashboard/dashboard.component.html
index 5021e129..2c7ba32b 100644
--- a/web/app/dashboard/dashboard.component.html
+++ b/web/app/dashboard/dashboard.component.html
@@ -24,8 +24,7 @@
         <!-- Latest Build Column -->
         <ng-container matColumnDef="latestBuild">
           <mat-header-cell *matHeaderCellDef>Latest Build</mat-header-cell>
-          <!-- TODO: Pipe this into a relative time pipe -->
-          <mat-cell *matCellDef="let project">{{project.latestDate | date: 'fullDate'}}</mat-cell>
+          <mat-cell *matCellDef="let project">{{project.latestDate | amTimeAgo }}</mat-cell>
         </ng-container>
 
         <!-- TODO: Add Repo Column -->