Use ng-bootstrap Modal.

src/accounts/account.component.ts

@@ -1,17 +1,16 @@
 import { Observable } from 'rxjs/Rx';
 
 import { Logger } from '@nsalaun/ng-logger';
-
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-var accountFormTmpl = require('./account.form.tmpl.html'),
-    accountDeleteTmpl = require('./account.delete.tmpl.html');
 
 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({
+        modal.componentInstance.account = account;
-            templateUrl: accountDeleteTmpl,
+
-            controller: function($scope, title, account, $delete) {
+        modal.result.then((account: Account) => {
-                $scope.title = title;
+            this.delete(account);
-                $scope.account = account;
-                $scope.$delete = function() {
-                    $scope.$hide();
-                    $delete($scope.account);
-                };
-            },
-            locals: {
-                title: title,
-                account: account,
-                $delete: (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
+        const modal = this.NgbModal.open(AccountEditModalComponent, {
-        var title = "Account";
+            windowClass: 'in'
+        });
 
-        if (account.id) {
+        modal.componentInstance.account = account;
-            title = title + " #" + account.id;
-        }
 
-        this.$modal({
+        modal.result.then((account: Account) => {
-            templateUrl: accountFormTmpl,
+            this.Logger.log("Modal closed => save account", account);
-            controller: function($scope, title, account, $save) {
+            this.save(account);
-                $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); }
-            }
         });
     };
 };

src/accounts/account.delete.tmpl.html

@@ -1,23 +0,0 @@
-<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h3 class="modal-title" id="modal-title">{{ title }}</h3>
-      </div>
-
-      <div class="modal-body" id="modal-body">
-        <p>Voulez-vous supprimer le compte #{{ account.id }} ayant pour nom :<br/>{{ account.name }}
-        </p>
-      </div>
-
-      <div class="modal-footer">
-        <button class="btn btn-danger" type="button" ng-click="$delete()">
-          Supprimer
-        </button>
-        <button class="btn btn-default" type="button" ng-click="$hide()">
-          Annuler
-        </button>
-      </div>
-    </div>
-  </div>
-</div>

src/accounts/account.form.tmpl.html

@@ -1,72 +0,0 @@
-<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
-<!--
-    This file is part of Accountant.
-
-    Accountant is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    Accountant is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
--->
-<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h3 class="modal-title" id="modal-title">{{ title }}</h3>
-      </div>
-
-      <form name="form" class="form-horizontal simple-form" novalidate
-        ng-submit="$save()">
-        <div class="modal-body" id="modal-body">
-          <div class="form-group" ng-class="{ 'has-error' : form.name.$invalid && !form.name.$pristine }">
-            <label class="col-sm-4 control-label" for="name">Account name</label>
-            <div class="col-sm-8">
-              <input class="form-control" id="name" name="name"
-                ng-model="account.name"
-                type="text" placeholder="Account name"
-                required />
-
-              <div class="help-block" ng-messages="form.name.$error" ng-if="form.name.$invalid">
-                <p ng-message="required">The account name is required.</p>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group" ng-class="{ 'has-error' : form.authorized_overdraft.$invalid && !form.authorized_overdraft.$pristine }">
-            <label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
-            <div class="col-sm-8">
-              <div class="input-group">
-                <div class="input-group-addon">-</div>
-                <input class="form-control" id="authorized-overdraft"
-                  name="authorized_overdraft"
-                  ng-model="account.authorized_overdraft"
-                  type="number" placeholder="Authorized overdraft"
-                  required min="0"/>
-                <div class="input-group-addon">.00€</div>
-              </div>
-
-              <div class="help-block" ng-messages="form.authorized_overdraft.$error" ng-if="form.authorized_overdraft.$invalid">
-                <p ng-message="required">The authorized overdraft is required.</p>
-                <p ng-message="min">The authorized overdraft must be equal or greater than 0.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="modal-footer">
-          <input class="btn btn-primary" type="submit" ng-disabled="form.$invalid"/>
-          <button class="btn btn-default" type="button" ng-click="$hide()">
-            Annuler
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>

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 {}
 

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: `
+    <div class="modal-header">
+      <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
+    </div>
+
+    <div class="modal-body" id="modal-body">
+      <p>
+      Do you really want to delete account #{{ account.id }} with name:<br/>
+      {{ account.name }}
+      </p>
+    </div>
+
+    <div class="modal-footer">
+      <button class="btn btn-danger" (click)="submit()">
+        Yes
+      </button>
+
+      <button class="btn btn-default" (click)="cancel()">
+        No
+      </button>
+    </div>
+  `
+})
+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");
+  }
+}

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: `
+<div class="modal-header">
+  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
+</div>
+
+<div class="modal-body" id="modal-body">
+  <form class="form-horizontal simple-form" novalidate (submit)="submit()" #accountForm="ngForm">
+    <div class="form-group"
+      [ngClass]="{ 'has-error': name.errors }">
+      <label class="col-sm-4 control-label" for="name">Account name</label>
+
+      <div class="col-sm-8">
+        <input class="form-control"
+          type="text" placeholder="Account name"
+          id="name" name="name"
+          [(ngModel)]="account.name" #name="ngModel"
+          required>
+
+        <div class="help-block" *ngIf="name.errors && name.touched">
+          <p [hidden]="!name.errors.required">The account name is required.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group"
+      [ngClass]="{ 'has-error': authorizedOverdraft.errors }">
+      <label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
+
+      <div class="col-sm-8">
+        <div class="input-group">
+          <div class="input-group-addon">-</div>
+
+          <input class="form-control"
+            type="number" placeholder="Authorized overdraft"
+            id="authorized-overdraft" name="authorized_overdraft"
+            [(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
+            required min="0">
+
+          <div class="input-group-addon">.00€</div>
+        </div>
+
+        <div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched">
+          <p [hidden]="!authorizedOverdraft.errors.required">
+            The authorized overdraft is required.
+          </p>
+
+          <p [hidden]="!authorizedOverdraft.errors.min">
+            The authorized overdraft must be equal or greater than 0.
+          </p>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+
+<div class="modal-footer">
+  <button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
+    Save
+  </button>
+
+  <button class="btn btn-default" (click)="cancel()">
+    Cancel
+  </button>
+</div>
+  `
+})
+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");
+  }
+}

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))