diff --git a/ui/src/app/account/settings/settings.component.html b/ui/src/app/account/settings/settings.component.html index ec3ce29c6..3a98477a2 100644 --- a/ui/src/app/account/settings/settings.component.html +++ b/ui/src/app/account/settings/settings.component.html @@ -8,6 +8,8 @@

Personal details

Settings saved! + +

Sorry, an error has occurred

- +
{{ alert.msg | localize }}
- × + ×
diff --git a/ui/src/app/shared/alert/alert.component.ts b/ui/src/app/shared/alert/alert.component.ts index 514913b6e..07615c20d 100644 --- a/ui/src/app/shared/alert/alert.component.ts +++ b/ui/src/app/shared/alert/alert.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectorRef, Component, ErrorHandler, HostListener, Inject, OnInit } from '@angular/core' -import { Subscription } from 'rxjs' +import { Subscription, filter } from 'rxjs' import { AlertService } from '../service/alert.service' import { AppAlert } from './model/alert.model' @@ -18,10 +18,9 @@ export class AlertComponent implements OnInit { ) {} ngOnInit(): void { - this.sub = this.alertService.on().subscribe((alert: AppAlert) => { - this.alerts.push(alert) + this.sub = this.alertService.on().subscribe((alerts: AppAlert[]) => { + this.alerts = alerts this.cdr.detectChanges() - setTimeout(() => this.close(alert), 5000) }) } @@ -30,13 +29,14 @@ export class AlertComponent implements OnInit { } @HostListener('document:keyup.escape', ['$event']) + @HostListener('document:keyup.enter', ['$event']) closeOldestAlert() { this.alerts.shift() this.cdr.detectChanges() } close(alertToRemove: any) { - this.alerts = this.alerts.filter((alert: any) => alert !== alertToRemove) + this.alertService.clear(alertToRemove) this.cdr.detectChanges() } } diff --git a/ui/src/app/shared/pipe/localize.ts b/ui/src/app/shared/pipe/localize.ts index 1e8ce9e6d..d9b6e43eb 100644 --- a/ui/src/app/shared/pipe/localize.ts +++ b/ui/src/app/shared/pipe/localize.ts @@ -11,6 +11,10 @@ export class LocalizePipe implements PipeTransform { return $localize`:@@gatewayApp.msUserServiceMSUser.sendActivate.success.string:${AlertType.SEND_ACTIVATION_SUCCESS}` case AlertType.SEND_ACTIVATION_FAILURE: return $localize`:@@gatewayApp.msUserServiceMSUser.sendActivate.error.string:${AlertType.SEND_ACTIVATION_FAILURE}` + case AlertType.USER_CREATED: + return $localize`:@@userServiceApp.user.created.string:${AlertType.USER_CREATED}` + case AlertType.USER_UPDATED: + return $localize`:@@userServiceApp.user.updated.string:${AlertType.USER_UPDATED}` } } } diff --git a/ui/src/app/shared/service/alert.service.ts b/ui/src/app/shared/service/alert.service.ts index f198c3f08..201b2f4eb 100644 --- a/ui/src/app/shared/service/alert.service.ts +++ b/ui/src/app/shared/service/alert.service.ts @@ -1,19 +1,30 @@ import { Injectable } from '@angular/core' -import { Observable, Subject } from 'rxjs' +import { BehaviorSubject, Observable, Subject, filter } from 'rxjs' import { AppAlert } from '../alert/model/alert.model' -import { AlertType } from 'src/app/app.constants' @Injectable({ providedIn: 'root' }) export class AlertService { - private alerts: Subject = new Subject() + private alerts: BehaviorSubject = new BehaviorSubject(undefined) on(): Observable { - return this.alerts.asObservable() + return this.alerts.pipe(filter((alerts) => !!alerts)) } broadcast(alert: string): void { const newAlert = new AppAlert('info', alert) - this.alerts.next(newAlert) - console.log('this.alerts.next called') + const newAlerts = [] + if (this.alerts.value) { + newAlerts.push(...this.alerts.value) + } + newAlerts.push(newAlert) + + this.alerts.next(newAlerts) + setTimeout(() => this.clear(newAlert), 5000) + } + + clear(alertToClear: AppAlert): void { + const newAlerts = this.alerts.value?.filter((alert: any) => alert !== alertToClear) + + this.alerts.next(newAlerts) } } diff --git a/ui/src/app/user/user-detail.component.ts b/ui/src/app/user/user-detail.component.ts index 0ea664451..63cabb255 100644 --- a/ui/src/app/user/user-detail.component.ts +++ b/ui/src/app/user/user-detail.component.ts @@ -6,6 +6,7 @@ import { map, switchMap, tap } from 'rxjs' import { UserService } from './service/user.service' import { AlertService } from '../shared/service/alert.service' import { MemberService } from '../member/service/member.service' +import { AlertType } from '../app.constants' @Component({ selector: 'app-user-detail', @@ -38,7 +39,7 @@ export class UserDetailComponent { sendActivate() { if (this.user) { this.userService.sendActivate(this.user).subscribe((res) => { - this.alertService.broadcast('gatewayApp.msUserServiceMSUser.sendActivate.success.string') + this.alertService.broadcast(AlertType.SEND_ACTIVATION_SUCCESS) this.previousState() }) } diff --git a/ui/src/app/user/user-update.component.html b/ui/src/app/user/user-update.component.html index dbec338b9..2bf971d37 100644 --- a/ui/src/app/user/user-update.component.html +++ b/ui/src/app/user/user-update.component.html @@ -5,19 +5,27 @@

  • {{ error }}
+ ×
diff --git a/ui/src/app/user/user-update.component.ts b/ui/src/app/user/user-update.component.ts index dc039b814..c9d1205ab 100644 --- a/ui/src/app/user/user-update.component.ts +++ b/ui/src/app/user/user-update.component.ts @@ -14,7 +14,7 @@ import { AccountService } from '../account' import { IUser, User } from './model/user.model' import { IMember } from '../member/model/member.model' import { ErrorService } from '../error/service/error.service' -import { DATE_TIME_FORMAT, emailValidator } from '../app.constants' +import { AlertType, DATE_TIME_FORMAT, emailValidator } from '../app.constants' @Component({ selector: 'app-user-update', @@ -261,9 +261,9 @@ export class UserUpdateComponent { if (this.existentUser?.id) { this.userService.sendActivate(this.existentUser).subscribe((res) => { if (res) { - this.alertService.broadcast('gatewayApp.msUserServiceMSUser.sendActivate.success.string') + this.alertService.broadcast(AlertType.SEND_ACTIVATION_SUCCESS) } else { - this.alertService.broadcast('gatewayApp.msUserServiceMSUser.sendActivate.error.string') + this.alertService.broadcast(AlertType.SEND_ACTIVATION_FAILURE) } this.navigateToUsersList() }) @@ -331,26 +331,25 @@ export class UserUpdateComponent { protected onSaveSuccess() { this.isSaving = false this.navigateToUsersList() - this.alertService.broadcast('userServiceApp.user.created.string') + this.alertService.broadcast(AlertType.USER_CREATED) } protected onUpdateSuccess() { this.isSaving = false this.navigateToUsersList() - this.alertService.broadcast('userServiceApp.user.updated.string') + this.alertService.broadcast(AlertType.USER_UPDATED) } protected onSaveSuccessOwnershipChange() { this.isSaving = false - // TODO: confirm this actually works, previously it was set to SERVER_API_URL this.navigateToHomePage() - this.alertService.broadcast('userServiceApp.user.created.string') + this.alertService.broadcast(AlertType.USER_CREATED) } protected onUpdateSuccessOwnershipChange() { this.isSaving = false this.navigateToHomePage() - this.alertService.broadcast('userServiceApp.user.updated.string') + this.alertService.broadcast(AlertType.USER_UPDATED) } protected onSaveError() {