From 220426e6f87f286439d5512c341b1cb1bc6fe03f Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Fri, 21 Jul 2017 21:50:19 +0200 Subject: [PATCH] Separate account row from account list. --- src/accounts/account.module.ts | 7 +- src/accounts/accountList.component.ts | 168 ++---------------------- src/accounts/accountRow.component.ts | 176 ++++++++++++++++++++++++++ 3 files changed, 190 insertions(+), 161 deletions(-) create mode 100644 src/accounts/accountRow.component.ts 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 + ); + }); + }; +}