From 4057705e224de01fac892b57734129ab4fb2b03c Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Thu, 20 Jul 2017 10:32:05 +0200 Subject: [PATCH] Use ng-bootstrap Modal. --- src/accounts/account.component.ts | 63 ++++--------- src/accounts/account.delete.tmpl.html | 23 ----- src/accounts/account.form.tmpl.html | 72 --------------- src/accounts/account.module.ts | 18 +++- src/accounts/accountDeleteModal.component.ts | 53 +++++++++++ src/accounts/accountEditModal.component.ts | 96 ++++++++++++++++++++ src/accounts/index.ts | 3 + 7 files changed, 188 insertions(+), 140 deletions(-) delete mode 100644 src/accounts/account.delete.tmpl.html delete mode 100644 src/accounts/account.form.tmpl.html create mode 100644 src/accounts/accountDeleteModal.component.ts create mode 100644 src/accounts/accountEditModal.component.ts diff --git a/src/accounts/account.component.ts b/src/accounts/account.component.ts index 027af1b..cdcf98e 100644 --- a/src/accounts/account.component.ts +++ b/src/accounts/account.component.ts @@ -1,17 +1,16 @@ import { Observable } from 'rxjs/Rx'; import { Logger } from '@nsalaun/ng-logger'; - -var accountFormTmpl = require('./account.form.tmpl.html'), - accountDeleteTmpl = require('./account.delete.tmpl.html'); +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; 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'; export class AccountComponent { - static $inject = ['AccountService', 'AccountBalancesService', 'Notification', 'Logger', '$modal']; + static $inject = ['AccountService', 'AccountBalancesService', 'Notification', 'Logger', 'NgbModal']; accounts: Account[]; @@ -20,7 +19,7 @@ export class AccountComponent { private AccountBalancesService: AccountBalancesService, private Notification, private Logger: Logger, - private $modal + private NgbModal: NgbModal ) { // Load accounts. this.load(); @@ -107,23 +106,14 @@ export class AccountComponent { }; confirmDelete(account) { - var title = "Delete account #" + account.id; + const modal = this.NgbModal.open(AccountDeleteModalComponent, { + windowClass: 'in' + }); - this.$modal({ - templateUrl: accountDeleteTmpl, - controller: function($scope, title, account, $delete) { - $scope.title = title; - $scope.account = account; - $scope.$delete = function() { - $scope.$hide(); - $delete($scope.account); - }; - }, - locals: { - title: title, - account: account, - $delete: (account: Account) => { this.delete(account); } - } + modal.componentInstance.account = account; + + modal.result.then((account: Account) => { + this.delete(account); }); }; @@ -151,30 +141,15 @@ export class AccountComponent { * Open the popup to modify the account, save it on confirm. */ modify(account) { - // FIXME Alexis Lahouze 2017-06-15 i18n - var title = "Account"; + const modal = this.NgbModal.open(AccountEditModalComponent, { + windowClass: 'in' + }); - if (account.id) { - title = title + " #" + account.id; - } + modal.componentInstance.account = account; - this.$modal({ - templateUrl: accountFormTmpl, - controller: function($scope, title, account, $save) { - $scope.title = title; - $scope.account = account; - $scope.account.authorized_overdraft *= -1; - $scope.$save = function() { - $scope.$hide(); - $scope.account.authorized_overdraft *= -1; - $save($scope.account); - }; - }, - locals: { - title: title, - account: account, - $save: (account: Account) => { this.save(account); } - } + modal.result.then((account: Account) => { + this.Logger.log("Modal closed => save account", account); + this.save(account); }); }; }; diff --git a/src/accounts/account.delete.tmpl.html b/src/accounts/account.delete.tmpl.html deleted file mode 100644 index b1f4bb5..0000000 --- a/src/accounts/account.delete.tmpl.html +++ /dev/null @@ -1,23 +0,0 @@ - diff --git a/src/accounts/account.form.tmpl.html b/src/accounts/account.form.tmpl.html deleted file mode 100644 index 9963fd1..0000000 --- a/src/accounts/account.form.tmpl.html +++ /dev/null @@ -1,72 +0,0 @@ - - - diff --git a/src/accounts/account.module.ts b/src/accounts/account.module.ts index ee89a7c..439acfb 100644 --- a/src/accounts/account.module.ts +++ b/src/accounts/account.module.ts @@ -1,24 +1,40 @@ // vim: set tw=80 ts=2 sw=2 sts=2 : import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { NgLoggerModule, Level } from '@nsalaun/ng-logger'; import { RestangularModule } from 'ngx-restangular'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AccountService } from './account.service'; import { AccountBalancesService } from './accountBalances.service'; +import { AccountDeleteModalComponent } from './accountDeleteModal.component'; +import { AccountEditModalComponent } from './accountEditModal.component'; @NgModule({ imports: [ HttpModule, + CommonModule, + FormsModule, NgLoggerModule, - RestangularModule + RestangularModule, + NgbModule ], providers: [ AccountService, AccountBalancesService, ], + declarations: [ + AccountDeleteModalComponent, + AccountEditModalComponent + ], + entryComponents: [ + AccountDeleteModalComponent, + AccountEditModalComponent + ] }) export class AccountModule {} diff --git a/src/accounts/accountDeleteModal.component.ts b/src/accounts/accountDeleteModal.component.ts new file mode 100644 index 0000000..0f375fa --- /dev/null +++ b/src/accounts/accountDeleteModal.component.ts @@ -0,0 +1,53 @@ +// vim: set tw=80 ts=2 sw=2 sts=2: +import { Component, Input } from '@angular/core'; + +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; + +import { Account } from './account'; + +@Component({ + selector: 'account-delete-modal', + template: ` +
+ +
+ +
+

