From 7098aa38a6268a630aacc8381b40a57480fa4d35 Mon Sep 17 00:00:00 2001 From: Edi Cziszter Date: Fri, 3 Dec 2021 17:24:10 +0200 Subject: [PATCH 1/5] 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(); From 875b80ab45b8c86d18bb89934e2b69af7191a791 Mon Sep 17 00:00:00 2001 From: Edi Cziszter Date: Tue, 7 Dec 2021 13:56:15 +0200 Subject: [PATCH 2/5] removed useless stuff and renamed form --- apps/red-ui/src/app/i18n/language.service.ts | 1 - .../user-profile-screen.component.html | 4 ++-- .../user-profile-screen.component.ts | 17 ++++++++--------- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/apps/red-ui/src/app/i18n/language.service.ts b/apps/red-ui/src/app/i18n/language.service.ts index cd21180b4..3766af790 100644 --- a/apps/red-ui/src/app/i18n/language.service.ts +++ b/apps/red-ui/src/app/i18n/language.service.ts @@ -21,7 +21,6 @@ export class LanguageService { chooseAndSetInitialLanguage() { let defaultLang: string; const userPreferenceLang = this._userPreferenceService.getLanguage(); - // const browserLang = this._translateService.getBrowserLang(); const browserLang = 'en'; // Force language to english until translations are ready if (this.languageAvailable(userPreferenceLang)) { defaultLang = userPreferenceLang; diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html index 25d5a5a44..e984688de 100644 --- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html @@ -1,4 +1,4 @@ -
+
@@ -30,7 +30,7 @@
-
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 8b6770493..8c3d896bf 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 @@ -17,7 +17,7 @@ import { LanguageService } from '../../../../../i18n/language.service'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class UserProfileScreenComponent implements OnInit { - readonly formGroup: FormGroup = this._getForm(); + readonly form: FormGroup = this._getForm(); changePasswordUrl: SafeResourceUrl; translations = languagesTranslations; @@ -50,16 +50,15 @@ export class UserProfileScreenComponent implements OnInit { } get languageChanged(): boolean { - console.log('plm'); - return this._profileModel['language'] !== this.formGroup.get('language').value; + return this._profileModel['language'] !== this.form.get('language').value; } get profileChanged(): boolean { - const keys = Object.keys(this.formGroup.getRawValue()); + const keys = Object.keys(this.form.getRawValue()); keys.splice(keys.indexOf('language'), 1); for (const key of keys) { - if (this._profileModel[key] !== this.formGroup.get(key).value) { + if (this._profileModel[key] !== this.form.get(key).value) { return true; } } @@ -79,11 +78,11 @@ export class UserProfileScreenComponent implements OnInit { this._loadingService.start(); if (this.languageChanged) { - await this._languageService.changeLanguage(this.formGroup.get('language').value); + await this._languageService.changeLanguage(this.form.get('language').value); } if (this.profileChanged) { - const value = this.formGroup.value as IProfile; + const value = this.form.value as IProfile; delete value.language; await this._userService @@ -109,9 +108,9 @@ export class UserProfileScreenComponent implements OnInit { }; if (this._userService.currentUser.email) { // disable email if it's already set - this.formGroup.get('email').disable(); + this.form.get('email').disable(); } - this.formGroup.patchValue(this._profileModel, { emitEvent: false }); + this.form.patchValue(this._profileModel, { emitEvent: false }); } catch (e) { } finally { this._loadingService.stop(); From 80c8aebb7a11a8cda475cdc583797cdaa49127d9 Mon Sep 17 00:00:00 2001 From: Edi Cziszter Date: Wed, 8 Dec 2021 20:37:17 +0200 Subject: [PATCH 3/5] removed useless language service logic and added readonly keys --- apps/red-ui/src/app/app.module.ts | 6 ------ apps/red-ui/src/app/i18n/language.service.ts | 7 +------ apps/red-ui/src/app/services/user-preference.service.ts | 8 +++++--- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 375d7d8ab..1ae19dd51 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -111,12 +111,6 @@ const components = [AppComponent, AuthErrorComponent, NotificationsComponent, Sp multi: true, useClass: HttpCacheInterceptor, }, - /*{ - provide: APP_INITIALIZER, - multi: true, - useFactory: languageInitializer, - deps: [LanguageService], - },*/ { provide: APP_INITIALIZER, multi: true, diff --git a/apps/red-ui/src/app/i18n/language.service.ts b/apps/red-ui/src/app/i18n/language.service.ts index 3766af790..d7a5b0c98 100644 --- a/apps/red-ui/src/app/i18n/language.service.ts +++ b/apps/red-ui/src/app/i18n/language.service.ts @@ -19,15 +19,10 @@ export class LanguageService { } chooseAndSetInitialLanguage() { - let defaultLang: string; + let defaultLang = 'en'; const userPreferenceLang = this._userPreferenceService.getLanguage(); - const browserLang = 'en'; // Force language to english until translations are ready if (this.languageAvailable(userPreferenceLang)) { defaultLang = userPreferenceLang; - } else if (this.languageAvailable(browserLang)) { - defaultLang = browserLang; - } else { - defaultLang = 'en'; } document.documentElement.lang = defaultLang; this._translateService.setDefaultLang(defaultLang); 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 a0927fca5..eebe4340f 100644 --- a/apps/red-ui/src/app/services/user-preference.service.ts +++ b/apps/red-ui/src/app/services/user-preference.service.ts @@ -3,6 +3,8 @@ import { GenericService, List, RequiredParam, Validate } from '@iqser/common-ui' type UserAttributes = Record; +const KEYS = ['Language', 'Dossier-Recent']; + @Injectable({ providedIn: 'root', }) @@ -28,13 +30,13 @@ export class UserPreferenceService extends GenericService { } async saveLastOpenedFileForDossier(dossierId: string, fileId: string): Promise { - const key = `Dossier-Recent-${dossierId}`; + const key = `${KEYS[1]}-${dossierId}`; this.userAttributes[key] = [fileId]; await this.savePreferences([fileId], key).toPromise(); } getLanguage(): string { - const key = 'Language'; + const key = KEYS[0]; if (this.userAttributes[key]?.length > 0) { return this.userAttributes[key][0]; } @@ -42,7 +44,7 @@ export class UserPreferenceService extends GenericService { } async saveLanguage(language: string): Promise { - const key = 'Language'; + const key = KEYS[0]; this.userAttributes[key] = [language]; await this.savePreferences([language], key).toPromise(); } From 035c868c812103f5ebbf4c1e3ff2b06ed5f18609 Mon Sep 17 00:00:00 2001 From: Edi Cziszter Date: Fri, 10 Dec 2021 17:31:35 +0200 Subject: [PATCH 4/5] added dictionary instead of keys array --- .../src/app/services/user-preference.service.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) 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 eebe4340f..c4449961c 100644 --- a/apps/red-ui/src/app/services/user-preference.service.ts +++ b/apps/red-ui/src/app/services/user-preference.service.ts @@ -3,7 +3,10 @@ import { GenericService, List, RequiredParam, Validate } from '@iqser/common-ui' type UserAttributes = Record; -const KEYS = ['Language', 'Dossier-Recent']; +const KEYS = { + language: 'Language', + dossierRecent: 'Dossier-Recent', +} as const; @Injectable({ providedIn: 'root', @@ -30,13 +33,13 @@ export class UserPreferenceService extends GenericService { } async saveLastOpenedFileForDossier(dossierId: string, fileId: string): Promise { - const key = `${KEYS[1]}-${dossierId}`; + const key = `${KEYS.dossierRecent}-${dossierId}`; this.userAttributes[key] = [fileId]; await this.savePreferences([fileId], key).toPromise(); } getLanguage(): string { - const key = KEYS[0]; + const key = KEYS.language; if (this.userAttributes[key]?.length > 0) { return this.userAttributes[key][0]; } @@ -44,7 +47,7 @@ export class UserPreferenceService extends GenericService { } async saveLanguage(language: string): Promise { - const key = KEYS[0]; + const key = KEYS.language; this.userAttributes[key] = [language]; await this.savePreferences([language], key).toPromise(); } From 426f5d6aa39b167701eda9d20c6aded32e7ecbe8 Mon Sep 17 00:00:00 2001 From: Edi Cziszter Date: Fri, 10 Dec 2021 17:36:55 +0200 Subject: [PATCH 5/5] added filePreviewTooltip key --- .../src/app/services/user-preference.service.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) 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 c4449961c..e2ac56f9e 100644 --- a/apps/red-ui/src/app/services/user-preference.service.ts +++ b/apps/red-ui/src/app/services/user-preference.service.ts @@ -6,6 +6,7 @@ type UserAttributes = Record; const KEYS = { language: 'Language', dossierRecent: 'Dossier-Recent', + filePreviewTooltips: 'File-Preview-Tooltips', } as const; @Injectable({ @@ -28,7 +29,7 @@ export class UserPreferenceService extends GenericService { } getLastOpenedFileForDossier(dossierId: string): string { - const key = `Dossier-Recent-${dossierId}`; + const key = `${KEYS.dossierRecent}-${dossierId}`; return this._getAttribute(key); } @@ -40,10 +41,7 @@ export class UserPreferenceService extends GenericService { getLanguage(): string { const key = KEYS.language; - if (this.userAttributes[key]?.length > 0) { - return this.userAttributes[key][0]; - } - return ''; + return this._getAttribute(key); } async saveLanguage(language: string): Promise { @@ -53,12 +51,12 @@ export class UserPreferenceService extends GenericService { } getFilePreviewTooltipsPreference(): boolean { - const key = 'File-Preview-Tooltips'; + const key = KEYS.filePreviewTooltips; return this._getAttribute(key, 'false') === 'true'; } async toggleFilePreviewTooltipsPreference(): Promise { - const key = 'File-Preview-Tooltips'; + const key = KEYS.filePreviewTooltips; const currentValue = this.getFilePreviewTooltipsPreference(); const nextValue = [(!currentValue).toString()]; this.userAttributes[key] = nextValue;