From 6f5cd79a7fdb92960881efbb80a492a69a478584 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Mon, 14 Oct 2024 13:10:23 +0300 Subject: [PATCH] RED-10183: use the user preferred language + component refactoring. --- .../user-profile-screen.component.html | 3 +- .../user-profile-screen.component.ts | 113 ++++++++---------- apps/red-ui/src/app/utils/functions.ts | 6 + apps/red-ui/src/app/utils/main.guard.ts | 4 +- libs/common-ui | 2 +- 5 files changed, 64 insertions(+), 64 deletions(-) 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 701b675c5..6c7e7b9aa 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 @@ -20,6 +20,7 @@ + {{ languageSelectLabel() | translate }} {{ translations[language] | translate }} @@ -41,7 +42,7 @@
> = this.#getForm(); + initialFormValue = this.form.getRawValue(); readonly translations = languagesTranslations; readonly devMode = this._userPreferenceService.isIqserDevMode; + readonly profileKeys = ['email', 'firstName', 'lastName']; + readonly languages = this._translateService.langs; + readonly language = formControlToSignal(this.form.controls.language); + readonly languageSelectLabel = computed(() => this.translations[this.language()]); + constructor( private readonly _userService: UserService, private readonly _loadingService: LoadingService, @@ -49,41 +76,26 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI private readonly _pdfViewer: PdfViewer, ) { super(); - this._loadingService.start(); + if (!this._permissionsService.has(Roles.updateMyProfile)) { + this.form.disable(); + } + this._loadingService.stop(); } get languageChanged(): boolean { - return this.#profileModel['language'] !== this.form.get('language').value; + return this.initialFormValue['language'] !== this.form.controls.language.value; } get themeChanged(): boolean { - return this.#profileModel['darkTheme'] !== this.form.get('darkTheme').value; + return this.initialFormValue['darkTheme'] !== this.form.controls.darkTheme.value; } get emailChanged(): boolean { - return this.#profileModel['email'] !== this.form.get('email').value; + return this.initialFormValue['email'] !== this.form.controls.email.value; } get profileChanged(): boolean { - const keys = Object.keys(this.form.getRawValue()); - keys.splice(keys.indexOf('language'), 1); - keys.splice(keys.indexOf('darkTheme'), 1); - - for (const key of keys) { - if (this.#profileModel[key] !== this.form.get(key).value) { - return true; - } - } - - return false; - } - - get languages(): string[] { - return this._translateService.langs; - } - - ngOnInit() { - this._initializeForm(); + return this.profileKeys.some(key => this.initialFormValue[key] !== this.form.get(key).value); } async save(): Promise { @@ -108,16 +120,17 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI } if (this.languageChanged) { - await this._languageService.change(this.form.get('language').value); + await this._languageService.change(this.form.controls.language.value); await this._pdfViewer.instance?.UI.setLanguage(this._languageService.currentLanguage); } if (this.themeChanged) { - await this._userPreferenceService.saveTheme(this.form.get('darkTheme').value ? 'dark' : 'light'); + await this._userPreferenceService.saveTheme(this.form.controls.darkTheme.value ? 'dark' : 'light'); } - this._initializeForm(); - + this.initialFormValue = this.form.getRawValue(); + this._changeRef.markForCheck(); + this._loadingService.stop(); this._toaster.success(_('user-profile-screen.update.success')); } catch (e) { this._loadingService.stop(); @@ -128,35 +141,13 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI await this._userService.createResetPasswordAction(); } - private _getForm(): UntypedFormGroup { + #getForm() { return this._formBuilder.group({ - email: ['', [Validators.required, Validators.email]], - firstName: [''], - lastName: [''], - language: [''], - darkTheme: [false], + email: [this._userService.currentUser.email ?? '', [Validators.required, Validators.email]], + firstName: [this._userService.currentUser.firstName ?? ''], + lastName: [this._userService.currentUser.lastName ?? ''], + language: [this._userPreferenceService.getLanguage()], + darkTheme: [this._userPreferenceService.getTheme() === 'dark'], }); } - - private _initializeForm(): void { - try { - this.form = this._getForm(); - if (!this._permissionsService.has(Roles.updateMyProfile)) { - this.form.disable(); - } - this.#profileModel = { - email: this._userService.currentUser.email ?? '', - firstName: this._userService.currentUser.firstName ?? '', - lastName: this._userService.currentUser.lastName ?? '', - language: this._languageService.currentLanguage ?? '', - darkTheme: this._userPreferenceService.getTheme() === 'dark', - }; - this.form.patchValue(this.#profileModel, { emitEvent: false }); - this.initialFormValue = this.form.getRawValue(); - } catch (e) { - } finally { - this._loadingService.stop(); - this._changeRef.markForCheck(); - } - } } diff --git a/apps/red-ui/src/app/utils/functions.ts b/apps/red-ui/src/app/utils/functions.ts index 0aca86784..50492e03c 100644 --- a/apps/red-ui/src/app/utils/functions.ts +++ b/apps/red-ui/src/app/utils/functions.ts @@ -2,6 +2,8 @@ import { ITrackable } from '@iqser/common-ui'; import type { List } from '@iqser/common-ui/lib/utils'; import type { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { Dayjs } from 'dayjs'; +import { FormControl } from '@angular/forms'; +import { toSignal } from '@angular/core/rxjs-interop'; export function hexToRgb(hex: string) { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); @@ -143,3 +145,7 @@ export function urlFileId() { const fileId = splitUrl[splitUrl.length - 1]; return fileId.split('?')[0]; } + +export function formControlToSignal(control: FormControl) { + return toSignal(control.valueChanges, { initialValue: control.value }); +} diff --git a/apps/red-ui/src/app/utils/main.guard.ts b/apps/red-ui/src/app/utils/main.guard.ts index 7c4db96bd..fc137acbb 100644 --- a/apps/red-ui/src/app/utils/main.guard.ts +++ b/apps/red-ui/src/app/utils/main.guard.ts @@ -1,6 +1,6 @@ import { inject } from '@angular/core'; import { Router, RouterStateSnapshot } from '@angular/router'; -import { AsyncGuard, IqserPermissionsService, LoadingService } from '@iqser/common-ui'; +import { AsyncGuard, IqserPermissionsService, LanguageService, LoadingService } from '@iqser/common-ui'; import { TenantsService } from '@iqser/common-ui/lib/tenants'; import { ConfigService } from '@services/config.service'; import { DossiersChangesService } from '@services/dossiers/dossier-changes.service'; @@ -38,6 +38,7 @@ export function mainGuard(): AsyncGuard { const tenantsService = inject(TenantsService); const loadingService = inject(LoadingService); const configService = inject(ConfigService); + const languageService = inject(LanguageService); const baseHref = inject(APP_BASE_HREF); const generalConfig$ = inject(GeneralSettingsService).getGeneralConfigurations(); @@ -51,6 +52,7 @@ export function mainGuard(): AsyncGuard { firstValueFrom(updatedDisplayName$), ]); + await languageService.setInitialLanguage(); const lastDossierTemplate = userPreferenceService.getLastDossierTemplate(); if (lastDossierTemplate && !isUsersAdminOnly) { diff --git a/libs/common-ui b/libs/common-ui index 3c89b8f7e..32de77585 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 3c89b8f7e71eb9253aa40f40c1598eac2c400c71 +Subproject commit 32de7758599d887c4b574d70a11b4e0382f30f0c