feat(Table): user resizable columns

GetTerminus · Oct 25, 2019 · 9a071ea · 9a071ea
1 parent d5ac14c
commit 9a071ea
Show file tree

Hide file tree

Showing 15 changed files with 1,073 additions and 244 deletions.
diff --git a/demo/app/components/table/table.component.html b/demo/app/components/table/table.component.html
@@ -1,4 +1,18 @@
-<div fxLayout="row" fxLayoutAlign="end center">
+<div fxLayout="row" fxLayoutAlign="space-between center">
+  <div style="font-size: 12px;">
+    <p>
+      To get around GitHub rate limiting, we cache response data by default.
+      <br>
+      Clear cached data and/or disable below.
+    </p>
+    <label style="margin-right: 1rem;">
+      Use cached data:
+      <input type="checkbox" [(ngModel)]="useCachedData">
+    </label>
+    <button (click)="clearCachedData()">Clear cached GitHub data</button>
+  </div>
+
+  <span fxFlex></span>
 
   <ts-select
     label="Show/hide columns"
@@ -18,21 +32,22 @@
   <ts-table
     [dataSource]="dataSource"
     [columns]="resizableColumns"
+    (columnsChange)="columnsChange($event)"
     tsSort
     tsVerticalSpacing
     #myTable="tsTable"
   >
 
-    <ng-container tsColumnDef="title" sticky>
-      <ts-header-cell *tsHeaderCellDef>
+    <ng-container tsColumnDef="title">
+      <ts-header-cell *tsHeaderCellDef sticky>
         Title
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
         {{ item.title }}
       </ts-cell>
     </ng-container>
 
-    <ng-container tsColumnDef="updated" noWrap="true">
+    <ng-container tsColumnDef="updated" noWrap="true" alignment="right">
       <ts-header-cell *tsHeaderCellDef ts-sort-header>
         Updated
       </ts-header-cell>
@@ -60,7 +75,7 @@
     </ng-container>
 
     <ng-container tsColumnDef="number" noWrap="true" alignment="right">
-      <ts-header-cell *tsHeaderCellDef>
+      <ts-header-cell *tsHeaderCellDef ts-sort-header>
         Number
       </ts-header-cell>
       <ts-cell *tsCellDef="let item">
@@ -127,10 +142,7 @@
     </ng-container>
 
     <ts-header-row *tsHeaderRowDef="myTable.columnNames; sticky: true"></ts-header-row>
-
-    <ts-row *tsRowDef="let row; columns: myTable.columnNames;">
-    </ts-row>
-
+    <ts-row *tsRowDef="let row; columns: myTable.columnNames;"></ts-row>
   </ts-table>
 </div>
 
@@ -143,3 +155,6 @@
   ></ts-paginator>
 </div>
 
+<div>
+  <button (click)="log()">Log column definitions</button>
+</div>
diff --git a/demo/app/components/table/table.component.scss b/demo/app/components/table/table.component.scss
@@ -1,15 +1,12 @@
-@import '~@terminus/ui/helpers';
-
-
 .example-container {
   height: 400px;
-  overflow: auto;
-  @include visible-scrollbars;
 }
 
 .truncate {
   display: block;
   max-height: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-word;
 }
