@elderbyte/ngx-starter 14.11.0 → 14.11.1

package/src/lib/components/graph/elder-progress-bar/elder-progress-bar.component.ts

@@ -0,0 +1,112 @@
+import {Component, OnInit, ChangeDetectionStrategy, Input} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+import {SubBar} from './sub-bar';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+
+@Component({
+  selector: 'elder-progress-bar',
+  templateUrl: './elder-progress-bar.component.html',
+  styleUrls: ['./elder-progress-bar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderProgressBarComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+
+  @Input()
+  public minHeight = 4;
+
+  /**
+   * This color is used when the bar is set via the 'value' input.
+   * It does not get used when multiple sub-bars are set directly.
+   */
+  @Input()
+  public barColor = 'green';
+
+  @Input()
+  public barBackgroundColor = 'lightgray';
+
+
+  public readonly bars$ = new BehaviorSubject<SubBar[]>([]);
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  ngOnInit(): void {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set value(value: number) {
+    if (value != null) {
+      this.setSingleBarValue(value);
+    }
+  }
+
+  @Input()
+  public set bars(bars: SubBar[]) {
+    if (bars) {
+      const validBars = bars.filter(b => b.widthPercent > 0);
+      this.checkAndAdjustPercentages(validBars);
+      this.bars$.next(validBars);
+    }
+  }
+
+  public get bars(): SubBar[] {
+    return this.bars$.getValue();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private setSingleBarValue(value: number): void {
+    const bars = this.bars.length === 1 ? [...this.bars] : [new SubBar(0, this.barColor)];
+    bars[0].widthPercent = value;
+    this.bars = bars;
+  }
+
+  private checkAndAdjustPercentages(bars: SubBar[]): void {
+    if (bars.length > 0) {
+      const totalPercentage = bars.map(b => b.widthPercent).reduce((sum, number) => sum + number);
+      if (totalPercentage > 100) {
+        this.log.warn('Total bars width are greater than 100%, adjusting percentages...');
+        bars.forEach(b => b.widthPercent = 100 / totalPercentage * b.widthPercent);
+      }
+    }
+  }
+
+}

package/src/lib/components/graph/elder-progress-bar/elder-progress-bar.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {ElderProgressBarComponent} from './elder-progress-bar.component';
+import {CommonModule} from '@angular/common';
+import {FlexModule} from '@angular/flex-layout';
+
+export * from './elder-progress-bar.component';
+export * from './sub-bar';
+
+@NgModule({
+  declarations: [
+    ElderProgressBarComponent
+  ],
+  exports: [
+    ElderProgressBarComponent
+  ],
+  imports: [
+    CommonModule,
+    FlexModule
+  ]
+})
+export class ElderProgressBarModule {
+}

package/src/lib/components/graph/elder-progress-bar/sub-bar.ts

@@ -0,0 +1,6 @@
+export class SubBar {
+
+  constructor(public widthPercent: number, public color: string) {
+  }
+
+}

package/src/lib/components/headers/elder-header/elder-header.component.html

@@ -0,0 +1,5 @@
+
+<div fxLayout="column" class="mat-typography">
+  <h2 style="margin: 0">{{header ? header : '-' | translate}}</h2>
+  <span class="mat-caption">{{subheader ? subheader : '-' | translate}}</span>
+</div>

package/src/lib/components/headers/elder-header/elder-header.component.ts

@@ -0,0 +1,38 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'elder-header',
+  templateUrl: './elder-header.component.html',
+  styleUrls: ['./elder-header.component.css']
+})
+export class ElderHeaderComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public header: string;
+
+  @Input()
+  public subheader: string;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {}
+
+}

package/src/lib/components/headers/elder-header.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import {ElderHeaderComponent} from './elder-header/elder-header.component';
+
+export * from './elder-header/elder-header.component';
+
+@NgModule({
+  imports: [
+
+    // Angular
+    CommonModule, RouterModule,
+
+    // Third Party
+    FlexLayoutModule, TranslateModule
+
+    // Angular Material
+
+  ],
+  declarations: [
+    ElderHeaderComponent
+  ],
+  exports: [
+    ElderHeaderComponent
+  ]
+})
+export class ElderHeaderModule { }

package/src/lib/components/http-support/elder-http-client.service.ts

@@ -0,0 +1,82 @@
+import {Injectable} from '@angular/core';
+import {Page, Pageable} from '../../common/data/page';
+import {Filter} from '../../common/data/filters/filter';
+import {HttpClient, HttpParams} from '@angular/common/http';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {HttpParamsBuilder} from '../../common/data/http-params-builder';
+import {Observable} from 'rxjs';
+
+
+/**
+ * @deprecated Please switch to the RestClient*s (RestClientList, RestClientPaged etc)
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderHttpClient {
+
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+
+    private readonly logger = LoggerFactory.getLogger('ElderHttpClient');
+
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+
+    /**
+     * Creates a new ElderHttpClient service
+     */
+    constructor(
+        private http: HttpClient) {
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+
+    /**
+     * Gets the requested data page as Page<T>
+     * @param url The resource url
+     * @param pageable The page request
+     * @param filters The filtersSnapshot request
+     * @param params Additional parameters
+     */
+    public getPaged<T>(url: string, pageable: Pageable, filters?: Filter[], params?: HttpParams): Observable<Page<T>> {
+        params = HttpParamsBuilder.start(params)
+            .appendPageable(pageable)
+            .appendFilters(filters)
+            .build();
+        this.logger.debug('sending paged request @ ' + url, params);
+        return this.http.get<Page<T>>(url, { params: params });
+    }
+
+    /**
+     * Gets the requested data, supports dynamic filter options
+     * @param url The request url
+     * @param filters The filter options (will be translated to query params)
+     * @param params Additional parameters
+     */
+    public getFiltered<T>(url: string, filters: Filter[], params?: HttpParams): Observable<T> {
+        params = HttpParamsBuilder.start(params)
+            .appendFilters(filters)
+            .build();
+        return this.http.get<T>(url, { params: params });
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+
+
+
+}

package/src/lib/components/http-support/public_api.ts

@@ -0,0 +1,3 @@
+
+export * from './elder-http-client.service';
+

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

@@ -0,0 +1,76 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ElderTableModule} from '../../data-view/table/elder-table.module';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {MatTableModule} from '@angular/material/table';
+import {MatSortModule} from '@angular/material/sort';
+import {MatInputModule} from '@angular/material/input';
+import {TranslateModule} from '@ngx-translate/core';
+import {FormsModule} from '@angular/forms';
+import {ElderLocalizedInputTableComponent} from './elder-localized-input-table/elder-localized-input-table.component';
+import {ElderLocalizedTextColumnDirective} from './elder-localized-text-column.directive';
+import {MatChipsModule} from '@angular/material/chips';
+import {ElderCardModule} from '../../cards/elder-card/elder-card.module';
+import { ElderLocalizedInputDialogComponent } from './elder-localized-input-dialog/elder-localized-input-dialog.component';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatButtonModule} from '@angular/material/button';
+import {A11yModule} from '@angular/cdk/a11y';
+import { ElderLocalizedInputComponent } from './elder-localized-input/elder-localized-input.component';
+import {MatIconModule} from '@angular/material/icon';
+import {ElderFormsModule} from '../../forms/elder-forms.module';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import { I18nPickAsyncPipe } from './picker/i18n-pick-async.pipe';
+import { I18nPickPipe } from './picker/i18n-pick.pipe';
+import { ElderLocalizedTextsDirective } from './elder-localized-texts.directive';
+
+export * from './elder-localized-text-column.directive';
+export * from './elder-localized-texts.directive';
+export * from './elder-localized-input-table/elder-localized-input-table.component';
+export * from './elder-localized-input-dialog/elder-localized-input-dialog.component';
+export * from './elder-localized-input-dialog.service';
+export * from './elder-localized-input/elder-localized-input.component';
+export * from './picker/localisation-picker.service';
+export * from './picker/i18n-pick.pipe';
+export * from './picker/i18n-pick-async.pipe';
+
+@NgModule({
+  declarations: [
+    ElderLocalizedTextColumnDirective,
+    ElderLocalizedTextsDirective,
+    ElderLocalizedInputTableComponent,
+    ElderLocalizedInputDialogComponent,
+    ElderLocalizedInputComponent,
+    I18nPickPipe,
+    I18nPickAsyncPipe,
+
+  ],
+  exports: [
+    ElderLocalizedTextColumnDirective,
+    ElderLocalizedTextsDirective,
+    ElderLocalizedInputTableComponent,
+    ElderLocalizedInputDialogComponent,
+    ElderLocalizedInputComponent,
+    I18nPickPipe,
+    I18nPickAsyncPipe
+  ],
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatTableModule,
+    MatSortModule,
+    MatInputModule,
+    TranslateModule,
+    FormsModule,
+
+    ElderTableModule,
+    MatChipsModule,
+    ElderCardModule,
+    MatDialogModule,
+    MatButtonModule,
+    A11yModule,
+    MatIconModule,
+    ElderFormsModule,
+    MatToolbarModule,
+  ]
+})
+export class ElderI18nEntitiesModule { }

