Mercurial > hg > ng2-query-ismi

comparison src/app/query-app.component.ts @ 58:3b4046e0cc02 default

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merge from ng2-table branch. d7c947909ab888c013171b8c037e4f9fab30fe57
author casties
date Wed, 29 Mar 2017 17:19:12 +0200
parents d7c947909ab8
children
comparison
equal deleted inserted replaced
49:781a5387ca93 58:3b4046e0cc02
1 import {Component} from '@angular/core'; 1 import {Component} from '@angular/core';
2 //import {HTTP_PROVIDERS} from '@angular/http';
3 2
4 import {QueryState} from './query-state'; 3 import {QueryState} from './query-state';
5 import {QueryStep} from './query-step'; 4 import {QueryStep} from './query-step';
6 5
7 import {QueryService} from './query.service'; 6 import {QueryService} from './query.service';
8 import {NormalizationService} from './normalization.service'; 7 import {NormalizationService} from './normalization.service';
9
10 import {QuerySelectComponent} from './query-select.component';
11 import {QueryResultComponent} from './query-result.component';
12 //import {QueryResultTableComponent} from './query-result-table.component';
13 8
14 @Component({ 9 @Component({
15 selector: 'query-app', 10 selector: 'query-app',
16 template: ` 11 template: `
17 <div class="container"> 12 <div class="container">
23 [queryStep]="step" [index]="i" 18 [queryStep]="step" [index]="i"
24 (queryChanged)="onQueryChanged($event)"></query-select> 19 (queryChanged)="onQueryChanged($event)"></query-select>
25 <div> 20 <div>
26 <button (click)="addQueryStep()">add step</button> 21 <button (click)="addQueryStep()">add step</button>
27 <button (click)="removeQueryStep()">remove step</button> 22 <button (click)="removeQueryStep()">remove step</button>
23 <button (click)="resetQuery()">reset query</button>
24 <button (click)="showQueryUrl()">get query url</button>
28 </div> 25 </div>
29 </div> 26 </div>
30 <div class="container"> 27 <div class="container">
31 <query-result *ngIf="queryState?.results" 28 <query-result *ngIf="queryState?.results"
32 [resultInfo]="queryState.resultInfo" 29 [resultInfo]="queryState.resultInfo"
33 [queryState]="queryState"> 30 [queryState]="queryState">
34 </query-result> 31 </query-result>
35 </div> 32 </div>
36 `, 33 `,
37 //directives: [QuerySelectComponent, QueryResultTableComponent],
38 //providers: [QueryService, NormalizationService, HTTP_PROVIDERS]
39 }) 34 })
40 35
41 export class QueryAppComponent { 36 export class QueryAppComponent {
42 public queryState: QueryState; 37 public queryState: QueryState;
43 public queryStepList: string[]; 38 public queryStepList: string[];
44 39
45 constructor(private _queryService: QueryService) { 40 constructor(private _queryService: QueryService) {
46 this._queryService.setup(); 41 console.debug("QueryAppComponent constructor!");
42 let newState = this.getStateStringFromUrlFragment();
43 // initialize query service using external state
44 this._queryService.setup(newState);
47 this.queryStepList = []; 45 this.queryStepList = [];
48 this.addQueryStep(); 46 // set state in queryStepList
47 if (this._queryService.state.getNumSteps() > 0) {
48 // use state from URL
49 this._queryService.state.steps
50 .forEach((elem) => this.queryStepList.push('param'));
51 } else {
52 // new empty state
53 this.addQueryStep();
54 }
55 }
56
57 getStateStringFromUrlFragment(): string {
58 let hash: string = window.location.hash;
59 if (hash) {
60 let fragb: string = hash.substr(1);
61 // base64 decode
62 let fragu = window.atob(fragb);
63 // url decode
64 let frag = decodeURIComponent(fragu);
65 // reset hash
66 window.location.hash = '';
67 return frag;
68 }
69 return null;
70 }
71
72 getUrlFragmentFromState() {
73 let stateStr = this._queryService.state.getStateAsString();
74 let frag = '#';
75 if (stateStr.length > 0) {
76 let fragu = encodeURIComponent(stateStr);
77 let fragb = window.btoa(fragu);
78 frag += fragb;
79 }
80 return frag;
49 } 81 }
50 82
51 addQueryStep() { 83 addQueryStep() {
52 this.queryStepList.push('step'); 84 this.queryStepList.push('step');
53 } 85 }
55 removeQueryStep() { 87 removeQueryStep() {
56 this.queryStepList.pop(); 88 this.queryStepList.pop();
57 this._queryService.state.steps.pop(); 89 this._queryService.state.steps.pop();
58 } 90 }
59 91
92 resetQuery() {
93 // reset everything by reloading
94 window.location.reload();
95 }
96
97 showQueryUrl() {
98 let url = window.location.href
99 url = url.replace(/#.*/, '') + this.getUrlFragmentFromState();
100 window.prompt("URL to current query state", url);
101 }
102
60 onQueryChanged(event: any) { 103 onQueryChanged(event: any) {
61 console.debug("app.onquerychanged! event=", event); 104 console.debug("app.onquerychanged! event=", event);
62 this._queryService.runQuery(); 105 this._queryService.runQuery();
63 this.queryState = this._queryService.getState(); 106 this.queryState = this._queryService.getState();
64 } 107 }