@elderbyte/ngx-starter 14.10.0 → 14.11.1

package/src/lib/components/select/elder-select-base.ts

@@ -0,0 +1,355 @@
+import {ContentChild, Directive, ElementRef, EventEmitter, InjectionToken, Input, NgZone, Output, TemplateRef} from '@angular/core';
+import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {IDataContext} from '../../common/data/data-context/data-context';
+import {IDataSource} from '../../common/data/datasource/data-source';
+import {DataContextBuilder} from '../../common/data/data-context/data-context-builder';
+import {Filter} from '../../common/data/filters/filter';
+import {Sort} from '../../common/data/sort';
+import {ElderSelectValueDirective} from './elder-select-value.directive';
+import {SelectionModelPopupDirective} from './popup/selection-model-popup.directive';
+import {DataContextStatus} from '../../common/data/data-context/data-context-status';
+import {filter, map, switchMap} from 'rxjs/operators';
+import {runInZone} from '../../common/utils/ng-zone-utils';
+import {FilterContext} from '../../common/data/filters/filter-context';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {ElderFormFieldControlBase} from '../../common/forms/elder-form-field-control-base.directive';
+import {NgControl} from '@angular/forms';
+import {FocusMonitor} from '@angular/cdk/a11y';
+import {TranslateService} from '@ngx-translate/core';
+
+export type TextResolverFn = (value: any) => string;
+
+export class ElderSelectComponentState {
+
+  public static fromDataContext(dcState: DataContextStatus): ElderSelectComponentState {
+    if (dcState.loading) {
+      return ElderSelectComponentState.loading();
+    } else if (dcState.error) {
+      return ElderSelectComponentState.error(dcState.error);
+    } else {
+      return ElderSelectComponentState.idle();
+    }
+  }
+
+
+  public static idle(): ElderSelectComponentState {
+    return new ElderSelectComponentState(true, false, null);
+  }
+
+  public static loading(): ElderSelectComponentState {
+    return new ElderSelectComponentState(false, true, null);
+  }
+
+  public static error(error: string): ElderSelectComponentState {
+    return new ElderSelectComponentState(false, false, error);
+  }
+
+  constructor(
+    public readonly idle: boolean,
+    public readonly loading: boolean,
+    public readonly error: string
+  ) {
+  }
+}
+
+export const ELDER_SELECT_BASE = new InjectionToken<ElderSelectBase<any, any, any>>('ElderSelectBase');
+
+
+/**
+ * Base component for Elder Selection Controls.
+ *
+ *  Elder Selection has the following abstract concept:
+ *
+ * - Suggestion-Model: A DataSource and derived DataContext for the (auto-complete) suggestions.
+ *
+ * @param TID Entity Id Type
+ * @param T Entity Type
+ * @param TValue Value backing the control. Can be the entity, the id or something else.
+ */
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class ElderSelectBase<TId, TEntity, TValue> extends ElderFormFieldControlBase<TValue> {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly _logger = LoggerFactory.getLogger(this.constructor.name);
+  private readonly _filterContext = new FilterContext();
+
+  private _valueAsId: boolean;
+
+  protected timeoutAfterMs = 5000;
+
+  /**
+   * Define if elder-select should clean up the
+   * data-context resources for you.
+   *
+   * In more advanced scenarios where you plan to reuse the same data-context
+   * set this to false and release the resources yourself. (dataContext.close)
+   */
+  @Input()
+  public cleanUp = true;
+
+  public readonly displayPropertyResolver$ = new BehaviorSubject<TextResolverFn>((value: TEntity) => this.propertyStringValue(value, null));
+
+  /**
+   * Entity DataContext, which is used
+   * to side load entities by id and also
+   * to load suggestions when auto-completing.
+   */
+  public readonly dataContext$ = new BehaviorSubject<IDataContext<TEntity>>(null);
+
+  /**
+   * Page size. (Used for infinite scrolling chunks)
+   */
+  @Input()
+  public pageSize = 10;
+
+  @Input()
+  public queryFilter = 'query';
+
+  @Input()
+  public sorts: Sort[] = [];
+
+  @Input()
+  public icon: string;
+
+  /**
+   * The option template to customize the ui look.
+   */
+  @ContentChild(ElderSelectValueDirective, {read: TemplateRef, static: true})
+  public valueTemplateQuery: TemplateRef<any>;
+  private _valueTemplate: TemplateRef<any>;
+
+  @ContentChild(SelectionModelPopupDirective)
+  public selectionPopup: SelectionModelPopupDirective;
+
+  @Input()
+  public isOptionDisabledFn: (option: TEntity) => boolean;
+
+  @Input()
+  public isOptionHiddenFn: (option: TEntity) => boolean;
+
+  /**
+   * Emits an event when the user has clicked on the current
+   * selected entity.
+   */
+  @Output()
+  public readonly currentClicked = new EventEmitter<TEntity>();
+
+  public readonly state$ = new BehaviorSubject<ElderSelectComponentState>(ElderSelectComponentState.idle());
+  public readonly mergedState$: Observable<ElderSelectComponentState>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  protected constructor(
+    private readonly zone: NgZone,
+    hostRef: ElementRef,
+    controlType: string,
+    focusMonitor: FocusMonitor,
+    translateService: TranslateService,
+    ngControl?: NgControl
+  ) {
+    super(hostRef, controlType, focusMonitor, translateService, ngControl);
+
+    this.mergedState$ = combineLatest([
+      this.dataContext$.pipe(filter(dc => !!dc), switchMap(dc => dc.status)),
+      this.state$
+    ]).pipe(
+      map(([dcState, state]) => {
+        if (dcState.idle) {
+          return state;
+        } else {
+          return ElderSelectComponentState.fromDataContext(dcState);
+        }
+      }),
+      runInZone(this.zone)
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set valueAsId(valueAsId: BooleanInput) {
+    this._valueAsId = coerceBooleanProperty(valueAsId);
+  }
+
+  public get valueAsId(): boolean {
+    return this._valueAsId;
+  }
+
+  /**
+   * The property used to display the values.
+   */
+  @Input()
+  public set displayProperty(property: string) {
+    this.displayPropertyResolver = (value => this.propertyStringValue(value, property));
+  }
+
+  @Input()
+  public set displayPropertyResolver(resolver: TextResolverFn) {
+    this.displayPropertyResolver$.next(resolver);
+  }
+
+  @Input()
+  public set filters(filters: Filter[]) {
+    this.replaceFilters(filters);
+  }
+
+  public get filters(): Filter[] {
+    return this._filterContext.filtersSnapshot;
+  }
+
+  @Input()
+  public set dataSource(source: IDataSource<TEntity>) {
+    this.dataContext = DataContextBuilder.start<TEntity>()
+      .pageSize(this.pageSize)
+      .build(source);
+  }
+
+  @Input()
+  public set data(data: Array<TEntity> | IDataContext<TEntity>) {
+
+    this.autoCleanUp();
+
+    if (data instanceof Array) {
+      this.dataContext = DataContextBuilder.start<TEntity>()
+        .localSort()
+        .buildLocal(data); // Memory leak
+      this.dataContext.start();
+    } else {
+      if (data) {
+        this.dataContext = data;
+      } else {
+        this.dataContext = DataContextBuilder.start<TEntity>().buildEmpty();
+      }
+    }
+  }
+
+  public set dataContext(data: IDataContext<TEntity>) {
+    this.autoCleanUp();
+    this.dataContext$.next(data);
+    this.onDataContextChanged(data);
+  }
+
+  public get dataContext(): IDataContext<TEntity> {
+    return this.dataContext$.getValue();
+  }
+
+  @Input()
+  public set valueTemplate(template: TemplateRef<any>) {
+    this._valueTemplate = template;
+  }
+
+  public get valueTemplate(): TemplateRef<any> {
+    return this._valueTemplate || this.valueTemplateQuery;
+  }
+
+  public override get errorState(): boolean {
+    return !!this.state$.getValue().error || super.errorState;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public onCurrentClicked(entity: TEntity): void {
+    this.currentClicked.emit(entity);
+  }
+
+  public updateFilter(updatedFilter?: Filter): void {
+    this._filterContext.updateFilter(updatedFilter);
+  }
+
+  public updateFilters(updatedFilters?: Filter[]): void {
+    this._filterContext.updateFilters(updatedFilters);
+  }
+
+  public replaceFilters(newFilters?: Filter[]) {
+    this._filterContext.replaceFilters(newFilters);
+  }
+
+  public clearFilters(): void {
+    this._filterContext.clear();
+  }
+
+  public updateState(state: ElderSelectComponentState): void {
+    this.state$.next(state);
+    this.emitStateChange();
+  }
+
+  public override get shouldLabelFloat(): boolean {
+    return this.errorState || !!this.icon || super.shouldLabelFloat;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Abstract API                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Occurs when the suggestions data-context has changed
+   */
+  protected abstract onDataContextChanged(data: IDataContext<TEntity>): void;
+
+  /***************************************************************************
+   *                                                                         *
+   * Internal API                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  protected getEntityId(entity: TEntity): TId {
+    return this.dataContext?.dataSource?.getId(entity) || entity;
+  }
+
+  protected isEqual(a: TEntity, b: TEntity): boolean {
+    if (a === b) {
+      return true;
+    }
+    if (this.isEmpty(a) && this.isEmpty(b)) { // HACK: Handle empty string as undefined.
+      return true;
+    }
+    return this.getEntityId(a) === this.getEntityId(b);
+  }
+
+  protected isEmpty(a: TEntity): boolean {
+    return (a === null || a === undefined || <any>a === '');
+  }
+
+  /**
+   * Performs clean up of the current data context if auto clean up is enabled.
+   */
+  protected autoCleanUp(): void {
+    if (this.cleanUp && this.dataContext) {
+      this._logger.debug('Releasing DataContext resources to prevent memory leak. [cleanUp]="true"');
+      this.dataContext.close();
+    }
+  }
+
+  protected propertyStringValue(value: TEntity, property: string): string | null {
+    if (value === null || value === undefined) {
+      return null;
+    }
+
+    if (property) {
+      return (<any>value)[property];
+    }
+
+    return String(value);
+  }
+}

package/src/lib/components/select/elder-select-chip.directive.ts

@@ -0,0 +1,32 @@
+import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
+
+@Directive({
+  selector: '[elderSelectChip]'
+})
+export class ElderSelectChipDirective {
+  constructor(
+    public templateRef: TemplateRef<any>,
+    public viewContainer: ViewContainerRef
+  ) { }
+}
+
+
+@Directive({
+  selector: '[elderSelectChipAvatar]'
+})
+export class ElderSelectChipAvatarDirective {
+  constructor(
+    public templateRef: TemplateRef<any>,
+    public viewContainer: ViewContainerRef
+  ) { }
+}
+
+@Directive({
+  selector: '[elderCustomInput]'
+})
+export class ElderSelectCustomInputDirective {
+  constructor(
+    public templateRef: TemplateRef<any>,
+    public viewContainer: ViewContainerRef
+  ) { }
+}

package/src/lib/components/select/elder-select-on-tab.directive.ts

@@ -0,0 +1,150 @@
+import {AfterViewInit, Directive, Host, HostListener, Inject, OnDestroy, SkipSelf} from '@angular/core';
+import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
+import {Subject} from 'rxjs/internal/Subject';
+import {delay, map, takeUntil, tap} from 'rxjs/operators';
+import {merge} from 'rxjs';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ValueAccessorBase} from '../../common/forms/value-accessor-base';
+import {ELDER_SELECT_BASE, ElderSelectBase} from './elder-select-base';
+import {MatOption} from '@angular/material/core';
+import {isElderEntityValueAccessor} from '../../common/forms/elder-entity-value-accessor';
+
+@Directive({
+  selector: '[elderSelectOnTab]'
+})
+export class ElderSelectOnTabDirective<TEntity = any, TId = any, TValue = TEntity | TId> implements AfterViewInit, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly destroy$ = new Subject<void>();
+
+  private readonly controlValueAccessor: ValueAccessorBase<any>;
+
+  /**
+   * Whether the autocomplete panel was open before the event
+   */
+  private panelOpen = false;
+
+  /**
+   * Whether the user selected an option.
+   * (We want to ignore selections if there is already a selection present and the user tabs away)
+   */
+  private userInput = false;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly autoTrigger: MatAutocompleteTrigger,
+    @SkipSelf() @Inject(ELDER_SELECT_BASE) private readonly elderSelectBase: ElderSelectBase<any, any, any>
+  ) {
+    this.controlValueAccessor = elderSelectBase;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Event Listener                                                          *
+   *                                                                         *
+   **************************************************************************/
+
+  @HostListener('keydown.arrowup')
+  @HostListener('keydown.arrowdown')
+  public onOptionSelect(){
+    this.userInput = true;
+  }
+
+  @HostListener('keydown.tab')
+  public onBlur(): void {
+
+    if (!this.panelOpen) { return; }
+
+    if (!this.userInput) {
+      // The user did not select anything in the auto-complete
+
+      if (this.controlValueAccessor.value) {
+        this.logger.warn('Discarding TAB since the user did probably not intend to change the value! userInput:', this.userInput);
+        return;
+      }
+
+      if(!this.elderSelectBase.required) {
+        // The user did not select any option and no current value is present.
+        // Since the input is NOT marked as required, we assume the user did not want to select a value
+        return;
+      }
+    }
+
+    const activeOption = this.autoTrigger.activeOption as MatOption<TEntity>;
+    if (activeOption) {
+      const entity = activeOption.value;
+      this.writeEntity(entity);
+    }
+
+    this.reset();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngAfterViewInit() {
+    const autocomplete = this.autoTrigger.autocomplete;
+    merge(
+      autocomplete.opened.pipe(map(() => true)),
+      autocomplete.closed.pipe(map(() => false))
+    ).pipe(
+      takeUntil(this.destroy$),
+      delay(0)
+    ).subscribe(value => this.panelOpen = value);
+
+    this.autoTrigger.optionSelections.pipe( // TODO https://github.com/angular/components/pull/14813
+      takeUntil(this.destroy$),
+      tap(opt => this.logger.debug('[optionSelections] CHANGED ', opt)),
+      map(opt => opt.isUserInput)
+    ).subscribe(isUserInput => this.userInput = isUserInput);
+  }
+
+  public ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private reset(): void {
+    this.userInput = false;
+  }
+
+  private writeEntity(entity: TEntity): void {
+    const value = this.entityToValue(entity);
+    this.controlValueAccessor.updateValue(value);
+    this.autoTrigger.writeValue(value);
+    this.logger.warn('Wrote entity to control as value: ', value);
+  }
+
+  private entityToValue(entity: TEntity): TValue {
+    if (isElderEntityValueAccessor(this.controlValueAccessor)) {
+      // Since elder-select may use the entity id as value (valueAsId),
+      // we can not directly write to the value safely.
+      return this.controlValueAccessor.entityToValue(entity);
+    } else {
+      // By default, write the selected option to the control value
+      this.logger.warn('[controlValueAccessor] is not a ElderEntityValueAccessor!: ', this.controlValueAccessor);
+      return <any>entity;
+    }
+  }
+}

package/src/lib/components/select/elder-select-value.directive.ts

@@ -0,0 +1,9 @@
+import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
+
+@Directive({selector: '[elderSelectValue]'})
+export class ElderSelectValueDirective {
+  constructor(
+    public templateRef: TemplateRef<any>,
+    public viewContainer: ViewContainerRef) {
+  }
+}

package/src/lib/components/select/elder-select.module.ts

@@ -0,0 +1,94 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ElderSelectComponent} from './single/elder-select/elder-select.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSelectModule} from '@angular/material/select';
+import {TranslateModule} from '@ngx-translate/core';
+import {TemplatedSelectionDialogComponent} from './popup/templated-selection-dialog/templated-selection-dialog.component';
+import {FlexModule} from '@angular/flex-layout';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatButtonModule} from '@angular/material/button';
+import {SelectionModelPopupDirective} from './popup/selection-model-popup.directive';
+import {ElderFormsDirectivesModule} from '../forms/directives/elder-forms-directives.module';
+import {MatInputModule} from '@angular/material/input';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {ElderTableModule} from '../data-view/table/elder-table.module';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {ElderInfiniteScrollModule} from '../infinitescroll/elder-infinite-scroll.module';
+import {ElderSelectOnTabDirective} from './elder-select-on-tab.directive';
+import {ElderAutocompleteModule} from '../input/autocomplete/elder-autocomplete.module';
+import {ElderSelectValueDirective} from './elder-select-value.directive';
+import {ElderMultiSelectChipsComponent} from './multi/elder-multi-select-chips/elder-multi-select-chips.component';
+import {MatChipsModule} from '@angular/material/chips';
+import {ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectCustomInputDirective} from './elder-select-chip.directive';
+import {ElderAutoSelectFirstDirective} from './auto/elder-auto-select-first.directive';
+import {ElderPipesModule} from '../../pipes/elder-pipes.module';
+import { ElderClearSelectDirective } from './single/elder-clear-select.directive';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {ElderThemeModule} from '../theme/elder-theme.module';
+import {ElderSelectionPopupTriggerAdapterDirective} from './popup/selection-model-popup-trigger-adapter.directive';
+
+export {ElderSelectValueDirective} from './elder-select-value.directive';
+export * from './elder-select-chip.directive';
+export {ElderSelectOnTabDirective} from './elder-select-on-tab.directive';
+export {ElderSelectComponent} from './single/elder-select/elder-select.component';
+export {
+  TemplatedSelectionDialogComponent, ISelectionModelDialogOptions
+} from './popup/templated-selection-dialog/templated-selection-dialog.component';
+export {SelectionModelPopupDirective} from './popup/selection-model-popup.directive';
+export {ElderSelectionPopupTriggerAdapterDirective} from './popup/selection-model-popup-trigger-adapter.directive';
+export {ElderMultiSelectBase} from './multi/elder-multi-select-base';
+export {ElderMultiSelectChipsComponent, ChipAvatarSpec} from './multi/elder-multi-select-chips/elder-multi-select-chips.component';
+export {ElderAutoSelectFirstDirective} from './auto/elder-auto-select-first.directive';
+export {ElderClearSelectDirective} from './single/elder-clear-select.directive';
+
+@NgModule({
+    imports: [
+        CommonModule, FormsModule, ReactiveFormsModule,
+
+        MatFormFieldModule,
+        MatIconModule,
+        MatSelectModule,
+        MatDialogModule, MatButtonModule,
+        MatInputModule, MatAutocompleteModule,
+        MatToolbarModule, MatProgressBarModule,
+        MatProgressSpinnerModule,
+
+        FlexModule, TranslateModule,
+
+        ElderFormsDirectivesModule, ElderTableModule, ElderInfiniteScrollModule, ElderAutocompleteModule, MatChipsModule, ElderPipesModule, MatTooltipModule, ElderThemeModule,
+    ],
+  declarations: [
+    ElderSelectComponent,
+    ElderSelectValueDirective,
+    TemplatedSelectionDialogComponent,
+    SelectionModelPopupDirective,
+    ElderSelectionPopupTriggerAdapterDirective,
+    ElderSelectOnTabDirective,
+    ElderMultiSelectChipsComponent,
+    ElderSelectChipDirective,
+    ElderSelectChipAvatarDirective,
+    ElderAutoSelectFirstDirective,
+    ElderClearSelectDirective,
+    ElderSelectCustomInputDirective
+  ],
+  exports: [
+    ElderSelectComponent,
+    ElderSelectValueDirective,
+    TemplatedSelectionDialogComponent,
+    SelectionModelPopupDirective,
+    ElderSelectionPopupTriggerAdapterDirective,
+    ElderMultiSelectChipsComponent,
+    ElderSelectChipDirective,
+    ElderSelectChipAvatarDirective,
+    ElderAutoSelectFirstDirective,
+    ElderClearSelectDirective,
+    ElderSelectCustomInputDirective
+  ]
+})
+export class ElderSelectModule {
+}