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

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>