package/src/lib/components/i18n/entities/elder-localized-input/elder-localized-input.component.html

@@ -0,0 +1,41 @@
+<mat-form-field fxFlex
+                class="elder-std-form-field"
+                [appearance]="appearance"
+                [floatLabel]="floatLabel"
+                [color]="color"
+>
+
+  <mat-label *ngIf="label">{{label | translate}}</mat-label>
+
+  <ng-container matPrefix>
+    <mat-icon *ngIf="icon"
+              class="leading-icon prefix-padding noselect"
+              [color]="color">
+      {{icon}}
+    </mat-icon>
+  </ng-container>
+
+  <!-- A dynamic input -->
+  <input
+    matInput type="text" fxFlex="grow"
+    [disabled]="disabled"
+    [required]="required"
+    readonly
+    [name]="name + '-localized'"
+    [placeholder]="placeholder | translate"
+    [ngModel]="inputText$ | async" [ngModelOptions]="{standalone: true}"
+  >
+
+  <ng-container matSuffix>
+    <button mat-icon-button type="button"
+            (click)="openTranslationPopup($event)" aria-label="Search"
+            elderStopEventPropagation
+            tabIndex="-1"
+    >
+      <mat-icon>translate</mat-icon>
+    </button>
+  </ng-container>
+
+  <mat-hint>{{hintText$ | async}}</mat-hint>
+
+</mat-form-field>

