Improve bindings between components.

This commit is contained in:
Alexis Lahouze 2017-07-02 00:11:02 +02:00
parent 08b6643eda
commit 0cd5dab07c
3 changed files with 23 additions and 24 deletions

View File

@ -33,17 +33,14 @@ var balanceChartModule = angular.module('balanceChartModule', [
.component('balanceChart', { .component('balanceChart', {
template: '<div></div>', template: '<div></div>',
bindings: { bindings: {
minDate: '<', onUpdate: '&'
maxDate: '<'
}, },
controller: function($routeParams, Balances, $element, $log) { controller: function($routeParams, Balances, $element, $log) {
var vm = this; var vm = this;
vm.loadData = function() { vm.loadData = function() {
Balances.query({ Balances.query({
id: $routeParams.accountId, id: $routeParams.accountId
//begin: vm.minDate.format('YYYY-MM-DD'),
//end: vm.maxDate.format('YYYY-MM-DD')
}, function(results) { }, function(results) {
var headers = [['x', 'balances', 'expenses', 'revenues']]; var headers = [['x', 'balances', 'expenses', 'revenues']];
@ -59,18 +56,19 @@ var balanceChartModule = angular.module('balanceChartModule', [
vm.chart.load({ vm.chart.load({
rows: headers.concat(rows) rows: headers.concat(rows)
}); });
var x = vm.chart.x();
var balances = x.balances;
vm.onUpdate(balances[0], balances[balances.length - 1]);
}); });
}; };
vm.$onInit = function() { vm.$onInit = function() {
$log.log($element);
vm.chart = c3.generate({ vm.chart = c3.generate({
//bindto: $element[0],
bindto: $element[0].children[0], bindto: $element[0].children[0],
size: { size: {
height: 500, height: 500,
// witdh: 800,
}, },
data: { data: {
x: 'x', x: 'x',
@ -129,16 +127,15 @@ var balanceChartModule = angular.module('balanceChartModule', [
} }
}, },
subchart: { subchart: {
show: true show: true,
onbrush: function(domain) {
vm.onUpdate({minDate: domain[0], maxDate: domain[1]});
}
} }
}); });
vm.loadData(); vm.loadData();
}; };
vm.$onChange = function(changes) {
vm.loadData();
};
} }
}).factory('Balances', function($resource) { }).factory('Balances', function($resource) {
return $resource( return $resource(

View File

@ -63,9 +63,6 @@ var operationModule = angular.module('accountant.operations', [
var vm = this; var vm = this;
vm.minDate = moment().date(1).month(11).year(2016);
vm.maxDate = moment();
/* /*
* Add an empty operation. * Add an empty operation.
*/ */
@ -81,12 +78,15 @@ var operationModule = angular.module('accountant.operations', [
/* /*
* Load operations. * Load operations.
*/ */
vm.load = function() { vm.load = function(minDate, maxDate) {
vm.minDate = minDate;
vm.maxDate = maxDate;
return Operation.query({ return Operation.query({
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
account_id: $routeParams.accountId, account_id: $routeParams.accountId,
begin: vm.minDate.format('YYYY-MM-DD'), begin: minDate ? moment(minDate).format('YYYY-MM-DD') : null,
end: vm.maxDate.format('YYYY-MM-DD') end: maxDate ? moment(maxDate).format('YYYY-MM-DD') : null
}); });
}; };
@ -183,7 +183,11 @@ var operationModule = angular.module('accountant.operations', [
}); });
}; };
vm.operations = vm.load(); vm.onUpdate = function(minDate, maxDate) {
vm.operations = vm.load(minDate, maxDate);
};
//vm.operations = vm.load();
}) })
.component('operationModifyModalComponent', { .component('operationModifyModalComponent', {

View File

@ -18,9 +18,7 @@
<div> <div>
<div class="row"> <div class="row">
<div class="col-md-9"> <div class="col-md-9">
<balance-chart <balance-chart on-update="operationsCtrl.onUpdate(minDate, maxDate)"/>
min-date="operationsCtrl.minDate"
max-date="operationsCtrl.maxDate"/>
</div> </div>
<div class="col-md-3"></div> <div class="col-md-3"></div>
</div> </div>