Use ngx-toastr for notifications in account module.

This commit is contained in:
Alexis Lahouze 2017-07-21 00:29:03 +02:00
parent b95f36f09c
commit e28500c557
6 changed files with 23 additions and 6 deletions

View File

@ -69,6 +69,7 @@
"meanie-angular-storage": "^1.3.1", "meanie-angular-storage": "^1.3.1",
"moment": "^2.18", "moment": "^2.18",
"ngx-restangular": "^1.0.11", "ngx-restangular": "^1.0.11",
"ngx-toastr": "^5.3.1",
"reflect-metadata": "^0.1.10", "reflect-metadata": "^0.1.10",
"rxjs": "^5.4.2", "rxjs": "^5.4.2",
"zone.js": "^0.8.12" "zone.js": "^0.8.12"

View File

@ -8,6 +8,7 @@ import { HttpModule } from '@angular/http';
import { NgLoggerModule, Level } from '@nsalaun/ng-logger'; import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
import { RestangularModule } from 'ngx-restangular'; import { RestangularModule } from 'ngx-restangular';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ToastrModule } from 'ngx-toastr';
import { AccountService } from './account.service'; import { AccountService } from './account.service';
import { AccountBalancesService } from './accountBalances.service'; import { AccountBalancesService } from './accountBalances.service';
@ -22,6 +23,7 @@ import { AccountFormComponent } from './accountForm.component';
FormsModule, FormsModule,
NgLoggerModule, NgLoggerModule,
RestangularModule, RestangularModule,
ToastrModule,
NgbModule NgbModule
], ],
providers: [ providers: [

View File

@ -2,6 +2,7 @@ import { Observable } from 'rxjs/Rx';
import { Logger } from '@nsalaun/ng-logger'; import { Logger } from '@nsalaun/ng-logger';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { Account } from './account'; import { Account } from './account';
import { AccountBalances } from './accountBalances'; import { AccountBalances } from './accountBalances';
@ -10,14 +11,20 @@ import { AccountBalancesService } from './accountBalances.service';
import { AccountDeleteModalComponent } from './accountDeleteModal.component'; import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component'; import { AccountEditModalComponent } from './accountEditModal.component';
export class AccountListComponent { export class AccountListComponent {
static $inject = ['AccountService', 'AccountBalancesService', 'Notification', 'Logger', 'NgbModal']; static $inject = [
'AccountService',
'AccountBalancesService',
'ToastrService',
'Logger',
'NgbModal'
];
accounts: Account[]; accounts: Account[];
constructor( constructor(
private AccountService: AccountService, private AccountService: AccountService,
private AccountBalancesService: AccountBalancesService, private AccountBalancesService: AccountBalancesService,
private Notification, private ToastrService: ToastrService,
private Logger: Logger, private Logger: Logger,
private NgbModal: NgbModal private NgbModal: NgbModal
) { ) {
@ -93,13 +100,13 @@ export class AccountListComponent {
} }
observable.subscribe(account => { observable.subscribe(account => {
this.Notification.success('Account #' + account.id + ' saved.'); this.ToastrService.success('Account #' + account.id + ' saved.');
this.load(); this.load();
}, result => { }, result => {
this.Logger.error('Error while saving account', account, result); this.Logger.error('Error while saving account', account, result);
this.Notification.error( this.ToastrService.error(
'Error while saving account: ' + result.message 'Error while saving account: ' + result.message
); );
}); });
@ -124,13 +131,13 @@ export class AccountListComponent {
var id = account.id; var id = account.id;
this.AccountService.delete(account).subscribe(account => { this.AccountService.delete(account).subscribe(account => {
this.Notification.success('account #' + id + ' deleted.'); this.ToastrService.success('account #' + id + ' deleted.');
this.load(); this.load();
return account; return account;
}, function(result) { }, function(result) {
this.Notification.error( this.ToastrService.error(
'An error occurred while trying to delete account #' + 'An error occurred while trying to delete account #' +
id + ':<br />' + result id + ':<br />' + result
); );

View File

@ -29,6 +29,7 @@ var ngResource = require('angular-resource'),
import { Logger } from '@nsalaun/ng-logger'; import { Logger } from '@nsalaun/ng-logger';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
var accountsTmpl = require('./accounts.html'); var accountsTmpl = require('./accounts.html');
@ -43,6 +44,8 @@ export default angular.module('accountant.accounts', [
ngStrap, ngStrap,
]) ])
.factory('ToastrService', downgradeInjectable(ToastrService))
.factory('Logger', downgradeInjectable(Logger)) .factory('Logger', downgradeInjectable(Logger))
.factory('NgbModal', downgradeInjectable(NgbModal)) .factory('NgbModal', downgradeInjectable(NgbModal))

View File

@ -12,6 +12,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgLoggerModule } from '@nsalaun/ng-logger'; import { NgLoggerModule } from '@nsalaun/ng-logger';
import { RestangularModule } from 'ngx-restangular'; import { RestangularModule } from 'ngx-restangular';
import { ToastrModule } from 'ngx-toastr';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AccountModule } from './accounts/account.module'; import { AccountModule } from './accounts/account.module';
@ -36,6 +37,7 @@ import { ApiBaseURL, LogLevel } from './app.config';
} }
); );
}), }),
ToastrModule.forRoot(),
NgbModule.forRoot() NgbModule.forRoot()
] ]
}) })

View File

@ -6,6 +6,8 @@
@import (inline) '~bootstrap-additions/dist/bootstrap-additions.css'; @import (inline) '~bootstrap-additions/dist/bootstrap-additions.css';
@import (inline) '~ngx-toastr/toastr.css';
.italic { .italic {
font-style: italic; font-style: italic;
} }