From d009e739e0d5df316421cc8bcb72492a0eba5916 Mon Sep 17 00:00:00 2001 From: andrej romanov <50377758+auumgn@users.noreply.github.com> Date: Mon, 22 Jan 2024 20:04:07 +0200 Subject: [PATCH] add localization pipe for translated alerts --- ui/src/app/app.constants.ts | 6 +++++- ui/src/app/shared/alert/alert.component.html | 3 +-- ui/src/app/shared/alert/alert.component.ts | 12 +----------- ui/src/app/shared/pipe/localize.ts | 18 ++++++++++++++++++ ui/src/app/shared/service/alert.service.ts | 5 +++-- ui/src/app/shared/shared.module.ts | 4 +++- ui/src/app/user/users.component.ts | 8 +++++--- 7 files changed, 36 insertions(+), 20 deletions(-) create mode 100644 ui/src/app/shared/pipe/localize.ts diff --git a/ui/src/app/app.constants.ts b/ui/src/app/app.constants.ts index d3fb6a42f..e51c8fdc3 100644 --- a/ui/src/app/app.constants.ts +++ b/ui/src/app/app.constants.ts @@ -3,7 +3,11 @@ export enum EventType { AFFILIATION_CREATED = 'AFFILIATION_CREATED', AFFILIATION_UPDATED = 'AFFILIATION_UPDATED', USER_LIST_MODIFIED = 'USER_LIST_MODIFIED', - // add as we go +} + +export enum AlertType { + SEND_ACTIVATION_SUCCESS = 'Invite sent.', + SEND_ACTIVATION_FAILURE = 'Invite email couldn`t be sent.', } export const EMAIL_NOT_FOUND_TYPE = 'https://www.jhipster.tech/problem/email-not-found' diff --git a/ui/src/app/shared/alert/alert.component.html b/ui/src/app/shared/alert/alert.component.html index 674692383..fd32e24bf 100644 --- a/ui/src/app/shared/alert/alert.component.html +++ b/ui/src/app/shared/alert/alert.component.html @@ -2,7 +2,7 @@
-

Sorry, an error has occurred

+
{{ alert.msg | localize }}
-
{{ message }}
diff --git a/ui/src/app/shared/alert/alert.component.ts b/ui/src/app/shared/alert/alert.component.ts index 1600d886d..514913b6e 100644 --- a/ui/src/app/shared/alert/alert.component.ts +++ b/ui/src/app/shared/alert/alert.component.ts @@ -18,21 +18,11 @@ export class AlertComponent implements OnInit { ) {} 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() + setTimeout(() => this.close(alert), 5000) }) - console.log('after alertservice on') } ngOnDestroy(): void { diff --git a/ui/src/app/shared/pipe/localize.ts b/ui/src/app/shared/pipe/localize.ts new file mode 100644 index 000000000..e186af511 --- /dev/null +++ b/ui/src/app/shared/pipe/localize.ts @@ -0,0 +1,18 @@ +import { Pipe, PipeTransform } from '@angular/core' +import { AlertType } from 'src/app/app.constants' + +@Pipe({ + name: 'localize', +}) +export class LocalizePipe implements PipeTransform { + constructor() {} + + transform(value: string, ...args: any[]): any { + switch (value) { + case AlertType.SEND_ACTIVATION_SUCCESS: + 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}` + } + } +} diff --git a/ui/src/app/shared/service/alert.service.ts b/ui/src/app/shared/service/alert.service.ts index 513540b6c..f198c3f08 100644 --- a/ui/src/app/shared/service/alert.service.ts +++ b/ui/src/app/shared/service/alert.service.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core' import { Observable, Subject } from 'rxjs' import { AppAlert } from '../alert/model/alert.model' +import { AlertType } from 'src/app/app.constants' @Injectable({ providedIn: 'root' }) export class AlertService { @@ -10,8 +11,8 @@ export class AlertService { return this.alerts.asObservable() } - broadcast(i18nKey: string): void { - const newAlert = new AppAlert('info', i18nKey) + broadcast(alert: string): void { + const newAlert = new AppAlert('info', alert) 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 ff0ade90f..078ba4194 100644 --- a/ui/src/app/shared/shared.module.ts +++ b/ui/src/app/shared/shared.module.ts @@ -6,12 +6,14 @@ 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' +import { LocalizePipe } from './pipe/localize' @NgModule({ imports: [CommonModule, NgbModule, FontAwesomeModule], - declarations: [FindLanguageFromKeyPipe, ErrorAlertComponent, HasAnyAuthorityDirective, AlertComponent], + declarations: [FindLanguageFromKeyPipe, LocalizePipe, ErrorAlertComponent, HasAnyAuthorityDirective, AlertComponent], exports: [ FindLanguageFromKeyPipe, + LocalizePipe, ErrorAlertComponent, AlertComponent, NgbModule, diff --git a/ui/src/app/user/users.component.ts b/ui/src/app/user/users.component.ts index 5b861e751..aedd2d1e7 100644 --- a/ui/src/app/user/users.component.ts +++ b/ui/src/app/user/users.component.ts @@ -5,7 +5,7 @@ import { UserService } from './service/user.service' import { HttpErrorResponse } from '@angular/common/http' import { IUserPage, UserPage } from './model/user-page.model' import { faCheckCircle, faSearch, faTimes, faTimesCircle } from '@fortawesome/free-solid-svg-icons' -import { EventType, ITEMS_PER_PAGE } from '../app.constants' +import { AlertType, EventType, ITEMS_PER_PAGE } from '../app.constants' import { ActivatedRoute, Router } from '@angular/router' import { AccountService } from '../account/service/account.service' import { EventService } from '../shared/service/event.service' @@ -161,9 +161,9 @@ export class UsersComponent implements OnInit, OnDestroy { sendActivate(msUser: IUser) { this.userService.sendActivate(msUser).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) } }) } @@ -224,6 +224,8 @@ export class UsersComponent implements OnInit, OnDestroy { } protected paginate(data: IUserPage) { + this.alertService.broadcast(AlertType.SEND_ACTIVATION_SUCCESS) + this.totalItems = data.totalItems this.users = data.users const first = (this.page - 1) * this.itemsPerPage === 0 ? 1 : (this.page - 1) * this.itemsPerPage + 1