Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.ts

   1 import {Component, Input, OnInit, AfterViewInit, Host} from '@angular/core';
   2
   3 interface LinkTableLink {
   4     label: string;
   5     url?: string;
   6     routerLink?: string;
   7 }
   8
   9 @Component({
  10     selector: 'eg-link-table',
  11     templateUrl: './link-table.component.html'
  12 })
  13
  14 export class LinkTableComponent implements AfterViewInit {
  15     @Input() columnCount: number;
  16     links: LinkTableLink[];
  17     rowBuckets: any[];
  18     colList: number[];
  19     colWidth: number;
  20
  21     constructor() {
  22         this.links = [];
  23         this.rowBuckets = [];
  24         this.colList = [];
  25     }
  26
  27     ngAfterViewInit() {
  28         // table-ize the links
  29         const rowCount = Math.ceil(this.links.length / this.columnCount);
  30         this.colWidth = Math.floor(12 / this.columnCount); // Bootstrap 12-grid
  31
  32         for (let col = 0; col < this.columnCount; col++) {
  33             this.colList.push(col);
  34         }
  35
  36         // Modifying values in AfterViewInit without other activity
  37         // happening can result in the modified values not getting
  38         // displayed until some action occurs.  Modifing after
  39         // via timeout works though.
  40         setTimeout(() => {
  41             for (let row = 0; row < rowCount; row++) {
  42                 this.rowBuckets[row] = [
  43                     this.links[row],
  44                     this.links[row + Number(rowCount)],
  45                     this.links[row + Number(rowCount * 2)]
  46                 ];
  47             }
  48         });
  49     }
  50 }
  51
  52 @Component({
  53     selector: 'eg-link-table-link',
  54     template: '<ng-template></ng-template>'
  55 })
  56
  57 export class LinkTableLinkComponent implements OnInit {
  58     @Input() label: string;
  59     @Input() url: string;
  60     @Input() routerLink: string;
  61
  62     constructor(@Host() private linkTable: LinkTableComponent) {}
  63
  64     ngOnInit() {
  65         this.linkTable.links.push({
  66             label : this.label,
  67             url: this.url,
  68             routerLink: this.routerLink
  69         });
  70     }
  71 }
  72
  73