display the timestamp of completed request and format timestamps to be human-friendly

apps/web/package.json

@@ -22,6 +22,7 @@
     "@ng-bootstrap/ng-bootstrap": "^4.2.1",
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
+    "dayjs": "^1.10.6",
     "jquery": "^3.4.1",
     "ng-angular": "0.0.1",
     "ng-bootstrap": "^0.46.0",
@@ -37,7 +38,7 @@
     "@angular/language-service": "~11.1.1",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
+    "@types/node": "^8.10.66",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",
     "codelyzer": "^5.0.1",

apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html

@@ -16,16 +16,18 @@
     </h5>
   </div>
 
-  <div id="created-and-updated-timestamps" class="row px-5">
-    <div class="col text-left p-2">
-      <h5 id="created-time" class="timestamp">
-        Created <strong>{{ capabilityRequest.created_at | date: "medium" }}</strong>
-      </h5>
+  <div id="created-and-updated-timestamps" class="row px-5 justify-content-between">
+    <div class="col-4 text-left p-2">
+      <ng-template class="timestamp" #createdAtToolTip>{{capabilityRequest.created_at | date: "medium"}}</ng-template>
+      <span id="created-time" class="timestamp" placement="top" [ngbTooltip]="createdAtToolTip">
+        Created <strong>{{ createdAt }}</strong>
+      </span>
     </div>
-    <div class="col text-right p-2">
-      <h5 id="last-updated-time" class="timestamp">
-        Last Updated <strong>{{ capabilityRequest.updated_at | date: "medium" }}</strong>
-      </h5>
+    <div class="col-4 text-right p-2">
+      <ng-template class="timestamp" #updatedAtToolTip>{{capabilityRequest.updated_at | date: "medium"}}</ng-template>
+      <span id="last-updated-time" class="timestamp" placement="top" [ngbTooltip]="updatedAtToolTip">
+        {{ capabilityRequest.state.toUpperCase() === 'COMPLETE' ? 'Completed' : 'Last Updated' }} <strong>{{ updatedAt }}</strong>
+      </span>
     </div>
   </div>
 </div>

apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts

 import { Component, Input, OnInit } from "@angular/core";
 import { CapabilityRequest } from "../../../../model/capability-request";
-
+import * as dayjs from 'dayjs';
+import * as relativeTime from 'dayjs/plugin/relativeTime';
+import * as localizedFormat from 'dayjs/plugin/localizedFormat';
 @Component({
   selector: "app-request-header",
   templateUrl: "./request-header.component.html",
@@ -8,8 +10,28 @@ import { CapabilityRequest } from "../../../../model/capability-request";
 })
 export class RequestHeaderComponent implements OnInit {
   @Input() capabilityRequest: CapabilityRequest;
+  createdAt;
+  updatedAt;
 
   constructor() {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.createdAt = this.formatDate(this.capabilityRequest.created_at)
+    this.updatedAt = this.formatDate(this.capabilityRequest.updated_at)
+  }
+
+  private formatDate(date): string {
+    dayjs.extend(relativeTime)
+    dayjs.extend(localizedFormat)
+
+    var dateFromNow = dayjs(date).fromNow()
+    var afterOneWeekDisplay = dateFromNow + " on " + dayjs(date).format('llll');
+    return this.isOlderThanOneWeek(date) ? afterOneWeekDisplay : dateFromNow;
+  }
+
+  private isOlderThanOneWeek(date): boolean {
+    const now = dayjs();
+    date = dayjs(date)
+    return now.diff(date, "week") ? true : false
+  }
 }

apps/web/src/app/workspaces/workspaces.module.ts

 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { WorkspacesRoutingModule } from "./workspaces-routing.module";
 import { WorkspacesComponent } from "./workspaces.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@@ -28,6 +29,6 @@ import { RequestOperationsComponent } from "./components/capability-request/comp
     FilesComponent,
     RequestOperationsComponent,
   ],
-  imports: [CommonModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
+  imports: [CommonModule, NgbModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
 })
 export class WorkspacesModule {}