Mercurial > hg > ng2-query-ismi

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
selectable result columns. nicer cypher query output.
author casties
date Mon, 01 Feb 2016 20:10:55 +0100
parents 193271b6b9d2
children 739eb38ec2a2
comparison
equal deleted inserted replaced
30:193271b6b9d2 31:4926885f8a99
8 @Component({ 8 @Component({
9 selector: 'query-result', 9 selector: 'query-result',
10 template: ` 10 template: `
11 <div *ngIf="queryState && queryState.results"> 11 <div *ngIf="queryState && queryState.results">
12 <span>Cypher query:</span> 12 <span>Cypher query:</span>
13 <pre>{{queryState.resultCypherQuery}}</pre> 13 <pre>{{queryState.getQueryText()}}</pre>
14 <h2>Query result</h2> 14 <h2>Query result</h2>
15 <pre>{{resultInfo}}</pre> 15 <pre>{{resultInfo}}</pre>
16 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div> 16 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div>
17 <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div> 17 <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div>
18 <div *ngIf="showTable"> 18 <div *ngIf="showTable">
21 <option value="10">10</option> 21 <option value="10">10</option>
22 <option value="100">100</option> 22 <option value="100">100</option>
23 <option value="0">all</option> 23 <option value="0">all</option>
24 </select> 24 </select>
25 results per page. 25 results per page.
26 </div>
27 <div>
28 <form (ngSubmit)="onSelectCols($event)">
29 Columns:
30 <span *ngFor="#col of allColumns">
31 <input type="checkbox" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}}
32 </span>
33 <button type="submit">change columns</button>
34 </form>
26 </div> 35 </div>
27 <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div> 36 <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div>
28 <pagination *ngIf="config.paging" 37 <pagination *ngIf="config.paging"
29 class="pagination-sm" 38 class="pagination-sm"
30 [(ngModel)]="page" 39 [(ngModel)]="page"
54 public resultInfo: string; 63 public resultInfo: string;
55 64
56 public showTable = false; 65 public showTable = false;
57 public data: Array<any>; 66 public data: Array<any>;
58 public columns: Array<any>; 67 public columns: Array<any>;
68 public allColumns: Array<any>;
59 69
60 public rows: Array<any>; 70 public rows: Array<any>;
61 71
62 public page: number = 1; 72 public page: number = 1;
63 public itemsPerPage: number = 10; 73 public itemsPerPage: number = 10;
69 paging: true, 79 paging: true,
70 sorting: {'columns': this.columns}, 80 sorting: {'columns': this.columns},
71 //filtering: {filterString: '', columnName: 'position'} 81 //filtering: {filterString: '', columnName: 'position'}
72 }; 82 };
73 83
74 ngOnChanges() { 84 ngOnChanges(changes: any) {
75 console.debug("result table changed! queryState=", this.queryState?this.queryState.resultColumns:''); 85 console.debug("result table changed! changes=", changes);
76 this.data = this.queryState.results; 86 this.data = this.queryState.results;
77 this.columns = this.queryState.resultColumns; 87 this.allColumns = this.queryState.resultColumns;
78 this.config.sorting = this.queryState.resultColumns; 88 this.columns = this.allColumns.filter(c => c.show);
89 this.config.sorting = this.columns;
79 this.showTable = (this.data.length < 1000); 90 this.showTable = (this.data.length < 1000);
80 this.onChangeTable(this.config, null); 91 this.onChangeTable(this.config, null);
81 } 92 }
82 93
83 ngOnInit() { 94 ngOnInit() {
91 if (num == 0) { 102 if (num == 0) {
92 this.itemsPerPage = this.length; 103 this.itemsPerPage = this.length;
93 } else { 104 } else {
94 this.itemsPerPage = num; 105 this.itemsPerPage = num;
95 } 106 }
107 }
108
109 onSelectCols(event: any) {
110 console.debug("select cols:", this.allColumns);
111 this.columns = this.allColumns.filter(c => c.show);
112 this.config.sorting = this.columns;
96 } 113 }
97 114
98 changePage(page:any, data:Array<any> = this.data):Array<any> { 115 changePage(page:any, data:Array<any> = this.data):Array<any> {
99 let start = (page.page - 1) * page.itemsPerPage; 116 let start = (page.page - 1) * page.itemsPerPage;
100 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; 117 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
140 } 157 }
141 if (config.sorting) { 158 if (config.sorting) {
142 Object.assign(this.config.sorting, config.sorting); 159 Object.assign(this.config.sorting, config.sorting);
143 } 160 }
144 161
145 let filteredData = this.changeFilter(this.data, this.config); 162 //let filteredData = this.changeFilter(this.data, this.config);
146 let sortedData = this.changeSort(filteredData, this.config); 163 //let sortedData = this.changeSort(filteredData, this.config);
164 let sortedData = this.changeSort(this.data, this.config);
147 165
148 this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData; 166 this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData;
149 this.length = sortedData.length; 167 this.length = sortedData.length;
150 } 168 }
151 169