add ngx-translate #1127

frontend-admin/package.json

@@ -16,7 +16,10 @@
     "outputPath": "./src/app/svg",
     "srcPath": "./src/assets/svg",
     "svgoConfig": {
-      "plugins": ["removeDimensions", "cleanupAttrs"]
+      "plugins": [
+        "removeDimensions",
+        "cleanupAttrs"
+      ]
     }
   },
   "private": true,
@@ -32,6 +35,8 @@
     "@angular/router": "^14.2.0",
     "@ng-bootstrap/ng-bootstrap": "^13.1.1",
     "@ngneat/svg-icon": "^6.1.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.2.0",
     "rxjs": "~7.5.0",

frontend-admin/proxy.config.json

@@ -16,5 +16,11 @@
     "secure": false,
     "changeOrigin": true,
     "logLevel": "debug"
+  },
+  "/api/v2/": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
   }
 }

frontend-admin/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-root',
@@ -7,9 +8,11 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AppComponent implements OnInit {
 
-  constructor() {
+  constructor(private readonly translateService: TranslateService) {
   }
 
   ngOnInit(): void {
+    this.translateService.setDefaultLang('en');
+    this.translateService.use('en');
   }
 }

frontend-admin/src/app/app.module.ts

@@ -4,7 +4,7 @@ import {provideSvgIcons} from '@ngneat/svg-icon';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {AuthenticationModule} from "./authentication/authentication.module";
-import {HTTP_INTERCEPTORS, HttpClientModule, HttpClientXsrfModule, HttpXsrfTokenExtractor} from "@angular/common/http";
+import {HTTP_INTERCEPTORS, HttpClientModule, HttpClientXsrfModule, HttpXsrfTokenExtractor, HttpClient} from "@angular/common/http";
 import {AuthTokenInterceptor, DOMGidExtractor, DOMXsrfTokenExtractor} from "./shared/xsrf";
 import {UserService} from "./shared/user.service";
 import {Router} from "@angular/router";
@@ -13,6 +13,8 @@ import { SvgIconComponent } from '@ngneat/svg-icon';
 import {OrganizationService} from './shared/organization.service';
 import {MissingOrgComponent} from './missing-org/missing-org.component';
 import { ICONS } from './shared/icons';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {CustomLoader} from './shared/i18n.service';
 
 export function RedirectToLoginIfNeeded(userService: UserService, router: Router): () => Promise<boolean> {
   return async () => {
@@ -24,6 +26,11 @@ export function RedirectToLoginIfNeeded(userService: UserService, router: Router
   };
 }
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new CustomLoader(http);
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -38,7 +45,14 @@ export function RedirectToLoginIfNeeded(userService: UserService, router: Router
       cookieName: 'XSRF-TOKEN',
       headerName: 'X-CSRF-TOKEN',
     }),
-    SvgIconComponent
+    SvgIconComponent,
+    TranslateModule.forRoot({
+      loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient]
+      }
+  }),
   ],
   providers: [
     { provide: APP_INITIALIZER, useFactory: RedirectToLoginIfNeeded, deps: [UserService, Router], multi: true},

frontend-admin/src/app/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-<h1>My events</h1>
+<h1 translate="admin.dashboard.my-events"></h1>
 <svg-icon key="check"></svg-icon>
 <h2>Active</h2>
 <ul>

frontend-admin/src/app/dashboard/dashboard.module.ts

@@ -8,10 +8,12 @@ import {CommonModule} from "@angular/common";
 import {EventService} from "../shared/event.service";
 import {OrganizationConfigurationComponent} from './organization-configuration/organization-configuration.component';
 import {provideSvgIcons, SvgIconComponent} from '@ngneat/svg-icon';
+import { TranslateModule } from '@ngx-translate/core'
 import { ICONS } from "../shared/icons";
 
 @NgModule({
   imports: [
+    TranslateModule.forChild(),
     CommonModule,
     NgbModule,
     RouterModule.forChild([

frontend-admin/src/app/shared/i18n.service.ts

@@ -0,0 +1,18 @@
+import { HttpClient } from "@angular/common/http";
+import { TranslateLoader } from "@ngx-translate/core";
+import { Observable, shareReplay } from "rxjs";
+
+const translationCache: {[key: string]: Observable<any>} = {};
+
+export class CustomLoader implements TranslateLoader {
+
+  constructor(private http: HttpClient) {
+  }
+
+  getTranslation(lang: string): Observable<any> {
+    if (!translationCache[lang]) {
+        translationCache[lang] = this.http.get(`/api/v2/admin/i18n/bundle/${lang}`).pipe(shareReplay(1));
+    }
+    return translationCache[lang];
+  }
+}

src/main/java/alfio/controller/api/v2/TranslationsApiController.java

@@ -56,7 +56,10 @@ public Map<String, String> getPublicTranslations(@PathVariable("lang") String la
     @GetMapping("/admin/i18n/bundle/{lang}")
     public Map<String, String> getAdminTranslations(@PathVariable("lang") String lang,
                                                     @RequestParam(value = "withSystemOverride", defaultValue = "true", required = false) boolean withSystemOverride) {
-        return messageSourceManager.getBundleAsMap("alfio.i18n.admin", withSystemOverride, lang);
+        var bundle = messageSourceManager.getBundleAsMap("alfio.i18n.public", withSystemOverride, lang);
+        return bundle.entrySet().stream()
+            .filter(kv -> kv.getKey().startsWith("admin."))
+            .collect(Collectors.toMap(Map.Entry::getKey, Map.Entry::getValue));
     }
 
     @GetMapping("/public/i18n/countries/{lang}")

src/main/resources/alfio/i18n/public.properties

@@ -600,3 +600,7 @@ online.check-in.waiting-room.event-started.contact-organizers=Please try again b
 online.check-in.waiting-room.event-ended=Sorry, this event has ended.
 qr.code=QR Code
 link.new-tab=(Opens in a new tab)
+
+
+## admin related key
+admin.dashboard.my-events=My events