All files window.component.ts

94.29% Statements 33/35
70.83% Branches 17/24
88.89% Functions 8/9
93.75% Lines 30/32
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 1041x                     1x 1x 1x   1x 1x                                                                                     1x 1x   1x 1x 1x 1x         7x   1x 6x 6x     1x 3x 3x 3x 3x   3x 4x       1x 4x     1x 1x 1x       1x       1x  
import {
  AfterContentInit,
  Component,
  ContentChildren,
  ElementRef,
  Input,
  OnDestroy,
  OnInit,
  QueryList,
  ViewChild,
} from '@angular/core';
import { MdButton } from '@angular/material';
import { NguiOverlayManager } from '@ngui/overlay';
import { Observable, Subscription } from 'rxjs';
 
import { NgxMaterialStateComponent } from './state.component';
import { NgxMaterialWindowService } from './window.service';
 
@Component({
  selector: 'ngx-md-window',
  template: `
    <div class="ngx-md-window" #card>
      <md-card>
        <div class="spinner-wrap" #spinnerWrap>
          <div [id]="overlayId" ngui-overlay-position="top center">
            <md-spinner class="spinner"></md-spinner>
          </div>
        </div>
        <md-card-header fxLayout="row" fxLayoutAlign="space-between" class="ngx-md-window-header">
          <md-card-title style="margin-bottom: 0;">
            <h4 class="ngx-md-window-header-title">{{ title }}</h4>
          </md-card-title>
          <div fxLayout="row">
            <button md-icon-button (click)="showOverlay($event)" #reloadBtn>
              <md-icon>replay</md-icon>
            </button>
            <div *ngIf="stateComponents.length > 0">
              <button
                md-icon-button
                [mdMenuTriggerFor]="menu">
                <md-icon>more_vert</md-icon>
              </button>
              <md-menu #menu="mdMenu">
                <button md-menu-item *ngFor="let cmp of stateComponents" (click)="setActiveState(cmp.state.name)">
                  <md-icon *ngIf="cmp.state.icon">{{ cmp.state.icon }}</md-icon>
                  <span>{{ cmp.state.linkName }}</span>
                </button>
              </md-menu>
            </div>
          </div>
        </md-card-header>
        <md-card-content style="padding: 8px">
          <ng-content></ng-content>
        </md-card-content>
      </md-card>
    </div>
  `,
  styles: []
})
export class NgxMaterialWindowComponent implements OnInit, OnDestroy, AfterContentInit {
  @Input() title: string;
 
  @ContentChildren(NgxMaterialStateComponent) stateComponents: QueryList<NgxMaterialStateComponent>;
  @ViewChild('card') card: ElementRef;
  @ViewChild('spinnerWrap') spinnerWrap: ElementRef;
  @ViewChild('reloadBtn') reloadBtn: MdButton;
 
  overlayId: string;
  overlaySubject: Subscription;
 
  constructor(private overlayManager: NguiOverlayManager, private windowService: NgxMaterialWindowService) {}
 
  ngOnInit() {
    this.overlayId = Math.random().toString();
    this.windowService.setOverlayFunction(this.showOverlay.bind(this));
  }
 
  ngAfterContentInit() {
    const click$ = Observable.fromEvent(this.reloadBtn._getHostElement(), 'click');
    const subject$ = this.windowService.getOverlaySubject();
    click$.subscribe(subject$);
    this.overlaySubject = subject$.subscribe(this.showOverlay.bind(this));
 
    this.stateComponents.forEach(
      (cmp: NgxMaterialStateComponent, index: number) => (cmp.state.isActive = index === 0 ? true : false)
    );
  }
 
  ngOnDestroy() {
    this.overlaySubject.unsubscribe();
  }
 
  setActiveState(stateName: string) {
    this.stateComponents.forEach(
      (cmp: NgxMaterialStateComponent) => (cmp.state.isActive = cmp.state.name === stateName ? true : false)
    );
  }
 
  showOverlay(event?: Event) {
    this.spinnerWrap.nativeElement.style.height = `${this.card.nativeElement.offsetHeight}px`;
    this.overlayManager.open(this.overlayId, event);
  }
}