+ Do you really want to delete account #{{ account.id }} with name:
+ {{ account.name }} +

+
+ +
+ + + +
+ ` +}) +export class AccountDeleteModalComponent { + @Input() account: Account + + constructor(public activeModal: NgbActiveModal) {} + + title(): string { + if(this.account.id) { + return "Account #" + this.account.id; + } else { + return "New account"; + } + } + + submit(): void { + this.activeModal.close(this.account); + } + + cancel(): void { + this.activeModal.dismiss("closed"); + } +} diff --git a/src/accounts/accountEditModal.component.ts b/src/accounts/accountEditModal.component.ts new file mode 100644 index 0000000..4de215a --- /dev/null +++ b/src/accounts/accountEditModal.component.ts @@ -0,0 +1,96 @@ +// vim: set tw=80 ts=2 sw=2 sts=2: +import { Component, Input } from '@angular/core'; + +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; + +import { Account } from './account'; + +@Component({ + selector: 'account-edit-modal', + template: ` +
+ +
+ +
+
+
+ + +
+ + +
+

The account name is required.

+
+
+
+ +
+ + +
+
+
-
+ + + +
.00€
+
+ +
+

+ The authorized overdraft is required. +

+ +

+ The authorized overdraft must be equal or greater than 0. +

+
+
+
+
+
+ +
+ + + +
+ ` +}) +export class AccountEditModalComponent { + @Input() account: Account + + constructor(public activeModal: NgbActiveModal) {} + + title(): string { + if(this.account.id) { + return "Account #" + this.account.id; + } else { + return "New account"; + } + } + + submit(): void { + this.activeModal.close(this.account); + } + + cancel(): void { + this.activeModal.dismiss("closed"); + } +} diff --git a/src/accounts/index.ts b/src/accounts/index.ts index 42c9069..73545f8 100644 --- a/src/accounts/index.ts +++ b/src/accounts/index.ts @@ -28,6 +28,7 @@ var ngResource = require('angular-resource'), ngStrap = require('angular-strap'); import { Logger } from '@nsalaun/ng-logger'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; var accountsTmpl = require('./accounts.html'); @@ -44,6 +45,8 @@ export default angular.module('accountant.accounts', [ .factory('Logger', downgradeInjectable(Logger)) + .factory('NgbModal', downgradeInjectable(NgbModal)) + .factory('AccountBalancesService', downgradeInjectable(AccountBalancesService)) .factory('AccountService', downgradeInjectable(AccountService))