diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts index fd7d0bdcc..9c26e2321 100644 --- a/ui/src/app/app.module.ts +++ b/ui/src/app/app.module.ts @@ -24,6 +24,8 @@ import { UserModule } from './user/user.module' imports: [ BrowserModule, UserModule, + AccountModule, + HomeModule, HttpClientModule, AppRoutingModule, NgxWebstorageModule.forRoot(), diff --git a/ui/src/app/error/model/error.model.ts b/ui/src/app/error/model/error.model.ts index 77825e9f1..bcacc6109 100644 --- a/ui/src/app/error/model/error.model.ts +++ b/ui/src/app/error/model/error.model.ts @@ -1,8 +1,7 @@ export class AppError { constructor( public statusCode: number, - public message: string, - public i18nKey: string | null + public message: string ) {} } diff --git a/ui/src/app/error/service/error.service.ts b/ui/src/app/error/service/error.service.ts index 3dc380e1b..ff2151492 100644 --- a/ui/src/app/error/service/error.service.ts +++ b/ui/src/app/error/service/error.service.ts @@ -12,12 +12,7 @@ export class ErrorService implements ErrorHandler { handleError(error: any) { if (error instanceof HttpErrorResponse) { - if (error.headers.has('errmmmmm')) { - const i18nKey: string | null = error.headers.get('errmmmmm') - this.errors.next(new AppError(error.status, error.message, i18nKey)) - } else { - this.errors.next(new AppError(error.status, error.message, null)) - } + this.errors.next(new AppError(error.status, error.message)) } else { console.error('Unknown error occurred', error) } diff --git a/ui/src/app/shared/alert/alert.component.html b/ui/src/app/shared/alert/alert.component.html new file mode 100644 index 000000000..674692383 --- /dev/null +++ b/ui/src/app/shared/alert/alert.component.html @@ -0,0 +1,19 @@ + diff --git a/ui/src/app/shared/alert/alert.component.scss b/ui/src/app/shared/alert/alert.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/ui/src/app/shared/alert/alert.component.spec.ts b/ui/src/app/shared/alert/alert.component.spec.ts new file mode 100644 index 000000000..a7bd4f8ab --- /dev/null +++ b/ui/src/app/shared/alert/alert.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlertComponent } from './alert.component'; + +describe('AlertComponent', () => { + let component: AlertComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [AlertComponent] + }); + fixture = TestBed.createComponent(AlertComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/src/app/shared/alert/alert.component.ts b/ui/src/app/shared/alert/alert.component.ts new file mode 100644 index 000000000..1600d886d --- /dev/null +++ b/ui/src/app/shared/alert/alert.component.ts @@ -0,0 +1,52 @@ +import { ChangeDetectorRef, Component, ErrorHandler, HostListener, Inject, OnInit } from '@angular/core' +import { Subscription } from 'rxjs' +import { AlertService } from '../service/alert.service' +import { AppAlert } from './model/alert.model' + +@Component({ + selector: 'app-alert', + templateUrl: './alert.component.html', +}) +export class AlertComponent implements OnInit { + alerts: any[] = [] + sub: Subscription | undefined + message: any + + constructor( + private alertService: AlertService, + private cdr: ChangeDetectorRef + ) {} + + ngOnInit(): void { + console.log('before alertservice on') + + this.sub = this.alertService.on().subscribe((alert: AppAlert) => { + console.log('test') + + console.log(alert.msg) + const messageKey = '@@' + alert.msg + //this.message = $localize`${messageKey}` + const id = alert.msg + this.message = $localize({ '0': `:@@${id}:${id}`, raw: [':'] }) + + this.alerts.push(alert) + this.cdr.detectChanges() + }) + console.log('after alertservice on') + } + + ngOnDestroy(): void { + this.sub?.unsubscribe() + } + + @HostListener('document:keyup.escape', ['$event']) + closeOldestAlert() { + this.alerts.shift() + this.cdr.detectChanges() + } + + close(alertToRemove: any) { + this.alerts = this.alerts.filter((alert: any) => alert !== alertToRemove) + this.cdr.detectChanges() + } +} diff --git a/ui/src/app/shared/alert/model/alert.model.ts b/ui/src/app/shared/alert/model/alert.model.ts new file mode 100644 index 000000000..aca102785 --- /dev/null +++ b/ui/src/app/shared/alert/model/alert.model.ts @@ -0,0 +1,6 @@ +export class AppAlert { + constructor( + public type: 'info', + public msg: string + ) {} +} diff --git a/ui/src/app/shared/service/alert.service.ts b/ui/src/app/shared/service/alert.service.ts new file mode 100644 index 000000000..513540b6c --- /dev/null +++ b/ui/src/app/shared/service/alert.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core' +import { Observable, Subject } from 'rxjs' +import { AppAlert } from '../alert/model/alert.model' + +@Injectable({ providedIn: 'root' }) +export class AlertService { + private alerts: Subject = new Subject() + + on(): Observable { + return this.alerts.asObservable() + } + + broadcast(i18nKey: string): void { + const newAlert = new AppAlert('info', i18nKey) + this.alerts.next(newAlert) + console.log('this.alerts.next called') + } +} diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts index 425180249..ff0ade90f 100644 --- a/ui/src/app/shared/shared.module.ts +++ b/ui/src/app/shared/shared.module.ts @@ -5,11 +5,19 @@ import { CommonModule } from '@angular/common' import { NgbModule } from '@ng-bootstrap/ng-bootstrap' import { FontAwesomeModule } from '@fortawesome/angular-fontawesome' import { HasAnyAuthorityDirective } from './directive/has-any-authority.directive' +import { AlertComponent } from './alert/alert.component' @NgModule({ imports: [CommonModule, NgbModule, FontAwesomeModule], - declarations: [FindLanguageFromKeyPipe, ErrorAlertComponent, HasAnyAuthorityDirective], - exports: [FindLanguageFromKeyPipe, ErrorAlertComponent, NgbModule, FontAwesomeModule, HasAnyAuthorityDirective], + declarations: [FindLanguageFromKeyPipe, ErrorAlertComponent, HasAnyAuthorityDirective, AlertComponent], + exports: [ + FindLanguageFromKeyPipe, + ErrorAlertComponent, + AlertComponent, + NgbModule, + FontAwesomeModule, + HasAnyAuthorityDirective, + ], }) export class SharedModule { static forRoot() { diff --git a/ui/src/app/user/users.component.html b/ui/src/app/user/users.component.html index 1e537cff4..09c997b54 100644 --- a/ui/src/app/user/users.component.html +++ b/ui/src/app/user/users.component.html @@ -1,44 +1,61 @@
-

Manage users

-
-
- - -
+

Manage users

+
+
+
-
-
-
-
- - -
- -
-
+
+
+
+
+
+ + +
+
-
- -
- No users to show -
+
+ +
+ No users to show
+
- - - - - - - - - - - - - - - - - - -
- - {{user.email}}{{user.firstName}}{{user.lastName}} - {{user.mainContact}} - - - {{user.memberName}}{{user.memberName}} - {{user.activated}} - - - -
- - - -
-
+ + +
-
-

{{ itemCount }}

-
-
- -
+
+

{{ itemCount }}

+
+
+ +
+
diff --git a/ui/src/app/user/users.component.ts b/ui/src/app/user/users.component.ts index 70659f1ca..5b861e751 100644 --- a/ui/src/app/user/users.component.ts +++ b/ui/src/app/user/users.component.ts @@ -10,6 +10,7 @@ import { ActivatedRoute, Router } from '@angular/router' import { AccountService } from '../account/service/account.service' import { EventService } from '../shared/service/event.service' import { IAccount } from '../account/model/account.model' +import { AlertService } from '../shared/service/alert.service' @Component({ selector: 'app-users', @@ -42,7 +43,7 @@ export class UsersComponent implements OnInit, OnDestroy { constructor( protected userService: UserService, - // protected jhiAlertService: JhiAlertService, + protected alertService: AlertService, protected accountService: AccountService, protected activatedRoute: ActivatedRoute, protected router: Router, @@ -68,6 +69,7 @@ export class UsersComponent implements OnInit, OnDestroy { } }) this.loadAll() + this.eventSubscriber = this.eventService.on(EventType.USER_LIST_MODIFIED).subscribe(() => { this.searchTerm = '' this.submittedSearchTerm = '' @@ -96,7 +98,6 @@ export class UsersComponent implements OnInit, OnDestroy { this.paginate(res) } }, - error: (res: HttpErrorResponse) => this.onError(res.message), }) } else { this.userService @@ -112,7 +113,6 @@ export class UsersComponent implements OnInit, OnDestroy { this.paginate(res) } }, - error: (res: HttpErrorResponse) => this.onError(res.message), }) } } @@ -161,9 +161,9 @@ export class UsersComponent implements OnInit, OnDestroy { sendActivate(msUser: IUser) { this.userService.sendActivate(msUser).subscribe((res) => { if (res) { - //this.jhiAlertService.success('gatewayApp.msUserServiceMSUser.sendActivate.success.string', null, null) + this.alertService.broadcast('gatewayApp.msUserServiceMSUser.sendActivate.success.string') } else { - //this.jhiAlertService.success('gatewayApp.msUserServiceMSUser.sendActivate.error.string', null, null) + this.alertService.broadcast('gatewayApp.msUserServiceMSUser.sendActivate.error.string') } }) } @@ -231,10 +231,6 @@ export class UsersComponent implements OnInit, OnDestroy { this.itemCount = $localize`:@@global.item-count.string:Showing ${first} - ${second} of ${this.totalItems} items.` } - protected onError(errorMessage: string) { - //this.jhiAlertService.error(errorMessage, null, null) - } - ngOnDestroy() { this.eventSubscriber?.unsubscribe() }