2017-07-30 16:35:15 +02:00
|
|
|
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
2017-07-30 09:21:50 +02:00
|
|
|
import { Component, Inject, OnInit } from '@angular/core';
|
2017-08-01 23:09:21 +02:00
|
|
|
import { ActivatedRoute } from '@angular/router';
|
|
|
|
|
2017-07-29 22:26:38 +02:00
|
|
|
import { Observable } from 'rxjs/Rx';
|
|
|
|
|
2017-07-30 16:11:47 +02:00
|
|
|
import { Logger } from '@nsalaun/ng-logger';
|
|
|
|
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
2017-07-29 22:26:38 +02:00
|
|
|
import { ToastrService } from 'ngx-toastr';
|
2017-07-07 22:52:27 +02:00
|
|
|
|
2017-07-30 09:21:50 +02:00
|
|
|
import { Account } from '../accounts/account';
|
2017-07-29 22:58:34 +02:00
|
|
|
import { AccountService } from '../accounts/account.service';
|
2017-07-29 22:26:38 +02:00
|
|
|
import { Operation } from './operation';
|
|
|
|
import { OperationService } from './operation.service';
|
2017-07-30 16:11:47 +02:00
|
|
|
import { OperationEditModalComponent } from './operationEditModal.component';
|
2017-07-29 22:26:38 +02:00
|
|
|
|
2017-07-30 15:13:36 +02:00
|
|
|
@Component({
|
2017-07-30 16:35:15 +02:00
|
|
|
selector: 'operation-list',
|
|
|
|
template: `
|
2017-07-30 15:13:36 +02:00
|
|
|
<div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-9">
|
|
|
|
<balance-chart (onUpdate)="onUpdate($event)"
|
|
|
|
[account]="account"></balance-chart>
|
|
|
|
</div>
|
2017-07-30 16:35:15 +02:00
|
|
|
|
2017-07-30 15:13:36 +02:00
|
|
|
<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>
|
2017-07-30 15:34:12 +02:00
|
|
|
<th>#</th>
|
2017-07-30 15:13:36 +02:00
|
|
|
<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>
|
|
|
|
`
|
|
|
|
})
|
2017-07-30 15:16:44 +02:00
|
|
|
export class OperationListComponent implements OnInit {
|
2017-07-30 16:35:15 +02:00
|
|
|
private account: Account;
|
|
|
|
private minDate: Date;
|
|
|
|
private maxDate: Date;
|
|
|
|
private operations: Operation[];
|
|
|
|
|
|
|
|
constructor(
|
|
|
|
private toastrService: ToastrService,
|
|
|
|
private operationService: OperationService,
|
|
|
|
private accountService: AccountService,
|
|
|
|
private logger: Logger,
|
|
|
|
private ngbModal: NgbModal,
|
2017-08-01 23:09:21 +02:00
|
|
|
private route: ActivatedRoute
|
2017-07-30 16:35:15 +02:00
|
|
|
) {}
|
|
|
|
|
|
|
|
ngOnInit() {
|
2017-08-01 23:09:21 +02:00
|
|
|
this.accountService.get(
|
|
|
|
+this.route.snapshot.paramMap.get('accountId')
|
|
|
|
).subscribe(account => {
|
2017-07-30 16:35:15 +02:00
|
|
|
this.account = account
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Add an empty operation.
|
|
|
|
*/
|
|
|
|
add() {
|
|
|
|
var operation = new Operation();
|
2017-08-01 23:09:21 +02:00
|
|
|
operation.account_id = this.account.id;
|
2017-07-30 16:35:15 +02:00
|
|
|
|
2017-07-30 16:36:54 +02:00
|
|
|
// FIXME Alexis Lahouze 2017-06-15 i18n
|
|
|
|
const modal = this.ngbModal.open(OperationEditModalComponent);
|
|
|
|
|
|
|
|
modal.componentInstance.operation = operation;
|
|
|
|
|
|
|
|
modal.result.then((operation: Operation) => {
|
|
|
|
this.save(operation);
|
|
|
|
}, (reason) => {
|
|
|
|
});
|
2017-07-30 16:35:15 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Load operations.
|
|
|
|
*/
|
|
|
|
load(minDate, maxDate) {
|
|
|
|
this.minDate = minDate;
|
|
|
|
this.maxDate = maxDate;
|
|
|
|
|
|
|
|
return this.operationService.query(
|
2017-08-01 23:09:21 +02:00
|
|
|
this.account.id,
|
2017-07-30 16:35:15 +02:00
|
|
|
minDate,
|
|
|
|
maxDate
|
|
|
|
).subscribe((operations: Operation[]) => {
|
|
|
|
this.operations = operations.reverse();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Save an operation and return a promise.
|
|
|
|
*/
|
|
|
|
save(operation) {
|
|
|
|
operation.confirmed = true;
|
|
|
|
|
2017-07-30 16:38:28 +02:00
|
|
|
return this.operationService.create(operation).subscribe(
|
|
|
|
(operation) => {
|
|
|
|
this.toastrService.success('Operation #' + operation.id + ' saved.');
|
|
|
|
|
|
|
|
this.load(this.minDate, this.maxDate);
|
|
|
|
}, (result) => {
|
|
|
|
this.toastrService.error(
|
|
|
|
'Error while saving operation: ' + result.message
|
|
|
|
);
|
|
|
|
}
|
|
|
|
);
|
2017-07-30 16:35:15 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
onUpdate(dateRange) {
|
|
|
|
this.load(dateRange.minDate, dateRange.maxDate);
|
|
|
|
};
|
2017-07-07 22:52:27 +02:00
|
|
|
};
|