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