@elderbyte/ngx-starter 14.10.0 → 14.11.1

package/src/lib/components/i18n/language/elder-language-interceptor.ts

@@ -0,0 +1,94 @@
+
+import {Injectable, Injector} from '@angular/core';
+import {HttpEvent, HttpHandler, HttpInterceptor, HttpParams, HttpRequest} from '@angular/common/http';
+import {TranslateService} from '@ngx-translate/core';
+import {Observable} from 'rxjs';
+import {ElderLanguageConfig} from './elder-language-config';
+
+/**
+ * This interceptor injects the current locale
+ * so the backend know what the current desired locale is of a request.
+ */
+@Injectable()
+export class ElderLanguageInterceptor implements HttpInterceptor {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private _translate: TranslateService;
+  private _queryParam = 'locale';
+
+
+  private _configLoaded = false;
+  private _config: ElderLanguageConfig;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructors                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private inj: Injector,
+    ) {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+
+    const config = this.languageConfig;
+    const skipInterceptor = (config && config.interceptor && config.interceptor.disable);
+
+    if (!skipInterceptor && this.translate.currentLang) {
+
+      // Keeps the original request params. as a new HttpParams
+      let newParams = new HttpParams({fromString: req.params.toString()});
+
+      newParams = newParams.set(this._queryParam, this.translate.currentLang);
+
+      // Clone the request with params instead of setParams
+      // Workaround for https://github.com/angular/angular/issues/18812
+      const requestClone = req.clone({
+        params: newParams
+      });
+
+      return next.handle(requestClone);
+    }
+
+    return next.handle(req);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private get languageConfig(): ElderLanguageConfig {
+    if (!this._configLoaded) {
+
+      const config = this.inj.get(ElderLanguageConfig); // Workaround for cyclic dependency
+      this._config = config;
+
+      this._queryParam = config && config.interceptor && config.interceptor.queryParam
+        ? config.interceptor.queryParam
+        : 'locale';
+    }
+    return this._config;
+  }
+
+  private get translate(): TranslateService {
+    if (!this._translate) {
+      this._translate = this.inj.get(TranslateService); // Workaround for cyclic dependency
+    }
+    return this._translate;
+  }
+}

package/src/lib/components/i18n/language/elder-language.module.ts

@@ -0,0 +1,60 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ElderLanguageSwitcherComponent} from './language-switcher/elder-language-switcher.component';
+import {ElderLanguageService} from './elder-language.service';
+import {TranslateModule} from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import {FormsModule} from '@angular/forms';
+import {SimpleWebStorageModule} from '@elderbyte/ngx-simple-webstorage';
+import {ElderLanguageInterceptor} from './elder-language-interceptor';
+import {HTTP_INTERCEPTORS} from '@angular/common/http';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {ElderLanguageConfig} from './elder-language-config';
+
+export * from './elder-language.service';
+export * from './language-switcher/elder-language-switcher.component';
+export * from './elder-language-interceptor';
+export * from './elder-language-config';
+
+/**
+ * Provides language related functionality like
+ * language-switcher, language service etc.
+ */
+@NgModule({
+  imports: [
+    CommonModule,
+    TranslateModule,
+    SimpleWebStorageModule,
+
+    MatSelectModule,
+    MatIconModule, MatButtonModule,
+    MatMenuModule,
+    FlexLayoutModule,
+
+    FormsModule
+  ],
+  exports: [
+    ElderLanguageSwitcherComponent,
+  ],
+  declarations: [
+    ElderLanguageSwitcherComponent
+  ]
+})
+export class ElderLanguageModule {
+
+  static forRoot(config?: ElderLanguageConfig): ModuleWithProviders<ElderLanguageModule> {
+    return {
+      ngModule: ElderLanguageModule,
+      providers: [
+        {
+          provide: ElderLanguageConfig,
+          useValue: config,
+        },
+        { provide: HTTP_INTERCEPTORS, useClass: ElderLanguageInterceptor, multi: true }
+      ]
+    };
+  }
+}

