@elderbyte/ngx-starter 14.12.0-beta4 → 14.12.0-beta6

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.ts

@@ -0,0 +1,316 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  ElementRef,
+  forwardRef,
+  HostBinding,
+  Input,
+  NgZone,
+  Optional,
+  Self,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
+import {ElderMultiSelectBase} from '../elder-multi-select-base';
+import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectCustomInputDirective} from '../../elder-select-chip.directive';
+import {ThemePalette} from '@angular/material/core';
+import {NgControl} from '@angular/forms';
+import {MatFormFieldControl} from '@angular/material/form-field';
+import {ELDER_SELECT_BASE, ElderSelectComponentState, TextResolverFn} from '../../elder-select-base';
+import {FocusMonitor} from '@angular/cdk/a11y';
+import {ElderDialogService} from '../../../dialogs/elder-dialog.service';
+import {TranslateService} from '@ngx-translate/core';
+
+class ChipModel<T> {
+  constructor(
+    public readonly value: T,
+    public readonly displayText: string,
+    public readonly color: ThemePalette,
+    public readonly removeable: boolean,
+    public readonly avatarSpec: ChipAvatarSpec
+  ) {
+  }
+}
+
+export interface ChipAvatarSpec {
+
+  /**
+   * Hides the avatar for this chip.
+   */
+  hide?: boolean;
+
+  /**
+   * Enables large styling of the avatar for this chip
+   */
+  large?: boolean;
+}
+
+@Component({
+  selector: 'elder-multi-select-chips',
+  templateUrl: './elder-multi-select-chips.component.html',
+  styleUrls: ['./elder-multi-select-chips.component.scss'],
+  // encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {provide: MatFormFieldControl, useExisting: ElderMultiSelectChipsComponent},
+    {
+      provide: ELDER_SELECT_BASE,
+      useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
+    }
+  ]
+})
+export class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TValue = any>
+  extends ElderMultiSelectBase<TId, TEntity, TValue> {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  public readonly selectChips$: Observable<ChipModel<TEntity>[]>;
+
+  @Input()
+  public defaultAvatarSpec: ChipAvatarSpec = {
+    hide: false,
+    large: false
+  };
+
+  /**
+   * Allows to customize each chip avatar individually.
+   */
+  @Input()
+  public avatarSpecFn: (e: TEntity) => ChipAvatarSpec = e => this.defaultAvatarSpec;
+
+  public selectable = true;
+
+  @Input()
+  public allowRemove = true;
+
+  @ContentChild(ElderSelectChipDirective, {read: TemplateRef, static: true})
+  public chipTemplateQuery: TemplateRef<any>;
+  private _chipTemplate: TemplateRef<any>;
+
+  @ContentChild(ElderSelectChipAvatarDirective, {read: TemplateRef, static: true})
+  public chipAvatarTemplateQuery: TemplateRef<any>;
+  private _chipAvatarTemplate: TemplateRef<any>;
+
+  @ContentChild(ElderSelectCustomInputDirective, {read: TemplateRef, static: true})
+  public customInputTemplateQuery: TemplateRef<any>;
+  private _customInputTemplate: TemplateRef<any>;
+
+  private readonly chipColorResolver$ = new BehaviorSubject<(o1: any) => ThemePalette>((value: TEntity) => undefined);
+  private _chipColorEnabled = false;
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    hostRef: ElementRef,
+    zone: NgZone,
+    focusMonitor: FocusMonitor,
+    translateService: TranslateService,
+    dialogService: ElderDialogService,
+    @Optional() @Self() ngControl: NgControl
+  ) {
+    super(zone, hostRef, 'multi-select-chips', focusMonitor, translateService, dialogService, ngControl);
+
+    this.placeholder = '...';
+
+    this.selectChips$ = combineLatest(
+      [
+        this.entities$,
+        this.entityIds$,
+        this.state$,
+        this.displayPropertyResolver$,
+        this.chipColorResolver$
+      ]
+    ).pipe(
+      map(([entities, entityIds, state, dPR, cCR]) =>
+        this.buildChipModelsOrFallback(entities, entityIds, state, dPR, cCR)
+      )
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Host Bindings                                                           *
+   *                                                                         *
+   **************************************************************************/
+
+  @HostBinding('class') get hostClass(): string {
+    return 'elder-select-base elder-multi-select';
+  }
+
+  @HostBinding('class.mat-select-disabled') get disabledClass(): boolean {
+    return this.disabled;
+  }
+
+  @HostBinding('class.mat-select-invalid') get errorStateClass(): boolean {
+    return this.errorState;
+  }
+
+  @HostBinding('class.mat-select-required') get requiredClass(): boolean {
+    return this.required;
+  }
+
+  @HostBinding('class.mat-select-empty') get emptyClass(): boolean {
+    return this.empty;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set chipTemplate(template: TemplateRef<any>) {
+    this._chipTemplate = template;
+  }
+
+  public get chipTemplate(): TemplateRef<any> {
+    return this._chipTemplate || this.chipTemplateQuery;
+  }
+
+  @Input()
+  public set chipAvatarTemplate(template: TemplateRef<any>) {
+    this._chipAvatarTemplate = template;
+  }
+
+  public get chipAvatarTemplate(): TemplateRef<any> {
+    return this._chipAvatarTemplate || this.chipAvatarTemplateQuery;
+  }
+
+  @Input()
+  public set customInputTemplate(template: TemplateRef<any>) {
+    this._customInputTemplate = template;
+  }
+
+  public get customInputTemplate(): TemplateRef<any> {
+    return this._customInputTemplate || this.customInputTemplateQuery;
+  }
+
+  @Input()
+  public set chipColorEnabled(enabled: boolean) {
+    this._chipColorEnabled = enabled;
+  }
+
+  public get chipColorEnabled(): boolean {
+    return this.errorState || this._chipColorEnabled;
+  }
+
+  /**
+   * A function which returns the color of a given label object.
+   */
+  @Input()
+  public set chipColorResolver(fn: (o1: any) => ThemePalette) {
+    if (!fn) {
+      this.chipColorEnabled = false;
+      return;
+    }
+    if (typeof fn !== 'function') {
+      throw new Error('chipColorResolver must be a function!');
+    }
+    this.chipColorEnabled = true;
+    this.chipColorResolver$.next(fn);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public resolveChipValue(e1: TEntity): any {
+    return this.getEntityId(e1);
+  }
+
+  public onChipKeyDown(event: KeyboardEvent, toRemove: TEntity): void {
+    this.log.warn('onChipKeyDown', event);
+    if(event.key == 'Backspace' || event.key == 'Delete'){
+      this.requestRemoveEntity(toRemove, event.shiftKey);
+    }
+  }
+
+  public onClickRemoveChip(
+    event: MouseEvent,
+    toRemove: TEntity
+  ): void {
+    event.stopPropagation();
+    event.preventDefault();
+    this.requestRemoveEntity(toRemove, event.shiftKey);
+  }
+
+  public focus(options?: FocusOptions) {
+    // TODO this.inputControl?.focus(options);
+    // this.customInputTemplate.focus(options)
+  }
+
+  public blur() {
+    // TODO this.inputControl?.blur();
+    // this.customInputTemplate.blur()
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private buildChipModelsOrFallback(
+    entities: TEntity[],
+    entityIds: TId[],
+    state: ElderSelectComponentState,
+    dPR: TextResolverFn,
+    cCR: (o1: any) => ThemePalette
+  ): ChipModel<TEntity>[] {
+
+    if (state.error) {
+      return this.buildChipFallbackModels(entityIds);
+    }
+    return this.buildChipModels(entities, dPR, cCR);
+  }
+
+
+  private buildChipFallbackModels(entityIds: TId[]): ChipModel<TEntity>[] {
+    return entityIds.map(
+      id => new ChipModel<TEntity>(
+        <any>{id: id},
+        String(id),
+        'warn',
+        this.allowRemove && !this.isLocked,
+        this.defaultAvatarSpec
+      )
+    );
+  }
+
+  private buildChipModels(
+    entities: TEntity[],
+    dPR: TextResolverFn,
+    cCR: (o1: any) => ThemePalette
+  ): ChipModel<TEntity>[] {
+    if (entities) {
+      return entities.map(
+        e => new ChipModel<TEntity>(
+          e,
+          dPR(e),
+          cCR(e),
+          this.allowRemove && !this.isLocked,
+          this.avatarSpecFn(e) ?? this.defaultAvatarSpec
+        )
+      );
+    } else {
+      return <ChipModel<TEntity>[]>[];
+    }
+  }
+
+}

package/src/lib/components/select/multi/elder-multi-select-form-field.ts

@@ -0,0 +1,80 @@
+import {AfterViewInit, Directive, ViewChild} from '@angular/core';
+import {ElderSelectValueDirective} from '../elder-select-value.directive';
+import {ElderApplyControlFn} from '../../../common/forms/elder-from-field-base';
+import {ElderMultiSelectBase} from './elder-multi-select-base';
+import {ElderFromFieldMultiEntityBase} from '../../../common/forms/elder-from-field-multi-entity-base';
+import {ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectCustomInputDirective} from '../elder-select-chip.directive';
+import {ElderSelectBase} from '../elder-select-base';
+import {ElderMultiSelectChipsComponent} from './elder-multi-select-chips/elder-multi-select-chips.component';
+import {SelectionModelPopupDirective} from '../popup/selection-model-popup.directive';
+
+@Directive()
+export abstract class ElderMultiSelectFormField<TEntity, TId, TValue = TEntity | TId>
+  extends ElderFromFieldMultiEntityBase<TEntity, TId, TValue, ElderMultiSelectBase<TId, TEntity, TValue>>
+  implements AfterViewInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  @ViewChild(ElderSelectValueDirective)
+  public selectValueTemplate: ElderSelectValueDirective;
+
+  @ViewChild(SelectionModelPopupDirective)
+  public selectionModelPopupDirective: SelectionModelPopupDirective;
+
+  @ViewChild(ElderSelectChipDirective)
+  public selectChipDirective: ElderSelectChipDirective;
+
+  @ViewChild(ElderSelectChipAvatarDirective)
+  public selectChipAvatarDirective: ElderSelectChipAvatarDirective;
+
+  @ViewChild(ElderSelectCustomInputDirective)
+  public selectCustomInputDirective: ElderSelectCustomInputDirective;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  protected constructor(
+    initSelectFn: ElderApplyControlFn<ElderMultiSelectBase<TId, TEntity, TValue>>
+  ) {
+    super();
+    this.applyToControl(initSelectFn);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngAfterViewInit(): void {
+    const control = this.formFieldControl$.getValue();
+
+    if (control instanceof ElderSelectBase) {
+      if (this.selectValueTemplate) {
+        control.valueTemplate = this.selectValueTemplate.templateRef;
+      }
+      if (this.selectionModelPopupDirective) {
+        control.selectionPopup = this.selectionModelPopupDirective;
+      }
+    }
+
+    if (control instanceof ElderMultiSelectChipsComponent) {
+      if (this.selectChipDirective) {
+        control.chipTemplate = this.selectChipDirective.templateRef;
+      }
+      if (this.selectChipAvatarDirective) {
+        control.chipAvatarTemplate = this.selectChipAvatarDirective.templateRef;
+      }
+      if (this.selectCustomInputDirective) {
+        control.customInputTemplate = this.selectCustomInputDirective.templateRef;
+      }
+    }
+  }
+}

package/src/lib/components/select/popup/selection-model-popup-trigger-adapter.directive.ts

@@ -0,0 +1,102 @@
+import {ContentChild, Directive, EventEmitter, Input, Output, TemplateRef, ViewContainerRef} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {SelectionModelPopupDirective} from './selection-model-popup.directive';
+import {Filter} from '../../../common/data/filters/filter';
+import {Sort} from '../../../common/data/sort';
+
+
+
+@Directive({
+  selector: '[elderSelectionPopupTriggerAdapter]',
+  exportAs: 'elderSelectionPopupTriggerAdapter',
+  host: {
+    '(click)': 'handleClick($event)'
+  },
+})
+export class ElderSelectionPopupTriggerAdapterDirective {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  @Output()
+  public readonly selectionChange = new EventEmitter<any[]>;
+
+  @Output()
+  public readonly selectionSingleChange = new EventEmitter<any>;
+
+  @Input()
+  public keyGetter = (entity: any) => entity.id;
+
+  @Input()
+  public selection: any[] = [];
+
+  @Input()
+  public filters: Filter[] = [];
+
+  @Input()
+  public sorts: Sort[] = [];
+
+  @Input()
+  public multiSelectionEnabled = false;
+
+  @ContentChild(SelectionModelPopupDirective)
+  public selectionPopup: SelectionModelPopupDirective;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+
+  /** Handles click events on the trigger. */
+  handleClick(event: MouseEvent): void {
+    if (this.selectionPopup) {
+      this.openSelectionPopup();
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  public openSelectionPopup(): void {
+    if (this.selectionPopup) {
+      this.selectionPopup.choose(
+        this.keyGetter,
+        this.selection || [],
+        this.filters || [],
+        this.sorts || [],
+        this.multiSelectionEnabled
+      ).subscribe(
+        (selection: any[]) => {
+          this.selectionChange.emit(selection)
+          if (!this.multiSelectionEnabled) {
+            const selectedEntity = selection?.length > 0 ? selection[0] : [];
+            this.selectionSingleChange.emit(selectedEntity)
+          }
+        }
+      );
+    } else {
+      this.log.warn('Cant open selection browser popup, since [SelectionModelPopupDirective] was not found!');
+    }
+  }
+
+
+}

package/src/lib/components/select/popup/selection-model-popup.directive.ts

@@ -0,0 +1,145 @@
+import {ChangeDetectorRef, Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {
+  ISelectionModelDialogOptions,
+  TemplatedSelectionDialogComponent
+} from './templated-selection-dialog/templated-selection-dialog.component';
+import {switchMap} from 'rxjs/operators';
+import {EMPTY, Observable, of} from 'rxjs';
+import {KeyGetterFn, SelectionModel} from '../../../common/selection/selection-model';
+import {Sort} from '../../../common/data/sort';
+import {Filter} from '../../../common/data/filters/filter';
+import {ElderTableProviders} from '../../data-view/table/model/elder-table-model-provider';
+import {ElderDataViewOptionsProvider} from '../../data-view/base/elder-data-view-options-provider';
+
+
+
+export function createSelectionModel(): SelectionModel<any> {
+  return new SelectionModel<any>();
+}
+
+export function createDataViewOptionsProvider(): ElderDataViewOptionsProvider {
+  return new ElderDataViewOptionsProvider();
+}
+
+@Directive({
+  selector: '[elderSelectionModelPopup]',
+  exportAs: 'elderSelectionModelPopup',
+  providers: [
+    {
+      provide: SelectionModel,
+      useFactory: createSelectionModel
+    },
+    {
+      provide: ElderDataViewOptionsProvider,
+      useFactory: createDataViewOptionsProvider
+    },
+    ElderTableProviders.ClearTableModel // Since this popup is frequently used inside an elder-table search box
+  ]
+})
+export class SelectionModelPopupDirective {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  private _transformerFn: (o: any) => any;
+
+  @Input('elderSelectionModelPopupTransform')
+  public set elderSelectionModelPopupTransform(fn: (o: any) => any) {
+    this._transformerFn = fn;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly templateRef: TemplateRef<any>,
+    private readonly viewContainer: ViewContainerRef,
+    private readonly dialog: MatDialog,
+    private readonly dataViewOptionsProvider: ElderDataViewOptionsProvider,
+    private readonly selectionModel: SelectionModel<any>,
+    private readonly changeDetectorRef: ChangeDetectorRef,
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Let the user choose some entities and return the selection.
+   */
+  public choose(
+    keyGetter: KeyGetterFn<any>,
+    currentSelection: any[],
+    filters?: Filter[],
+    sorts?: Sort[],
+    multi = false
+  ): Observable<any[]> {
+
+    this.dataViewOptionsProvider.updateOptions(
+      options => options
+        .withFilters(filters || [])
+        .withSorts(sorts || [])
+        .withSelectionMultiEnabled(multi)
+        .withInteractionMode('selection')
+    )
+
+    this.selectionModel.isMultipleSelection = multi;
+    this.selectionModel.keyGetterFn = keyGetter;
+    this.selectionModel.replaceSelection(currentSelection);
+
+    this.log.info('Replaced selection popup with current '+currentSelection.length+' entities:', currentSelection)
+
+    const dialogRef = this.openSelectDialog();
+
+    // This fixes dialog rendering when the browser template
+    // view container is outside the invoking control, which
+    // happens when using ng-content projection.
+    this.changeDetectorRef.markForCheck();
+
+    return dialogRef.afterClosed().pipe(
+      switchMap((chosenEntities: any[]) => {
+        if (chosenEntities) {
+          return this._transformerFn
+            ? of(chosenEntities.map(value => this._transformerFn(value)))
+            : of(chosenEntities);
+        } else {
+          return EMPTY;
+        }
+      })
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private openSelectDialog(): MatDialogRef<TemplatedSelectionDialogComponent> {
+    return this.dialog.open(
+      TemplatedSelectionDialogComponent,
+      {
+        width: '90vw',
+        height: '90vh',
+        panelClass: 'custom-dialog-container',
+        data: <ISelectionModelDialogOptions> {
+          selectionComponentTemplate: this.templateRef
+        },
+        viewContainerRef: this.viewContainer
+      }
+    );
+  }
+
+}

package/src/lib/components/select/popup/templated-selection-dialog/templated-selection-dialog.component.html

@@ -0,0 +1,18 @@
+<div class="layout-col full">
+  <mat-toolbar elderTheme class="flex-none">
+    <button mat-icon-button type="button" matDialogClose="">
+      <mat-icon>close</mat-icon>
+    </button>
+    <span class="flex"></span>
+    <button mat-stroked-button type="submit" color="accent"
+            *ngIf="selectionModel.selection | async as selection"
+            [disabled]="!selection || selection.length === 0"
+            [mat-dialog-close]="selection"
+    >
+      {{'actions.select' | translate}}
+    </button>
+  </mat-toolbar>
+  <div class="layout-col flex" style="overflow: hidden">
+    <ng-container *ngTemplateOutlet="data.selectionComponentTemplate"></ng-container>
+  </div>
+</div>