diff --git a/src/accounts/account.module.ts b/src/accounts/account.module.ts
index 7127f44..bde0c86 100644
--- a/src/accounts/account.module.ts
+++ b/src/accounts/account.module.ts
@@ -16,6 +16,7 @@ import { AccountListComponent } from './accountList.component';
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component';
import { AccountFormComponent } from './accountForm.component';
+import { AccountRowComponent } from './accountRow.component';
@NgModule({
imports: [
@@ -35,13 +36,15 @@ import { AccountFormComponent } from './accountForm.component';
AccountListComponent,
AccountDeleteModalComponent,
AccountEditModalComponent,
- AccountFormComponent
+ AccountFormComponent,
+ AccountRowComponent
],
entryComponents: [
AccountListComponent,
AccountDeleteModalComponent,
AccountEditModalComponent,
- AccountFormComponent
+ AccountFormComponent,
+ AccountRowComponent
]
})
export class AccountModule {}
diff --git a/src/accounts/accountList.component.ts b/src/accounts/accountList.component.ts
index a2cc67c..6543a58 100644
--- a/src/accounts/accountList.component.ts
+++ b/src/accounts/accountList.component.ts
@@ -1,6 +1,5 @@
// vim: set tw=80 ts=2 sw=2 sts=2 :
-import { CurrencyPipe } from '@angular/common';
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Logger } from '@nsalaun/ng-logger';
@@ -10,8 +9,6 @@ import { ToastrService } from 'ngx-toastr';
import { Account } from './account';
import { AccountBalances } from './accountBalances';
import { AccountService } from './account.service';
-import { AccountBalancesService } from './accountBalances.service';
-import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component';
@Component({
@@ -38,122 +35,33 @@ import { AccountEditModalComponent } from './accountEditModal.component';
-
- |
- {{ account.name }}
- |
-
-
-
- {{ account.balances?.current | currency:"EUR" }}
-
- |
-
-
-
- {{ account.balances?.pointed | currency:"EUR" }}
-
- |
-
- {{ account.authorized_overdraft | currency:"EUR" }} |
-
-
-
-
-
-
-
-
-
-
-
-
-
- |
+
`,
})
-export class AccountListComponent {
- static $inject = [
- 'AccountService',
- 'AccountBalancesService',
- 'ToastrService',
- 'Logger',
- 'NgbModal'
- ];
-
+export class AccountListComponent implements OnInit {
accounts: Account[];
constructor(
private AccountService: AccountService,
- private AccountBalancesService: AccountBalancesService,
private ToastrService: ToastrService,
private Logger: Logger,
private NgbModal: NgbModal
) {
+ }
+
+ ngOnInit() {
// 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;
- }
-
- // 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;
- })
+ this.accounts = accounts;
});
};
@@ -178,15 +86,7 @@ export class AccountListComponent {
* Save account.
*/
save(account) {
- var observable: Observable;
-
- if(account.id) {
- observable = this.AccountService.update(account);
- } else {
- observable = this.AccountService.create(account);
- }
-
- observable.subscribe(account => {
+ this.AccountService.create(account).subscribe(account => {
this.ToastrService.success('Account #' + account.id + ' saved.');
this.load();
@@ -198,54 +98,4 @@ export class AccountListComponent {
);
});
};
-
- 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 + ':
' + 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) {
- });
- };
};
diff --git a/src/accounts/accountRow.component.ts b/src/accounts/accountRow.component.ts
new file mode 100644
index 0000000..7c42bf8
--- /dev/null
+++ b/src/accounts/accountRow.component.ts
@@ -0,0 +1,176 @@
+// vim: set tw=80 ts=2 sw=2 sts=2 :
+import { CurrencyPipe } from '@angular/common';
+import { Component, Inject, Input, Output, EventEmitter, OnInit } from '@angular/core';
+
+import { Logger } from '@nsalaun/ng-logger';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+
+import { Account } from './account';
+import { AccountBalances } from './accountBalances';
+import { AccountBalancesService } from './accountBalances.service';
+import { AccountService } from './account.service';
+import { AccountDeleteModalComponent } from './accountDeleteModal.component';
+import { AccountEditModalComponent } from './accountEditModal.component';
+
+@Component({
+ selector: 'tr[account-row]',
+ host: {
+ "[id]": "account.id",
+ "[class.warning]": "warning",
+ "[class.danger]": "danger"
+ },
+ template: `
+
+ {{ account.name }}
+ |
+
+
+
+ {{ accountBalances?.current | currency:"EUR" }}
+
+ |
+
+
+
+ {{ accountBalances?.pointed | currency:"EUR" }}
+
+ |
+
+{{ account.authorized_overdraft | currency:"EUR" }} |
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ `
+})
+export class AccountRowComponent implements OnInit {
+ @Input('account-row') account: Account;
+ @Output() needsReload: EventEmitter = new EventEmitter();
+
+ accountBalances: AccountBalances;
+
+ constructor(
+ private accountService: AccountService,
+ private accountBalancesService: AccountBalancesService,
+ private toastrService: ToastrService,
+ private logger: Logger,
+ private modal: NgbModal
+ ) {
+ this.logger.log("AccountRowComponent constructor");
+ }
+
+ ngOnInit() {
+ this.logger.log(this.account);
+ this.accountBalancesService
+ .get(this.account.id)
+ .subscribe((accountBalances: AccountBalances) => {
+ this.accountBalances = accountBalances;
+ })
+ }
+
+ get warning() {
+ return this.account.authorized_overdraft < this.accountBalances.current
+ && this.accountBalances.current < 0;
+ };
+
+ get error() {
+ return this.accountBalances.current < this.account.authorized_overdraft;
+ };
+
+ /*
+ * Return the class for a value compared to account authorized overdraft.
+ */
+ valueClass(value: number) {
+ if (!value) {
+ return;
+ }
+
+ if (value < this.account.authorized_overdraft) {
+ return 'text-danger';
+ } else if (value < 0) {
+ return 'text-warning';
+ }
+ };
+
+ confirmDelete() {
+ const modal = this.modal.open(AccountDeleteModalComponent, {
+ windowClass: 'in'
+ });
+
+ modal.componentInstance.account = this.account;
+
+ modal.result.then((account: Account) => {
+ this.delete(account);
+ }, (reason) => function(reason) {
+ });
+ };
+
+ /*
+ * Delete an account.
+ */
+ delete(account: Account) {
+ var id = account.id;
+
+ this.accountService.delete(account).subscribe(account => {
+ this.toastrService.success('account #' + id + ' deleted.');
+
+ this.needsReload.emit();
+ }, function(result) {
+ this.toastrService.error(
+ 'An error occurred while trying to delete account #' +
+ id + ':
' + result
+ );
+ });
+ };
+
+ /*
+ * Open the popup to modify the account, save it on confirm.
+ */
+ modify() {
+ const modal = this.modal.open(AccountEditModalComponent, {
+ windowClass: 'in'
+ });
+
+ modal.componentInstance.account = this.account;
+
+ modal.result.then((account: Account) => {
+ this.logger.log("Modal closed => save account", account);
+ this.save(account);
+ }, (reason) => function(reason) {
+ });
+ };
+
+ save(account: Account) {
+ this.accountService.update(account).subscribe((account: Account) => {
+ this.toastrService.success('Account #' + account.id + ' saved.');
+
+ this.needsReload.emit();
+ }, result => {
+ this.logger.error('Error while saving account', account, result);
+
+ this.toastrService.error(
+ 'Error while saving account: ' + result.message
+ );
+ });
+ };
+}