fix: correctly inject LOCALE_ID in angular-accelerator.module (onecx#337

)

* fix: correctly inject LOCALE_ID in angular-accelerator.module

* fix: fix linter

* fix: fix class naming

* refactor: rename files

* fix: await language initialization

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: [

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<DataTableComponent, 'rows' | 'columns' | 'emptyResultsMessage' | 'selectedRows'>
+
 const DataTableComponentSBConfig: Meta<DataTableComponent> = {
   title: 'DataTableComponent',
   component: DataTableComponent,
@@ -25,6 +27,11 @@ const DataTableComponentSBConfig: Meta<DataTableComponent> = {
         importProvidersFrom(BrowserAnimationsModule),
         { provide: UserService, useClass: MockUserService },
         { provide: HAS_PERMISSION_CHECKER, useClass: MockUserService },
+        {
+          provide: LOCALE_ID,
+          useClass: DynamicLocaleId,
+          deps: [UserService],
+        },
       ],
     }),
     moduleMetadata({
@@ -57,25 +64,34 @@ const defaultComponentArgs: DataTableInputTypes = {
       nameKey: 'Available',
       sortable: false,
     },
+    {
+      id: 'expiration',
+      columnType: ColumnType.DATE,
+      nameKey: 'Expiration Date',
+      sortable: true,
+    }
   ],
   rows: [
     {
       id: 1,
       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',

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

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()
+  }
+}