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

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

@@ -0,0 +1,451 @@
+import {Directive, ElementRef, Input, NgZone, Output} from '@angular/core';
+import {ElderSelectBase, ElderSelectComponentState} from '../elder-select-base';
+import {IDataContext} from '../../../common/data/data-context/data-context';
+import {BehaviorSubject, EMPTY, Observable, of, throwError} from 'rxjs';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {catchError, filter, map, skip, switchMap, take, tap, timeout} from 'rxjs/operators';
+import {Sets} from '../../../common/sets';
+import {NgControl} from '@angular/forms';
+import {FocusMonitor} from '@angular/cdk/a11y';
+import {IElderMultiEntityValueAccessor} from '../../../common/forms/elder-multi-entity-value-accessor';
+import {Sort} from '../../../common/data/sort';
+import {SortUtil} from '../../../common/utils/sort-util';
+import {ElderDialogService} from '../../dialogs/elder-dialog.service';
+import {TranslateService} from '@ngx-translate/core';
+
+
+/**
+ * Base component implementation of elder-multi-select.
+ *
+ * Multi Select has the following abstract concept:
+ *
+ * - Suggestion-Model: A DataSource and derived DataContext for the (auto-complete) suggestions.
+ * - The backing Value is a list of the current selected entities. T[]
+ *
+ */
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class ElderMultiSelectBase<TId, TEntity, TValue>
+  extends ElderSelectBase<TId, TEntity, TValue[]>
+  implements IElderMultiEntityValueAccessor<TEntity, TId, TValue> {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly _entityIds$: Observable<TId[]>;
+  private readonly _entities$ = new BehaviorSubject<TEntity[]>([]);
+
+  /**
+   * Defines how the entities should be sorted locally.
+   * This affects how entities are displayed when more than
+   * one is selected, such as in a chip list.
+   */
+  @Input()
+  public entitiesSorts: Sort[] = [];
+
+  /**
+   * If enabled, before removing selected entities
+   * the user will be prompted to confirm.
+   */
+  @Input()
+  public confirmRemoval = false;
+
+  @Output()
+  public readonly entityIdsChange: Observable<TId[]>;
+
+  @Output()
+  public readonly entitiesChange: Observable<TEntity[]>;
+
+  /**
+   * Similar to entity-id change, but emits only when the user
+   * has updated the value.
+   */
+  @Output()
+  public readonly entityIdsUpdated: Observable<TId[]>;
+
+  /**
+   * Similar to entity change, but emits only when the user
+   * has updated the value.
+   */
+  @Output()
+  public readonly entitiesUpdated: Observable<TEntity[]>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  protected constructor(
+    zone: NgZone,
+    hostRef: ElementRef,
+    controlType: string,
+    focusMonitor: FocusMonitor,
+    translateService: TranslateService,
+    private readonly dialogService: ElderDialogService,
+    ngControl?: NgControl
+  ) {
+    super(zone, hostRef, controlType, focusMonitor, translateService, ngControl);
+
+    this.entityIdsChange = this.valueChange.pipe(
+      map(values => this.entityIdsFromValues(values))
+    );
+
+    this._entityIds$ = this.value$.pipe(
+      map(values => this.entityIdsFromValues(values))
+    );
+
+    this.entitiesChange = this._entities$.pipe(
+      skip(1) // Skip the initial or current value
+    );
+
+    this.entityIdsUpdated = this.valueUpdated.pipe(
+      map(values => this.entityIdsFromValues(values))
+    );
+
+    this.entitiesUpdated = this.entityIdsUpdated.pipe(
+      tap(entityIds => this.logger.debug('Awaiting entities with ids', entityIds)),
+      switchMap(entityIds => this.awaitEntitiesWithId(entityIds, this.timeoutAfterMs)),
+      catchError(err => {
+        this.logger.warn(`awaitEntitiesWithId -> timed out after: ${this.timeoutAfterMs}`, err);
+        return EMPTY;
+      })
+    );
+  }
+
+  private awaitEntitiesWithId(entityIds: TId[], timeoutMs: number): Observable<TEntity[]> {
+    return this._entities$.pipe(
+      tap(entities => this.logger.debug('Got entities for ids' + entityIds, entities)),
+      filter(entities => this.equalIds(this.getEntityIds(entities), entityIds)),
+      take(1),
+      timeout(timeoutMs)
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get entities$(): Observable<TEntity[]> {
+    return this._entities$.asObservable();
+  }
+
+  public get entityIds$(): Observable<TId[]> {
+    return this._entityIds$;
+  }
+
+  @Input()
+  public set entities(entities: TEntity[]) {
+    if(!this.equalEntities(this.entities, entities)) {
+      entities = this.writeEntitiesSorted(entities);
+      this.writeValueInternal(
+        this.entitiesToValues(entities)
+      );
+    }
+  }
+
+  public get entities(): TEntity[] {
+    return this._entities$.getValue();
+  }
+
+  @Input()
+  public set entityIds(ids: TId[]) {
+    if(!this.equalIds(this.entityIds, ids)) {
+      if (this.valueAsId) {
+        this.writeValueInternal(<any>ids as TValue[]);
+      } else {
+        this.selectEntitiesByIds(ids);
+      }
+    }
+  }
+
+  public get entityIds(): TId[] {
+    return this.entityIdsFromValues(this.value);
+  }
+
+  public get isOptionDisabledInternalFn(): (option: TEntity) => boolean {
+    return (option: TEntity) => {
+      if (this.isOptionDisabledFn) {
+        return this.isOptionDisabledFn(option);
+      } else {
+        return false;
+      }
+    };
+  }
+
+  public get isOptionHiddenInternalFn(): (option: TEntity) => boolean {
+    return (option: TEntity) => {
+      if (this.isAlreadyPresent(option)) {
+        return true;
+      }
+      if (this.isOptionHiddenFn) {
+        return this.isOptionHiddenFn(option);
+      } else {
+        return false;
+      }
+    };
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public updateValueByEntities(entities: TEntity[]): void {
+    entities = this.writeEntitiesSorted(entities);
+    this.updateValue(
+      this.entitiesToValues(entities)
+    );
+  }
+
+  public appendEntities(newEntities: TEntity[]) {
+    const current = this.entities ? this.entities : [];
+    this.updateValueByEntities([...current, ...newEntities]);
+  }
+
+  public appendEntity(newEntity: any) {
+    this.appendEntities([newEntity]);
+  }
+
+  public requestRemoveEntity(toRemove: TEntity, skipConfirm?: boolean): void {
+    this.requestRemoveEntities([toRemove], skipConfirm);
+  }
+
+  public requestRemoveEntities(
+    toRemove: TEntity[],
+    skipConfirm?: boolean
+  ): void {
+    if (!skipConfirm && this.confirmRemoval) {
+      this.dialogService
+        .showConfirm({
+          title: 'dialogs.confirm-deletion.title',
+          message: 'dialogs.confirm-deletion.message',
+          yesNo: true,
+          interpolateParams: {numOfItems: toRemove.length},
+        })
+        .subscribe((confirmed) => {
+          if (confirmed) {
+            this.removeEntities(toRemove);
+          }
+        });
+    } else {
+      this.removeEntities(toRemove);
+    }
+  }
+
+  public removeEntities(toRemove: TEntity[]): void {
+    toRemove.forEach(e => this.removeEntity(e));
+  }
+
+  public removeEntity(toRemove: TEntity): void {
+    const remaining = this.entities
+      .filter(l => !this.isEqual(l, toRemove));
+    this.updateValueByEntities(remaining);
+  }
+
+  public openSelectionPopup(event: Event): void {
+    if (this.selectionPopup) {
+      this.selectionPopup.choose(
+        (e: TEntity) => this.getEntityId(e),
+        this.entities,
+        this.filters,
+        this.sorts,
+        true
+      ).subscribe(
+        (selection: TEntity[]) => this.updateValueByEntities(selection)
+      );
+    } else {
+      this.logger.warn('Cant open selection browser popup, since [SelectionModelPopupDirective] was not found!');
+    }
+  }
+
+  public entityToValue(entity: TEntity): TValue {
+    if (this.valueAsId) {
+      const id = this.getEntityId(entity);
+      return <any>id as TValue;
+    } else {
+      return <any>entity as TValue;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Internal Methods                                                        *
+   *                                                                         *
+   **************************************************************************/
+
+  protected override valuesEquals(a: TValue[], b: TValue[]): boolean {
+    return this.equalIds(this.entityIdsFromValues(a), this.entityIdsFromValues(b));
+  }
+
+  protected onDataContextChanged(data: IDataContext<TEntity>): void {
+    if (this.valueAsId) {
+      this.selectEntitiesByIds(this.entityIds);
+    }
+  }
+
+  /**
+   * This method is invoked after a value has been written to this control.
+   *
+   */
+  protected override writeToControl(value: TValue[]): void {
+    if (this.valueAsId) {
+      const entityIds = <any>value as TId[];
+      // Value was written as entity ids, ensure we select entity by id
+      this.logger.debug('writeToControl: value was written as ids: ' + entityIds, value);
+      this.selectEntitiesByIds(entityIds);
+    } else {
+      // Value was written as entity, ensure entity is updated
+      const currentEntities = this.entities;
+      const newEntities = <any>value as TEntity[];
+      this.logger.debug('writeToControl: value was written as entities (size): ' + newEntities?.length, value);
+      if (!this.equalEntities(currentEntities, newEntities)) {
+        this.writeEntitiesSorted(newEntities);
+      } else {
+        this.logger.warn('Ignored written entities as they are already set to entities$!');
+      }
+    }
+    super.writeToControl(value);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+
+  private isAlreadyPresent(queryValue: TEntity): boolean {
+    if (this.entities) {
+      return this.entities.some(v => this.isEqual(v, queryValue));
+    } else {
+      return false;
+    }
+  }
+
+  private entityIdsFromValues(values: TValue[]): TId[] | null {
+    if (values) {
+      return values.map(v => this.entityIdFromValue(v));
+    }
+    return null;
+  }
+
+  private entityIdFromValue(value: TValue): TId {
+    if (this.valueAsId) {
+      return <any>value as TId;
+    } else {
+      const entity = (<any>value) as TEntity;
+      return this.getEntityId(entity);
+    }
+  }
+
+  private entitiesToValues(entities: TEntity[]): TValue[] | null {
+    if (entities) {
+      return entities.map(e => this.entityToValue(e));
+    }
+    return null;
+  }
+
+  private getEntityIds(values: TEntity[] | null): TId[] {
+    if (values) {
+      return values.map(v => this.getEntityId(v));
+    }
+    return null;
+  }
+
+  private equalIds(idsA: TId[], idsB: TId[]): boolean {
+    return Sets.equalContent(idsA, idsB);
+  }
+
+  private equalEntities(entitiesA: TEntity[], entitiesB: TEntity[]) {
+    return this.equalIds(this.getEntityIds(entitiesA), this.getEntityIds(entitiesB));
+  }
+
+  private selectEntitiesByIds(ids: TId[]): void {
+    const currentEntities = this.entities;
+    this.logger.info('selectEntitiesByIds: ids: ' + ids + ', current entities:', currentEntities);
+    if (currentEntities && this.equalIds(this.getEntityIds(currentEntities), ids)) {
+      return; // Entities already loaded
+    }
+
+    this.findOrLoadEntitiesByIds(ids)
+      .subscribe({
+        next: entities => this.entities = entities,
+        error: err => this.updateState(ElderSelectComponentState.error(err))
+      });
+  }
+
+  private findOrLoadEntitiesByIds(ids: TId[]): Observable<TEntity[]> {
+    if (ids.length == 0) {
+      return of([]);
+    }
+    if (this.dataContext) {
+      const existing = this.findInDataContext(ids);
+      const missingIds = ids.filter(id => !existing.has(id));
+      const valueLoadRequest$ = missingIds.length > 0 ? this.loadEntitiesByIds(missingIds) : of(new Map());
+
+      return valueLoadRequest$.pipe(
+        map(loaded => {
+          loaded.forEach((v, k) => existing.set(k, v));
+          return existing;
+        }),
+        map(allValuesMap => Array.from(allValuesMap.values())) // TODO Sort?
+      );
+    } else {
+      this.logger.warn('Failed to select value by Ids: ' + ids + ' - DataContext not available.');
+      return EMPTY;
+    }
+  }
+
+  private loadEntitiesByIds(ids: TId[]): Observable<Map<TId, TEntity>> {
+    return this.dataContext.dataSource.findByIds(ids).pipe(
+      catchError(err => {
+        this.logger.error('Failed to load entities by ids: ' + ids, err);
+        return throwError(err);
+      }),
+      map(values => {
+        this.logger.debug('Loaded entities by id:', values);
+        const valueMap = new Map<TId, TEntity>();
+        values.forEach(v => valueMap.set(this.getEntityId(v), v));
+        return valueMap;
+      })
+    );
+  }
+
+  private findInDataContext(ids: TId[]): Map<TId, TEntity> {
+    const existingValues = new Map<TId, TEntity>();
+    if (ids?.length > 0) {
+      const data = this.dataContext.snapshot.data;
+      const requiredIds = new Set(ids);
+      data
+        .filter(d => requiredIds.has(this.getEntityId(d)))
+        .forEach(d => existingValues.set(this.getEntityId(d), d));
+    }
+    return existingValues;
+  }
+
+  private writeEntitiesSorted(entities: TEntity[]): TEntity[] {
+    const sorted = this.sortEntities(entities);
+    this._entities$.next(sorted);
+    return sorted;
+  }
+
+  private sortEntities(entities: TEntity[]): TEntity[] {
+    if (entities && this.entitiesSorts && this.entitiesSorts.length > 0) {
+      const sorted = SortUtil.sortData(entities, this.entitiesSorts);
+      if (!SortUtil.equalsExactRefs(entities, sorted)) {
+        // Only return a copy of the array if actually something changed
+        return sorted;
+      }
+    }
+    return entities;
+  }
+}

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

@@ -0,0 +1,89 @@
+<div *ngIf="(selectChips$ | async) as chipValues"
+                class="elder-flex-control"
+     [matTooltip]="(state$ | async)?.error"
+>
+
+  <mat-chip-list [selectable]="chipColorEnabled" multiple #chips>
+
+    <ng-container *ngIf="(mergedState$ | async) as state">
+      <div *ngIf="icon"
+           class="elder-input-prefix-icon-container flex-none"
+      >
+        <mat-icon *ngIf="icon" disabled
+                  class="elder-prefix-icon elder-select-icon elder-icon-small noselect"
+                  [class.loading]="state.loading"
+        >
+          {{icon}}
+        </mat-icon>
+      </div>
+    </ng-container>
+
+
+    <mat-chip *ngFor="let chipModel of chipValues"
+              class="noselect clickable-chip"
+              [value]="resolveChipValue(chipModel.value)"
+              [color]="chipModel.color" [selectable]="chipColorEnabled" [selected]="chipColorEnabled"
+              [removable]="chipModel.removeable"
+              (keydown)="onChipKeyDown($event, chipModel.value)"
+              (click)="onCurrentClicked(chipModel.value)"
+    >
+      <mat-chip-avatar
+        *ngIf="chipAvatarTemplate && !chipModel.avatarSpec.hide"
+        [class.chip-avatar-large]="chipModel.avatarSpec.large"
+      >
+        <ng-container
+          *ngTemplateOutlet="chipAvatarTemplate; context: {$implicit: chipModel}">
+        </ng-container>
+      </mat-chip-avatar>
+      <ng-container
+        *ngTemplateOutlet="chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}">
+      </ng-container>
+      <mat-icon matChipRemove
+                *ngIf="chipModel.removeable"
+                (click)="onClickRemoveChip($event, chipModel.value)">
+        cancel
+      </mat-icon>
+    </mat-chip>
+
+    <div class="layout-row place-start-center flex"
+         style="padding-top: 7px; padding-bottom: 7px;">
+
+      <!-- [matChipInputFor]="chips" -->
+      <ng-container
+        *ngTemplateOutlet="customInputTemplate || selectInput;">
+      </ng-container>
+
+      <button mat-icon-button type="button" class="elder-icon-button-small elder-browse-icon"
+              *ngIf="selectionPopup"
+              [disabled]="isLocked"
+              (click)="openSelectionPopup($event)" aria-label="Search"
+              elderStopEventPropagation
+              tabIndex="-1"
+      >
+        <mat-icon class="elder-select-icon">search</mat-icon>
+      </button>
+    </div>
+  </mat-chip-list>
+</div>
+
+<ng-template #selectInput>
+  <elder-select autocomplete elderClearSelect
+                class="elder-chip-input flex"
+                [data]="dataContext$ | async"
+                [disabled]="!!disabled"
+                [required]="!!required"
+                [readonly]="!!readonly"
+                [placeholder]="placeholder"
+                (entityUpdated)="appendEntity($event)"
+                [displayPropertyResolver]="displayPropertyResolver$ | async"
+                [valueTemplate]="valueTemplate"
+                [queryFilter]="queryFilter" [filters]="filters" [sorts]="sorts"
+                [isOptionDisabledFn]="isOptionDisabledInternalFn"
+                [isOptionHiddenFn]="isOptionHiddenInternalFn"
+  ></elder-select>
+</ng-template>
+
+<ng-template #simpleChipTemplate let-chipModel>
+  <span class="elder-chip-text">{{chipModel.displayText | elderTruncate:20}}</span>
+</ng-template>
+