@elderbyte/ngx-starter 14.10.0 → 14.11.1

package/src/lib/components/shell/drawers/elder-route-outlet-drawer.service.ts

@@ -0,0 +1,137 @@
+import { Injectable } from '@angular/core';
+import { MatDrawer } from '@angular/material/sidenav';
+import {ElderRouterOutletService} from './elder-router-outlet.service';
+import {Observable, Subject, Subscription} from 'rxjs';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderRouteOutletDrawerService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger('ElderRouteOutletDrawerService');
+
+  private _outletChangeSubscription: Subscription;
+  private readonly _outletDrawers = new Map<string, MatDrawer>();
+  private readonly _drawerVisibility = new Subject<MatDrawer>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private outletService: ElderRouterOutletService
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get drawerVisibilityChange(): Observable<MatDrawer> {
+    return this._drawerVisibility.asObservable();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Bind a named outlet to a mat-drawer.
+   * When the route outlet is active (i.e. present in the url), the drawer will be shown.
+   * @param routeOutlet
+   * @param drawer
+   */
+  public registerOutletDrawer(routeOutlet: string, drawer: MatDrawer): void {
+
+    if (!routeOutlet) { throw new Error('routeOutlet must not be null!'); }
+    if (!drawer) { throw new Error('drawer must not be null!'); }
+
+
+    const sub = drawer.closedStart.subscribe(
+      () => { this.outletService.deactivate(routeOutlet); }
+    );
+
+    // TODO Support un-subscribing / unregistering a outlet-drawer
+
+    this._outletDrawers.set(routeOutlet, drawer);
+
+    this.ensureOutletsAreObserved();
+  }
+
+  public findDrawer(routeOutlet: string): MatDrawer {
+    return this._outletDrawers.get(routeOutlet);
+  }
+
+  public openOutletDrawer(routeOutlet: string): void {
+    const drawer = this.findDrawer(routeOutlet);
+    if (drawer) {
+      this.openDrawer(drawer);
+    }
+  }
+
+  public closeOutletDrawer(routeOutlet: string): void {
+    const drawer = this.findDrawer(routeOutlet);
+    if (drawer) {
+      this.closeDrawer(drawer);
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private openDrawer(drawer: MatDrawer): Promise<any> {
+    const toggleResult = drawer.open('program');
+    this._drawerVisibility.next(drawer);
+    return toggleResult;
+  }
+
+  private closeDrawer(drawer: MatDrawer): Promise<any> {
+    const toggleResult = drawer.close();
+    this._drawerVisibility.next(drawer);
+    return toggleResult;
+  }
+
+  private updateDrawers(activeOutlets: Set<string>): void {
+    this._outletDrawers.forEach((drawer, outlet) => {
+      if (activeOutlets.has(outlet)) {
+        this.openDrawer(drawer);
+      } else {
+        this.closeDrawer(drawer);
+      }
+    });
+  }
+
+  private ensureOutletsAreObserved(): void {
+    if (!this._outletChangeSubscription) {
+      this._outletChangeSubscription = this.outletService.activeOutlets.subscribe(
+        activeOutlets => {
+          this.updateDrawers(activeOutlets);
+        }
+      );
+      this.updateDrawers(this.outletService.activeOutletsSnapshot);
+    }
+  }
+
+  private unsubscribeOutlets(): void {
+    if (this._outletChangeSubscription) {
+      this._outletChangeSubscription.unsubscribe();
+      this._outletChangeSubscription = null;
+    }
+  }
+
+}

package/src/lib/components/shell/drawers/elder-router-outlet.service.ts

@@ -0,0 +1,145 @@
+import { Injectable } from '@angular/core';
+import {debounceTime, filter, map} from 'rxjs/operators';
+import {ActivatedRouteSnapshot, NavigationEnd, NavigationExtras, Router, RouterStateSnapshot} from '@angular/router';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {Sets} from '../../../common/sets';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderRouterOutletService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger('ElderRouterOutletService');
+
+  private _activeOutlets: BehaviorSubject<Set<string>> = null;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private router: Router,
+  ) {
+  }
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Emits the current active outlets over time
+   */
+  public get activeOutlets(): Observable<Set<string>> {
+    this.ensureListener();
+    return this._activeOutlets.asObservable();
+  }
+
+  /**
+   * Gets a snapshot of the current active outlets
+   */
+  public get activeOutletsSnapshot(): Set<string> {
+    this.ensureListener();
+    return this._activeOutlets.value;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Checks if the given outlet is currently active
+   */
+  public isActive(outlet: string): boolean {
+    return this.activeOutletsSnapshot.has(outlet);
+  }
+
+  /**
+   * Deactivates the given outlet
+   */
+  public deactivate(outlet: string): Promise<boolean> {
+
+    if (this.isActive(outlet)) {
+      const command: any = {};
+      command['outlets'] = {};
+      command['outlets'][outlet] = null;
+
+      return this.router.navigate([
+        command
+      ],{queryParamsHandling: 'merge'} );
+    } else {
+      return Promise.resolve(false);
+    }
+  }
+
+  /**
+   * Activates the given outlet route with the given path
+   * @param outlet
+   * @param parts
+   * @param extras
+   */
+  public activate(outlet: string, parts: string[], extras?: NavigationExtras): Promise<boolean> {
+    const command: any = {};
+    command['outlets'] = {};
+    command['outlets'][outlet] = parts;
+    return this.router.navigate([command], extras);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private ensureListener(): void {
+    if (!this._activeOutlets) {
+      this._activeOutlets = new BehaviorSubject<Set<string>>(this.collectActiveOutlets());
+
+      this.router.events.pipe(
+        filter(event => event instanceof NavigationEnd),
+        debounceTime(60),
+        map(event => event as NavigationEnd)
+      ).subscribe(event => {
+        this.updateActiveOutlets();
+      });
+    }
+  }
+
+  private updateActiveOutlets(): void {
+    const found = this.collectActiveOutlets();
+    const current = this.activeOutletsSnapshot;
+    if (!Sets.equals(found, current)) {
+      this._activeOutlets.next(found);
+    }
+  }
+
+  private collectActiveOutlets(): Set<string> {
+    const rs: RouterStateSnapshot =  this.router.routerState.snapshot;
+    const snap: ActivatedRouteSnapshot = rs.root;
+    return this.collectActiveOutletsFor(snap);
+  }
+
+  private collectActiveOutletsFor(root: ActivatedRouteSnapshot): Set<string> {
+    const outlets = new Set<string>();
+    this.collectActiveOutletsRecursive(root, outlets);
+    return outlets;
+  }
+
+  private collectActiveOutletsRecursive(snap: ActivatedRouteSnapshot, outlets: Set<string>): void {
+    outlets.add(snap.outlet);
+    for (const c of snap.children) {
+      this.collectActiveOutletsRecursive(c, outlets);
+    }
+  }
+}

package/src/lib/components/shell/elder-shell-slot.directive.ts

@@ -0,0 +1,61 @@
+import {Directive, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ShellContentSlot} from './shell-content-slot';
+import {ElderShellService} from './elder-shell.service';
+
+@Directive({
+  selector: '[elderShellSlot]'
+})
+export class ElderShellSlotDirective implements OnInit, OnDestroy {
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  /** Slot at which template should be placed. */
+  @Input()
+  public elderShellSlot: ShellContentSlot;
+
+  /** If the column should be considered as default (fallback). */
+  @Input()
+  public elderShellSlotDefault: boolean;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private viewContainer: ViewContainerRef,
+    private elderShellService: ElderShellService,
+    public templateRef: TemplateRef<any>,
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    this.elderShellService.registerColumn(
+      this.elderShellSlot,
+      this.templateRef,
+      this.elderShellSlotDefault
+    );
+  }
+
+  public ngOnDestroy(): void {
+    this.elderShellService.deregisterColumn(
+      this.templateRef,
+      this.elderShellSlot
+    );
+  }
+
+}

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

@@ -0,0 +1,69 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ElderShellCenterDirective,
+  ElderShellComponent,
+  ElderShellSideLeftDirective,
+  ElderShellSideRightDirective
+} from './shell/elder-shell.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {TranslateModule} from '@ngx-translate/core';
+import {ElderToolbarModule} from '../navigation/toolbar/elder-toolbar.module';
+import {RouterModule} from '@angular/router';
+import {ElderShellNavigationToggleComponent} from './shell-navigation-toggle/elder-shell-navigation-toggle.component';
+import { ElderShellSlotDirective } from './elder-shell-slot.directive';
+import { ElderAppHeaderComponent } from './header/elder-app-header/elder-app-header.component';
+import {ElderPanelModule} from '../panels/elder-panel.module';
+import {ElderThemeModule} from '../theme/elder-theme.module';
+
+export * from './shell/elder-shell.component';
+export {ElderShellNavigationToggleComponent} from './shell-navigation-toggle/elder-shell-navigation-toggle.component';
+export {DrawerOutletBinding} from './drawers/drawer-outlet-binding';
+export {ElderRouteOutletDrawerService} from './drawers/elder-route-outlet-drawer.service';
+export {ElderRouterOutletService} from './drawers/elder-router-outlet.service';
+export {ElderShellService} from './elder-shell.service';
+export {ElderShellSlotDirective} from './elder-shell-slot.directive';
+export {ShellContentSlot} from './shell-content-slot';
+export {ElderAppHeaderComponent} from './header/elder-app-header/elder-app-header.component';
+
+@NgModule({
+    imports: [
+        CommonModule, RouterModule,
+
+        MatSidenavModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatListModule,
+        MatButtonModule,
+
+
+        ElderToolbarModule,
+
+        FlexLayoutModule, TranslateModule, ElderPanelModule, ElderThemeModule
+
+    ],
+  declarations: [
+    ElderShellComponent,
+    ElderShellSideLeftDirective,
+    ElderShellSideRightDirective,
+    ElderShellCenterDirective,
+    ElderShellNavigationToggleComponent,
+    ElderShellSlotDirective,
+    ElderAppHeaderComponent
+  ],
+  exports: [
+    ElderShellComponent,
+    ElderShellSideLeftDirective,
+    ElderShellSideRightDirective,
+    ElderShellCenterDirective,
+    ElderShellNavigationToggleComponent,
+    ElderShellSlotDirective,
+    ElderAppHeaderComponent
+  ]
+})
+export class ElderShellModule { }

