+ {{ 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