inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-40136 Migrate locale settings to signals (#11361)

Browse Source
This commit is contained in:
Denys Vuika
2025-11-20 06:43:30 -05:00
committed by GitHub
parent 2f5139df73
commit 58a25fe19e
15 changed files with 253 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
+6 -12
View File
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, DestroyRef, inject, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Component, effect, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import {
DatetimeAdapter,
@@ -25,7 +25,7 @@ import {
MatDatetimepickerModule
} from '@mat-datetimepicker/core';
import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
import { UserPreferencesService, UserPreferenceValues } from '../../../common/services/user-preferences.service';
import { UserPreferencesService } from '../../../common/services/user-preferences.service';
import { BaseCardView } from '../base-card-view';
import { ClipboardService } from '../../../clipboard/clipboard.service';
import { TranslationService } from '../../../translation/translation.service';
@@ -40,7 +40,6 @@ import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
@@ -83,8 +82,6 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
cardViewDateTimeControl: FormControl<Date> = new FormControl<Date>(null);
private readonly destroyRef = inject(DestroyRef);
constructor(
private dateAdapter: DateAdapter<Date>,
private userPreferencesService: UserPreferencesService,
@@ -92,16 +89,13 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
private translateService: TranslationService
) {
super();
// Use effect to react to locale signal changes (must be in injection context)
effect(() => {
this.property.locale = this.userPreferencesService.localeSignal();
});
}
ngOnInit() {
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((locale) => {
this.property.locale = locale;
});
(this.dateAdapter as AdfDateFnsAdapter).displayFormat = 'MMM DD';
if (this.property.multivalued) {
lib/core/src/lib/common/services/user-preferences.service.ts
+71 -2
View File
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { inject, Injectable, RendererFactory2 } from '@angular/core';
import { inject, Injectable, RendererFactory2, Signal } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service';
@@ -25,6 +25,7 @@ import { LanguageItem } from './language-item.interface';
import { DOCUMENT } from '@angular/common';
import { Directionality, Direction } from '@angular/cdk/bidi';
import { DEFAULT_LANGUAGE_LIST } from '../models/default-languages.model';
import { toSignal } from '@angular/core/rxjs-interop';
// eslint-disable-next-line no-shadow
export enum UserPreferenceValues {
@@ -53,10 +54,78 @@ export class UserPreferencesService {
private onChangeSubject: BehaviorSubject<any>;
onChange: Observable<any>;
constructor(public translate: TranslateService, private appConfig: AppConfigService, private storage: StorageService) {
/**
* Observable that emits the current locale whenever it changes.
* This is a convenience property that simplifies subscribing to locale changes.
*
* @example Observable usage (requires manual unsubscription):
* ```typescript
* constructor(private userPreferencesService: UserPreferencesService) {
* this.userPreferencesService.locale$
* .pipe(takeUntilDestroyed())
* .subscribe(locale => {
* this.currentLocale = locale;
* });
* }
* ```
*
* @example Signal usage (automatic cleanup, recommended):
* ```typescript
* export class MyComponent {
* private userPreferencesService = inject(UserPreferencesService);
* currentLocale = this.userPreferencesService.localeSignal; // Signal - no subscription needed!
* }
* ```
*/
readonly locale$: Observable<string>;
/**
* Signal that provides the current locale value.
* Automatically handles cleanup - no need for takeUntilDestroyed or manual unsubscription.
* This is the recommended way to access locale in components.
*/
readonly localeSignal: Signal<string>;
/**
* Observable that emits the current pagination size whenever it changes.
*/
readonly paginationSize$: Observable<number>;
/**
* Signal that provides the current pagination size value.
*/
readonly paginationSizeSignal: Signal<number>;
/**
* Observable that emits the supported page sizes whenever they change.
*/
readonly supportedPageSizes$: Observable<number[]>;
/**
* Signal that provides the supported page sizes array.
*/
readonly supportedPageSizesSignal: Signal<number[]>;
constructor(
public translate: TranslateService,
private appConfig: AppConfigService,
private storage: StorageService
) {
this.onChangeSubject = new BehaviorSubject(this.userPreferenceStatus);
this.onChange = this.onChangeSubject.asObservable();
// Initialize convenience observables
this.locale$ = this.select<string>(UserPreferenceValues.Locale);
this.paginationSize$ = this.select<number>(UserPreferenceValues.PaginationSize);
this.supportedPageSizes$ = this.select<string>(UserPreferenceValues.SupportedPageSizes).pipe(
map((value) => (value ? JSON.parse(value) : this.defaults.supportedPageSizes))
);
// Initialize convenience signals (automatically handle cleanup)
this.localeSignal = toSignal(this.locale$, { initialValue: this.defaults.locale });
this.paginationSizeSignal = toSignal(this.paginationSize$, { initialValue: this.defaults.paginationSize });
this.supportedPageSizesSignal = toSignal(this.supportedPageSizes$, { initialValue: this.defaults.supportedPageSizes });
this.appConfig.onLoad.subscribe(() => {
this.initUserPreferenceStatus();
});
lib/core/src/lib/common/utils/date-fns-adapter.ts
+20 -5
View File
@@ -17,10 +17,11 @@
import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
import { DateFnsUtils } from './date-fns-utils';
import { Inject, Injectable, Optional } from '@angular/core';
import { effect, Inject, Injectable, Optional } from '@angular/core';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material/core';
import { UserPreferenceValues, UserPreferencesService } from '../services/user-preferences.service';
import { UserPreferencesService } from '../services/user-preferences.service';
import { isValid, Locale, parse } from 'date-fns';
import { enUS } from 'date-fns/locale';
/**
* Date-fns adapter with moment-to-date-fns conversion.
@@ -82,10 +83,24 @@ export class AdfDateFnsAdapter extends DateFnsAdapter {
@Optional() @Inject(MAT_DATE_FORMATS) private formats: MatDateFormats,
preferences: UserPreferencesService
) {
super(matDateLocale);
// Ensure we have a valid locale for the base class
// If matDateLocale is not provided, use enUS as default
super(matDateLocale || enUS);
preferences.select(UserPreferenceValues.Locale).subscribe((locale: string) => {
this.setLocale(DateFnsUtils.getLocaleFromString(locale));
// Initialize locale synchronously from signal's initial value
// This ensures locale is set before any format() calls
const initialLocale = preferences.localeSignal();
if (initialLocale) {
this.setLocale(DateFnsUtils.getLocaleFromString(initialLocale));
}
// Use effect to reactively update locale when signal changes
// Note: This adapter is a singleton service, so no cleanup needed
effect(() => {
const locale = preferences.localeSignal();
if (locale) {
this.setLocale(DateFnsUtils.getLocaleFromString(locale));
}
});
}
lib/core/src/lib/common/utils/moment-date-adapter.ts
+6 -3
View File
@@ -15,9 +15,9 @@
* limitations under the License.
*/
import { Injectable } from '@angular/core';
import { effect, Injectable } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
import { UserPreferencesService, UserPreferenceValues } from '../services/user-preferences.service';
import { UserPreferencesService } from '../services/user-preferences.service';
// Stub for the moment.js integration.
// While this dependency is no longer used by the libraries, the moment adapter can still discover the moment.js linked to the application
@@ -37,7 +37,10 @@ export class MomentDateAdapter extends DateAdapter<Moment> {
constructor(preferences: UserPreferencesService) {
super();
preferences.select(UserPreferenceValues.Locale).subscribe((locale: string) => {
// Use effect to reactively update locale when signal changes
// Note: This adapter is a singleton service, so no cleanup needed
effect(() => {
const locale = preferences.localeSignal();
this.setLocale(locale);
});
}
lib/core/src/lib/datatable/components/date-cell/date-cell.component.ts
+13 -15
View File
@@ -15,14 +15,13 @@
* limitations under the License.
*/
import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation, inject, ChangeDetectorRef } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation, inject, ChangeDetectorRef, effect } from '@angular/core';
import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
import { AppConfigService } from '../../../app-config/app-config.service';
import { DateConfig } from '../../data/data-column.model';
import { LocalizedDatePipe, TimeAgoPipe } from '../../../pipes';
import { AsyncPipe } from '@angular/common';
import { UserPreferencesService, UserPreferenceValues } from '../../../common/services/user-preferences.service';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { UserPreferencesService } from '../../../common/services/user-preferences.service';
@Component({
imports: [LocalizedDatePipe, TimeAgoPipe, AsyncPipe],
@@ -52,19 +51,18 @@ export class DateCellComponent extends DataTableCellComponent implements OnInit
locale: undefined
};
ngOnInit(): void {
// Subscribe to locale changes
this.userPreferencesService
.select(UserPreferenceValues.Locale)
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((locale) => {
this.userLocale = locale || 'en';
this.setConfig();
this.updateValue(); // Recalculate computedTitle with new locale
this.cdr.markForCheck();
});
constructor() {
super();
// Use effect to react to locale signal changes (must be in injection context)
effect(() => {
this.userLocale = this.userPreferencesService.localeSignal() || 'en';
this.setConfig();
this.updateValue(); // Recalculate computedTitle with new locale
this.cdr.markForCheck();
});
}
this.setConfig();
ngOnInit(): void {
super.ngOnInit();
}
lib/core/src/lib/pipes/decimal-number.pipe.ts
+8 -15
View File
@@ -18,9 +18,8 @@
import { DecimalPipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { AppConfigService } from '../app-config/app-config.service';
import { UserPreferencesService, UserPreferenceValues } from '../common/services/user-preferences.service';
import { UserPreferencesService } from '../common/services/user-preferences.service';
import { DecimalNumberModel } from '../models/decimal-number.model';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Pipe({
name: 'adfDecimalNumber',
@@ -32,22 +31,14 @@ export class DecimalNumberPipe implements PipeTransform {
static DEFAULT_MIN_FRACTION_DIGITS = 0;
static DEFAULT_MAX_FRACTION_DIGITS = 2;
defaultLocale: string = DecimalNumberPipe.DEFAULT_LOCALE;
defaultMinIntegerDigits: number = DecimalNumberPipe.DEFAULT_MIN_INTEGER_DIGITS;
defaultMinFractionDigits: number = DecimalNumberPipe.DEFAULT_MIN_FRACTION_DIGITS;
defaultMaxFractionDigits: number = DecimalNumberPipe.DEFAULT_MAX_FRACTION_DIGITS;
constructor(public userPreferenceService?: UserPreferencesService, public appConfig?: AppConfigService) {
if (this.userPreferenceService) {
this.userPreferenceService
.select(UserPreferenceValues.Locale)
.pipe(takeUntilDestroyed())
.subscribe((locale) => {
if (locale) {
this.defaultLocale = locale;
}
});
}
constructor(
public userPreferenceService?: UserPreferencesService,
public appConfig?: AppConfigService
) {
if (this.appConfig) {
this.defaultMinIntegerDigits = this.appConfig.get<number>('decimalValues.minIntegerDigits', DecimalNumberPipe.DEFAULT_MIN_INTEGER_DIGITS);
this.defaultMinFractionDigits = this.appConfig.get<number>(
@@ -67,7 +58,9 @@ export class DecimalNumberPipe implements PipeTransform {
const actualMaxFractionDigits: number = digitsInfo?.maxFractionDigits ? digitsInfo.maxFractionDigits : this.defaultMaxFractionDigits;
const actualDigitsInfo = `${actualMinIntegerDigits}.${actualMinFractionDigits}-${actualMaxFractionDigits}`;
const actualLocale = locale || this.defaultLocale;
// Use signal directly - no subscription needed!
const defaultLocale = this.userPreferenceService?.localeSignal() || DecimalNumberPipe.DEFAULT_LOCALE;
const actualLocale = locale || defaultLocale;
const decimalPipe: DecimalPipe = new DecimalPipe(actualLocale);
lib/core/src/lib/pipes/localized-date.pipe.ts
+10 -26
View File
@@ -16,38 +16,25 @@
*/
import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform, OnDestroy } from '@angular/core';
import { Pipe, PipeTransform } from '@angular/core';
import { AppConfigService } from '../app-config/app-config.service';
import { UserPreferencesService, UserPreferenceValues } from '../common/services/user-preferences.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UserPreferencesService } from '../common/services/user-preferences.service';
@Pipe({
standalone: true,
name: 'adfLocalizedDate',
pure: false
})
export class LocalizedDatePipe implements PipeTransform, OnDestroy {
export class LocalizedDatePipe implements PipeTransform {
static DEFAULT_LOCALE = 'en-US';
static DEFAULT_DATE_FORMAT = 'mediumDate';
defaultLocale: string = LocalizedDatePipe.DEFAULT_LOCALE;
defaultFormat: string = LocalizedDatePipe.DEFAULT_DATE_FORMAT;
private onDestroy$ = new Subject<boolean>();
constructor(public userPreferenceService?: UserPreferencesService, public appConfig?: AppConfigService) {
if (this.userPreferenceService) {
this.userPreferenceService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe((locale) => {
if (locale) {
this.defaultLocale = locale;
}
});
}
constructor(
public userPreferenceService?: UserPreferencesService,
public appConfig?: AppConfigService
) {
if (this.appConfig) {
this.defaultFormat = this.appConfig.get<string>('dateValues.defaultDateFormat', LocalizedDatePipe.DEFAULT_DATE_FORMAT);
}
@@ -55,13 +42,10 @@ export class LocalizedDatePipe implements PipeTransform, OnDestroy {
transform(value: Date | string | number, format?: string, locale?: string, timezone?: string): string {
const actualFormat = format || this.defaultFormat;
const actualLocale = locale || this.defaultLocale;
// Use signal directly - no subscription needed!
const defaultLocale = this.userPreferenceService?.localeSignal() || LocalizedDatePipe.DEFAULT_LOCALE;
const actualLocale = locale || defaultLocale;
const datePipe = timezone ? new DatePipe(actualLocale, timezone) : new DatePipe(actualLocale);
return datePipe.transform(value, actualFormat);
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
}
lib/core/src/lib/pipes/time-ago.pipe.ts
+4 -10
View File
@@ -17,10 +17,9 @@
import { Pipe, PipeTransform } from '@angular/core';
import { AppConfigService } from '../app-config/app-config.service';
import { UserPreferencesService, UserPreferenceValues } from '../common/services/user-preferences.service';
import { UserPreferencesService } from '../common/services/user-preferences.service';
import { DatePipe } from '@angular/common';
import { differenceInDays, formatDistance } from 'date-fns';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { DateFnsUtils } from '../common/utils/date-fns-utils';
@Pipe({
@@ -32,25 +31,20 @@ export class TimeAgoPipe implements PipeTransform {
static DEFAULT_LOCALE = 'en-US';
static DEFAULT_DATE_TIME_FORMAT = 'dd/MM/yyyy HH:mm';
defaultLocale: string;
defaultDateTimeFormat: string;
constructor(
public userPreferenceService: UserPreferencesService,
public appConfig: AppConfigService
) {
this.userPreferenceService
.select(UserPreferenceValues.Locale)
.pipe(takeUntilDestroyed())
.subscribe((locale) => {
this.defaultLocale = locale || TimeAgoPipe.DEFAULT_LOCALE;
});
this.defaultDateTimeFormat = this.appConfig.get<string>('dateValues.defaultDateTimeFormat', TimeAgoPipe.DEFAULT_DATE_TIME_FORMAT);
}
transform(value: Date, locale?: string) {
if (value !== null && value !== undefined) {
const actualLocale = locale || this.defaultLocale;
// Use signal directly - no subscription needed!
const defaultLocale = this.userPreferenceService.localeSignal() || TimeAgoPipe.DEFAULT_LOCALE;
const actualLocale = locale || defaultLocale;
const diff = differenceInDays(new Date(), new Date(value));
if (diff > 7) {
const datePipe: DatePipe = new DatePipe(actualLocale);
lib/core/src/lib/translation/translation.service.ts
+6 -3
View File
@@ -15,11 +15,11 @@
* limitations under the License.
*/
import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
import { effect, Inject, Injectable, InjectionToken, Optional } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { TranslateLoaderService } from './translate-loader.service';
import { UserPreferencesService, UserPreferenceValues } from '../common/services/user-preferences.service';
import { UserPreferencesService } from '../common/services/user-preferences.service';
export const TRANSLATION_PROVIDER = new InjectionToken('Injection token for translation providers.');
@@ -71,7 +71,10 @@ export class TranslationService {
}
}
userPreferencesService.select(UserPreferenceValues.Locale).subscribe((locale) => {
// Use effect to reactively update translations when locale signal changes
// Note: This is a singleton service, so no cleanup needed
effect(() => {
const locale = userPreferencesService.localeSignal();
if (locale) {
this.userLang = locale;
this.use(this.userLang);