package/src/lib/components/shell/elder-shell.service.ts

@@ -0,0 +1,176 @@
+
+import {Injectable, TemplateRef} from '@angular/core';
+import {NavigationEnd, NavigationExtras, Router} from '@angular/router';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {filter, map} from 'rxjs/operators';
+import {ElderRouterOutletService} from './drawers/elder-router-outlet.service';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {ShellContentSlot} from './shell-content-slot';
+import {TemplateSlotManager} from '../../common/templates/template-slot-manager';
+
+/**
+ * This service manages the side content.
+ * This is usually the left side which is a 'side nav' and the right side which shows detail information.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderShellService {
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger('ElderShellService');
+
+  private _navigationOpen = new BehaviorSubject<boolean>(false);
+  private _clickOutsideToClose = true;
+
+  private detailContentOutlet = 'side';
+
+  private readonly slotManager: TemplateSlotManager<ShellContentSlot>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private router: Router,
+    private routerOutletService: ElderRouterOutletService,
+  ) {
+
+    this.slotManager = new TemplateSlotManager(
+      [
+        'header',
+        'center',
+        'footer'
+      ]
+    );
+
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd),
+      map(event => event as NavigationEnd)
+    )
+      .subscribe(event => {
+        this.closeSideNav();
+      });
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Checks if the navigation is isOpen
+   */
+  public get navigationOpen(): boolean {
+    return this._navigationOpen.getValue();
+  }
+
+  public set navigationOpen(value: boolean) {
+    this._navigationOpen.next(value);
+  }
+
+  public get navigationOpenChange(): Observable<boolean> {
+    return this._navigationOpen.asObservable();
+  }
+
+  /**
+   * Allow closing the side content by clicking outside of it.
+   */
+  public get clickOutsideToClose(): boolean {
+    return this._clickOutsideToClose;
+  }
+
+
+  public set clickOutsideToClose(value: boolean) {
+    this._clickOutsideToClose = value;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Shell Slot Template API                                                 *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Returns an observable which emits the current active template for the given position
+   * over time.
+   */
+  public activeSlotTemplate(slot: ShellContentSlot): Observable<TemplateRef<any>> {
+    return this.slotManager.activeSlotTemplate(slot);
+  }
+
+  /**
+   * Registers the given template as toolbar column at the given slot.
+   *
+   * @param slot at which template should be placed
+   * @param template to set at slot
+   * @param isDefault if the given template should be used as app default
+   */
+  public registerColumn(slot: ShellContentSlot, template: TemplateRef<any>, isDefault = false): void {
+    this.slotManager.registerSlotTemplate(slot, template, isDefault);
+  }
+
+  /**
+   * Deregister the given template from the toolbar.
+   *
+   * @param template to deregister
+   * @param slot if set, the template will only be deregistered if it was registered at this slot (optional)
+   */
+  public deregisterColumn(template: TemplateRef<any>, slot?: ShellContentSlot) {
+    this.slotManager.deregisterSlotTemplate(template, slot);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+
+  /**
+   * Toggles the side navigation
+   */
+  public toggleSidenav(): boolean {
+    this.navigationOpen = !this.navigationOpen;
+    return this.navigationOpen;
+  }
+
+  /**
+   * Closes the side navigation
+   */
+  public closeSideNav(): void {
+    this.navigationOpen = false;
+  }
+
+  /**
+   * Closes the side detail content
+   */
+  public closeSideContent(): Promise<boolean> {
+    return this.routerOutletService.deactivate(this.detailContentOutlet);
+  }
+
+  public isSideContentActive(): boolean {
+    return this.routerOutletService.isActive(this.detailContentOutlet);
+  }
+
+  /**
+   * Shows the side content
+   * @param args The route arguments / path
+   * @param clickOutsideToClose If enabled, the side content can be closed by clicking outside of it.
+   * @param extras
+   */
+  public navigateSideContent(args: string[], clickOutsideToClose: boolean, extras?: NavigationExtras): Promise<boolean> {
+    this.clickOutsideToClose = clickOutsideToClose;
+    return this.routerOutletService.activate(this.detailContentOutlet, args, extras);
+  }
+
+}

package/src/lib/components/shell/header/elder-app-header/elder-app-header.component.html

@@ -0,0 +1,25 @@
+<mat-panel fxLayout="column" [color]="color$ | async" class="light" fxFill>
+  <div fxLayout="row" style="padding: 20px" fxFlex="none">
+    <div fxLayout="row" fxLayoutAlign="center center">
+      <mat-icon class="noselect title-icon" [color]="iconColor$ | async">{{icon}}</mat-icon>
+    </div>
+    <div fxLayout="column" fxLayoutAlign="center start">
+      <div fxLayout="column" fxLayoutAlign="center center" style="width: 100%">
+        <div fxLayout="row" fxLayoutAlign="start end" fxLayoutGap="5px">
+          <span id="title" class="noselect" style="font-size: 28px">{{title}}</span>
+          <span class="mat-caption noselect"><small>{{version}}</small></span>
+        </div>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="start center">
+        <span class="mat-caption noselect">
+          <span *ngIf="!subTitleLink">{{subTitle}}</span>
+          <a *ngIf="subTitleLink" [href]="subTitleLink" target="_blank" style="text-decoration:none; color: inherit">{{subTitle}}</a>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Project child content here -->
+  <ng-content></ng-content>
+
+</mat-panel>