From 5ea9a66a63dec6a5fc25133fc5d8f13606b35a86 Mon Sep 17 00:00:00 2001
From: Sebastian-Ion TINCU <Sebastian-Ion.TINCU@ext.ec.europa.eu>
Date: Tue, 24 Sep 2024 14:39:55 +0200
Subject: [PATCH] EDELIVERY-11674 - Alerts UI Improvements
Improve alert details dialog.
---
.../object-properties-dialog.component.ts | 31 ++++++------
.../panels/alert-panel/alert-controller.ts | 37 ++++++++++----
.../alert-panel/alert-panel.component.ts | 49 +++++++------------
.../review-tasks-controller.ts | 4 +-
.../review-tasks-panel.component.ts | 12 ++---
smp-angular/src/assets/i18n/en.json | 22 +++++++--
6 files changed, 87 insertions(+), 68 deletions(-)
diff --git a/smp-angular/src/app/common/dialogs/object-properties-dialog/object-properties-dialog.component.ts b/smp-angular/src/app/common/dialogs/object-properties-dialog/object-properties-dialog.component.ts
index 203c2a53a..71166b258 100644
--- a/smp-angular/src/app/common/dialogs/object-properties-dialog/object-properties-dialog.component.ts
+++ b/smp-angular/src/app/common/dialogs/object-properties-dialog/object-properties-dialog.component.ts
@@ -1,5 +1,8 @@
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {TranslateService} from "@ngx-translate/core";
+import {DatePipe} from "@angular/common";
+import {GlobalLookups} from "../../global-lookups";
@Component({
selector: 'object-properties-dialog',
@@ -9,24 +12,22 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
export class ObjectPropertiesDialogComponent {
title: string = "Object properties";
- object:Object
displayedColumns: string[] = ['key', 'value'];
dataSource : object[];
constructor(public dialogRef: MatDialogRef<ObjectPropertiesDialogComponent>,
- @Inject(MAT_DIALOG_DATA) public data: any) {
- this.title = data.title;
- this.object = {...data.object.row.alertDetails,
- statusDescription: data.object.row.alertStatusDesc};
- this.dataSource = Object.keys(this.object)
- .map((key) => [ this.toTitleCase(key), this.object[key] ])
- .sort();
- }
-
- private toTitleCase(input: string): string {
- return input
- .replace(/([A-Z]+)/g, " $1") // camelCase -> Title Case (part #1)
- .replace(/([A-Z][a-z])/g, " $1") // camelCase -> Title Case (part #2)
- .replaceAll('_', '');
+ @Inject(MAT_DIALOG_DATA) public data: any,
+ private translateService: TranslateService,
+ private datePipe: DatePipe,
+ private lookups: GlobalLookups) {
+ this.translateService.get(data.i18n).subscribe(title => this.title = title);
+ this.dataSource = Array.of(data.object)
+ .map(async row => await this.translateService.get(row.i18n).subscribe(key => {
+ if (row.type === "dateTime") {
+ let dateTimeFormat = this.lookups.getDateTimeFormat();
+ return this.datePipe.transform(row.value, dateTimeFormat);
+ }
+ return row.value;
+ }));
}
}
diff --git a/smp-angular/src/app/common/panels/alert-panel/alert-controller.ts b/smp-angular/src/app/common/panels/alert-panel/alert-controller.ts
index dd1fc47a9..6209b058d 100644
--- a/smp-angular/src/app/common/panels/alert-panel/alert-controller.ts
+++ b/smp-angular/src/app/common/panels/alert-panel/alert-controller.ts
@@ -6,7 +6,8 @@ import {ObjectPropertiesDialogComponent} from "../../dialogs/object-properties-d
export class AlertController implements SearchTableController {
- constructor(protected lookups: GlobalLookups, public dialog: MatDialog) {
+ constructor(protected lookups: GlobalLookups,
+ public dialog: MatDialog) {
}
validateDeleteOperation(rows: SearchTableEntity[]) {
@@ -32,19 +33,37 @@ export class AlertController implements SearchTableController {
public showDetails(row: any): MatDialogRef<any> {
return this.dialog.open(ObjectPropertiesDialogComponent, {
data: {
- title: "Alert details",
- object: row,
+ i18n: "alert.panel.dialog.title.alert.details",
+ object: [{
+ i18n: "alert.panel.label.column.alert.date",
+ value: row?.reportingTime,
+ type: "dateTime"
+ }, {
+ i18n: "alert.panel.label.column.alert.level",
+ value: row?.alertLevel
+ }, {
+ i18n: "alert.panel.label.column.for.user",
+ value: row?.username
+ }, {
+ i18n: "alert.panel.label.column.credential.type",
+ value: row?.alertDetails['CREDENTIAL_TYPE']
+ }, {
+ i18n: "alert.panel.label.column.alert.type",
+ value: row?.alertType,
+ }, {
+ i18n: "alert.panel.label.column.alert.status",
+ value: row?.alertStatus,
+ }, {
+ i18n: "alert.panel.label.column.status.description",
+ value: row?.alertStatusDesc,
+ }]
}
});
}
public edit(row: any): MatDialogRef<any> {
- return this.dialog.open(ObjectPropertiesDialogComponent, {
- data: {
- title: "Update Alert",
- object: row,
- }
- });
+ // not actually editing the row
+ return this.showDetails(row);
}
public delete(row: any) {
diff --git a/smp-angular/src/app/common/panels/alert-panel/alert-panel.component.ts b/smp-angular/src/app/common/panels/alert-panel/alert-panel.component.ts
index f102462f5..b4e537446 100644
--- a/smp-angular/src/app/common/panels/alert-panel/alert-panel.component.ts
+++ b/smp-angular/src/app/common/panels/alert-panel/alert-panel.component.ts
@@ -17,9 +17,8 @@ import {HttpClient} from '@angular/common/http';
import {GlobalLookups} from "../../global-lookups";
import {SearchTableComponent} from "../../search-table/search-table.component";
import {SecurityService} from "../../../security/security.service";
-import {
- ObjectPropertiesDialogComponent
-} from "../../dialogs/object-properties-dialog/object-properties-dialog.component";
+import {TranslateService} from "@ngx-translate/core";
+import {lastValueFrom} from "rxjs";
/**
* This is a generic alert panel component for previewing alert list
@@ -49,7 +48,8 @@ export class AlertPanelComponent implements OnInit, AfterViewInit, AfterViewChec
protected http: HttpClient,
protected alertService: AlertMessageService,
public dialog: MatDialog,
- private changeDetector: ChangeDetectorRef) {
+ private changeDetector: ChangeDetectorRef,
+ private translateService: TranslateService) {
}
ngOnInit() {
@@ -60,57 +60,57 @@ export class AlertPanelComponent implements OnInit, AfterViewInit, AfterViewChec
this.changeDetector.detectChanges();
}
- initColumns() {
+ async initColumns() {
this.columnPicker.allColumns = [
{
- name: 'Alert date',
- title: "Alert date",
+ name: await lastValueFrom(this.translateService.get("alert.panel.label.column.alert.date")),
+ title: await lastValueFrom(this.translateService.get("alert.panel.label.column.title.alert.date")),
prop: 'reportingTime',
showInitially: true,
maxWidth: 250,
cellTemplate: this.dateTimeColumn,
},
{
- name: 'Alert level',
- title: "Alert level.",
+ name: await lastValueFrom(this.translateService.get("alert.panel.label.column.alert.level")),
+ title: await lastValueFrom(this.translateService.get("alert.panel.label.column.title.alert.level")),
prop: 'alertLevel',
showInitially: true,
maxWidth: 100,
},
{
- name: 'For User',
- title: "For User",
+ name: await lastValueFrom(this.translateService.get("alert.panel.label.column.for.user")),
+ title: await lastValueFrom(this.translateService.get("alert.panel.label.column.title.for.user")),
prop: 'username',
cellTemplate: this.forUser,
maxWidth: 200,
showInitially: true,
},
{
- name: 'Credential type',
- title: "Credential type.",
+ name: await lastValueFrom(this.translateService.get("alert.panel.label.column.credential.type")),
+ title: await lastValueFrom(this.translateService.get("alert.panel.label.column.title.credential.type")),
prop: 'alertDetails',
maxWidth: 200,
cellTemplate: this.credentialType,
showInitially: true,
},
{
- name: 'Alert type',
- title: "Alert type.",
+ name: await lastValueFrom(this.translateService.get("alert.panel.label.column.alert.type")),
+ title: await lastValueFrom(this.translateService.get("alert.panel.label.column.title.alert.type")),
prop: 'alertType',
cellTemplate: this.truncateText,
showInitially: true,
},
{
- name: 'Alert status',
- title: "Alert status.",
+ name: await lastValueFrom(this.translateService.get("alert.panel.label.column.alert.status")),
+ title: await lastValueFrom(this.translateService.get("alert.panel.label.column.title.alert.status")),
prop: 'alertStatus',
showInitially: true,
maxWidth: 100,
},
{
- name: 'Status desc.',
- title: "Status desc.",
+ name: await lastValueFrom(this.translateService.get("alert.panel.label.column.status.description")),
+ title: await lastValueFrom(this.translateService.get("alert.panel.label.column.title.status.description")),
prop: 'alertStatusDesc',
cellTemplate: this.truncateText,
showInitially: true,
@@ -125,17 +125,6 @@ export class AlertPanelComponent implements OnInit, AfterViewInit, AfterViewChec
this.initColumns();
}
-
- details(row: any) {
- this.dialog.open(ObjectPropertiesDialogComponent, {
- data: {
- title: "Alert details",
- object: row.alertDetails,
-
- }
- });
- }
-
// for dirty guard...
isDirty(): boolean {
return this.searchTable.isDirty();
diff --git a/smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-controller.ts b/smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-controller.ts
index d1104a4ad..5891946ae 100644
--- a/smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-controller.ts
+++ b/smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-controller.ts
@@ -34,9 +34,9 @@ export class ReviewTasksController implements SearchTableController {
}
public showDetails(row: any): MatDialogRef<any> {
- return this.dialog.open(ObjectPropertiesDialogComponent, {
+ return this.dialog.open(AlertDetailsDialogComponent, {
data: {
- title: "Review tasks details",
+ i18n: "review.edit.dialog.title",
object: row,
}
});
diff --git a/smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-panel.component.ts b/smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-panel.component.ts
index 492db70b4..de4e72a16 100644
--- a/smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-panel.component.ts
+++ b/smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-panel.component.ts
@@ -77,8 +77,8 @@ export class ReviewTasksPanelComponent implements OnInit, AfterViewInit, AfterVi
async initColumns() {
this.columnPicker.allColumns = [
{
- name: 'Review date',
- title: "Review date",
+ name: await lastValueFrom(this.translateService.get("review.edit.panel.label.column.review.date")),
+ title: await lastValueFrom(this.translateService.get("review.edit.panel.label.column.title.review.date")),
prop: 'lastUpdatedOn',
showInitially: true,
maxWidth: 200,
@@ -124,9 +124,6 @@ export class ReviewTasksPanelComponent implements OnInit, AfterViewInit, AfterVi
resizable: 'true',
showInitially: true,
},
-
-
-
];
this.columnPicker.selectedColumns = this.columnPicker.allColumns.filter(col => col.showInitially);
this.searchTable.tableColumnInit();
@@ -136,7 +133,6 @@ export class ReviewTasksPanelComponent implements OnInit, AfterViewInit, AfterVi
this.initColumns();
}
-
details(row: any) {
}
@@ -152,10 +148,9 @@ export class ReviewTasksPanelComponent implements OnInit, AfterViewInit, AfterVi
async onRowDoubleClicked(row: ReviewDocumentVersionRo) {
// set selected resource
this.editResourceService.selectedReviewDocument = row;
- let node: NavigationNode = await this.createNewReviewDocumentNavigationNode();
+ let node = await this.createNewReviewDocumentNavigationNode();
this.navigationService.selected.children = [node]
this.navigationService.select(node);
-
}
public async createNewReviewDocumentNavigationNode() {
@@ -171,4 +166,3 @@ export class ReviewTasksPanelComponent implements OnInit, AfterViewInit, AfterVi
}
}
}
-
diff --git a/smp-angular/src/assets/i18n/en.json b/smp-angular/src/assets/i18n/en.json
index 0bcfdf4de..7c1b5c714 100644
--- a/smp-angular/src/assets/i18n/en.json
+++ b/smp-angular/src/assets/i18n/en.json
@@ -108,8 +108,23 @@
"session.expiration.dialog.title": "Extend session",
"session.expiration.dialog.label.session.about.to.expire": "Your session is about to expire in <b>{{timeLeft}}</b> seconds!<br />Would you like to logout now or extend it for another <b>{{timeout}}</b> seconds?",
- "alert.panel.title": "Alerts",
+ "alert.panel.dialog.title.alert.details": "Alert details",
+ "alert.panel.label.column.alert.date": "Alert date",
+ "alert.panel.label.column.alert.level": "Alert level",
+ "alert.panel.label.column.alert.status": "Alert status",
+ "alert.panel.label.column.alert.type": "Alert type",
+ "alert.panel.label.column.credential.type": "Credential type",
+ "alert.panel.label.column.for.user": "For User",
+ "alert.panel.label.column.status.description": "Status desc.",
+ "alert.panel.label.column.title.alert.date": "Alert date",
+ "alert.panel.label.column.title.alert.level": "Alert level.",
+ "alert.panel.label.column.title.alert.status": "Alert status.",
+ "alert.panel.label.column.title.alert.type": "Alert type.",
+ "alert.panel.label.column.title.credential.type": "Credential type.",
+ "alert.panel.label.column.title.for.user": "For User",
+ "alert.panel.label.column.title.status.description": "Status desc.",
"alert.panel.user.title": "{{value}} (Email: '{{mailTo}}')",
+ "alert.panel.title": "Alerts",
"certificate.panel.title": "Selected certificate data",
"certificate.panel.label.alias": "Alias",
@@ -428,6 +443,7 @@
"document.metadata.panel.label.sharing.enabled": "Document sharing enabled",
"document.metadata.panel.label.reference.document": "Referenced document",
+ "review.edit.dialog.title": "Review tasks details",
"review.edit.panel.label.review": "Review",
"review.edit.panel.label.column.date": "Review date",
"review.edit.panel.label.column.version": "Version",
@@ -436,8 +452,8 @@
"review.edit.panel.label.column.resource.value": "Res. value",
"review.edit.panel.label.column.subresource.scheme": "Subr. scheme",
"review.edit.panel.label.column.subresource.value": "Subr. value",
-
-
+ "review.edit.panel.label.column.review.date": "Review date",
+ "review.edit.panel.label.column.title.review.date": "Review date",
"subresource.document.wizard.button.cancel": "Cancel",
"subresource.document.wizard.button.ok": "OK",
--
GitLab