add localization pipe for translated alerts

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'

ui/src/app/shared/alert/alert.component.html

@@ -2,7 +2,7 @@
   <div *ngFor="let alert of alerts">
     <ngb-alert *ngIf="alert && alert.type && alert.msg" [type]="alert.type" [dismissible]="false">
       <div class="d-flex">
-        <p i18n="@@error.subtitle" class="font-size-16 font-weight-bold mr-auto mb-2">Sorry, an error has occurred</p>
+        <div class="font-size-16">{{ alert.msg | localize }}</div>
         <a (click)="close(alert)" (keyup)="closeOldestAlert()" tabindex="0">
           <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
@@ -13,7 +13,6 @@
           </svg>
         </a>
       </div>
-      <div class="font-size-16">{{ message }}</div>
     </ngb-alert>
   </div>
 </div>

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(<any>{ '0': `:@@${id}:${id}`, raw: [':'] })
-
       this.alerts.push(alert)
       this.cdr.detectChanges()
+      setTimeout(() => this.close(alert), 5000)
     })
-    console.log('after alertservice on')
   }
 
   ngOnDestroy(): void {

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}`
+    }
+  }
+}

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')
   }

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,

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