diff --git a/demo/app/components/table/table.component.ts b/demo/app/components/table/table.component.ts
@@ -4,14 +4,19 @@ import {
   Component,
   ViewChild,
 } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import {
+  DomSanitizer,
+  SafeHtml,
+} from '@angular/platform-browser';
 import {
   TsPaginatorComponent,
   TsPaginatorMenuItem,
 } from '@terminus/ui/paginator';
 import { TsSortDirective } from '@terminus/ui/sort';
 import {
   TsColumn,
+  TsTableColumnsChangeEvent,
+  TsTableComponent,
   TsTableDataSource,
 } from '@terminus/ui/table';
 import {
@@ -101,6 +106,7 @@ export class ExampleHttpDao {
   constructor(private http: HttpClient) {}
 
   public getRepoIssues(sort: string, order: string, page: number, perPage: number): Observable<GithubApi> {
+    console.log('HITTING GITHUB');
     const href = `https://api.github.com/search/issues`;
     const requestUrl = `${href}?q=repo:GetTerminus/terminus-ui`;
     const requestParams = `&sort=${sort}&order=${order}&page=${page + 1}&per_page=${perPage}`;
@@ -116,6 +122,8 @@ export class ExampleHttpDao {
 })
 export class TableComponent implements AfterViewInit {
   public allColumns = COLUMNS_SOURCE_GITHUB.slice(0);
+  public savedResponse: GithubApi | null = null;
+  public useCachedData = true;
   public displayedColumns = [
     'title',
     'updated',
@@ -136,22 +144,25 @@ export class TableComponent implements AfterViewInit {
       name: 'title',
       width: '400px',
     },
-    { name: 'updated' },
-    { name: 'comments' },
+    { name: 'number' },
     {
-      name: 'assignee',
-      width: '160px',
+      name: 'updated',
+      // width: '300px',
     },
-    { name: 'number' },
+    // { name: 'comments' },
+    // {
+    //   name: 'assignee',
+    //   width: '160px',
+    // },
     {
       name: 'labels',
-      width: '260px',
+      // width: '260px',
     },
-    { name: 'created' },
-    { name: 'id' },
+    // { name: 'created' },
+    // { name: 'id' },
     {
       name: 'body',
-      width: '500px',
+      // width: '500px',
     },
     { name: 'html_url' },
   ];
@@ -162,6 +173,8 @@ export class TableComponent implements AfterViewInit {
   @ViewChild(TsPaginatorComponent, { static: true })
   public readonly paginator!: TsPaginatorComponent;
 
+  @ViewChild('myTable', { static: false })
+  public readonly myTable!: TsTableComponent;
 
   constructor(
     private domSanitizer: DomSanitizer,
@@ -182,14 +195,21 @@ export class TableComponent implements AfterViewInit {
     merge(this.sort.sortChange, this.paginator.pageSelect, this.paginator.recordsPerPageChange)
       .pipe(
         startWith({}),
-        switchMap(() => this.exampleDatabase.getRepoIssues(
-          this.sort.active,
-          this.sort.direction,
-          this.paginator.currentPageIndex,
-          this.paginator.recordsPerPage,
-        )),
+        switchMap(() => {
+          if (this.useCachedData && this.savedResponse && this.savedResponse.items) {
+            return of(this.savedResponse);
+          }
+
+          return this.exampleDatabase.getRepoIssues(
+            this.sort.active,
+            this.sort.direction,
+            this.paginator.currentPageIndex,
+            this.paginator.recordsPerPage,
+          );
+        }),
         map(data => {
           console.log('Demo: fetched data: ', data);
+          this.savedResponse = data as GithubApi;
           this.resultsLength = data.total_count;
 
           return data.items;
@@ -203,17 +223,28 @@ export class TableComponent implements AfterViewInit {
       });
   }
 
+  public clearCachedData(): void {
+    this.savedResponse = null;
+  }
 
   public perPageChange(e: number): void {
-    console.log('DEMO records per page changed: ', e);
+    console.log('DEMO: Records per page changed: ', e);
   }
 
   public onPageSelect(e: TsPaginatorMenuItem): void {
-    console.log('DEMO page selected: ', e);
+    console.log('DEMO: Page selected: ', e);
+  }
+
+  public columnsChange(e: TsTableColumnsChangeEvent): void {
+    console.log('DEMO: Columns change: ', e);
   }
 
   public sanitize(content): SafeHtml {
     return this.domSanitizer.bypassSecurityTrustHtml(content);
   }
 
+  public log() {
+    console.log('Demo: columns: ', this.myTable.columns);
+  }
+
 }
diff --git a/terminus-ui/table/package.json b/terminus-ui/table/package.json
@@ -3,8 +3,11 @@
     "lib": {
       "entryFile": "src/public-api.ts",
       "umdModuleIds": {
-        "@terminus/ngx-tools/type-guards": "terminus.ngxTools.type-guards"
+        "@terminus/ngx-tools/browser": "terminus.ngxTools.browser",
+        "@terminus/ngx-tools/type-guards": "terminus.ngxTools.type-guards",
+        "@terminus/ngx-tools/utilities": "terminus.ngxTools.utilities"
       }
     }
   }
 }
+