From 1b23c026f5ade985672edd7731204878ac8293d2 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi <55296998+bastianjakobi@users.noreply.github.com> Date: Fri, 26 Jul 2024 13:02:01 +0200 Subject: [PATCH] fix: correctly inject LOCALE_ID in angular-accelerator.module (#337) * fix: correctly inject LOCALE_ID in angular-accelerator.module * fix: fix linter * fix: fix class naming * refactor: rename files * fix: await language initialization --- .../src/lib/angular-accelerator.module.ts | 20 +++++++++++++++---- .../data-table.component.stories.ts | 18 ++++++++++++++++- .../src/lib/storybook-translate.module.ts | 3 +++ .../src/lib/utils/dynamic-locale-id.ts | 18 +++++++++++++++++ 4 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 libs/angular-accelerator/src/lib/utils/dynamic-locale-id.ts diff --git a/libs/angular-accelerator/src/lib/angular-accelerator.module.ts b/libs/angular-accelerator/src/lib/angular-accelerator.module.ts index d352d05a..cccb15ff 100644 --- a/libs/angular-accelerator/src/lib/angular-accelerator.module.ts +++ b/libs/angular-accelerator/src/lib/angular-accelerator.module.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common' -import { LOCALE_ID, NgModule } from '@angular/core' +import { APP_INITIALIZER, LOCALE_ID, NgModule } from '@angular/core' import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { RouterModule } from '@angular/router' import { MissingTranslationHandler, MissingTranslationHandlerParams, TranslateModule } from '@ngx-translate/core' @@ -27,6 +27,8 @@ import { SrcDirective } from './directives/src.directive' import { DynamicPipe } from './pipes/dynamic.pipe' import { OcxTimeAgoPipe } from './pipes/ocxtimeago.pipe' import { AppConfigService } from './services/app-config-service' +import { DynamicLocaleId } from './utils/dynamic-locale-id' +import { firstValueFrom, skip } from 'rxjs' export class AngularAcceleratorMissingTranslationHandler implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { @@ -35,6 +37,12 @@ export class AngularAcceleratorMissingTranslationHandler implements MissingTrans } } +function appInitializer(userService: UserService) { + return async () => { + await firstValueFrom(userService.lang$.pipe(skip(1))) + } +} + @NgModule({ imports: [ CommonModule, @@ -69,15 +77,19 @@ export class AngularAcceleratorMissingTranslationHandler implements MissingTrans providers: [ { provide: LOCALE_ID, - useFactory: (UserService: UserService) => { - return UserService.lang$.getValue() - }, + useClass: DynamicLocaleId, deps: [UserService], }, { provide: HAS_PERMISSION_CHECKER, useExisting: UserService, }, + { + provide: APP_INITIALIZER, + useFactory: appInitializer, + deps: [UserService], + multi: true + }, AppConfigService, ], exports: [ diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts index 81bc9c3a..304fb9d6 100644 --- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' -import { importProvidersFrom } from '@angular/core' +import { LOCALE_ID, importProvidersFrom } from '@angular/core' import { Meta, moduleMetadata, applicationConfig, StoryFn } from '@storybook/angular' import { TableModule } from 'primeng/table' import { ButtonModule } from 'primeng/button' @@ -13,8 +13,10 @@ import { MockAuthModule } from '../../mock-auth/mock-auth.module' import { HAS_PERMISSION_CHECKER, IfPermissionDirective } from '../../directives/if-permission.directive' import { ColumnType } from '../../model/column-type.model' import { MenuModule } from 'primeng/menu' +import { DynamicLocaleId } from '../../utils/dynamic-locale-id' type DataTableInputTypes = Pick + const DataTableComponentSBConfig: Meta = { title: 'DataTableComponent', component: DataTableComponent, @@ -25,6 +27,11 @@ const DataTableComponentSBConfig: Meta = { importProvidersFrom(BrowserAnimationsModule), { provide: UserService, useClass: MockUserService }, { provide: HAS_PERMISSION_CHECKER, useClass: MockUserService }, + { + provide: LOCALE_ID, + useClass: DynamicLocaleId, + deps: [UserService], + }, ], }), moduleMetadata({ @@ -57,6 +64,12 @@ const defaultComponentArgs: DataTableInputTypes = { nameKey: 'Available', sortable: false, }, + { + id: 'expiration', + columnType: ColumnType.DATE, + nameKey: 'Expiration Date', + sortable: true, + } ], rows: [ { @@ -64,18 +77,21 @@ const defaultComponentArgs: DataTableInputTypes = { product: 'Apples', amount: 2, available: false, + expiration: new Date(2021, 5, 4), }, { id: 2, product: 'Bananas', amount: 10, available: true, + expiration: new Date(2021, 6, 4), }, { id: 3, product: 'Strawberries', amount: 5, available: false, + expiration: new Date(2021, 7, 4), }, ], emptyResultsMessage: 'No results', diff --git a/libs/angular-accelerator/src/lib/storybook-translate.module.ts b/libs/angular-accelerator/src/lib/storybook-translate.module.ts index e1bfa267..af4b34ed 100644 --- a/libs/angular-accelerator/src/lib/storybook-translate.module.ts +++ b/libs/angular-accelerator/src/lib/storybook-translate.module.ts @@ -4,6 +4,8 @@ import { HttpClient, HttpClientModule } from '@angular/common/http' import { TranslateHttpLoader } from '@ngx-translate/http-loader' import { provideAppStateServiceMock } from '@onecx/angular-integration-interface/mocks' import { TranslateCombinedLoader } from './utils/translate.combined.loader' +import { registerLocaleData } from '@angular/common' +import localeDE from '@angular/common/locales/de' export function translateLoader(http: HttpClient) { return new TranslateCombinedLoader(new TranslateHttpLoader(http, `./assets/i18n/`, '.json')) @@ -28,6 +30,7 @@ export function translateLoader(http: HttpClient) { }) export class StorybookTranslateModule { constructor(translateService: TranslateService) { + registerLocaleData(localeDE) const lang = translateService.getBrowserLang() const supportedLanguages = ['de', 'en'] if (lang && supportedLanguages.includes(lang)) { diff --git a/libs/angular-accelerator/src/lib/utils/dynamic-locale-id.ts b/libs/angular-accelerator/src/lib/utils/dynamic-locale-id.ts new file mode 100644 index 00000000..0f56872e --- /dev/null +++ b/libs/angular-accelerator/src/lib/utils/dynamic-locale-id.ts @@ -0,0 +1,18 @@ +import { UserService } from '@onecx/angular-integration-interface' + +export class DynamicLocaleId { + constructor(private userService: UserService) { + Object.getOwnPropertyNames(String.prototype).forEach((k) => { + if (k != 'valueOf') { + ;(this as any)[k] = function (...args: any[]) { + const str = this.valueOf() + return str[k](...args) + } + } + }) + } + + valueOf() { + return this.userService.lang$.getValue() + } +}