package/src/lib/components/i18n/language/elder-language.service.ts

@@ -0,0 +1,139 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { WebLocalStorage } from '@elderbyte/ngx-simple-webstorage';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {BehaviorSubject} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderLanguageService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private LANGUAGE_STORAGE_KEY = 'language';
+
+  public readonly currentLanguage$: BehaviorSubject<string>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructors                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private translate: TranslateService,
+    private webStorage: WebLocalStorage
+  ) {
+    // this.translate.addLangs(['en', 'de']);
+    // this.translate.defaultLang = 'en';
+    this.currentLanguage$ = new BehaviorSubject<string>(this.translate.currentLang);
+    this.translate.onLangChange
+      .subscribe(
+      change => this.currentLanguage$.next(change.lang)
+    );
+    this.applyPreferredLanguage();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Returns the key of the currently applied language.
+   *
+   * @returns language key
+   */
+  public get currentLanguage(): string {
+    return this.currentLanguage$.getValue();
+  }
+
+  /**
+   * Applies the given language which will immediately get apparent
+   * in the UI.
+   *
+   * @param lang language key
+   */
+  public set currentLanguage(lang: string) {
+    this.setLanguageAndRemember(lang);
+  }
+
+  /**
+   * Returns an array of all available language keys.
+   *
+   * @returns e.g. ['en', 'de', 'fr']
+   */
+  public get languages(): Array<string> {
+    return this.translate.getLangs();
+  }
+
+  /**
+   * Checks if the given language is currently active.
+   *
+   * @param lang language key
+   * @returns true if given language is currently active
+   */
+  public isLanguageActive(lang: string): boolean {
+    return this.currentLanguage === lang;
+  }
+
+  /**
+   * Returns the key of the last applied language.
+   *
+   * @returns language key of last applied language
+   */
+  public get lastConfigured(): string | undefined {
+    return this.lookupPreferredLanguage();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public lookupPreferredLanguage(): string | undefined {
+    return this.webStorage.getItem(this.LANGUAGE_STORAGE_KEY);
+  }
+
+  public forgetPreferredLanguage(): void {
+    this.webStorage.removeItem(this.LANGUAGE_STORAGE_KEY);
+  }
+
+  public rememberPreferredLanguage(lang: string): void {
+    this.webStorage.setItem(this.LANGUAGE_STORAGE_KEY, lang);
+  }
+
+  public applyPreferredLanguage(): void {
+    const preferred = this.lookupPreferredLanguage();
+    if (preferred) {
+      this.setLanguage(preferred);
+    } else {
+      this.translate.use(this.translate.getBrowserLang());
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private setLanguageAndRemember(lang: string): void {
+    this.setLanguage(lang);
+    this.rememberPreferredLanguage(lang);
+  }
+
+  private setLanguage(lang: string): void {
+    this.translate.use(lang);
+  }
+
+}

package/src/lib/components/i18n/language/language-switcher/elder-language-switcher.component.html

@@ -0,0 +1,24 @@
+
+
+<mat-menu #languageMenu="matMenu">
+  <button mat-menu-item type="button"
+          *ngFor="let lang of languages" (click)="currentLanguage = lang">
+    <mat-icon>language</mat-icon>
+    <span [class.active]="isLanguageActive(lang)">{{ 'language.' + lang | translate }}</span>
+  </button>
+</mat-menu>
+
+<button mat-button type="button"
+        *ngIf="slimMode"  [matMenuTriggerFor]="languageMenu">
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <mat-icon>language</mat-icon>
+    <span class="language">{{currentLanguage}}</span>
+  </div>
+</button>
+
+
+<mat-form-field *ngIf="!slimMode">
+  <mat-select placeholder="{{'language.language' | translate}}" name="language" [(ngModel)]="currentLanguage">
+    <mat-option *ngFor="let lang of languages" [value]="lang">{{ 'language.' + lang | translate }}</mat-option>
+  </mat-select>
+</mat-form-field>

package/src/lib/components/i18n/language/language-switcher/elder-language-switcher.component.ts

@@ -0,0 +1,71 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ElderLanguageService} from '../elder-language.service';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+@Component({
+    selector: 'elder-language-switcher, ebs-language-switcher',
+    templateUrl: './elder-language-switcher.component.html',
+    styleUrls: ['./elder-language-switcher.component.scss']
+})
+export class ElderLanguageSwitcherComponent implements OnInit {
+
+
+    private readonly logger = LoggerFactory.getLogger('ElderLanguageSwitcherComponent');
+
+    @Input()
+    public slimMode: boolean;
+
+    /***************************************************************************
+     *                                                                         *
+     * Constructors                                                            *
+     *                                                                         *
+     **************************************************************************/
+
+    constructor(
+        public language: ElderLanguageService) {
+
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+
+
+    public get currentLanguage(): string {
+        return this.language.currentLanguage;
+    }
+
+    public set currentLanguage(lang: string) {
+        this.language.currentLanguage = lang;
+    }
+
+    public get languages(): Array<string> {
+        return this.language.languages;
+    }
+
+    public setLanguage(lang: string) {
+        this.currentLanguage = lang;
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Lifecycle Hooks                                                         *
+     *                                                                         *
+     **************************************************************************/
+
+    ngOnInit() {
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+
+    public isLanguageActive(lang: string): boolean {
+        return this.language.isLanguageActive(lang);
+    }
+
+}

package/src/lib/components/i18n/locales/elder-locales-de-ch.module.ts

@@ -0,0 +1,46 @@
+import {APP_INITIALIZER, LOCALE_ID, ModuleWithProviders, NgModule} from '@angular/core';
+import {CommonModule, registerLocaleData} from '@angular/common';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import localeDECH from '@angular/common/locales/de-CH';
+
+// Because of AOT Compiler
+export function registerLocale() {
+  // Hack to use Lambda here! See
+  // https://stackoverflow.com/questions/51976671/app-initializer-in-library-causes-lambda-not-supported-error
+  const x = 2 + 4;
+  return () => registerLocaleData(localeDECH);
+}
+
+@NgModule({
+  imports: [
+    // common
+    CommonModule,
+  ],
+  declarations: [],
+  exports: []
+})
+export class ElderLocalesDeChModule {
+
+  static forRoot(): ModuleWithProviders<ElderLocalesDeChModule> {
+
+    return {
+      ngModule: ElderLocalesDeChModule,
+      providers: [
+        {
+          provide: APP_INITIALIZER,
+          useFactory: registerLocale,
+          multi: true
+        },
+        {
+          provide: MAT_DATE_LOCALE, // setting Swiss German as default locale for DatePicker
+          useValue: 'de-CH'
+        },
+        {
+          provide: LOCALE_ID, // setting Swiss German as default locale
+          useValue: 'de-CH'
+        }
+      ]
+    };
+  }
+
+}

package/src/lib/components/iframes/data-view/data-view-iframe/data-view-iframe.component.html

@@ -0,0 +1,8 @@
+<div fxLayout="column" fxFill>
+
+  <elder-i-frame-host fxFlex
+                      [iframeParams]="{srcUrl: srcUrl, hideActionBar: true}"
+                      (message)="onMessageFromChild($event)">
+  </elder-i-frame-host>
+
+</div>

package/src/lib/components/iframes/data-view/data-view-iframe/data-view-iframe.component.ts

@@ -0,0 +1,173 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional, SkipSelf,
+  ViewChild
+} from '@angular/core';
+import {IframeHostComponent} from '../../iframe-host/iframe-host.component';
+import {SelectionModel} from '../../../../common/selection/selection-model';
+import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
+import {filter, takeUntil} from 'rxjs/operators';
+import {DataViewMessage, DataViewSelection, DataViewSelectionInit, TypedEventMessage} from '../../typed-event-message';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderDataViewOptionsProvider} from '../../../data-view/base/elder-data-view-options-provider';
+import {ElderDataViewOptions} from '../../../data-view/base/elder-data-view-options';
+
+/**
+ * Container for displaying a remote data view in an iframe.
+ * Provides capabilities to communicate between remote data view (child)
+ * and iframe parent.
+ */
+@Component({
+  selector: 'elder-data-view-iframe',
+  templateUrl: './data-view-iframe.component.html',
+  styleUrls: ['./data-view-iframe.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DataViewIframeComponent implements OnInit, OnDestroy, AfterViewInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly _dataViewOptions$ = new BehaviorSubject<ElderDataViewOptions>(ElderDataViewOptions.defaultOptions());
+
+  private readonly _destroy$ = new Subject<void>();
+
+  @Input()
+  public srcUrl: string;
+
+  @Input()
+  public idField: string;
+
+  @Input()
+  public initialSelection: any[];
+
+  @ViewChild(IframeHostComponent)
+  public iframeHost: IframeHostComponent;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    @Optional() private dataViewOptionsProvider: ElderDataViewOptionsProvider,
+    @Optional() private selectionModel: SelectionModel<any>
+  ) {
+    if (dataViewOptionsProvider) {
+      dataViewOptionsProvider.options$.pipe(
+        takeUntil(this._destroy$)
+      ).subscribe(options => this.dataViewOptions = options)
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+  }
+
+  public ngAfterViewInit(): void {
+    // iframe is only available after view init
+    this.setupDataViewOptionsBridge(this.iframeHost);
+  }
+
+  public ngOnDestroy() {
+    this._destroy$.next();
+    this._destroy$.complete();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get dataViewOptions(): ElderDataViewOptions {
+    return this._dataViewOptions$.getValue();
+  }
+
+  @Input()
+  public set dataViewOptions(options: ElderDataViewOptions) {
+    const newOptions = this.dataViewOptions.withOptions(options);
+    this._dataViewOptions$.next(newOptions);
+  }
+
+  public get dataViewOptions$(): Observable<ElderDataViewOptions> {
+    return this._dataViewOptions$.asObservable();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public onMessageFromChild(message: TypedEventMessage<any,any>): void {
+    if (DataViewMessage.isOfType(message)){
+      switch (message.type) {
+        case 'SELECTION_SELECTED':
+          this.handleSelectionMessage(message.data);
+          break;
+      }
+    }
+
+  }
+
+  public sendMessageToChild(message: DataViewMessage<any>) {
+    this.log.debug("Sending message to iframe child:", message);
+    this.iframeHost.sendMessageToChild(message)
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private handleSelectionMessage(dataViewSelection: DataViewSelection<any>): void {
+    if (this.selectionModel) {
+      this.selectionModel.replaceSelection(dataViewSelection.selection);
+    }
+  }
+
+  private setupDataViewOptionsBridge(
+    iframeHost: IframeHostComponent
+  ) {
+    combineLatest([
+      this._dataViewOptions$,
+      iframeHost.iframeState$
+    ]).pipe(
+      takeUntil(this._destroy$),
+      filter(([options, state]) => !!options && state.hasLoaded)
+    ).subscribe(
+      ([options, state]) => this.sendMessageToChild(
+        this.buildDataViewInitMessage(options, this.initialSelection)
+      )
+    )
+  }
+
+  private buildDataViewInitMessage(
+    options: ElderDataViewOptions,
+    initialSelection: any[]
+  ): DataViewMessage<DataViewSelectionInit<any>> {
+    return DataViewMessage.initialSelection(
+      new DataViewSelectionInit(options, initialSelection, this.idField)
+    );
+  }
+
+
+}