166 lines
4.3 KiB
TypeScript
166 lines
4.3 KiB
TypeScript
import { Component, Inject, OnInit } from '@angular/core';
|
|
import { Observable } from 'rxjs/Rx';
|
|
|
|
import { ToastrService } from 'ngx-toastr';
|
|
|
|
var operationFormTmpl = require('./operation.form.tmpl.html'),
|
|
operationDeleteTmpl = require('./operation.delete.tmpl.html');
|
|
|
|
import { Account } from '../accounts/account';
|
|
import { AccountService } from '../accounts/account.service';
|
|
import { Operation } from './operation';
|
|
import { OperationService } from './operation.service';
|
|
|
|
@Component({
|
|
selector: 'operation-list',
|
|
template: `
|
|
<div>
|
|
<div class="row">
|
|
<div class="col-md-9">
|
|
<balance-chart (onUpdate)="onUpdate($event)"
|
|
[account]="account"></balance-chart>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<category-chart
|
|
[minDate]="minDate"
|
|
[maxDate]="maxDate"
|
|
[account]="account"></category-chart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<table class="table table-striped table-condensed table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Date d'op.</th>
|
|
<th>Libellé de l'opération</th>
|
|
<th>Montant</th>
|
|
<th>Solde</th>
|
|
<th>Catégorie</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="6">
|
|
<button class="btn btn-success" (click)="add()">
|
|
Ajouter
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr [operation-row]="operation"
|
|
[account]="account"
|
|
(needsReload)="load(minDate, maxDate)"
|
|
*ngFor="let operation of operations">
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class OperationListComponent implements OnInit {
|
|
private account: Account;
|
|
private minDate: Date;
|
|
private maxDate: Date;
|
|
private operations: Operation[];
|
|
|
|
constructor(
|
|
@Inject("$modal") private $modal,
|
|
@Inject("accountIdService") private accountIdService,
|
|
private toastrService: ToastrService,
|
|
private operationService: OperationService,
|
|
private accountService: AccountService
|
|
) {}
|
|
|
|
ngOnInit() {
|
|
this.accountService.get(this.accountIdService.get()).subscribe(account => {
|
|
this.account = account
|
|
});
|
|
}
|
|
|
|
/*
|
|
* Add an empty operation.
|
|
*/
|
|
add() {
|
|
var operation = new Operation();
|
|
operation.account_id = this.accountIdService.get();
|
|
|
|
return this.modify(operation);
|
|
};
|
|
|
|
/*
|
|
* Load operations.
|
|
*/
|
|
load(minDate, maxDate) {
|
|
this.minDate = minDate;
|
|
this.maxDate = maxDate;
|
|
|
|
return this.operationService.query(
|
|
this.accountIdService.get(),
|
|
minDate,
|
|
maxDate
|
|
).subscribe((operations: Operation[]) => {
|
|
this.operations = operations.reverse();
|
|
});
|
|
};
|
|
|
|
/*
|
|
* Save an operation and return a promise.
|
|
*/
|
|
save(operation) {
|
|
operation.confirmed = true;
|
|
|
|
var observable: Observable<Operation>;
|
|
|
|
if(operation.id){
|
|
observable = this.operationService.update(operation);
|
|
} else {
|
|
observable = this.operationService.create(operation);
|
|
}
|
|
|
|
return observable.subscribe((operation) => {
|
|
this.toastrService.success('Operation #' + operation.id + ' saved.');
|
|
|
|
this.load(this.minDate, this.maxDate);
|
|
|
|
return operation;
|
|
}, (result) => {
|
|
this.toastrService.error(
|
|
'Error while saving operation: ' + result.message
|
|
);
|
|
});
|
|
};
|
|
|
|
modify(operation) {
|
|
// FIXME Alexis Lahouze 2017-06-15 i18n
|
|
var title = "New operation";
|
|
|
|
this.$modal({
|
|
templateUrl: operationFormTmpl,
|
|
controller: function($scope, title, operation, $save) {
|
|
$scope.title = title;
|
|
$scope.operation = operation;
|
|
$scope.$save = () => {
|
|
$scope.$hide();
|
|
$save($scope.operation);
|
|
};
|
|
},
|
|
locals: {
|
|
title: title,
|
|
operation: operation,
|
|
$save: (operation: Operation) => {
|
|
this.save(operation);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
onUpdate(dateRange) {
|
|
this.load(dateRange.minDate, dateRange.maxDate);
|
|
};
|
|
};
|