Separate account row from account list.
This commit is contained in:
Alexis Lahouze
parent
bd484a994e
commit
220426e6f8
@ -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 {}
|
||||
|
||||
@ -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';
|
||||
</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 *ngFor="let account of accounts"
|
||||
[account-row]="account" (needsReload)="load()">
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
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<Account>;
|
||||
|
||||
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 + ':<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) {
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
176
src/accounts/accountRow.component.ts
Normal file
176
src/accounts/accountRow.component.ts
Normal file
@ -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: `
|
||||
<td>
|
||||
<a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span (ngClass)="valueClass(account, accountBalances?.current)">
|
||||
{{ accountBalances?.current | currency:"EUR" }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span (ngClass)="valueClass(account, accountBalances?.pointed)">
|
||||
{{ accountBalances?.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()">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Delete account, with confirm. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
(click)="confirmDelete()">
|
||||
<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>
|
||||
`
|
||||
})
|
||||
export class AccountRowComponent implements OnInit {
|
||||
@Input('account-row') account: Account;
|
||||
@Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
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 + ':<br />' + 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
|
||||
);
|
||||
});
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user