From 7098aa38a6268a630aacc8381b40a57480fa4d35 Mon Sep 17 00:00:00 2001 From: Edi Cziszter Date: Fri, 3 Dec 2021 17:24:10 +0200 Subject: [PATCH] language saved in preferences and removed localstorage --- apps/red-ui/src/app/app.module.ts | 7 ++++--- apps/red-ui/src/app/i18n/language.service.ts | 17 +++++++++++------ .../user-profile-screen.component.ts | 1 + .../src/app/services/user-preference.service.ts | 15 ++++++++++++++- .../src/app/utils/configuration.initializer.ts | 6 ++++++ 5 files changed, 36 insertions(+), 10 deletions(-) diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 051abb04e..375d7d8ab 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -36,6 +36,7 @@ import { HELP_DOCS, IqserHelpModeModule, MAX_RETRIES_ON_SERVER_ERROR, ServerErro import { KeycloakService } from 'keycloak-angular'; import { GeneralSettingsService } from '@services/general-settings.service'; import { BreadcrumbsComponent } from '@components/breadcrumbs/breadcrumbs.component'; +import { UserPreferenceService } from '@services/user-preference.service'; export function httpLoaderFactory(httpClient: HttpClient): PruningTranslationLoader { return new PruningTranslationLoader(httpClient, '/assets/i18n/', '.json'); @@ -110,17 +111,17 @@ const components = [AppComponent, AuthErrorComponent, NotificationsComponent, Sp multi: true, useClass: HttpCacheInterceptor, }, - { + /*{ provide: APP_INITIALIZER, multi: true, useFactory: languageInitializer, deps: [LanguageService], - }, + },*/ { provide: APP_INITIALIZER, multi: true, useFactory: configurationInitializer, - deps: [KeycloakService, Title, ConfigService, GeneralSettingsService], + deps: [KeycloakService, Title, ConfigService, GeneralSettingsService, LanguageService, UserPreferenceService], }, { provide: MissingTranslationHandler, diff --git a/apps/red-ui/src/app/i18n/language.service.ts b/apps/red-ui/src/app/i18n/language.service.ts index 4f4331ae7..cd21180b4 100644 --- a/apps/red-ui/src/app/i18n/language.service.ts +++ b/apps/red-ui/src/app/i18n/language.service.ts @@ -1,11 +1,12 @@ import { Injectable } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; +import { UserPreferenceService } from '@services/user-preference.service'; @Injectable({ providedIn: 'root', }) export class LanguageService { - constructor(private readonly _translateService: TranslateService) { + constructor(private readonly _translateService: TranslateService, private readonly _userPreferenceService: UserPreferenceService) { _translateService.addLangs(['en', 'de']); } @@ -13,14 +14,18 @@ export class LanguageService { return this._translateService.currentLang; } + languageAvailable(language: string): boolean { + return this._translateService.getLangs().includes(language); + } + chooseAndSetInitialLanguage() { let defaultLang: string; - const localStorageLang = localStorage.getItem('redaction.language'); + const userPreferenceLang = this._userPreferenceService.getLanguage(); // const browserLang = this._translateService.getBrowserLang(); const browserLang = 'en'; // Force language to english until translations are ready - if (this._translateService.getLangs().includes(localStorageLang)) { - defaultLang = localStorageLang; - } else if (this._translateService.getLangs().includes(browserLang)) { + if (this.languageAvailable(userPreferenceLang)) { + defaultLang = userPreferenceLang; + } else if (this.languageAvailable(browserLang)) { defaultLang = browserLang; } else { defaultLang = 'en'; @@ -31,7 +36,7 @@ export class LanguageService { } async changeLanguage(language: string) { - localStorage.setItem('redaction.language', language); + await this._userPreferenceService.saveLanguage(language); document.documentElement.lang = language; await this._translateService.use(language).toPromise(); } diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts index a796242f2..8b6770493 100644 --- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts @@ -50,6 +50,7 @@ export class UserProfileScreenComponent implements OnInit { } get languageChanged(): boolean { + console.log('plm'); return this._profileModel['language'] !== this.formGroup.get('language').value; } diff --git a/apps/red-ui/src/app/services/user-preference.service.ts b/apps/red-ui/src/app/services/user-preference.service.ts index 9ce0e6dc5..a0927fca5 100644 --- a/apps/red-ui/src/app/services/user-preference.service.ts +++ b/apps/red-ui/src/app/services/user-preference.service.ts @@ -9,7 +9,6 @@ type UserAttributes = Record; export class UserPreferenceService extends GenericService { constructor(protected readonly _injector: Injector) { super(_injector, 'attributes'); - this.reload(); } private _userAttributes: UserAttributes = {}; @@ -34,6 +33,20 @@ export class UserPreferenceService extends GenericService { await this.savePreferences([fileId], key).toPromise(); } + getLanguage(): string { + const key = 'Language'; + if (this.userAttributes[key]?.length > 0) { + return this.userAttributes[key][0]; + } + return ''; + } + + async saveLanguage(language: string): Promise { + const key = 'Language'; + this.userAttributes[key] = [language]; + await this.savePreferences([language], key).toPromise(); + } + getFilePreviewTooltipsPreference(): boolean { const key = 'File-Preview-Tooltips'; return this._getAttribute(key, 'false') === 'true'; diff --git a/apps/red-ui/src/app/utils/configuration.initializer.ts b/apps/red-ui/src/app/utils/configuration.initializer.ts index d111c02af..228994ec0 100644 --- a/apps/red-ui/src/app/utils/configuration.initializer.ts +++ b/apps/red-ui/src/app/utils/configuration.initializer.ts @@ -4,12 +4,16 @@ import { Title } from '@angular/platform-browser'; import { of } from 'rxjs'; import { KeycloakEventType, KeycloakService } from 'keycloak-angular'; import { GeneralSettingsService } from '@services/general-settings.service'; +import { LanguageService } from '@i18n/language.service'; +import { UserPreferenceService } from '@services/user-preference.service'; export function configurationInitializer( keycloakService: KeycloakService, title: Title, configService: ConfigService, generalSettingsService: GeneralSettingsService, + languageService: LanguageService, + userPreferenceService: UserPreferenceService, ) { return () => keycloakService.keycloakEvents$ @@ -21,6 +25,8 @@ export function configurationInitializer( title.setTitle('RedactManager'); return of({}); }), + tap(() => userPreferenceService.reload()), + tap(() => languageService.chooseAndSetInitialLanguage()), take(1), ) .toPromise();