Code development platform for open source projects from the European Union institutions

Skip to content
Snippets Groups Projects
Commit 5ea9a66a authored by Sebastian-Ion TINCU's avatar Sebastian-Ion TINCU
Browse files

EDELIVERY-11674 - Alerts UI Improvements 

Improve alert details dialog.
parent fd230285
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 87 additions and 68 deletions
smp-angular/src/app/common/dialogs/object-properties-dialog/object-properties-dialog.component.ts
+ 16
− 15
View file @ 5ea9a66a
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;
}));
}
}
smp-angular/src/app/common/panels/alert-panel/alert-controller.ts
+ 28
− 9
View file @ 5ea9a66a
......@@ -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) {
......
smp-angular/src/app/common/panels/alert-panel/alert-panel.component.ts
+ 19
− 30
View file @ 5ea9a66a
......@@ -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();
......
smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-controller.ts
+ 2
− 2
View file @ 5ea9a66a
......@@ -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,
}
});
......
smp-angular/src/app/common/panels/review-tasks-panel/review-tasks-panel.component.ts
+ 3
− 9
View file @ 5ea9a66a
......@@ -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
}
}
}
smp-angular/src/assets/i18n/en.json
+ 19
− 3
View file @ 5ea9a66a
......@@ -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",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

For further information about the platform and support, please see https://code.europa.eu/info/about