diff app/query-result-table.component.ts @ 31:4926885f8a99

selectable result columns. nicer cypher query output.
author casties
date Mon, 01 Feb 2016 20:10:55 +0100
parents 193271b6b9d2
children 739eb38ec2a2
line wrap: on
line diff
--- a/app/query-result-table.component.ts	Mon Feb 01 17:29:04 2016 +0100
+++ b/app/query-result-table.component.ts	Mon Feb 01 20:10:55 2016 +0100
@@ -10,7 +10,7 @@
     template: `
     <div *ngIf="queryState && queryState.results">
         <span>Cypher query:</span>
-        <pre>{{queryState.resultCypherQuery}}</pre>
+        <pre>{{queryState.getQueryText()}}</pre>
         <h2>Query result</h2>
         <pre>{{resultInfo}}</pre>
         <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div>
@@ -24,6 +24,15 @@
                 </select>
                 results per page.
             </div>
+            <div>
+                <form (ngSubmit)="onSelectCols($event)">
+                    Columns:
+                    <span *ngFor="#col of allColumns">
+                        <input type="checkbox" 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"
@@ -56,6 +65,7 @@
     public showTable = false;
     public data: Array<any>;
     public columns: Array<any>;
+    public allColumns: Array<any>;
     
     public rows: Array<any>;
      
@@ -71,11 +81,12 @@
         //filtering: {filterString: '', columnName: 'position'}
     };
     
-    ngOnChanges() {
-        console.debug("result table changed! queryState=", this.queryState?this.queryState.resultColumns:'');
+    ngOnChanges(changes: any) {
+        console.debug("result table changed! changes=", changes);
         this.data = this.queryState.results;
-        this.columns = this.queryState.resultColumns;
-        this.config.sorting = this.queryState.resultColumns;
+        this.allColumns = this.queryState.resultColumns;
+        this.columns = this.allColumns.filter(c => c.show);
+        this.config.sorting = this.columns;
         this.showTable = (this.data.length < 1000);
         this.onChangeTable(this.config, null);
     }
@@ -95,6 +106,12 @@
         }
     }
     
+    onSelectCols(event: any) {
+        console.debug("select cols:", this.allColumns);
+        this.columns = this.allColumns.filter(c => c.show);        
+        this.config.sorting = this.columns;
+    }
+    
     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;
@@ -142,8 +159,9 @@
             Object.assign(this.config.sorting, config.sorting);
         }
 
-        let filteredData = this.changeFilter(this.data, this.config);
-        let sortedData = this.changeSort(filteredData, this.config);
+        //let filteredData = this.changeFilter(this.data, this.config);
+        //let sortedData = this.changeSort(filteredData, this.config);
+        let sortedData = this.changeSort(this.data, this.config);
 
         this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData;
         this.length = sortedData.length;