package/src/lib/components/i18n/entities/elder-localized-input/elder-localized-input.component.ts

@@ -0,0 +1,176 @@
+import {Component, OnInit, ChangeDetectionStrategy, ContentChildren, QueryList, Input, AfterViewInit, OnDestroy} from '@angular/core';
+import {FormFieldBaseComponent} from '../../../../common/forms/form-field-base.component';
+import {Localized} from '../../../../common/i18n/entity/localized';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {BehaviorSubject, combineLatest, Observable, of, Subject} from 'rxjs';
+import {filter, map, switchMap} from 'rxjs/operators';
+import {ElderLocalizedInputDialogService} from '../elder-localized-input-dialog.service';
+import {ElderLocalizedTextColumnDirective} from '../elder-localized-text-column.directive';
+import {QueryListBinding} from '../../../../common/utils/query-list-binding';
+import {LocalisationPickerService} from '../picker/localisation-picker.service';
+import {ElderLocalizedInputOptions} from '../elder-localized-input-dialog/elder-localized-input-dialog.component';
+import {buildFormIntegrationProviders} from '../../../../common/forms/template-composite-control';
+import {AbstractControl, ValidationErrors} from '@angular/forms';
+
+@Component({
+  selector: 'elder-localized-input',
+  templateUrl: './elder-localized-input.component.html',
+  styleUrls: ['./elder-localized-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: buildFormIntegrationProviders(ElderLocalizedInputComponent)
+})
+export class ElderLocalizedInputComponent<T extends Localized = Localized>
+  extends FormFieldBaseComponent<T[]> implements OnInit, AfterViewInit, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  public readonly inputText$: Observable<string>;
+  public readonly hintText$: Observable<string>;
+
+  @ContentChildren(ElderLocalizedTextColumnDirective)
+  public textColumnsQuery: QueryList<ElderLocalizedTextColumnDirective>;
+  public readonly textColumns$ = new BehaviorSubject<ElderLocalizedTextColumnDirective[]>([
+    ElderLocalizedTextColumnDirective.DEFAULT_TEXT_COL
+  ]);
+
+  private readonly destroy$ = new Subject<void>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly localizedInputDialog: ElderLocalizedInputDialogService,
+    private readonly localisationPicker: LocalisationPickerService
+  ) {
+    super();
+
+    this.inputText$ = combineLatest([
+      this.value$,
+      this.textColumns$
+    ]).pipe(
+       switchMap(([values, columns]) => this.toInputText(values, columns))
+    );
+
+    this.hintText$ = this.value$.pipe(
+      map(values => this.toHintText(values))
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+
+  }
+
+  public ngAfterViewInit(): void {
+    QueryListBinding
+      .of(this.textColumnsQuery)
+      .updated(columns => {
+        if (columns?.length > 0) {
+          this.textColumns$.next(columns);
+        }
+      })
+      .bindUntil(this.destroy$);
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set textColumns(cols: ElderLocalizedTextColumnDirective[]) {
+    this.textColumns$.next(cols);
+  }
+
+  public get textColumns(): ElderLocalizedTextColumnDirective[] {
+    return this.textColumns$.getValue();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public openTranslationPopup(
+    $event: MouseEvent,
+  ) {
+
+    const data = <ElderLocalizedInputOptions<T>>{
+      title: this.label ?? this.placeholder,
+      localizables: this.value,
+      textColumns: this.textColumns,
+      explicitSave: false,
+      readonly: this.readonly,
+      disabled: this.disabled,
+      required: this.required
+    };
+
+    const dlgRef = this.localizedInputDialog.editLocalized(
+      data
+    ).subscribe(
+      updated => this.updateValue(data.localizables)
+    );
+  }
+
+
+  public validate(c: AbstractControl): ValidationErrors | null {
+    let result = null;
+    if (this.required && !(this.value?.length > 0)) {
+      result = {
+        required: { valid: false }
+      };
+    }
+    return result;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private toInputText(
+    localizables: T[],
+    columns: ElderLocalizedTextColumnDirective[]
+  ): Observable<string | undefined> {
+    return this.localisationPicker.pickCurrentText(
+      localizables,
+      this.displayTextField(columns)
+    );
+  }
+
+  private displayTextField(
+    columns: ElderLocalizedTextColumnDirective[]
+  ): string | undefined {
+    return columns ? columns[0]?.name : undefined;
+  }
+
+  private toHintText(localizables: T[]): string {
+    if (localizables) {
+      return localizables.map(l => l.locale).join(', ');
+    } else {
+      return '';
+    }
+  }
+}

package/src/lib/components/i18n/entities/elder-localized-input-dialog/elder-localized-input-dialog.component.html

@@ -0,0 +1,36 @@
+
+<div fxLayout="column" fxFill>
+
+  <mat-toolbar color="primary">
+    <mat-toolbar-row fxLayoutGap="8px">
+      <mat-icon class="noselect">translate</mat-icon>
+      <h2 class="noselect" translate>{{data.title}}</h2>
+      <span fxFlex></span>
+      <button *ngIf="data.explicitSave"
+              mat-icon-button type="submit"
+              [disabled]="data.readonly"
+              [mat-dialog-close]="data.localizables"
+      >
+        <mat-icon>save</mat-icon>
+      </button>
+    </mat-toolbar-row>
+  </mat-toolbar>
+
+  <div fxLayout="column" class="padding-small" fxFlex>
+    <elder-localized-input-table
+      [float]="true" fxFlex
+      [textColumns]="data.textColumns"
+      [(value)]="data.localizables"
+      [readonly]="data.readonly"
+      [disabled]="data.disabled"
+      [required]="data.required"
+    >
+    </elder-localized-input-table>
+  </div>
+</div>
+
+
+
+
+
+

package/src/lib/components/i18n/entities/elder-localized-input-dialog/elder-localized-input-dialog.component.ts

@@ -0,0 +1,33 @@
+import {Component, OnInit, ChangeDetectionStrategy, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {ElderLocalizedTextColumnDirective} from '../elder-localized-text-column.directive';
+import {Localized} from '../../../../common/i18n/entity/localized';
+
+
+export interface ElderLocalizedInputOptions<T extends Localized = Localized> {
+  title: string;
+  localizables: T[];
+  textColumns: ElderLocalizedTextColumnDirective[];
+  explicitSave: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+}
+
+@Component({
+  selector: 'elder-localized-input-dialog',
+  templateUrl: './elder-localized-input-dialog.component.html',
+  styleUrls: ['./elder-localized-input-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderLocalizedInputDialogComponent implements OnInit {
+
+  constructor(
+    public dialogRef: MatDialogRef<ElderLocalizedInputDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ElderLocalizedInputOptions
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+}