From 37b8dc4b0e977bc962b100c79245b1d64bab2dd5 Mon Sep 17 00:00:00 2001
From: Andrew Kapuscinski <akapusci@nrao.edu>
Date: Thu, 29 Jul 2021 14:14:53 -0600
Subject: [PATCH] display the timestamp of completed request and format
timestamps to be human-friendly
---
apps/web/package.json | 3 ++-
.../request-header.component.html | 20 +++++++-------
.../request-header.component.ts | 26 +++++++++++++++++--
.../src/app/workspaces/workspaces.module.ts | 3 ++-
4 files changed, 39 insertions(+), 13 deletions(-)
diff --git a/apps/web/package.json b/apps/web/package.json
index 6ea2fba77..f4c172c7a 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
index 8ff2030b1..0751ab922 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
+++ b/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>
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts
index d1c534305..7b08917da 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts
@@ -1,6 +1,8 @@
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
+ }
}
diff --git a/apps/web/src/app/workspaces/workspaces.module.ts b/apps/web/src/app/workspaces/workspaces.module.ts
index f3256d770..ad0367800 100644
--- a/apps/web/src/app/workspaces/workspaces.module.ts
+++ b/apps/web/src/app/workspaces/workspaces.module.ts
@@ -1,5 +1,6 @@
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 {}
--
GitLab