@elderbyte/ngx-starter 14.12.0-beta6 → 14.12.0

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

@@ -1,451 +0,0 @@
-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

@@ -1,89 +0,0 @@
-<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>
-