@elderbyte/ngx-starter 14.11.0 → 14.11.1

package/src/lib/components/card-organizer/card-organizer/elder-card-organizer.component.ts

@@ -0,0 +1,148 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  Directive,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  TemplateRef,
+} from '@angular/core';
+import {CardOrganizerData} from '../card-organizer-data';
+import {CardDropEvent, CardStack} from '../card-stack';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {Observable} from 'rxjs/internal/Observable';
+import {ElderStackCardDirective} from './elder-stack-card.directive';
+
+@Component({
+  selector: 'elder-card-organizer',
+  templateUrl: './elder-card-organizer.component.html',
+  styleUrls: ['./elder-card-organizer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderCardOrganizerComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private _organizerModel: CardOrganizerData<any, any>;
+
+  public stacks$: Observable<CardStack<any, any>[]>;
+
+  @Input()
+  public canRemove = true;
+
+  @Input()
+  public removeConfirmation: (card: any) => Observable<boolean>;
+
+  @Input()
+  public copyOnDrag: boolean;
+
+  /**
+   * If enabled, the card organizer will
+   * automatically handle card drag & drops
+   * and move card from one stack to another and move
+   * them inside a stack.
+   */
+  @Input()
+  public autoMoveCards = false;
+
+  @Input()
+  public headerEnabled = true;
+
+  @Input()
+  public canEnterPredicate: (card: any, stack: CardStack<any, any>) => boolean;
+
+  @Output('requestNewCard')
+  public readonly requestNewCard = new EventEmitter<CardStack<any, any>>();
+
+  @Output('requestRemoveCard')
+  public readonly requestRemoveCard = new EventEmitter<any>();
+
+  @Output('cardClick')
+  public readonly cardClick = new EventEmitter<any>();
+
+  @Output('cardDropped')
+  public readonly cardDropped = new EventEmitter<CardDropEvent<any, any>>();
+
+  @ContentChild(ElderStackCardDirective, { read: TemplateRef })
+  public stackCardTemplate: TemplateRef<any>;
+
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+
+  }
+
+  @HostListener('document:keydown.shift', ['$event']) onKeydownHandler(event: KeyboardEvent) {
+    this.copyOnDrag = true;
+  }
+
+  @HostListener('document:keyup.shift', ['$event']) onKeyupHandler(event: KeyboardEvent) {
+    this.copyOnDrag = false;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get organizerModel(): CardOrganizerData<any, any> {
+    return this._organizerModel;
+  }
+
+  @Input()
+  public set organizerModel(value: CardOrganizerData<any, any>) {
+    this._organizerModel = value;
+    if (this._organizerModel) {
+      this.stacks$ = this._organizerModel.stacks;
+    } else {
+      this.stacks$ = null;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public onRequestNewCard(stack: CardStack<any, any>): void {
+      this.requestNewCard.next(stack);
+  }
+
+  public onRequestRemoveCard(cardToDelete: any): void {
+      this.requestRemoveCard.next(cardToDelete);
+  }
+
+  public onCardClicked(clickedCard: any): void {
+    this.cardClick.next(clickedCard);
+  }
+
+  public onCardDropped(event: CardDropEvent<any, any>): void {
+    this.cardDropped.next(event);
+  }
+
+}

package/src/lib/components/card-organizer/card-organizer/elder-stack-card.directive.ts

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

package/src/lib/components/card-organizer/card-organizer-data.ts

@@ -0,0 +1,124 @@
+import { CardStack } from './card-stack';
+import { Observable, BehaviorSubject } from 'rxjs';
+import {CollectionUtil} from '../../common/utils/collection-util';
+import {map} from 'rxjs/operators';
+
+/**
+ * Represents the data-model of a data driven card organizer.
+ *
+ * This component organizes cards in card-stacks.
+ *
+ */
+export class CardOrganizerData<T, D = any> {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly _stacks: BehaviorSubject<CardStack<T, D>[]>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    initialStacks?: CardStack<T, D>[],
+    sort?: ((a: T, b: T) => number)
+  ) {
+    this._stacks = new BehaviorSubject<CardStack<T, D>[]>(initialStacks ? initialStacks : []);
+    this.sort = sort;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get stacks(): Observable<CardStack<T, D>[]> {
+      return this._stacks.asObservable();
+  }
+
+  public get stackIds(): Observable<string[]> {
+    return this.stacks.pipe(
+      map(stacks => stacks.map(s => s.id))
+    );
+  }
+
+  public get stacksSnapshot(): CardStack<T, D>[] {
+    return this._stacks.getValue();
+  }
+
+  public set sort(sort: ((a: T, b: T) => number)) {
+    this.stacksSnapshot.forEach(s => s.sort = sort);
+  }
+
+  public get cards(): T[] {
+    const cards: T[] = [];
+    this.stacksSnapshot.forEach(stack => cards.push(...stack.cardsSnapshot));
+    return cards;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Adds the given card to the stack with the given id.
+   * @param card The card data
+   * @param stackId The stack id
+   */
+  public addCard(stackId: string, card: T): void {
+    const stack = this.findStackById(stackId);
+    if (stack) {
+      stack.addCard(card);
+    }
+  }
+
+  /**
+   * Replaces all cards in the matching stacks, defined by the stack-id-getter
+   * @param cards
+   * @param stackIdGetter
+   */
+  public replaceStackCardsDynamic(cards: T[], stackIdGetter: ((item: T) => string)) {
+
+    const grouped = CollectionUtil.groupByKey<string, T>(cards, stackIdGetter);
+
+    this.stacksSnapshot.forEach(stack => {
+      const newData = grouped.get(stack.id);
+      if (newData) {
+        stack.replaceCards(newData);
+      } else {
+        stack.clear();
+      }
+    });
+  }
+
+  /**
+   * Replace all cards in the given stack with the new cards.
+   * @param cards
+   * @param stackId
+   */
+  public replaceStackCards(stackId: string, cards: T[]) {
+    const stack = this.findStackById(stackId);
+    if (stack) {
+      stack.replaceCards(cards);
+    }
+  }
+
+  public findStackByData(data: D): CardStack<T, D> {
+    return this._stacks.getValue().find(s => s.data === data);
+  }
+
+  public findStackById(id: string): CardStack<T, D> {
+    return this._stacks.getValue().find(s => s.id === id);
+  }
+
+}
+

package/src/lib/components/card-organizer/card-stack/elder-card-stack.component.html

@@ -0,0 +1,72 @@
+<div fxLayout="column" class="card-stack hoverme" fxFlex>
+
+  <!-- Header -->
+  <header *ngIf="headerEnabled"
+          fxLayout="row" fxFlex="none" fxLayoutAlign="start center" fxLayoutGap="10px"
+          class="stack-header padding-10">
+
+    <h3 class="mat-body-2 noselect">{{headerTitle | translate}}</h3>
+    <small class="mat-caption noselect">({{(cards$ | async)?.length}})</small>
+
+    <span fxFlex></span>
+
+    <button mat-icon-button type="button" (click)="onRequestNewCard($event)">
+      <mat-icon>add</mat-icon>
+    </button>
+
+  </header>
+  <mat-divider *ngIf="headerEnabled"></mat-divider>
+
+
+  <!-- card list -->
+  <div fxFlex fxLayout="column" class="card-container">
+
+    <div fxLayout="column" fxLayoutGap="10px" class="scrollable padding-10 card-list"
+         [id]="stackId"
+         cdkDropList
+         [cdkDropListData]="stack"
+         [cdkDropListConnectedTo]="connectedTo"
+
+         [cdkDropListEnterPredicate]="enterPredicate"
+         (cdkDropListEntered)="cardEntered($event)"
+         (cdkDropListExited)="cardExited($event)"
+         (cdkDropListDropped)="cardDrop($event)"
+    >
+
+      <!-- card -->
+      <elder-card
+        *ngFor="let card of cards$ | async; let i = index"
+        class="card" fxFlex="none" padding="10px"
+        cdkDrag [cdkDragData]="card"
+        (click)="onCardSelected($event, card)">
+
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
+
+          <ng-container
+            *ngTemplateOutlet="cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}"></ng-container>
+
+          <button mat-icon-button type="button"
+            *ngIf="canRemove"  class="hide" (click)="onRequestRemoveCard($event, card)">
+            <mat-icon>close</mat-icon>
+          </button>
+
+        </div>
+
+      </elder-card>
+
+    </div>
+
+  </div>
+
+
+  <ng-template #simpleCardTemplate let-card>
+    <div fxLayout="column" fxFlex>
+      <p class="noselect">{{card}}</p>
+    </div>
+  </ng-template>
+
+</div>
+
+
+
+

package/src/lib/components/card-organizer/card-stack/elder-card-stack.component.ts

@@ -0,0 +1,250 @@
+import {ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef} from '@angular/core';
+import {CardDropEvent, CardStack} from '../card-stack';
+import {Observable} from 'rxjs/internal/Observable';
+import {first} from 'rxjs/operators';
+import {CdkDrag, CdkDragDrop, CdkDragEnter, CdkDragExit, CdkDropList} from '@angular/cdk/drag-drop';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderStackCardDirective} from '../card-organizer/elder-stack-card.directive';
+
+@Component({
+  selector: 'elder-card-stack, ebs-card-stack',
+  templateUrl: './elder-card-stack.component.html',
+  styleUrls: ['./elder-card-stack.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderCardStackComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger('ElderCardStackComponent');
+
+
+  private _stack: CardStack<any, any>;
+
+  public cards$: Observable<any[]>;
+
+  @Input()
+  public stackId: string;
+
+  @Input()
+  public headerEnabled = true;
+
+  @Input()
+  public headerTitle: string;
+
+  @Input()
+  public canRemove: boolean;
+
+  @Input()
+  public removeConfirmation: (card: any) => Observable<boolean>;
+
+  @Output('requestNewCard')
+  public readonly requestNewCard = new EventEmitter<CardStack<any, any>>();
+
+  @Output('requestRemoveCard')
+  public readonly requestRemoveCard = new EventEmitter<any>();
+
+  @Output('cardClick')
+  public readonly cardClick = new EventEmitter<any>();
+
+  @Output('cardDropped')
+  public readonly cardDropped = new EventEmitter<CardDropEvent<any, any>>();
+
+  @Input()
+  public canEnterPredicate: (card: any, stack: CardStack<any, any>) => boolean;
+
+  @Input()
+  public connectedTo: string[] = [];
+
+  /**
+   * If enabled, the card stack will
+   * automatically handle card drag & drops
+   * and move card from one stack to another and move
+   * them inside a stack.
+   */
+  @Input()
+  public autoMoveCards = false;
+
+  // Templates
+
+  @ContentChild(ElderStackCardDirective, { read: TemplateRef, static: true })
+  public cardTemplateQuery: TemplateRef<any>;
+  private _cardTemplate: TemplateRef<any>;
+
+  @Input()
+  public canCollapse = false;
+
+  @Input()
+  public copyOnDrag = false;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+    this.stackId = 'id-' + Math.floor((Math.random() * 6) + 1);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void  {
+
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set cardTemplate(template: TemplateRef<any>) {
+    this._cardTemplate = template;
+  }
+
+  public get cardTemplate(): TemplateRef<any> {
+    return this._cardTemplate || this.cardTemplateQuery;
+  }
+
+  public get stack(): CardStack<any, any> {
+    return this._stack;
+  }
+
+  @Input()
+  public set stack(value: CardStack<any, any>) {
+    this._stack = value;
+
+    if (this._stack) {
+      this.cards$ = this._stack.cards;
+    } else {
+      this.cards$ = null;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API Drag & Drop                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  public cardEntered(event: CdkDragEnter<any>): void {
+    // this.logger.debug('Drag enter:', event);
+  }
+
+  public cardExited(event: CdkDragExit<any>): void {
+    // this.logger.debug('Drag exit', event);
+  }
+
+  public cardDrop(event: CdkDragDrop<CardStack<any, any>>): void {
+
+    const cardDrop = new CardDropEvent(
+      event.previousContainer.data,
+      event.container.data,
+      event.item.data,
+      this.copyOnDrag,
+      event.previousIndex,
+      event.currentIndex,
+      event.isPointerOverContainer
+    );
+
+    if (this.autoMoveCards) {
+      this.handleCardDrop(cardDrop); // TODO Make configurable or disable when custom sort is enabled?
+    }
+
+    this.cardDropped.next(cardDrop);
+  }
+
+  public get enterPredicate(): (drag: CdkDrag<any>, drop: CdkDropList<any>) => boolean {
+    return (drag: CdkDrag<any>, drop: CdkDropList<any>)  => {
+      if (this.canEnterPredicate) {
+       return this.canEnterPredicate(drag.data, drop.data);
+      }
+      return true;
+    };
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+
+  public onRequestNewCard(event: MouseEvent): void {
+    this.requestNewCard.next(this._stack);
+  }
+
+  public onRequestRemoveCard(event: MouseEvent, card: any): void {
+
+    if (event) {
+      event.stopPropagation();
+    }
+
+
+    if (this.removeConfirmation !== undefined) {
+
+      this.removeConfirmation(card).pipe(first())
+        .subscribe(
+          confirmed => {
+            if (confirmed) { this.removeCard(card); }
+          });
+
+    } else {
+      this.removeCard(card);
+    }
+
+  }
+
+  public onCardSelected(event: MouseEvent, card: any): void {
+    this.cardClick.next(card);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  private removeCard(card: any): void {
+    this._stack.removeCard(card);
+    this.requestRemoveCard.next(card);
+  }
+
+  /**
+   * React to drag and drop events -
+   * will move cards between stacks and sort them if possible.
+   * @param cardDrop
+   */
+  private handleCardDrop(cardDrop: CardDropEvent<any, any>): void {
+    if (cardDrop.fromStack === cardDrop.toStack
+      && cardDrop.toStack === this._stack) {
+
+      // Drag & Drop inside the same stack -> sort
+
+      if (!this._stack.sort) {
+        // Only allow manual sort when the user did not provide
+        // a general sort function
+        this._stack.moveCard(cardDrop.fromIndex, cardDrop.toIndex);
+      }
+    } else {
+
+      // Dropped Card from another stack
+
+      if (!cardDrop.copy) {
+        cardDrop.fromStack.removeCard(cardDrop.card);
+      }
+      cardDrop.toStack.addCard(cardDrop.card, cardDrop.toIndex);
+    }
+  }
+
+}