diff src/app/query-result-table.component.ts @ 58:3b4046e0cc02 default

Merge from ng2-table branch. d7c947909ab888c013171b8c037e4f9fab30fe57
author casties
date Wed, 29 Mar 2017 17:19:12 +0200
parents d7c947909ab8
children
line wrap: on
line diff
--- a/src/app/query-result-table.component.ts	Mon Mar 20 18:50:31 2017 +0100
+++ b/src/app/query-result-table.component.ts	Wed Mar 29 17:19:12 2017 +0200
@@ -1,14 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 
-//import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table';
-//import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
-
 import {QueryState} from './query-state';
 
 @Component({
     selector: 'query-result',
     template: `
-    <div *ngIf="queryState?.results">
+    <div *ngIf="queryState?.numResults > 0">
         <span>Cypher query:</span>
         <pre>{{queryState.getQueryText()}}</pre>
         <h2>Query result</h2>
@@ -17,7 +14,7 @@
         <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div>
         <div *ngIf="showTable">
             <div>Show 
-                <select (change)="onSelectNumItems($event)">
+                <select name="numItems" (change)="onSelectNumItems($event)">
                     <option value="10">10</option>
                     <option value="100">100</option>
                     <option value="0">all</option>
@@ -27,16 +24,14 @@
             <div>
                 <form (ngSubmit)="onSelectCols($event)">
                     Columns:
-                    <span *ngFor=" let col of allColumns">
-                        <input type="checkbox" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}}
+                    <span *ngFor="let col of allColumns">
+                        <input type="checkbox" name="col{{col.name}}" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}}
                     </span> 
                     <button type="submit">change columns</button>
                 </form>
             </div>
-            <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div>
-            <pagination *ngIf="config.paging"
-                        class="pagination-sm"
-                        [(ngModel)]="page"
+            <pagination *ngIf="config.paging" class="pagination-sm"
+                        [(ngModel)]="currentPage"
                         [totalItems]="length"
                         [itemsPerPage]="itemsPerPage"
                         [maxSize]="maxSize"
@@ -46,15 +41,17 @@
                         (numPages)="numPages = $event">
             </pagination>
             <ng-table 
-                     [config]="config.sorting"
+                     [config]="config"
                      (tableChanged)="onChangeTable($event)"
                      [rows]="rows" [columns]="columns">
             </ng-table>
         </div>
     </div>
-        `,
-    inputs: ['queryState', 'resultInfo'],
-//    directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES]
+    <div *ngIf="!(queryState?.numResults > 0)">
+        <h2>No results found</h2>
+    </div>
+       `,
+    inputs: ['queryState', 'resultInfo']
 })
 
 export class QueryResultTableComponent implements OnInit { 
@@ -69,7 +66,7 @@
     
     public rows: Array<any>;
      
-    public page: number = 1;
+    public currentPage: number = 1;
     public itemsPerPage: number = 10;
     public maxSize: number = 5;
     public numPages: number = 1;
@@ -84,12 +81,14 @@
     ngOnChanges(changes: any) {
         console.debug("result table changed! changes=", changes);
         this.data = this.queryState.results;
-        this.allColumns = this.queryState.resultColumns;
-        this.columns = this.allColumns.filter(c => c.show);
-        this.config.sorting = this.columns;
-        this.config.paging = {'page': this.page, 'itemsPerPage': this.itemsPerPage};
-        this.showTable = (this.data.length < 1000);
-        this.onChangeTable(this.config);
+        if (this.data.length > 0) {
+            this.allColumns = this.queryState.resultColumns;
+            this.columns = this.allColumns.filter(c => c.show);
+            this.config.sorting = this.columns;
+            this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
+            this.showTable = (this.data.length < 1000);
+            this.onChangeTable(this.config);
+        }
     }
     
     ngOnInit() {
@@ -106,7 +105,7 @@
             this.itemsPerPage = num;
         }
         // update something
-        this.config.paging = {'page': this.page, 'itemsPerPage': this.itemsPerPage};
+        this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
         this.onChangeTable(this.config);
     }
     
@@ -116,7 +115,7 @@
         this.config.sorting = this.columns;
     }
     
-    changePage(page:any, data:Array<any> = this.data):Array<any> {
+    changePage(page: any, data: Array<any> = this.data): Array<any> {
         let start = (page.page - 1) * page.itemsPerPage;
         let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
         return data.slice(start, end);
@@ -163,8 +162,8 @@
             Object.assign(this.config.sorting, config.sorting);
             // changing sorting resets page
             if (page == null) {
-                this.page = 1;
-                page = {'page': this.page, 'itemsPerPage': this.itemsPerPage};
+                this.currentPage = 1;
+                page = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
             }
         }