accountant-ui/src/accounts/accountList.component.ts

252 lines
6.4 KiB
TypeScript
Raw Normal View History

2017-07-21 00:45:04 +02:00
// vim: set tw=80 ts=2 sw=2 sts=2 :
import { CurrencyPipe } from '@angular/common';
import { Component, Inject } from '@angular/core';
2017-07-14 10:24:46 +02:00
import { Observable } from 'rxjs/Rx';
2017-07-16 22:25:50 +02:00
import { Logger } from '@nsalaun/ng-logger';
2017-07-20 10:32:05 +02:00
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
2017-07-14 10:24:46 +02:00
import { Account } from './account';
import { AccountBalances } from './accountBalances';
import { AccountService } from './account.service';
import { AccountBalancesService } from './accountBalances.service';
2017-07-20 10:32:05 +02:00
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component';
@Component({
2017-07-21 00:45:04 +02:00
selector: 'account-list',
template: `
<div class="row">
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Nom du compte</th>
<th class="col-md-1">Solde courant</th>
<th class="col-md-1">Solde pointé</th>
<th class="col-md-1">Découvert autorisé</th>
<th class="col-md-1">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
<button class="btn btn-success" (click)="add()">
Ajouter
</button>
</td>
</tr>
<tr id="{{ account.id }}"
class="form-inline" ng-class="rowClass(account)"
*ngFor="let account of accounts">
<td>
<a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a>
</td>
<td>
<span (ngClass)="valueClass(account, account.balances.current)">
{{ account.balances?.current | currency:"EUR" }}
</span>
</td>
<td>
<span ng-class="valueClass(account, account.balancess.pointed)">
{{ account.balances?.pointed | currency:"EUR" }}
</span>
</td>
<td>{{ account.authorized_overdraft | currency:"EUR" }}</td>
<td>
<div class="btn-group btn-group-xs">
<!-- Edit account. -->
<button type="button" class="btn btn-success"
(click)="modify(account)">
<span class="fa fa-pencil-square-o"></span>
</button>
<!-- Delete account, with confirm. -->
<button type="button" class="btn btn-default"
(click)="confirmDelete(account)">
<span class="fa fa-trash-o"></span>
</button>
<!-- Open account scheduler. -->
<a class="btn btn-default"
[hidden]="!account.id"
href="#!/account/{{ account.id }}/scheduler">
<span class="fa fa-clock-o"></span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
`,
})
export class AccountListComponent {
2017-07-21 00:45:04 +02:00
static $inject = [
'AccountService',
'AccountBalancesService',
'ToastrService',
'Logger',
'NgbModal'
];
accounts: Account[];
constructor(
private AccountService: AccountService,
private AccountBalancesService: AccountBalancesService,
private ToastrService: ToastrService,
private Logger: Logger,
private NgbModal: NgbModal
) {
// Load accounts.
this.load();
}
/*
* Return the class for an account current value compared to authorized
* overdraft.
*/
rowClass(account) {
// eslint-disable-next-line camelcase
if (!account || !account.authorized_overdraft || !account.current) {
return;
2017-07-13 17:14:20 +02:00
}
2017-07-21 00:45:04 +02:00
// eslint-disable-next-line camelcase
if (account.current < account.authorized_overdraft) {
return 'danger';
} else if (account.current < 0) {
return 'warning';
}
};
/*
* Return the class for a value compared to account authorized overdraft.
*/
valueClass(account, value) {
if (!account || !value) {
return;
}
// eslint-disable-next-line camelcase
if (value < account.authorized_overdraft) {
return 'text-danger';
} else if (value < 0) {
return 'text-warning';
}
};
load() {
this.AccountService.query().subscribe(accounts => {
this.accounts = accounts.map((account: Account) => {
this.Logger.log(account);
this.AccountBalancesService
.get(account.id)
.subscribe((accountBalances: AccountBalances) => {
account.balances = accountBalances;
})
return account;
})
});
};
/*
* Add an empty account.
*/
add() {
const modal = this.NgbModal.open(AccountEditModalComponent, {
windowClass: 'in'
});
modal.componentInstance.account = new Account();
modal.result.then((account: Account) => {
this.Logger.log("Modal closed => save account", account);
this.save(account);
}, (reason) => function(reason) {
});
};
/*
* Save account.
*/
save(account) {
var observable: Observable<Account>;
if(account.id) {
observable = this.AccountService.update(account);
} else {
observable = this.AccountService.create(account);
}
observable.subscribe(account => {
this.ToastrService.success('Account #' + account.id + ' saved.');
this.load();
}, result => {
this.Logger.error('Error while saving account', account, result);
this.ToastrService.error(
'Error while saving account: ' + result.message
);
});
};
confirmDelete(account) {
const modal = this.NgbModal.open(AccountDeleteModalComponent, {
windowClass: 'in'
});
modal.componentInstance.account = account;
modal.result.then((account: Account) => {
this.delete(account);
}, (reason) => function(reason) {
});
};
/*
* Delete an account.
*/
delete(account) {
var id = account.id;
this.AccountService.delete(account).subscribe(account => {
this.ToastrService.success('account #' + id + ' deleted.');
this.load();
return account;
}, function(result) {
this.ToastrService.error(
'An error occurred while trying to delete account #' +
id + ':<br />' + result
);
});
};
/*
* Open the popup to modify the account, save it on confirm.
*/
modify(account) {
const modal = this.NgbModal.open(AccountEditModalComponent, {
windowClass: 'in'
});
modal.componentInstance.account = account;
modal.result.then((account: Account) => {
this.Logger.log("Modal closed => save account", account);
this.save(account);
}, (reason) => function(reason) {
});
};
};