Use query parameters in Category chart component.

This commit is contained in:
Alexis Lahouze 2018-06-10 17:26:26 +02:00
parent cf2453c4c6
commit d69ace6292
2 changed files with 16 additions and 25 deletions

View File

@ -1,16 +1,12 @@
// vim: set tw=80 ts=2 sw=2 sts=2 : // vim: set tw=80 ts=2 sw=2 sts=2 :
import { import { Component, OnInit } from '@angular/core';
Component, ElementRef, import { ActivatedRoute, ParamMap } from '@angular/router';
Inject, Input, Output,
OnChanges
} from '@angular/core';
import { Logger } from '@nsalaun/ng-logger'; import { Logger } from '@nsalaun/ng-logger';
import * as _ from 'underscore'; import * as _ from 'underscore';
import { Account } from '../accounts/account';
import { Category } from './category'; import { Category } from './category';
import { CategoryService } from './category.service'; import { CategoryService } from './category.service';
@ -26,11 +22,7 @@ import { CategoryService } from './category.service';
barPadding="1"> barPadding="1">
</ngx-charts-bar-horizontal-2d>` </ngx-charts-bar-horizontal-2d>`
}) })
export class CategoryChartComponent implements OnChanges { export class CategoryChartComponent implements OnInit {
@Input() minDate: Date;
@Input() maxDate: Date;
@Input() account: Account;
public data; public data;
public showXAxis = true; public showXAxis = true;
@ -39,16 +31,22 @@ export class CategoryChartComponent implements OnChanges {
public showYAxisLabel = false; public showYAxisLabel = false;
constructor( constructor(
private activatedRoute: ActivatedRoute,
private logger: Logger,
private categoryService: CategoryService, private categoryService: CategoryService,
) { ) {
this.data = []; this.data = [];
} }
loadData(account: Account) { loadData() {
let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
let fromDay = this.activatedRoute.snapshot.queryParamMap.get('from');
let toDay = this.activatedRoute.snapshot.queryParamMap.get('to');
this.categoryService.query( this.categoryService.query(
account.id, +accountId,
this.minDate, fromDay,
this.maxDate toDay
).map((results: Category[]) => { ).map((results: Category[]) => {
return _.sortBy(results, 'income').reverse(); return _.sortBy(results, 'income').reverse();
}).map((results: Category[]) => { }).map((results: Category[]) => {
@ -69,11 +67,7 @@ export class CategoryChartComponent implements OnChanges {
}); });
} }
ngOnChanges(changes) { ngOnInit() {
if('account' in changes && changes.account.currentValue) { this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});
this.loadData(changes.account.currentValue);
} else if (this.account) {
this.loadData(this.account);
}
} }
} }

View File

@ -25,10 +25,7 @@ import { OperationEditModalComponent } from './operationEditModal.component';
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<category-chart <category-chart></category-chart>
[minDate]="minDate"
[maxDate]="maxDate"
[account]="account"></category-chart>
</div> </div>
</div> </div>