Remove require.

.gitignore

@@ -81,5 +81,4 @@ tags
 
 # End of https://www.gitignore.io/api/vim,node
 
-/dist
+/build
-

config/helpers.js

@@ -1,10 +0,0 @@
-var path = require('path');
-
-var _root = path.resolve(__dirname, '..');
-
-function root(args) {
-  args = Array.prototype.slice.call(arguments, 0);
-  return path.join.apply(path, [_root].concat(args));
-}
-
-exports.root = root;

config/webpack.common.js

@@ -1,119 +0,0 @@
-// vim: set tw=80 ts=2 sw=2 sts=2:
-
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const helpers = require('./helpers');
-
-module.exports = {
-  entry: {
-    'polyfills': './src/polyfills.ts',
-    'vendor': './src/vendor.ts',
-    'app': './src/main.ts',
-    'styles': './src/main.scss'
-  },
-
-  resolve: {
-    extensions: ['.ts', '.js'],
-  },
-
-  module: {
-    rules: [{
-      enforce: 'pre',
-      test: /webpack\.config\.js$/,
-      include: helpers.root('src', 'app'),
-      loader: 'eslint-loader',
-      options: {
-        useEslintrc: false,
-        emitWarning: true,
-        emitError: true,
-        failOnWarning: true,
-        failOnError: true,
-        baseConfig: 'webpack',
-        rules: {
-          indent: ['error', 4]
-        },
-      },
-    }, {
-      // Javascript
-      enforce: 'pre',
-      test: /\.jsx?$/,
-      include: helpers.root('src', 'app'),
-      loader: 'eslint-loader',
-      options: {
-        useEslintrc: false,
-        emitWarning: false,
-        emitError: true,
-        failOnWarning: false,
-        failOnError: true,
-        baseConfig: 'angular',
-        rules: {
-          indent: ['error', 4]
-        },
-        plugins: [
-          'angular',
-          'html',
-          'security',
-          'this',
-          'jquery',
-          'promise'
-        ]
-      },
-    // }, {
-    //   test: /\.jsx?$/,
-    //   exclude: /node_modules/,
-    //   loader: 'babel-loader'
-    }, {
-      test: /\.ts$/,
-      use: [
-        {
-          loader: 'awesome-typescript-loader',
-          options: { configFileName: helpers.root('src', 'tsconfig.json') }
-        },
-        'angular2-template-loader'
-      ]
-    }, {
-      test: /\.html$/,
-      include: helpers.root('src'),
-      loader: 'html-loader'
-    }, {
-      test: /\.css$/,
-      //include: helpers.root('src'),
-      use: [
-        'style-loader',
-        'css-loader',
-        'resolve-url-loader'
-      ]
-    }, {
-      test: /\.scss$/,
-      use: [
-        'style-loader',
-        'css-loader',
-        'resolve-url-loader',
-        'sass-loader?sourceMap'
-      ]
-    }, {
-      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-      loader: 'file-loader?name=assets/[name].[hash].[ext]'
-    }]
-  },
-
-  optimization: {
-    splitChunks: {
-      name: true
-    }
-  },
-
-  plugins: [
-    // Workaround for angular/angular#11580
-    new webpack.ContextReplacementPlugin(
-      // The (\\|\/) piece accounts for path separators in *nix and Windows
-      /angular(\\|\/)core(\\|\/)@angular/,
-      helpers.root('./src'), // location of your src
-      {} // a map of your routes
-    ),
-
-    new HtmlWebpackPlugin({
-      template: 'src/index.ejs'
-    })
-  ],
-};

config/webpack.dev.js

@@ -1,34 +0,0 @@
-// vim: set tw=80 ts=2 sw=2 sts=2:
-
-const webpackMerge = require('webpack-merge');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const commonConfig = require('./webpack.common.js');
-const helpers = require('./helpers');
-
-module.exports = webpackMerge(commonConfig, {
-  devtool: 'cheap-module-eval-source-map',
-
-  mode: 'development',
-
-  output: {
-    path: helpers.root('dist'),
-    publicPath: '/',
-    filename: '[name].js',
-    chunkFilename: '[id].chunk.js'
-  },
-
-  plugins: [
-    new ExtractTextPlugin('[name].css')
-  ],
-
-  devServer: {
-    proxy: {
-      '/api': {
-        target: 'http://localhost:5000',
-        secure: false
-      }
-    },
-    historyApiFallback: true,
-    stats: 'minimal'
-  }
-});

config/webpack.prod.js

@@ -1,41 +0,0 @@
-/* jshint esversion: 6 */
-const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const commonConfig = require('./webpack.common.js');
-const helpers = require('./helpers');
-
-const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
-
-module.exports = webpackMerge(commonConfig, {
-  devtool: 'source-map',
-
-  mode: 'production',
-
-  output: {
-    path: helpers.root('dist'),
-    publicPath: '/',
-    filename: '[name].[hash].js',
-    chunkFilename: '[id].[hash].chunk.js'
-  },
-
-  plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
-      mangle: {
-        keep_fnames: true
-      }
-    }),
-    new ExtractTextPlugin('[name].[hash].css'),
-    new webpack.DefinePlugin({
-      'process.env': {
-        'ENV': JSON.stringify(ENV)
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      htmlLoader: {
-        minimize: false // workaround for ng2
-      }
-    })
-  ]
-});

package.json

@@ -4,89 +4,82 @@
   "repository": "https://git.lahouze.org/xals/accountant",
   "license": "AGPL-1.0",
   "devDependencies": {
-    "@angular/cli": "^6.0.7",
+    "@types/requirejs": "^2.1.31",
-    "@angular/compiler-cli": "^6.0.3",
-    "@ngtools/webpack": "^6.1.0-beta.1",
     "angular2-template-loader": "^0.6.2",
-    "awesome-typescript-loader": "^5.0.0",
+    "awesome-typescript-loader": "^3.2.3",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
+    "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "^7.1.2",
-    "copy-webpack-plugin": "^4.5.1",
+    "codelyzer": "^3.2.0",
-    "css-loader": "^0.28.10",
+    "css-loader": "^0.28.7",
-    "ejs-loader": "^0.3.1",
+    "ejs-loader": "^0.3.0",
-    "eslint": "^4.18.2",
+    "eslint": "^4.10.0",
     "eslint-config-angular": "^0.5.0",
     "eslint-config-webpack": "^1.2.5",
-    "eslint-loader": "^2.0.0",
+    "eslint-loader": "^1.9.0",
-    "eslint-plugin-angular": "^3.3.0",
+    "eslint-plugin-angular": "^3.1.1",
-    "eslint-plugin-html": "^4.0.2",
+    "eslint-plugin-html": "^3.2.2",
-    "eslint-plugin-jquery": "^1.3.0",
+    "eslint-plugin-jquery": "^1.2.1",
-    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-security": "^1.4.0",
     "eslint-plugin-this": "^0.2.2",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.11",
+    "file-loader": "^1.1.5",
-    "html-loader": "^0.5.5",
+    "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^3.0.6",
+    "html-webpack-plugin": "^2.30.1",
     "htmllint-loader": "^2.1.4",
-    "imports-loader": "^0.8.0",
+    "imports-loader": "^0.7.1",
-    "less": "^3.0.1",
+    "less": "^3.0.0-alpha.3",
-    "less-loader": "^4.1.0",
+    "less-loader": "^4.0.5",
-    "loglevel": "^1.6.1",
+    "loglevel": "^1.5.1",
     "ngtemplate-loader": "^2.0.1",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.5.3",
-    "null-loader": "^0.1.1",
+    "resolve-url-loader": "^2.1.0",
-    "raw-loader": "^0.5.1",
+    "sass-loader": "^6.0.6",
-    "resolve-url-loader": "^2.3.0",
+    "style-loader": "^0.19.0",
-    "sass-loader": "^7.0.2",
+    "ts-loader": "^3.1.0",
-    "script-ext-html-webpack-plugin": "^2.0.1",
+    "tslint": "^5.7.0",
-    "style-loader": "^0.21.0",
+    "tslint-config-prettier": "^1.5.0",
-    "ts-loader": "^4.0.1",
+    "tslint-loader": "^3.5.3",
-    "typescript": "~2.7.2",
+    "typescript": "^2.5.2",
-    "typescript-eslint-parser": "^15.0.0",
+    "url-loader": "^0.6.2",
-    "url-loader": "^1.0.1",
+    "webpack": "^3.8.1",
-    "webpack": "^4.8.0",
+    "webpack-dev-server": "^2.9.3"
-    "webpack-cli": "^3.0.1",
-    "webpack-dev-server": "^3.1.0",
-    "webpack-merge": "^4.1.1"
   },
   "dependencies": {
-    "@angular/animations": "^6.0.3",
+    "@angular/animations": "^4.4.6",
-    "@angular/common": "^6.0.3",
+    "@angular/cdk": "^2.0.0-beta.10",
-    "@angular/compiler": "^6.0.3",
+    "@angular/common": "^4.4.6",
-    "@angular/core": "^6.0.3",
+    "@angular/compiler": "^4.4.6",
-    "@angular/forms": "^6.0.3",
+    "@angular/core": "^4.4.6",
-    "@angular/http": "^6.0.3",
+    "@angular/flex-layout": "^2.0.0-beta.9",
-    "@angular/platform-browser": "^6.0.3",
+    "@angular/forms": "^4.4.6",
-    "@angular/platform-browser-dynamic": "^6.0.3",
+    "@angular/http": "^4.4.6",
-    "@angular/router": "^6.0.3",
+    "@angular/material": "^2.0.0-beta.10",
-    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
+    "@angular/platform-browser": "^4.4.6",
-    "@nsalaun/ng-logger": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^4.4.6",
-    "@swimlane/ngx-charts": "^8.0.2",
+    "@angular/router": "^4.4.6",
-    "@types/d3": "^5.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.2",
-    "@types/geojson": "^7946.0.3",
+    "@nsalaun/ng-logger": "^2.0.2",
-    "@types/node": "^10.3.2",
+    "@types/c3": "^0.4.45",
-    "@types/underscore": "^1.8.8",
+    "@types/jquery": "^3.2.12",
-    "angular2-text-mask": "^9.0.0",
+    "@types/node": "^8.0.47",
-    "base64util": "^2.0.0-f",
+    "angular2-text-mask": "^8.0.4",
-    "bootstrap": "4.1.1",
+    "base64util": "^1.0.2",
-    "d3": "^5.0.0",
+    "bootstrap": "^4.0.0-beta",
+    "c3": "^0.4.18",
     "font-awesome": "^4.7.0",
-    "jquery": "^3.3.1",
+    "jquery": "^3.2.1",
-    "jqwidgets-scripts": "^5.7.2",
+    "material-design-icons": "^3.0.1",
-    "moment": "^2.21.0",
+    "moment": "^2.19.1",
-    "ng2-nvd3": "^2.0.0",
+    "ngx-toastr": "^6.5.0",
-    "ngx-toastr": "^8.3.0",
+    "reflect-metadata": "^0.1.10",
-    "reflect-metadata": "^0.1.12",
+    "roboto-fontface": "^0.8.0",
-    "rxjs": "^6.2.0",
+    "rxjs": "^5.5.2",
-    "rxjs-compat": "^6.2.0",
+    "zone.js": "^0.8.17"
-    "underscore": "^1.8.3",
-    "zone.js": "^0.8.20"
   },
   "scripts": {
-    "build": "rm -Rf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
+    "build": "webpack --config webpack.config.js",
-    "test": "karma start",
+    "dev": "webpack-dev-server --debug --devtool eval --config webpack.config.js --progress --colors --hot --content-base build"
-    "dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --colors --hot --info --debug --devtool eval-cheap-module-source-map"
   }
 }

src/accounts/account.dataSource.ts

@@ -0,0 +1,36 @@
+// vim: set tw=80 ts=2 sw=2 sts=2:
+
+import { Injectable } from '@angular/core';
+import { DataSource } from '@angular/cdk/collections';
+import { Observable } from 'rxjs/Rx';
+
+import { Account } from './account';
+import { AccountBalances } from './accountBalances';
+import { AccountBalancesService } from './accountBalances.service';
+import { AccountService } from './account.service';
+
+@Injectable()
+export class AccountDataSource extends DataSource<Account> {
+  constructor(
+    private accountService: AccountService,
+    private accountBalancesService: AccountBalancesService,
+  ) {
+    super();
+  }
+
+  connect(): Observable<Account[]> {
+    return this.accountService.query().map((accounts: Account[]) => {
+      for(let account of accounts) {
+        this.accountBalancesService
+          .get(account.id)
+          .subscribe((accountBalances: AccountBalances) => {
+            account.balances = accountBalances;
+          })
+      }
+
+      return accounts;
+    });
+  }
+
+  disconnect() {}
+}

src/accounts/account.module.ts

@@ -3,6 +3,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
+import {
+  MdButtonModule,
+  MdDialogModule,
+  MdIconModule,
+  MdInputModule,
+  MdListModule,
+  MdTableModule,
+} from '@angular/material';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
@@ -13,10 +21,10 @@ import { ToastrModule } from 'ngx-toastr';
 import { AccountService } from './account.service';
 import { AccountBalancesService } from './accountBalances.service';
 import { AccountListComponent } from './accountList.component';
+import { AccountDataSource } from './account.dataSource';
 import { AccountDeleteModalComponent } from './accountDeleteModal.component';
 import { AccountEditModalComponent } from './accountEditModal.component';
 import { AccountFormComponent } from './accountForm.component';
-import { AccountRowComponent } from './accountRow.component';
 import { DailyBalanceService } from './dailyBalance.service';
 import { AccountListState } from './account.states'
 
@@ -28,12 +36,19 @@ import { AccountListState } from './account.states'
     RouterModule.forChild([
       AccountListState
     ]),
+    MdButtonModule,
+    MdDialogModule,
+    MdIconModule,
+    MdInputModule,
+    MdListModule,
+    MdTableModule,
     NgLoggerModule,
     ToastrModule,
-    NgbModule
+    NgbModule,
   ],
   providers: [
     AccountService,
+    AccountDataSource,
     AccountBalancesService,
     DailyBalanceService,
   ],
@@ -42,7 +57,6 @@ import { AccountListState } from './account.states'
     AccountDeleteModalComponent,
     AccountEditModalComponent,
     AccountFormComponent,
-    AccountRowComponent
   ],
   entryComponents: [
     AccountListComponent,

src/accounts/account.ts

@@ -3,13 +3,13 @@
 import { AccountBalances } from './accountBalances';
 
 export class Account {
-  public id: number;
+  id: number;
-  public name: string;
+  name: string;
-  public authorized_overdraft: number;
+  authorized_overdraft: number;
 
-  public balances: AccountBalances;
+  balances: AccountBalances;
 
-  public constructor() {
+  constructor() {
     this.authorized_overdraft = 0;
   }
 }

src/accounts/accountBalances.ts

@@ -1,6 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 export class AccountBalances {
-  public current: number;
+  current: number;
-  public pointed: number;
+  pointed: number;
-  public future: number;
+  future: number;
 }

src/accounts/accountDeleteModal.component.html

@@ -1,20 +0,0 @@
-<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>

src/accounts/accountDeleteModal.component.ts

@@ -1,32 +1,30 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input } from '@angular/core';
+import { Component, Inject } from '@angular/core';
-
+import { MD_DIALOG_DATA } from '@angular/material';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-
-import { Account } from './account';
 
 @Component({
   selector: 'account-delete-modal',
-  templateUrl: './accountDeleteModal.component.html'
+  template: `
+    <h3 md-dialog-title>Delete account #{{ data.account.id }}</h3>
+
+    <md-dialog-content>
+      Do you really want to delete account #{{ data.account.id }} with name:<br/>
+      {{ data.account.name }}
+    </md-dialog-content>
+
+    <md-dialog-actions>
+      <button md-raised-button color="warn" [md-dialog-close]="data.account">
+        Yes
+      </button>
+
+      <button md-raised-button md-dialog-close>
+        No
+      </button>
+    </md-dialog-actions>
+  `
 })
 export class AccountDeleteModalComponent {
-  @Input() account: Account
+  constructor(
-
+    @Inject(MD_DIALOG_DATA) private data: any
-  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.html

@@ -1,17 +0,0 @@
-<div class="modal-header">
-  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
-</div>
-
-<div class="modal-body" id="modal-body">
-  <account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-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>

src/accounts/accountEditModal.component.ts

@@ -1,23 +1,44 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Inject, ViewChild } from '@angular/core';
-
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { Account } from './account';
 import { AccountFormComponent } from './accountForm.component';
 
 @Component({
   selector: 'account-edit-modal',
-  templateUrl: './accountEditModal.component.html'
+  template: `
+<h3 md-dialog-title>{{ title() }}</h3>
+
+<md-dialog-content>
+  <account-form [account]="account" (submit)="submit()" #accountForm="accountForm">
+  </account-form>
+</md-dialog-content>
+
+<md-dialog-actions>
+  <button md-raised-button color="primary" [disabled]="!accountForm?.form.valid" (click)="submit()">
+    Save
+  </button>
+
+  <button md-raised-button color="warn" md-dialog-close>
+    Cancel
+  </button>
+</md-dialog-actions>
+  `
 })
 export class AccountEditModalComponent {
-  @Input() account: Account;
+  private account: Account;
   @ViewChild('accountForm') accountForm: AccountFormComponent;
 
-  constructor(private activeModal: NgbActiveModal) {}
+  constructor(
+    @Inject(MD_DIALOG_DATA) public data: any,
+    public dialogRef: MdDialogRef<AccountEditModalComponent>,
+  ) {
+    this.account = data.account;
+  }
 
   title(): string {
-    if(this.account.id) {
+    if(this.account && this.account.id) {
       return "Account #" + this.account.id;
     } else {
       return "New account";
@@ -30,12 +51,8 @@ export class AccountEditModalComponent {
 
     account.id = this.account.id;
     account.name = formModel.name;
-    account.authorized_overdraft = formModel.authorizedOverdraft;
+    account.authorized_overdraft = -formModel.authorizedOverdraft;
 
-    this.activeModal.close(account);
+    this.dialogRef.close(account);
-  }
-
-  cancel(): void {
-    this.activeModal.dismiss("closed");
   }
 }

src/accounts/accountForm.component.html

@@ -1,47 +0,0 @@
-<form novalidate
-  (keyup.enter)="submit()" [formGroup]="form">
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="name">
-      Account name
-    </label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="name.errors">
-      <input class="form-control"
-        id="name" formControlName="name"
-        placeholder="Account name">
-
-      <div class="help-block text-danger" *ngIf="name.errors">
-        <p *ngIf="name.errors.required">The account name is required.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="authorized-overdraft">
-      Authorized overdraft
-    </label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="authorizedOverdraft.errors">
-      <div class="input-group">
-        <input class="form-control"
-          id="authorized-overdraft" formControlName="authorizedOverdraft"
-          placeholder="Authorized overdraft">
-
-        <div class="input-group-addon">.00€</div>
-      </div>
-
-      <div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
-        <p *ngIf="authorizedOverdraft.errors.required">
-          The authorized overdraft is required.
-        </p>
-
-        <p *ngIf="authorizedOverdraft.errors.max">
-          The authorized overdraft must be less than or equal to 0.
-        </p>
-      </div>
-    </div>
-  </div>
-</form>
-

src/accounts/accountForm.component.ts

@@ -7,7 +7,36 @@ import { Account } from './account';
 @Component({
   selector: 'account-form',
   exportAs: 'accountForm',
-  templateUrl: './accountForm.component.html'
+  template: `
+<form novalidate (keyup.enter)="submit()" [formGroup]="form">
+  <md-list>
+    <md-list-item>
+      <md-form-field>
+        <input mdInput formControlName="name" placeholder="Account name">
+
+        <md-error *ngIf="name.errors?.required">The account name is required.</md-error>
+      </md-form-field>
+    </md-list-item>
+
+    <md-list-item>
+      <md-form-field>
+        <span mdPrefix>-</span>
+        <input mdInput formControlName="authorizedOverdraft"
+          placeholder="Authorized overdraft">
+        <span mdSuffix>.00€</span>
+
+        <md-error *ngIf="authorizedOverdraft.errors?.required">
+          The authorized overdraft is required.
+        </md-error>
+
+        <md-error *ngIf="authorizedOverdraft.errors?.min">
+          The authorized overdraft must be less than or equal to 0.
+        </md-error>
+      </md-form-field>
+    </md-list-item>
+  </md-list>
+</form>
+  `
 })
 export class AccountFormComponent implements OnInit {
   public form: FormGroup;
@@ -19,12 +48,12 @@ export class AccountFormComponent implements OnInit {
   ngOnInit() {
     this.form = this.formBuilder.group({
       name: ['', Validators.required],
-      authorizedOverdraft: ['', [Validators.required, Validators.max(0)]],
+      authorizedOverdraft: ['', [Validators.required, Validators.min(0)]],
     });
 
     this.form.patchValue({
       name: this.account.name,
-      authorizedOverdraft: this.account.authorized_overdraft
+      authorizedOverdraft: -this.account.authorized_overdraft
     });
   }
 

src/accounts/accountList.component.html

@@ -1,27 +0,0 @@
-<div class="row">
-  <table class="table table-sm table-striped table-condensed table-hover">
-    <thead>
-      <tr>
-        <th>Nom du compte</th>
-        <th>Solde courant</th>
-        <th>Solde pointé</th>
-        <th>Découvert autorisé</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr>
-        <td colspan="5">
-          <button class="btn btn-success" (click)="add()">
-            Ajouter
-          </button>
-        </td>
-      </tr>
-
-      <tr *ngFor="let account of accounts"
-        [account-row]="account" (needsReload)="load()">
-      </tr>
-    </tbody>
-  </table>
-</div>

src/accounts/accountList.component.ts

@@ -1,59 +1,141 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { MdDialog } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 
 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 { AccountDataSource } from './account.dataSource';
 import { AccountService } from './account.service';
+import { AccountDeleteModalComponent } from './accountDeleteModal.component';
 import { AccountEditModalComponent } from './accountEditModal.component';
 
 @Component({
   selector: 'account-list',
-  templateUrl: './accountList.component.html',
+  template: `
+<div class="containerX">
+  <div class="container">
+    <button md-fab color="primary" (click)="add()">
+      <md-icon>add</md-icon>
+    </button>
+  </div>
+
+  <div class="container">
+    <md-table #table [dataSource]="accounts">
+      <ng-container mdColumnDef="name">
+        <md-header-cell *mdHeaderCellDef>Nom du compte</md-header-cell>
+        <md-cell *mdCellDef="let account">
+          <a [routerLink]="['/account', account.id, 'operations']">
+            {{ account.name }}
+          </a>
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="current">
+        <md-header-cell *mdHeaderCellDef>Solde courant</md-header-cell>
+        <md-cell *mdCellDef="let account">
+          <span
+            [class.warning]="account.authorized_overdraft < 0 && account.balances?.current < 0"
+            [class.error]="account.balances?.current < account.authorized_overdraft">
+            {{ account.balances?.current | currency:"EUR":true }}
+          </span>
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="pointed">
+        <md-header-cell *mdHeaderCellDef>Solde pointé</md-header-cell>
+        <md-cell *mdCellDef="let account">
+          <span
+            [class.warning]="account.authorized_overdraft < 0 && account.balances?.pointed < 0"
+            [class.error]="account.balances?.pointed < account.authorized_overdraft">
+            {{ account.balances?.pointed | currency:"EUR":true }}
+          </span>
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="authorizedOverdraft">
+        <md-header-cell *mdHeaderCellDef>Découvert autorisé</md-header-cell>
+        <md-cell *mdCellDef="let account">
+          {{ account.authorized_overdraft | currency:"EUR":true }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="actions">
+        <md-header-cell *mdHeaderCellDef>Actions</md-header-cell>
+        <md-cell *mdCellDef="let account">
+          <!-- Edit account. -->
+          <button md-mini-fab color="primary"
+            (click)="modify(account)">
+            <md-icon>mode_edit</md-icon>
+          </button>
+
+          <!-- Delete account, with confirm. -->
+          <button md-mini-fab color="warn"
+            (click)="confirmDelete(account)">
+            <md-icon>delete_forever</md-icon>
+          </button>
+
+          <!-- Open account scheduler. -->
+          <button md-mini-fab
+            [hidden]="!account.id"
+            [routerLink]="['/account', account.id, 'scheduler']">
+            <md-icon>event</md-icon>
+          </button>
+        </md-cell>
+      </ng-container>
+
+      <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
+      <md-row *mdRowDef="let row; columns: displayedColumns;">
+      </md-row>
+    </md-table>
+  </div>
+</div>
+    `,
 })
-export class AccountListComponent implements OnInit {
+export class AccountListComponent {
-  accounts: Account[];
+  displayedColumns: String[] = [
+    'name', 'current', 'pointed', 'authorizedOverdraft', 'actions'
+  ];
 
   constructor(
+    private accounts: AccountDataSource,
     private accountService: AccountService,
     private toastrService: ToastrService,
     private logger: Logger,
-    private ngbModal: NgbModal
+    private mdDialog: MdDialog,
   ) {
   }
 
-  ngOnInit() {
-    // Load accounts.
-    this.load();
-  }
-
-  load() {
-    this.logger.log("Load accounts.");
-    this.accountService.query().subscribe(accounts => {
-      this.accounts = accounts;
-    });
-  };
-
   /*
    * Add an empty account.
    */
   add() {
-    const modal = this.ngbModal.open(AccountEditModalComponent, {
+    this.modify(new Account());
-      size: 'lg'
+  };
+
+  /*
+   * Modify an account.
+   */
+  modify(account: Account) {
+    let dialogRef = this.mdDialog.open(AccountEditModalComponent, {
+      data: {
+        account: account,
+      }
     });
 
-    modal.componentInstance.account = new Account();
+    dialogRef.afterClosed().subscribe((account: Account) => {
-
+      if(account) {
-    modal.result.then((account: Account) => {
         this.logger.log("Modal closed => save account", account);
         this.save(account);
+      } else {
+        this.logger.log("Modal dismissed");
+      }
     }, (reason) => function(reason) {
     });
-  };
+  }
 
   /*
    * Save account.
@@ -61,8 +143,6 @@ export class AccountListComponent implements OnInit {
   save(account) {
     this.accountService.create(account).subscribe(account => {
       this.toastrService.success('Account #' + account.id + ' saved.');
-
-      this.load();
     }, result => {
       this.logger.error('Error while saving account', account, result);
 
@@ -71,4 +151,41 @@ export class AccountListComponent implements OnInit {
       );
     });
   };
+
+  /*
+   * Show a dialog to confirm account deletion.
+   */
+  confirmDelete(account: Account) {
+    let dialogRef = this.mdDialog.open(AccountDeleteModalComponent, {
+      data: {
+        account: account,
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((account: Account) => {
+      if(account) {
+        this.delete(account);
+      }
+    }, reason => {
+      this.logger.error("Delete dialog failed", reason);
+    });
+  };
+
+  /*
+   * Delete an account.
+   */
+  delete(account: Account) {
+    var id = account.id;
+
+    this.accountService.delete(account).subscribe(account => {
+      this.toastrService.success('account #' + id + ' deleted.');
+
+      // FIXME Alexis Lahouze 2017-09-17 Remove from array.
+    }, function(result) {
+      this.toastrService.error(
+        'An error occurred while trying to delete account #' +
+        id + ':<br />' + result
+      );
+    });
+  };
 };

src/accounts/accountRow.component.html

@@ -1,41 +0,0 @@
-<td>
-  <a [routerLink]="[account.id, 'operations']">{{ account.name }}</a>
-</td>
-
-<td>
-  <span (ngClass)="valueClass(accountBalances?.current)">
-    {{ accountBalances?.current | currency:'EUR':'symbol' }}
-  </span>
-</td>
-
-<td>
-  <span (ngClass)="valueClass(accountBalances?.pointed)">
-    {{ accountBalances?.pointed | currency:'EUR':'symbol' }}
-  </span>
-</td>
-
-<td>{{ account.authorized_overdraft | currency:'EUR':'symbol' }}</td>
-
-<td>
-  <div class="btn-group btn-group-sm">
-    <!-- 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-danger"
-      (click)="confirmDelete()">
-      <span class="fa fa-trash-o"></span>
-    </button>
-
-    <!-- Open account scheduler. -->
-    <a class="btn btn-secondary"
-      [hidden]="!account.id"
-      [routerLink]="[account.id, 'scheduler']">
-      <span class="fa fa-clock-o"></span>
-    </a>
-  </div>
-</td>
-

src/accounts/accountRow.component.ts

@@ -1,135 +0,0 @@
-// vim: set tw=80 ts=2 sw=2 sts=2 :
-import { CurrencyPipe } from '@angular/common';
-import { Component, 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"
-  },
-  templateUrl: './accountRow.component.html'
-})
-export class AccountRowComponent implements OnInit {
-  @Input('account-row') account: Account;
-  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
-
-  public accountBalances: AccountBalances;
-
-  constructor(
-    private accountService: AccountService,
-    private accountBalancesService: AccountBalancesService,
-    private toastrService: ToastrService,
-    private logger: Logger,
-    private ngbModal: 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 && this.accountBalances
-      && this.account.authorized_overdraft < this.accountBalances.current
-      && this.accountBalances.current < 0;
-  };
-
-  get error() {
-    return this.account && this.accountBalances
-      && 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.ngbModal.open(AccountDeleteModalComponent);
-
-    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.ngbModal.open(AccountEditModalComponent, {
-      size: 'lg'
-    });
-
-    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
-      );
-    });
-  };
-}

src/accounts/dailyBalance.ts

@@ -1,8 +1,8 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
 export class DailyBalance {
-  public operation_date: string;
+  operation_date: string;
-  public balance: number;
+  balance: number;
-  public expenses: number;
+  expenses: number;
-  public revenues: number;
+  revenues: number;
 }

src/app.component.html

@@ -1,8 +0,0 @@
-<!-- Navbar -->
-<nav class="navbar fixed-top navbar-dark bg-dark">
-  <a class="navbar-brand" routerLink="/accounts">&nbsp;Accountant</a>
-</nav>
-
-<div class="container-fluid">
-  <router-outlet></router-outlet>
-</div>

src/app.component.ts

@@ -4,6 +4,20 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'accountant',
-  templateUrl: './app.component.html'
+  styles: [ require('./main.scss').toString() ],
+  template: `
+    <md-toolbar class="mat-elevation-z6" color="primary">
+      <div class="acc-toolbar">
+        <a md-button style="text-transform: uppercase"
+          routerLink="/accounts">
+          Accountant
+        </a>
+      </div>
+    </md-toolbar>
+
+    <div class="acc-content">
+      <router-outlet></router-outlet>
+    </div>
+  `
 })
 export class AppComponent { }

src/app.module.ts

@@ -1,6 +1,14 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
+import 'zone.js';
+import 'reflect-metadata';
 
 import { NgModule } from '@angular/core';
+import {
+  MdButtonModule,
+  MdToolbarModule,
+  MdSidenavModule
+} from '@angular/material';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
@@ -30,9 +38,12 @@ import { ApiBaseURL, LogLevel } from './app.config';
       }
     ], {
       enableTracing: true,
-      useHash: true,
+      useHash: true
-      onSameUrlNavigation: 'reload'
     }),
+    FlexLayoutModule,
+    MdButtonModule,
+    MdToolbarModule,
+    MdSidenavModule,
     LoginModule,
     NgLoggerModule.forRoot(LogLevel),
     ToastrModule.forRoot(),

src/login/authInterceptor.ts

@@ -40,7 +40,7 @@ export class AuthInterceptor implements HttpInterceptor {
     let loginService = this.injector.get(LoginService);
 
     if(request.url == loginService.url) {
-      this.logger.log('Login URL, do not handle.');
+      this.logger.log("Login URL, do not handle.");
 
       return next.handle(request);
     }
@@ -61,7 +61,7 @@ export class AuthInterceptor implements HttpInterceptor {
 
     return observable.catch(
       (error, caught): Observable<any> => {
-        this.logger.error('Error', error, caught);
+        this.logger.error("Error", error, caught);
 
         if(!(error instanceof HttpErrorResponse) || error.status != 401) {
           return Observable.throw(error);
@@ -74,12 +74,12 @@ export class AuthInterceptor implements HttpInterceptor {
         }
 
         if(!this.observable) {
-          this.logger.log('No current login observable.');
+          this.logger.log("No current login observable.")
           this.observable = loginService.login();
         }
 
         return this.observable.flatMap((token: Token): Observable<HttpEvent<any>> => {
-          this.logger.log('Logged in, access_token:', token.access_token);
+          this.logger.log("Logged in, access_token:", token.access_token);
           this.observable = null;
           return this.intercept(request, next, ++pass);
         }).catch((error) => {

src/login/login.config.ts

@@ -0,0 +1,31 @@
+module.exports = function($httpProvider, $storageProvider) {
+    // Define interceptors.
+    $httpProvider.interceptors.push(function($storage) {
+        return {
+            request: function(config) {
+                var access_token = $storage.session.get('access_token');
+
+                if (access_token) {
+                    //var tokenType = $storage.get('token_type');
+                    var tokenType = 'Bearer';
+                    var authorization = tokenType + ' ' + access_token;
+                    config.headers.authorization = authorization;
+                }
+
+                return config;
+            },
+        };
+    });
+
+    // Configure storage
+    // Set global prefix for stored keys
+    $storageProvider.setPrefix('accountant');
+
+    // Change the default storage engine
+    // Defaults to 'local'
+    $storageProvider.setDefaultStorageEngine('session');
+
+    // Change the enabled storage engines
+    // Defaults to ['memory', 'cookie', 'session', 'local']
+    $storageProvider.setEnabledStorageEngines(['local', 'session']);
+};

src/login/login.module.ts

@@ -5,6 +5,12 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import {
+  MdButtonModule,
+  MdDialogModule,
+  MdInputModule,
+  MdListModule,
+} from '@angular/material';
 
 import { NgLoggerModule } from '@nsalaun/ng-logger';
 
@@ -19,6 +25,10 @@ import { LoginModalComponent } from './loginModal.component';
     CommonModule,
     ReactiveFormsModule,
     NgLoggerModule,
+    MdButtonModule,
+    MdDialogModule,
+    MdInputModule,
+    MdListModule,
   ],
   providers: [
     LoginService,

src/login/login.service.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MdDialog } from '@angular/material';
 
 import { Observable} from 'rxjs/Rx';
 
 import * as base64 from 'base64util';
 
 import { Logger } from '@nsalaun/ng-logger';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { Token } from './token';
 import { LoginModalComponent } from './loginModal.component';
@@ -18,19 +18,17 @@ export class LoginService {
     constructor(
         private httpClient: HttpClient,
         private logger: Logger,
-        private ngbModal: NgbModal,
+        private mdDialog: MdDialog,
     ) {}
 
     public readonly url: string = '/api/user/login';
 
     login(): Observable<Token> {
-        let modal = this.ngbModal.open(LoginModalComponent);
+        let dialogRef = this.mdDialog.open(LoginModalComponent);
 
         sessionStorage.clear();
 
-        let observable: Observable<any> = Observable.fromPromise(modal.result);
+        return dialogRef.afterClosed().flatMap((login: Login) =>
-
-        return observable.flatMap((login: Login) =>
             this.doLogin(login)
         ).map((token: Token): Token => {
             this.accessToken = token.access_token;

src/login/login.tmpl.html

@@ -0,0 +1,38 @@
+<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
+<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">Authentification requise</h3>
+      </div>
+
+      <form class="form-horizontal" ng-submit="$login()">
+        <div class="modal-body" id="modal-body">
+          <div class="form-group">
+            <label for="email" class="col-sm-4 control-label">Adresse email</label>
+            <div class="col-sm-8">
+              <input type="text" class="form-control" id="email" ng-model="email"
+                placeholder="Nom d'utilisateur">
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="password" class="col-sm-4 control-label">Mot de passe</label>
+            <div class="col-sm-8">
+              <input type="password" class="form-control" id="password"
+              ng-model="password" placeholder="Mot de passe">
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <input class="btn btn-primary" type="submit" value="OK"/>
+
+          <button class="btn btn-default" type="button" ng-click="$hide()">
+            Annuler
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

src/login/login.ts

@@ -1,6 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
 
 export class Login {
-    public email: string;
+    email: string;
-    public password: string;
+    password: string;
 }

src/login/loginForm.component.html

@@ -1,29 +0,0 @@
-<form novalidate (keyup.enter)="submit()" [formGroup]="form">
-  <div class="form-group row">
-    <label for="email" class="col-sm-4 control-label">Adresse email</label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="email.errors">
-      <input type="text" class="form-control" id="email"
-        formControlName="email" placeholder="Nom d'utilisateur">
-
-      <div class="help-block text-danger" *ngIf="email.errors">
-        <p *ngIf="email.errors.required">The email is required.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="form-group row">
-    <label for="password" class="col-sm-4 control-label">Mot de passe</label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="password.errors">
-      <input type="password" class="form-control" id="password"
-        formControlName="password" placeholder="Mot de passe">
-
-      <div class="help-block text-danger" *ngIf="password.errors">
-        <p *ngIf="password.errors.required">The password is required.</p>
-      </div>
-    </div>
-  </div>
-</form>

src/login/loginForm.component.ts

@@ -7,7 +7,29 @@ import { Login } from './login';
 @Component({
   selector: 'login-form',
   exportAs: 'loginForm',
-  templateUrl: './loginForm.component.html'
+  template: `
+<form novalidate (keyup.enter)="submit()" [formGroup]="form">
+  <md-list>
+    <md-list-item>
+      <md-form-field>
+        <input mdInput type="text"
+          formControlName="email" placeholder="Nom d'utilisateur">
+
+        <md-error *ngIf="email.errors?.required">The email is required.</md-error>
+      </md-form-field>
+    </md-list-item>
+
+    <md-list-item>
+      <md-form-field>
+        <input mdInput type="password"
+          formControlName="password" placeholder="Mot de passe">
+
+        <md-error *ngIf="password.errors?.required">The password is required.</md-error>
+      </md-form-field>
+    </md-list-item>
+  </md-list>
+</form>
+  `
 })
 
 export class LoginFormComponent {

src/login/loginModal.component.html

@@ -1,17 +0,0 @@
-<div class="modal-header">
-  <h3 class="modal-title" id="modal-title">Authentification requise</h3>
-</div>
-
-<div class="modal-body" id="modal-body">
-  <login-form (submit)="submit()" #loginForm="loginForm"></login-form>
-</div>
-
-<div class="modal-footer">
-  <button class="btn btn-succes" [disabled]="!loginForm.form.valid" (click)="submit()">
-    Login
-  </button>
-
-  <button class="btn btn-default" (click)="cancel()">
-    Cancel
-  </button>
-</div>

src/login/loginModal.component.ts

@@ -1,23 +1,36 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
 import { Component, Input, ViewChild } from '@angular/core';
-
+import { MdDialogRef } from '@angular/material';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-//import { jqxWindowComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxwindow';
-import { jqxButtonComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons';
 
 import { Login } from './login';
 import { LoginFormComponent } from './loginForm.component';
 
 @Component({
   selector: 'login-modal',
-  templateUrl: './loginModal.component.html'
+  template: `
+<h2 md-dialog-title>Authentification requise</h2>
+
+<md-dialog-content>
+  <login-form (submit)="submit()" #loginForm="loginForm"></login-form>
+</md-dialog-content>
+
+<md-dialog-actions>
+  <button md-button [disabled]="!loginForm.form.valid" (click)="submit()">
+    Login
+  </button>
+
+  <button md-button md-dialog-close>
+    Cancel
+  </button>
+</md-dialog-actions>
+  `
 })
 export class LoginModalComponent {
   @ViewChild('loginForm') loginForm: LoginFormComponent;
 
-  constructor(private activeModal: NgbActiveModal) {
+  constructor(
-    
+    public dialogRef: MdDialogRef<LoginModalComponent>,
-  }
+  ) {}
 
   submit(): void {
     let formModel = this.loginForm.form.value;
@@ -26,10 +39,6 @@ export class LoginModalComponent {
     login.email = formModel.email;
     login.password = formModel.password;
 
-    this.activeModal.close(login);
+    this.dialogRef.close(login);
-  }
-
-  cancel(): void {
-    this.activeModal.dismiss("closed");
   }
 }

src/login/token.ts

@@ -1,6 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
 export class Token {
-  public access_token: string;
+  access_token: string;
-  public refresh_token: string;
+  refresh_token: string;
 }

src/main.scss

@@ -1,13 +1,69 @@
+// vim: set tw=80 ts=2 sw=2 sts=2:
+
 $fa-font-path: '~font-awesome/fonts';
 
 @import '~font-awesome/scss/font-awesome';
 
-@import '~bootstrap/scss/bootstrap';
+@import '~c3/c3';
-
-@import '~jqwidgets-scripts/jqwidgets/styles/jqx.base';
 
 @import '~ngx-toastr/toastr';
 
+$roboto-font-path: '~roboto-fontface/fonts/roboto/';
+@import '~@angular/material/_theming';
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+
+@import '~material-design-icons/iconfont/material-icons.css';
+
+/*.fixed-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%  !important;
+}
+
+body {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+
+  // Helps fonts on OSX looks more consistent with other systems
+  // Isn't currently in button styles due to performance concerns
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .acc-content {
+    padding: 32px;
+    box-sizing: border-box;
+  }
+
+  .mat-toolbar {
+    .acc-toolbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+}
+
+md-dialog > form {
+    overflow: visible;
+}*/
+
+/*
+// stretch to screen size in fullscreen mode
+.acc-content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+*/
+
 .italic {
   font-style: italic;
 }
@@ -15,3 +71,27 @@ $fa-font-path: '~font-awesome/fonts';
 .stroke {
   text-decoration: line-through;
 }
+
+.c3-ygrid-line.zeroline line {
+  stroke: orange;
+}
+
+.c3-ygrid-line.overdraft line {
+  stroke: #FF0000;
+}
+
+span.warning {
+  color: mat-color($mat-amber, A700);
+}
+
+.mat-row.warning {
+  background-color: mat-color($mat-amber, 100);
+}
+
+span.error {
+  color: mat-color($mat-red, A700);
+}
+
+.mat-row.error {
+  background-color: mat-color($mat-red, 100);
+}

src/main.ts

@@ -1,7 +1,7 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app.module';
 
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 platformBrowserDynamic().bootstrapModule(AppModule);

src/operations/balanceChart.component.ts

@@ -1,203 +1,177 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
 
 import * as moment from 'moment';
+import * as c3 from 'c3';
 
-import { Component, ViewChild, Input, OnInit } from '@angular/core';
+import {
-import { ActivatedRoute, Router, ParamMap } from '@angular/router';
+  Component, ElementRef,
-
+  Inject, Input, Output, EventEmitter,
-import { Logger } from '@nsalaun/ng-logger';
+  OnInit, OnChanges
-import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';
+} from '@angular/core';
 
 import { Account } from '../accounts/account';
-import { DailyBalance } from './dailyBalance';
 import { DailyBalanceService } from '../accounts/dailyBalance.service';
 
+class DateRange {
+  minDate: Date;
+  maxDate: Date;
+}
+
 @Component({
   selector: 'balance-chart',
-  template:  `
+  template: '<div></div>'
-<jqxChart #balanceChart
-  [width]="'100%'"
-  [height]="400"
-  [title]="'Balance evolution'"
-  [description]="''"
-  [source]="data"
-  [xAxis]="xAxis"
-  [valueAxis]="valueAxis"
-  [seriesGroups]="seriesGroups"
-  (onRangeSelectionChanged)="select($event)">
-</jqxChart>
-`
 })
-export class BalanceChartComponent implements OnInit {
+export class BalanceChartComponent implements OnInit, OnChanges {
-  private _account: Account;
+  @Input() account: Account;
-  @ViewChild('balanceChart') chart: jqxChartComponent;
+  @Output() onUpdate: EventEmitter<DateRange> = new EventEmitter<DateRange>();
 
-  public data;
+  private chart: c3.ChartAPI;
-
+  private balances: number[];
-  public xAxis: any = {
-    type: 'date',
-    dataField: 'operation_date',
-    displayText: 'Date',
-    baseUnit: 'day',
-
-    bands: [{
-      fillColor: 'blue',
-      opacity: 0.10
-    }],
-
-    rangeSelector: {
-      size: 80,
-      padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
-      backgroundColor: 'white',
-      dataField: 'balance',
-      //baseUnit: 'month',
-      baseUnit: 'day',
-      gridLines: { visible: false },
-      serieType: 'line',
-      //labels: {
-      //  formatFunction: (value: any): any => {
-      //    return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
-      //  }
-      //}
-    }
-  };
-
-  public valueAxis: any = {
-    title: {
-      visible: false
-    },
-  };
-
-  public seriesGroups: any = [{
-    type: 'stackedcolumn',
-    valueAxis: {
-      title: { text: 'Expenses/revenues' },
-      position: 'right',
-      visible: true,
-      gridLines: { visible: false },
-      labels: {
-        horizontalAlignment: 'left',
-        formatSettings: {
-          sufix:  '€',
-          decimalPlaces: 2
-        },
-      }
-    },
-    series: [{
-      dataField: 'expenses',
-      displayText: 'Expenses',
-      fillColor: 'tomato'
-    }, {
-      dataField: 'revenues',
-      displayText: 'Revenues',
-      fillColor: 'yellowgreen'
-    }]
-  }, {
-    type: 'stepline',
-    valueAxis: {
-      title: { text: 'Balance' },
-      //gridLines: { visible: false },
-      labels: {
-        formatSettings: {
-          sufix:  '€',
-          decimalPlaces: 2
-        }
-      }
-    },
-    series: [{
-      dataField: 'balance',
-      displayText: 'Balance',
-      fillColor: 'steelblue'
-    }],
-    bands: [{
-      minValue: 0, maxValue: 0, fillColor: 'orange', lineWidth: 1
-    }, {
-      minValue: 0, maxValue: 0, fillColor: 'red', lineWidth: 1
-    }]
-  }];
 
   constructor(
-    private router: Router,
+    private elementRef: ElementRef,
-    private activatedRoute: ActivatedRoute,
-    private logger: Logger,
     private dailyBalanceService: DailyBalanceService,
   ) {
-    this.data = [];
   }
 
-  loadData() {
+  loadData(account: Account) {
-    this.logger.info('Loading data.');
-
-    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
-
     this.dailyBalanceService.query(
-      +accountId
+      account.id
     ).subscribe((results) => {
-      this.data = results;
+      var headers: any[][] = [['date', 'balances', 'expenses', 'revenues']];
 
-      let lastResult = results[results.length -1];
+      var rows = results.map(function(result) {
-
+        return [
-      this.updateXBands(results[0].operation_date, lastResult.operation_date);
+          result.operation_date,
+          result.balance,
+          result.expenses,
+          result.revenues
+        ];
       });
-  }
 
-  setLines(account: Account) {
+      this.chart.unload();
-    if (account) {
+
-      this.seriesGroups[1].bands[1].minValue = account.authorized_overdraft;
+      this.chart.load({
-      this.seriesGroups[1].bands[1].maxValue = account.authorized_overdraft;
+        rows: headers.concat(rows)
-    }
+      });
-  }
+
+      var x: any;
+
+      x = this.chart.x();
+
+      var balances = x.balances;
+
+      this.onUpdate.emit({
+        minDate: balances[0],
+        maxDate: balances[balances.length - 1]
+      });
+    });
+  };
 
   ngOnInit() {
-    this.activatedRoute.queryParamMap.subscribe((params: ParamMap) => {
+    var tomorrow = moment().endOf('day').valueOf();
-      let fromDay = params.get('from');
-      let toDay = params.get('to');
 
-      this.xAxis.minValue = moment(fromDay).toDate();
+    this.chart = c3.generate({
-      this.xAxis.maxValue = moment(toDay).toDate();
+      bindto: this.elementRef.nativeElement.children[0],
-
+      size: {
-      if(this.chart && this.chart.host) {
+        height: 450,
-        this.chart.refresh();
+      },
+      data: {
+        x: 'date',
+        rows: [],
+        axes: {
+          expenses: 'y2',
+          revenues: 'y2'
+        },
+        type: 'bar',
+        types: {
+          balances: 'area'
+        },
+        groups: [
+          ['expenses', 'revenues']
+        ],
+        // Disable for the moment because there is an issue when
+        // using subchart line is not refreshed after subset
+        // selection.
+        //regions: {
+        //  balances: [{
+        //    start: tomorrow,
+        //    style: 'dashed'
+        //  }]
+        //}
+      },
+      regions: [{
+        start: tomorrow,
+      }],
+      axis: {
+        x: {
+          type: 'timeseries',
+          tick: {
+            format: '%Y-%m-%d',
+            rotate: 50,
+          }
+        },
+        y: {
+          label: {
+            text: 'Amount',
+            position: 'outer-middle'
+          }
+        },
+        y2: {
+          show: true,
+          label: {
+            text: 'Amount',
+            position: 'outer-middle'
+          }
+        }
+      },
+      grid: {
+        x: {
+          show: true,
+        },
+        y: {
+          show: true,
+        }
+      },
+      tooltip: {
+        format: {
+          value: function(value, ratio, id, index) {
+            return value + '€';
+          }
+        }
+      },
+      subchart: {
+        show: true,
+        onbrush: (domain) => {
+          this.onUpdate.emit({minDate: domain[0], maxDate: domain[1]});
+        }
       }
     });
+  };
 
-    this.loadData();
+  setLines(account: Account) {
+    if(this.chart) {
+      this.chart.ygrids([
+        { value: 0, axis: 'y2' },
+        { value: 0, axis: 'y', class: 'zeroline'},
+      ]);
+
+      if(account) {
+        this.chart.ygrids.add({
+          value: account.authorized_overdraft,
+          axis: 'y',
+          class: 'overdraft'
+        });
       }
-
-  @Input()
-  set account(account: Account) {
-    this._account = account;
-
-    this.setLines(account);
     }
+  };
 
-  get account(): Account {
+  ngOnChanges(changes) {
-    return this._account;
+    if('account' in changes && changes.account.currentValue) {
-  }
+      this.loadData(changes.account.currentValue);
-
+      this.setLines(changes.account.currentValue);
-  updateXBands(minDate, maxDate) {
-    if(moment(maxDate) > moment()) {
-      if(moment(minDate) < moment()) {
-        this.xAxis.bands[0].minValue = moment().toDate();
     } else {
-        this.xAxis.bands[0].minValue = moment(minDate).toDate();
+      this.setLines(this.account);
-      }
-      this.xAxis.bands[0].maxValue = moment(maxDate).toDate();
-    }
-  }
-
-  select(event: any) {
-    let args = event.args;
-
-    this.updateXBands(args.minValue, args.maxValue);
-
-    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
-
-    this.router.navigate(['account', accountId, 'operations'], {
-      queryParams: {
-        from: moment(args.minValue).format('YYYY-MM-DD'),
-        to: moment(args.maxValue).format('YYYY-MM-DD')
-      }
-    });
     }
+  };
 }

src/operations/category.service.ts

@@ -23,7 +23,7 @@ export class CategoryService {
     return date;
   }
 
-  query(id: number, minDate: Date|string = null, maxDate: Date|string = null): Observable<Category[]> {
+  query(id: number, minDate: Date = null, maxDate: Date = null): Observable<Category[]> {
     let params: HttpParams = new HttpParams();
 
     if(minDate) {

src/operations/category.ts

@@ -1,8 +1,7 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
 export class Category {
-  public category: string;
+  category: string;
-  public expenses: number;
+  expenses: number;
-  public revenues: number;
+  revenues: number;
-  public income: number;
 }

src/operations/categoryChart.component.ts

@@ -1,141 +1,107 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
-import { Component, ViewChild, OnInit } from '@angular/core';
+import * as c3 from 'c3';
-import { ActivatedRoute, ParamMap } from '@angular/router';
 
-import { Logger } from '@nsalaun/ng-logger';
+import {
-import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';
+  Component, ElementRef,
+  Inject, Input, Output,
+  OnInit, OnChanges
+} from '@angular/core';
 
-import * as _ from 'underscore';
+import { Account } from '../accounts/account';
-
-import { Category } from './category';
 import { CategoryService } from './category.service';
 
-
 @Component({
   selector: 'category-chart',
-  template: `
+  template: '<div></div>'
-<jqxChart #categoryChart
-  [width]="'100%'"
-  [height]="400"
-  [title]="'Categories'"
-  [description]="''"
-  [showLegend]="false"
-  [seriesGroups]="seriesGroups">
-</jqxChart>
-`
 })
-export class CategoryChartComponent implements OnInit {
+export class CategoryChartComponent implements OnInit, OnChanges {
-  @ViewChild('categoryChart') chart: jqxChartComponent;
+  @Input() minDate: Date;
+  @Input() maxDate: Date;
+  @Input() account: Account;
 
-  public seriesGroups: any = [{
+  chart: c3.ChartAPI;
-    type: 'donut',
-    source: [],
-    //showLabels: true,
-    series: [{
-      dataField: 'value',
-      displayText: 'category',
-      initialAngle: 90,
-      radius: 130,
-      innerRadius: 90,
-      formatSettings: { sufix: '€', decimalPlaces: 2 },
-      radiusDataField: 'category',
-      colorFunction: (value, itemIndex, series, group) => {
-        if(group.source[itemIndex].type === 'expenses') {
-          return 'tomato';
-        }
-
-        return 'yellowgreen';
-      },
-      opacity: 0.5
-    }]
-  }, {
-    type: 'donut',
-    source: [],
-    showLabels: true,
-    series: [{
-      dataField: 'value',
-      displayText: 'name',
-      initialAngle: 90,
-      labelRadius: 50,
-      radius: 85,
-      innerRadius: 75,
-      formatSettings: { sufix: '€', decimalPlaces: 2 },
-      colorFunction: (value, itemIndex, series, group) => {
-        if(group.source[itemIndex].name === 'Expenses') {
-          return 'tomato';
-        }
-
-        return 'yellowgreen';
-      }
-    }]
-  }];
 
   constructor(
-    private activatedRoute: ActivatedRoute,
+    private elementRef: ElementRef,
-    private logger: Logger,
     private categoryService: CategoryService,
-  ) {
+  ) {}
-    //this.data = [];
-  }
-
-  loadData() {
-    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
-    let fromDay = this.activatedRoute.snapshot.queryParamMap.get('from');
-    let toDay = this.activatedRoute.snapshot.queryParamMap.get('to');
 
+  loadData(account: Account) {
     this.categoryService.query(
-      +accountId,
+      account.id,
-      fromDay,
+      this.minDate,
-      toDay
+      this.maxDate
-    ).subscribe((results: Category[]) => {
+    ).subscribe((results) => {
-      let expenses = _.filter(results, function(item: Category) {
+      var expenses=[],
-        return item.expenses < 0;
+        revenues=[],
-      }).map(function(item: Category) {
+        colors={},
-        return {
+        names={};
-          category: item.category,
-          value: -item.expenses,
-          type: 'expenses'
-        };
-      });
 
-      expenses = _.sortBy(expenses, 'value').reverse();
+      var revenuesColor = 'green',
+        expensesColor = 'orange';
 
-      let revenues = _.filter(results, function(item: Category) {
+      for(let result of results) {
-        return item.revenues > 0;
+        if(result.revenues > 0) {
-      }).map(function(item: Category) {
+          var revenuesName = 'revenues-' + result.category;
-        return {
-          category: item.category,
-          value: item.revenues,
-          type: 'revenues'
-        };
-      });
 
-      revenues = _.sortBy(revenues, 'value');
+          revenues.push([revenuesName, result.revenues]);
-
+          names[revenuesName] = result.category;
-      this.seriesGroups[0].source = expenses.concat(revenues);
+          colors[revenuesName] = revenuesColor;
-
-      let totals = [
-        {name: 'Expenses', value: 0},
-        {name: 'Revenues', value: 0}
-      ];
-
-      results.forEach(function(item: Category) {
-        totals[0].value -= item.expenses;
-        totals[1].value += item.revenues;
-      });
-
-      this.seriesGroups[1].source = totals;
-
-      if(this.chart && this.chart.host) {
-        this.chart.refresh();
         }
-    });
+
+        if(result.expenses < 0) {
+          var expensesName = 'expenses-' + result.category;
+
+          expenses.splice(0, 0, [expensesName, -result.expenses]);
+          names[expensesName] = result.category;
+          colors[expensesName] = expensesColor;
         }
+      };
+
+      this.chart.unload();
+
+      this.chart.load({
+        columns: revenues.concat(expenses),
+        names: names,
+        colors: colors
+      });
+    });
+  };
 
   ngOnInit() {
-    this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});
+    this.chart = c3.generate({
+      bindto: this.elementRef.nativeElement.children[0],
+      data: {
+        columns: [],
+        type: 'donut',
+        order: null,
+      },
+      tooltip: {
+        format: {
+          value: function(value, ratio, id, index) {
+            return value + '€';
+          }
+        }
+      },
+      donut: {
+        label: {
+          format: function(value) {
+            return value + '€';
+          }
+        }
+      },
+      legend: {
+        show: false
+      }
+    });
+  };
 
-    this.loadData();
+  ngOnChanges(changes) {
+    if('account' in changes && changes.account.currentValue) {
+      this.loadData(changes.account.currentValue);
+    } else if (this.account) {
+      this.loadData(this.account);
     }
+  };
 }

src/operations/dailyBalance.ts

@@ -1,9 +0,0 @@
-// vim: set tw=80 ts=2 sw=2 sts=2 :
-
-export class DailyBalance {
-    public operation_date: string;
-    public expenses: number;
-    public revenues: number;
-    public income: number;
-    public balance: number;
-}

src/operations/operation.module.ts

@@ -2,39 +2,37 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
-import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { ToastrModule } from 'ngx-toastr';
 import { TextMaskModule } from 'angular2-text-mask';
-import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';
 
 import { BalanceChartComponent } from './balanceChart.component';
 import { CategoryChartComponent } from './categoryChart.component';
 import { OperationRowComponent } from './operationRow.component';
 import { CategoryService } from './category.service';
 import { OperationService } from './operation.service';
-import { OperationEditComponent } from './operationEdit.component';
 import { OperationListComponent } from './operationList.component';
 import { OperationDeleteModalComponent } from './operationDeleteModal.component';
-import { OperationRoutes } from './operation.states';
+import { OperationFormComponent } from './operationForm.component';
+import { OperationEditModalComponent } from './operationEditModal.component'
+import { OperationListState } from './operation.states'
 
 @NgModule({
   imports: [
     HttpClientModule,
     CommonModule,
-    FormsModule,
+    ReactiveFormsModule,
-    RouterModule.forChild(
+    RouterModule.forChild([
-      OperationRoutes
+      OperationListState
-    ),
+    ]),
     NgLoggerModule,
     ToastrModule,
     NgbModule,
-    NgxChartsModule,
     TextMaskModule
   ],
   providers: [
@@ -42,16 +40,17 @@ import { OperationRoutes } from './operation.states';
     OperationService,
   ],
   declarations: [
-    jqxChartComponent,
     BalanceChartComponent,
     CategoryChartComponent,
     OperationRowComponent,
-    OperationEditComponent,
     OperationListComponent,
     OperationDeleteModalComponent,
+    OperationFormComponent,
+    OperationEditModalComponent,
   ],
   entryComponents: [
     OperationDeleteModalComponent,
+    OperationEditModalComponent,
     OperationListComponent,
   ]
 })

src/operations/operation.states.ts

@@ -1,17 +1,8 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
-import { Routes } from '@angular/router';
-
 import { OperationListComponent } from './operationList.component';
-import { OperationEditComponent } from './operationEdit.component';
 
-export const OperationRoutes: Routes = [{
+export const OperationListState = {
-  path: 'accounts/:accountId/operations',
+  path: 'account/:accountId/operations',
-  component: OperationListComponent,
+  component: OperationListComponent
-}, {
+}
-  path: 'accounts/:accountId/operations/new',
-  component: OperationEditComponent,
-}, {
-  path: 'accounts/:accountId/operations/:operationId/edit',
-  component: OperationEditComponent,
-}];

src/operations/operation.ts

@@ -1,15 +1,15 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
 
 export class Operation {
-  public id: number;
+  id: number;
-  public operation_date: string;
+  operation_date: string;
-  public label: string;
+  label: string;
-  public value: number;
+  value: number;
-  public category: string;
+  category: string;
-  public scheduled_operation_id: number;
+  scheduled_operation_id: number;
-  public account_id: number;
+  account_id: number;
-  public balance: number;
+  balance: number;
-  public confirmed: boolean;
+  confirmed: boolean;
-  public pointed: boolean;
+  pointed: boolean;
-  public canceled: boolean
+  cancelled: boolean
 }

src/operations/operationDeleteModal.component.html

@@ -1,22 +0,0 @@
-<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
-<div class="modal-header">
-  <h3 class="modal-title" id="modal-title">Delete Operation #{{ operation.id }}</h3>
-</div>
-
-<div class="modal-body" id="modal-body">
-  <p>
-    Do you really want to delete operation #{{ operation.id }} with label:<br/>
-    {{ operation.label }}
-  </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>
-

src/operations/operationDeleteModal.component.ts

@@ -7,7 +7,28 @@ import { Operation } from './operation';
 
 @Component({
   selector: 'operation-delete-modal',
-  templateUrl: './operationDeleteModal.component.html'
+  template: `
+    <div class="modal-header">
+      <h3 class="modal-title" id="modal-title">Delete Operation #{{ operation.id }}</h3>
+    </div>
+
+    <div class="modal-body" id="modal-body">
+      <p>
+      Do you really want to delete operation #{{ operation.id }} with label:<br/>
+      {{ operation.label }}
+      </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 OperationDeleteModalComponent {
   @Input() operation: Operation

src/operations/operationEdit.component.html

@@ -1,79 +0,0 @@
-<!-- vim: set tw=80 ts=2 sw=2 sts=2 :-->
-<div>
-  <div class="row">
-    <form novalidate (keyup.enter)="submit()" #form="ngForm">
-      <div class="form-group">
-        <label for="operation-date">Date</label>
-
-        <input class="form-control"
-          [class.has-danger]="operationDate.errors"
-          id="operation-date" name="operationDate"
-          [(ngModel)]="operation.operation_date" #operationDate="ngModel"
-          [textMask]="{mask: dateMask}"
-          placeholder="Operation date" required>
-
-        <div class="help-block text-danger" *ngIf="operationDate.errors">
-          <small class="form-text" *ngIf="operationDate.errors.required">
-            The operation date is required.
-          </small>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="label">Label</label>
-
-        <input class="form-control"
-          [class.has-danger]="label.errors"
-          id="label" name="label"
-          [(ngModel)]="operation.label" #label="ngModel"
-          placeholder="Label" required>
-
-        <div class="help-block text-danger" *ngIf="label.errors">
-          <small class="form-text" *ngIf="label.errors.required">
-            The operation label is required.
-          </small>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="value">Montant</label>
-
-        <input class="form-control"
-          [class.has-errors]="value.errors"
-          id="value" name="value"
-          [(ngModel)]="operation.value" #value="ngModel"
-          type="number" placeholder="Value" required>
-
-        <div class="help-block text-danger" *ngIf="value.errors">
-          <small class="form-text" *ngIf="value.errors.required">
-            The operation value is required.
-          </small>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="category">Catégorie</label>
-
-        <input class="form-control"
-          [class.has-errors]="category.errors"
-          id="category" name="category"
-          [(ngModel)]="operation.category" #category="ngModel"
-          placeholder="Category" required>
-
-        <div class="help-block text-danger" *ngIf="category.errors">
-          <small class="form-text" *ngIf="category.errors.required">
-            The operation category is required.
-          </small>
-        </div>
-      </div>
-
-      <button class="btn btn-primary" [disabled]="!form.valid" (click)="submit()">
-        Save
-      </button>
-
-      <button class="btn btn-default" (click)="cancel()">
-        Cancel
-      </button>
-    </form>
-  </div>
-</div>

src/operations/operationEdit.component.ts

@@ -1,86 +0,0 @@
-// vim: set tw=80 ts=2 sw=2 sts=2 :
-
-import { Location } from '@angular/common';
-import { Component } from '@angular/core';
-import { ActivatedRoute, Router, Params } from '@angular/router';
-
-import { Logger } from '@nsalaun/ng-logger';
-import { ToastrService } from 'ngx-toastr';
-
-import { Operation } from './operation';
-import { OperationService } from './operation.service';
-
-@Component({
-  selector: 'operation-edit',
-  templateUrl: './operationEdit.component.html'
-})
-export class OperationEditComponent {
-  public operation: Operation = new Operation();
-
-  //dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
-  dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
-
-  constructor(
-    private location: Location,
-    private router: Router,
-    private route: ActivatedRoute,
-    private logger: Logger,
-    private toastrService: ToastrService,
-    private operationService: OperationService
-  ) {}
-
-  ngOnInit() {
-    this.route.paramMap.subscribe((params: Params) => {
-      let operationId = params.get('operationId');
-
-      if (operationId) {
-        this.logger.info('Loading operation with id', operationId);
-
-        // Load Operation
-        this.operationService.get(
-          +operationId
-        ).subscribe((operation: Operation) => {
-          this.operation = operation;
-
-          this.logger.info(operation);
-        });
-      } else {
-        this.logger.info('Initialize new operation');
-
-        let accountId = params.get('accountId');
-
-        this.operation = new Operation();
-        this.operation.account_id = +accountId;
-
-        this.logger.info(this.operation);
-      }
-    });
-  }
-
-  submit(): void {
-    this.save(this.operation);
-  }
-
-  /*
-   * Save an operation and return a promise.
-   */
-  save(operation) {
-    operation.confirmed = true;
-
-    return this.operationService.create(operation).subscribe(
-      (operation) => {
-        this.toastrService.success('Operation #' + operation.id + ' saved.');
-
-        this.location.back();
-      }, (result) => {
-        this.toastrService.error(
-          'Error while saving operation: ' + result.message
-        );
-      }
-    );
-  }
-
-  cancel(): void {
-    this.location.back();
-  }
-}

src/operations/operationEditModal.component.ts

@@ -0,0 +1,63 @@
+// vim: set tw=80 ts=2 sw=2 sts=2:
+import { Component, Input, ViewChild } from '@angular/core';
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { Operation } from './operation';
+import { OperationFormComponent } from './operationForm.component';
+
+@Component({
+  selector: 'operation-edit-modal',
+  template: `
+<div class="modal-header">
+  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
+</div>
+
+<div class="modal-body" id="modal-body">
+  <operation-form [operation]="operation" (submit)="submit()" #operationForm="operationForm"></operation-form>
+</div>
+
+<div class="modal-footer">
+  <button class="btn btn-primary" [disabled]="!operationForm.form.valid" (click)="submit()">
+    Save
+  </button>
+
+  <button class="btn btn-default" (click)="cancel()">
+    Cancel
+  </button>
+</div>
+  `
+})
+export class OperationEditModalComponent {
+  @Input() operation: Operation;
+  @ViewChild('operationForm') operationForm: OperationFormComponent;
+
+  valid: boolean = false;
+
+  constructor(private activeModal: NgbActiveModal) {}
+
+  title(): string {
+    if(this.operation.id) {
+      return "Operation #" + this.operation.id;
+    } else {
+      return "New operation";
+    }
+  }
+
+  submit(): void {
+    let formModel = this.operationForm.form.value;
+    let operation = Object.assign({}, this.operation);
+
+    operation.id = this.operation.id;
+    operation.operation_date = formModel.operationDate;
+    operation.label = formModel.label;
+    operation.value = formModel.value;
+    operation.category = formModel.category;
+
+    this.activeModal.close(operation);
+  }
+
+  cancel(): void {
+    this.activeModal.dismiss("closed");
+  }
+}

src/operations/operationForm.component.ts

@@ -0,0 +1,122 @@
+// vim: set tw=80 ts=2 sw=2 sts=2 :
+import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { Operation } from './operation';
+
+@Component({
+  selector: 'operation-form',
+  exportAs: 'operationForm',
+  template: `
+<form novalidate (keyup.enter)="submit()" [formGroup]="form">
+  <div class="form-group row">
+    <label class="col-sm-4 control-label" for="operation-date">Date</label>
+
+    <div class="col-sm-8"
+      [class.has-danger]="operationDate.errors">
+      <input class="form-control"
+        id="operation-date" formControlName="operationDate"
+        [textMask]="{mask: dateMask}"
+        placeholder="Operation date">
+
+      <div class="help-block text-danger" *ngIf="operationDate.errors">
+        <p *ngIf="operationDate.errors.required">The operation date is required.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-sm-4 control-label" for="label">Label</label>
+
+    <div class="col-sm-8"
+      [class.has-danger]="label.errors">
+      <input class="form-control"
+        id="label" formControlName="label"
+        placeholder="Label">
+
+      <div class="help-block text-danger" *ngIf="label.errors">
+        <p *ngIf="label.errors.required">The operation label is required.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-sm-4 control-label" for="value">Montant</label>
+
+    <div class="col-sm-8"
+      [class.has-errors]="value.errors">
+      <input class="form-control"
+        id="value" formControlName="value"
+        type="number" placeholder="Value">
+
+      <div class="help-block text-danger" *ngIf="value.errors">
+        <p *ngIf="value.errors.required">The operation value is required.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-sm-4 control-label" for="category">Catégorie</label>
+
+    <div class="col-sm-8"
+      [class.has-errors]="category.errors">
+      <input class="form-control"
+        id="category" formControlName="category"
+        placeholder="Category">
+
+      <div class="help-block text-danger" *ngIf="category.errors">
+        <p *ngIf="category.errors.required">The operation category is required.</p>
+      </div>
+    </div>
+  </div>
+</form>
+  `
+})
+export class OperationFormComponent implements OnInit {
+  public form: FormGroup;
+  @Input() operation: Operation;
+  @Output() submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
+
+  //dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
+  dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      operationDate: ['', Validators.required],
+      label: ['', Validators.required],
+      value: ['', Validators.required],
+      category: ['', Validators.required],
+    });
+
+    this.form.patchValue({
+      operationDate: this.operation.operation_date,
+      label: this.operation.label,
+      value: this.operation.value,
+      category: this.operation.category,
+    });
+  }
+
+  submit() {
+    if(this.form.valid) {
+      this.submitEventEmitter.emit();
+    }
+  }
+
+  get operationDate() {
+    return this.form.get('operationDate');
+  }
+
+  get label() {
+    return this.form.get('label');
+  }
+
+  get value() {
+    return this.form.get('value');
+  }
+
+  get category() {
+    return this.form.get('category');
+  }
+}

src/operations/operationList.component.html

@@ -1,46 +0,0 @@
-<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
-<div>
-  <div class="row">
-    <div class="col-md-8">
-      <balance-chart [account]="account"></balance-chart>
-    </div>
-
-    <div class="col-md-4">
-      <category-chart></category-chart>
-    </div>
-  </div>
-
-  <div class="row">
-    <table class="table table-striped table-condensed table-hover">
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>Date d'op.</th>
-          <th>Libell&eacute; de l'op&eacute;ration</th>
-          <th>Montant</th>
-          <th>Solde</th>
-          <th>Cat&eacute;gorie</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr>
-          <td colspan="6">
-            <a class="btn btn-success"
-              [routerLink]="['new']">
-              Ajouter
-            </a>
-          </td>
-        </tr>
-
-        <tr [operation-row]="operation"
-          [account]="account"
-          (needsReload)="loadData()"
-          *ngFor="let operation of operations">
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-

src/operations/operationList.component.ts

@@ -1,9 +1,8 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
+import { Component, Inject, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
-import * as moment from 'moment';
+import { Observable } from 'rxjs/Rx';
-
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router, Params } from '@angular/router';
 
 import { Logger } from '@nsalaun/ng-logger';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -13,14 +12,65 @@ import { Account } from '../accounts/account';
 import { AccountService } from '../accounts/account.service';
 import { Operation } from './operation';
 import { OperationService } from './operation.service';
+import { OperationEditModalComponent } from './operationEditModal.component';
 
 @Component({
   selector: 'operation-list',
-  templateUrl: './operationList.component.html'
+  template: `
+<div>
+  <div class="row">
+    <div class="col-md-9">
+      <balance-chart (onUpdate)="onUpdate($event)"
+        [account]="account"></balance-chart>
+    </div>
+
+    <div class="col-md-3">
+      <category-chart
+        [minDate]="minDate"
+        [maxDate]="maxDate"
+        [account]="account"></category-chart>
+    </div>
+  </div>
+
+  <div class="row">
+    <table class="table table-striped table-condensed table-hover">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Date d'op.</th>
+          <th>Libell&eacute; de l'op&eacute;ration</th>
+          <th>Montant</th>
+          <th>Solde</th>
+          <th>Cat&eacute;gorie</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr>
+          <td colspan="6">
+            <button class="btn btn-success" (click)="add()">
+              Ajouter
+            </button>
+          </td>
+        </tr>
+
+        <tr [operation-row]="operation"
+          [account]="account"
+          (needsReload)="load(minDate, maxDate)"
+          *ngFor="let operation of operations">
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+    `
 })
 export class OperationListComponent implements OnInit {
   private account: Account;
-  public operations: Operation[];
+  private minDate: Date;
+  private maxDate: Date;
+  private operations: Operation[];
 
   constructor(
     private toastrService: ToastrService,
@@ -28,49 +78,73 @@ export class OperationListComponent implements OnInit {
     private accountService: AccountService,
     private logger: Logger,
     private ngbModal: NgbModal,
-    private route: ActivatedRoute,
+    private route: ActivatedRoute
-    private router: Router
   ) {}
 
   ngOnInit() {
-    this.route.queryParamMap.subscribe((params: Params) => {
-      if (params.get('from') && params.get('to')) {
-        this.loadData();
-      } else {
-        this.router.navigate([], {
-          queryParams: {
-            from: moment().startOf('month').format('YYYY-MM-DD'),
-            to: moment().endOf('month').format('YYYY-MM-DD')
-          }
-        });
-      }
-    });
-
-    this.route.paramMap.subscribe((params: Params) => {
-      let accountId = params.get('accountId');
-
     this.accountService.get(
-        +accountId
+      +this.route.snapshot.paramMap.get('accountId')
     ).subscribe(account => {
-        this.account = account;
+      this.account = account
-      });
     });
   }
 
+  /*
+   * Add an empty operation.
+   */
+  add() {
+    var operation = new Operation();
+    operation.account_id = this.account.id;
+
+    // FIXME Alexis Lahouze 2017-06-15 i18n
+    const modal = this.ngbModal.open(OperationEditModalComponent, {
+      size: 'lg'
+    });
+
+    modal.componentInstance.operation = operation;
+
+    modal.result.then((operation: Operation) => {
+      this.save(operation);
+    }, (reason) => {
+    });
+  };
+
   /*
    * Load operations.
    */
-  loadData() {
+  load(minDate, maxDate) {
-    let accountId = this.route.snapshot.paramMap.get('accountId');
+    this.minDate = minDate;
-    let fromDay = this.route.snapshot.queryParamMap.get('from');
+    this.maxDate = maxDate;
-    let toDay = this.route.snapshot.queryParamMap.get('to');
 
     return this.operationService.query(
-      +accountId,
+      this.account.id,
-      fromDay,
+      minDate,
-      toDay
+      maxDate
     ).subscribe((operations: Operation[]) => {
       this.operations = operations.reverse();
     });
+  };
+
+  /*
+   * Save an operation and return a promise.
+   */
+  save(operation) {
+    operation.confirmed = true;
+
+    return this.operationService.create(operation).subscribe(
+      (operation) => {
+        this.toastrService.success('Operation #' + operation.id + ' saved.');
+
+        this.load(this.minDate, this.maxDate);
+      }, (result) => {
+        this.toastrService.error(
+          'Error while saving operation: ' + result.message
+        );
       }
-}
+    );
+  };
+
+  onUpdate(dateRange) {
+    this.load(dateRange.minDate, dateRange.maxDate);
+  };
+};

src/operations/operationRow.component.html

@@ -1,51 +0,0 @@
-<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
-<td>{{ operation.id }}</td>
-
-<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>
-
-<td>{{ operation.label }}</td>
-
-<td>{{ operation.value | currency:'EUR':'symbol' }}</td>
-
-<td [class.text-warning]="operation.balance < 0"
-    [class.text-danger]="operation.balance < account.authorized_overdraft">
-  {{ operation.balance | currency:'EUR':'symbol' }}
-</td>
-
-<td>{{ operation.category }}</td>
-
-<td>
-  <div class="btn-group btn-group-sm">
-    <!-- Edit operation, for non-canceled operation. -->
-    <a class="btn btn-success"
-      *ngIf="!operation.canceled"
-      [routerLink]="[operation.id, 'edit']"
-      title="edit">
-      <span class="fa fa-pencil-square-o"></span>
-    </a>
-
-    <!-- Toggle pointed operation, for non-canceled operations. -->
-    <button type="button" class="btn btn-secondary"
-      *ngIf="!operation.canceled"
-      (click)="togglePointed(operation)"
-      [class.active]="operation.pointed" title="point">
-      <span class="fa" [class.fa-check-square-o]="operation.pointed"
-        [class.fa-square-o]="!operation.pointed"></span>
-    </button>
-
-    <!-- Toggle canceled operation. -->
-    <button type="button" class="btn btn-warning"
-      (click)="toggleCanceled(operation)"
-      *ngIf="operation.scheduled_operation_id"
-      [class.active]="operation.canceled" title="cancel">
-      <span class="fa fa-remove"></span>
-    </button>
-
-    <!-- Delete operation, with confirm. -->
-    <button type="button" class="btn btn-danger"
-      (click)="confirmDelete(operation)"
-      *ngIf="operation.id && !operation.scheduled_operation_id">
-      <span class="fa fa-trash-o"></span>
-    </button>
-  </div>
-</td>

src/operations/operationRow.component.ts

@@ -1,9 +1,7 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 import { CurrencyPipe } from '@angular/common';
-import { Component, Inject, Input } from '@angular/core';
+import { Component, Inject, Input, Output, EventEmitter } from '@angular/core';
-import { Router } from '@angular/router';
 
-import { Logger } from '@nsalaun/ng-logger';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 
@@ -11,6 +9,7 @@ import { Account } from '../accounts/account';
 import { Operation } from './operation';
 import { OperationService } from './operation.service';
 import { OperationDeleteModalComponent } from './operationDeleteModal.component';
+import { OperationEditModalComponent } from './operationEditModal.component';
 
 @Component({
   selector: 'tr[operation-row]',
@@ -21,31 +20,80 @@ import { OperationDeleteModalComponent } from './operationDeleteModal.component'
     "[class.warning]": "operation.balance < 0",
     "[class.danger]": "operation.balance < account.authorized_overdraft"
   },
-  templateUrl: './operationRow.component.html'
+  template: `
+<td>{{ operation.id }}</td>
+
+<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>
+
+<td>{{ operation.label }}</td>
+
+<td>{{ operation.value | currency:'EUR':true }}</td>
+
+<td [class.text-warning]="operation.balance < 0"
+    [class.text-danger]="operation.balance < account.authorized_overdraft">
+  {{ operation.balance | currency:'EUR':true }}
+</td>
+
+<td>{{ operation.category }}</td>
+
+<td>
+  <div class="btn-group btn-group-sm">
+    <!-- Edit operation, for non-canceled operation. -->
+    <button type="button" class="btn btn-success"
+      *ngIf="!operation.canceled"
+      (click)="modify(operation)" title="edit">
+      <span class="fa fa-pencil-square-o"></span>
+    </button>
+
+    <!-- Toggle pointed operation, for non-canceled operations. -->
+    <button type="button" class="btn btn-secondary"
+      *ngIf="!operation.canceled"
+      (click)="togglePointed(operation)"
+      [class.active]="operation.pointed" title="point">
+      <span class="fa" [class.fa-check-square-o]="operation.pointed"
+        [class.fa-square-o]="!operation.pointed"></span>
+    </button>
+
+    <!-- Toggle canceled operation. -->
+    <button type="button" class="btn btn-warning"
+      (click)="toggleCanceled(operation)"
+      *ngIf="operation.scheduled_operation_id"
+      [class.active]="operation.canceled" title="cancel">
+      <span class="fa fa-remove"></span>
+    </button>
+
+    <!-- Delete operation, with confirm. -->
+    <button type="button" class="btn btn-danger"
+      (click)="confirmDelete(operation)"
+      *ngIf="operation.id && !operation.scheduled_operation_id">
+      <span class="fa fa-trash-o"></span>
+    </button>
+  </div>
+</td>
+  `
 })
 export class OperationRowComponent {
-  @Input('operation-row') operation: Operation = new Operation();
+  @Input('operation-row') operation: Operation;
-  @Input() account: Account = new Account();
+  @Input() account: Account;
+  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
 
   constructor(
     private operationService: OperationService,
     private toastrService: ToastrService,
-    private logger: Logger,
     private ngbModal: NgbModal,
-    private router: Router
   ) {}
 
   togglePointed(operation, rowform) {
     operation.pointed = !operation.pointed;
 
     this.save(operation);
-  }
+  };
 
   toggleCanceled(operation) {
     operation.canceled = !operation.canceled;
 
     this.save(operation);
-  }
+  };
 
   save(operation) {
     operation.confirmed = true;
@@ -53,8 +101,7 @@ export class OperationRowComponent {
     return this.operationService.update(operation).subscribe((operation) => {
       this.toastrService.success('Operation #' + operation.id + ' saved.');
 
-      this.logger.info('Reload route', this.router.url);
+      this.needsReload.emit();
-      this.router.navigateByUrl(this.router.url);
     }, (result) => {
       this.toastrService.error(
         'Error while saving operation: ' + result.message
@@ -67,11 +114,13 @@ export class OperationRowComponent {
 
     modal.componentInstance.operation = this.operation;
 
+    var id = operation.id;
+
     modal.result.then((operation: Operation) => {
       this.delete(operation);
-    }, () => {
+    }, (reason) => {
-    });
+    })
-  }
+  };
 
   delete(operation) {
     var id = operation.id;
@@ -79,13 +128,26 @@ export class OperationRowComponent {
     return this.operationService.delete(operation).subscribe(() => {
       this.toastrService.success('Operation #' + id + ' deleted.');
 
-      this.logger.info('Reload route', this.router.url);
+      this.needsReload.emit();
-      this.router.navigateByUrl(this.router.url);
     }, (result) => {
       this.toastrService.error(
         'An error occurred while trying to delete operation #' +
         id + ':<br />' + result
       );
     });
-  }
+  };
+
+  modify(operation) {
+    // FIXME Alexis Lahouze 2017-06-15 i18n
+    const modal = this.ngbModal.open(OperationEditModalComponent, {
+      size: 'lg'
+    });
+
+    modal.componentInstance.operation = operation;
+
+    modal.result.then((operation: Operation) => {
+        this.save(operation);
+    }, (reason) => {
+    });
+  };
 }

src/polyfills.ts

@@ -1,3 +0,0 @@
-import 'core-js/es6';
-import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';

src/scheduler/schedule.dataSource.ts

@@ -0,0 +1,40 @@
+// vim: set tw=80 ts=2 sw=2 sts=2:
+
+import { Injectable } from '@angular/core';
+import { DataSource } from '@angular/cdk/collections';
+import { Observable } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+
+import { Logger } from '@nsalaun/ng-logger';
+
+import { Schedule } from './schedule';
+import { ScheduleService } from './schedule.service';
+
+@Injectable()
+export class ScheduleDataSource extends DataSource<Schedule> {
+  private subject: BehaviorSubject<number> = new BehaviorSubject<number>(null);
+
+  constructor(
+    private scheduleService: ScheduleService,
+    private logger: Logger,
+  ) {
+    super();
+  }
+
+  load(accountId: number): void {
+    this.logger.log("In load", accountId);
+    this.subject.next(accountId);
+  }
+
+  connect(): Observable<Schedule[]> {
+    return this.subject.asObservable().concatMap((accountId: number) => {
+      this.logger.log("In connect", accountId);
+
+      if(accountId) {
+        return this.scheduleService.query(accountId);
+      }
+    });
+  }
+
+  disconnect() {}
+}

src/scheduler/schedule.module.ts

@@ -3,6 +3,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
+import {
+  MdButtonModule,
+  MdDialogModule,
+  MdIconModule,
+  MdInputModule,
+  MdListModule,
+  MdTableModule,
+} from '@angular/material';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
@@ -12,10 +20,10 @@ import { ToastrModule } from 'ngx-toastr';
 import { TextMaskModule } from 'angular2-text-mask';
 
 import { ScheduleService } from './schedule.service';
+import { ScheduleDataSource } from './schedule.dataSource';
 import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
 import { ScheduleEditModalComponent } from './scheduleEditModal.component';
 import { ScheduleFormComponent } from './scheduleForm.component';
-import { ScheduleRowComponent } from './scheduleRow.component';
 import { ScheduleListComponent } from './scheduleList.component';
 import { ScheduleListState } from './schedule.states';
 
@@ -27,6 +35,12 @@ import { ScheduleListState } from './schedule.states';
     RouterModule.forChild([
       ScheduleListState
     ]),
+    MdButtonModule,
+    MdDialogModule,
+    MdIconModule,
+    MdInputModule,
+    MdListModule,
+    MdTableModule,
     NgLoggerModule,
     ToastrModule,
     NgbModule,
@@ -34,13 +48,13 @@ import { ScheduleListState } from './schedule.states';
   ],
   providers: [
     ScheduleService,
+    ScheduleDataSource,
   ],
   declarations: [
     ScheduleDeleteModalComponent,
     ScheduleEditModalComponent,
     ScheduleFormComponent,
     ScheduleListComponent,
-    ScheduleRowComponent
   ],
   entryComponents: [
     ScheduleDeleteModalComponent,

src/scheduler/scheduleDeleteModal.component.ts

@@ -1,49 +1,34 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input } from '@angular/core';
+import { Component, Inject } from '@angular/core';
-
+import { MD_DIALOG_DATA } from '@angular/material';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-
-import { Schedule } from './schedule';
 
 @Component({
   selector: 'schedule-delete-modal',
   template: `
-    <div class="modal-header">
+    <h3 md-dialog-title>{{ title() }}</h3>
-      <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
-    </div>
 
-    <div class="modal-body" id="modal-body">
+    <md-dialog-content>
-      <p>
+      Do you really want to delete schedule #{{ data.schedule.id }} with label:<br/>
-      Do you really want to delete schedule #{{ schedule.id }} with label:<br/>
+      {{ data.schedule.label }}
-      {{ schedule.label }}
+    </md-dialog-content>
-      </p>
-    </div>
 
-    <div class="modal-footer">
+    <md-dialog-actions>
-      <button class="btn btn-danger" (click)="submit()">
+      <button md-raised-button color="warn" [md-dialog-close]="data.schedule">
         Yes
       </button>
 
-      <button class="btn btn-default" (click)="cancel()">
+      <button md-raised-button md-dialog-close>
         No
       </button>
-    </div>
+    </md-dialog-actions>
   `
 })
 export class ScheduleDeleteModalComponent {
-  @Input() schedule: Schedule
+  constructor(
-
+    @Inject(MD_DIALOG_DATA) private data: any
-  constructor(public activeModal: NgbActiveModal) {}
+  ) {}
 
   title(): string {
-    return "Delete schedule #" + this.schedule.id;
+    return "Delete schedule #" + this.data.schedule.id;
-  }
-
-  submit(): void {
-    this.activeModal.close(this.schedule);
-  }
-
-  cancel(): void {
-    this.activeModal.dismiss("closed");
   }
 }

src/scheduler/scheduleEditModal.component.ts

@@ -1,5 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Inject, ViewChild } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -9,32 +10,33 @@ import { ScheduleFormComponent } from './scheduleForm.component';
 @Component({
   selector: 'schedule-edit-modal',
   template: `
-<div class="modal-header">
+<h3 md-dialog-title>{{ title() }}</h3>
-  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
-</div>
 
-<div class="modal-body" id="modal-body">
+<md-dialog-content>
   <schedule-form [schedule]="schedule" (submit)="submit()" #scheduleForm="scheduleForm"></schedule-form>
-</div>
+</md-dialog-content>
 
-<div class="modal-footer">
+<md-dialog-actions>
-  <button class="btn btn-primary" [disabled]="!scheduleForm.form.valid" (click)="submit()">
+  <button md-raised-button color="primary" [disabled]="!scheduleForm?.form.valid" (click)="submit()">
     Save
   </button>
 
-  <button class="btn btn-default" (click)="cancel()">
+  <button md-raised-button color="warn" md-dialog-close>
     Cancel
   </button>
-</div>
+</md-dialog-actions>
   `
 })
 export class ScheduleEditModalComponent {
-  @Input() schedule: Schedule;
+  private schedule: Schedule;
   @ViewChild('scheduleForm') scheduleForm: ScheduleFormComponent;
 
-  valid: boolean = false;
+  constructor(
-
+    @Inject(MD_DIALOG_DATA) public data: any,
-  constructor(private activeModal: NgbActiveModal) {}
+    public dialogRef: MdDialogRef<ScheduleEditModalComponent>,
+  ) {
+    this.schedule = data.schedule;
+  }
 
   title(): string {
     if(this.schedule.id) {
@@ -57,10 +59,6 @@ export class ScheduleEditModalComponent {
     schedule.value = formModel.value;
     schedule.category = formModel.category;
 
-    this.activeModal.close(schedule);
+    this.dialogRef.close(schedule);
-  }
-
-  cancel(): void {
-    this.activeModal.dismiss("closed");
   }
 }

src/scheduler/scheduleForm.component.ts

@@ -9,115 +9,73 @@ import { Schedule } from './schedule';
   exportAs: 'scheduleForm',
   template: `
 <form novalidate (keyup.enter)="submit()" [formGroup]="form">
-  <div class="form-group row">
+  <md-list>
-    <label class="col-sm-4 control-label" for="start-date">Date de début (AAAA-MM-JJ)</label>
+    <md-list-item>
-
+      <md-form-field>
-    <div class="col-sm-8"
+        <input mdInput formControlName="startDate"
-      [class.has-danger]="startDate.errors">
-      <input class="form-control"
-        id="start-date" formControlName="startDate"
           [textMask]="{mask: dateMask}"
           placeholder="Schedule start date">
 
-      <div class="help-block text-danger" *ngIf="startDate.errors">
+        <md-error *ngIf="startDate.errors?.required">The start date is required.</md-error>
-        <p *ngIf="startDate.errors.required">The start date is required.</p>
+      </md-form-field>
-      </div>
+    </md-list-item>
-    </div>
-  </div>
 
-  <div class="form-group row">
+    <md-list-item>
-    <label class="col-sm-4 control-label" for="stop-date">Date de fin (AAAA-MM-JJ)</label>
+      <md-form-field>
-
+        <input mdInput formControlName="stopDate"
-    <div class="col-sm-8"
-      [class.has-danger]="stopDate.errors">
-      <input class="form-control" 
-        id="stop-date" formControlName="stopDate"
           [textMask]="{mask: dateMask}"
           placeholder="Schedule stop date">
 
-      <div class="help-block text-danger" *ngIf="stopDate.errors">
+        <md-error *ngIf="stopDate.errors?.required">The stop date is required.</md-error>
-        <p *ngIf="stopDate.errors.required">The stop date is required.</p>
+      </md-form-field>
-      </div>
+    </md-list-item>
-    </div>
-  </div>
 
-  <div class="form-group row">
+    <md-list-item>
-    <label class="col-sm-4 control-label" for="day">Jour</label>
+      <md-form-field>
-
+        <input mdInput formControlName="day"
-    <div class="col-sm-8"
-      [class.has-danger]="day.errors">
-      <input class="form-control"
-        id="day" formControlName="day"
           type="number" placeholder="Day">
 
-      <div class="help-block text-danger" *ngIf="day.errors">
+        <md-error *ngIf="day.errors?.required">The day is required.</md-error>
-        <p *ngIf="day.errors.required">The day is required.</p>
+        <md-error *ngIf="day.errors?.min">The day must be greater than 0.</md-error>
-        <p *ngIf="day.errors.min">The day must be greater than 0.</p>
+        <md-error *ngIf="day.errors?.max">The day must be less than or equal to 31.</md-error>
-        <p *ngIf="day.errors.max">The day must be less than or equal to 31.</p>
+      </md-form-field>
-      </div>
+    </md-list-item>
-    </div>
-  </div>
 
-  <div class="form-group row">
+    <md-list-item>
-    <label class="col-sm-4 control-label" for="frequency">Fréquence</label>
+      <md-form-field>
-
+        <input mdInput formControlName="frequency"
-    <div class="col-sm-8"
-      [class.has-danger]="frequency.errors">
-      <input class="form-control"
-        id="frequency" formControlName="frequency"
           type="number" placeholder="Frequency">
 
-      <div class="help-block text-danger" *ngIf="frequency.errors">
+        <md-error *ngIf="frequency.errors?.required">The frequency is required.</md-error>
-        <p *ngIf="frequency.errors.required">The frequency is required.</p>
+        <md-error *ngIf="frequency.errors?.min">The frequency must be positive.</md-error>
-        <p *ngIf="frequency.errors.min">The frequency must be positive.</p>
+      </md-form-field>
-      </div>
+    </md-list-item>
-    </div>
-  </div>
 
-  <div class="form-group row">
+    <md-list-item>
-    <label class="col-sm-4 control-label" for="label">Label</label>
+      <md-form-field>
+        <input mdInput formControlName="label" placeholder="Label">
 
-    <div class="col-sm-8"
+        <md-error *ngIf="label.errors?.required">The label is required.</md-error>
-      [class.has-danger]="label.errors">
+      </md-form-field>
-      <input class="form-control"
+    </md-list-item>
-        id="label" formControlName="label"
-        placeholder="Label">
 
-      <div class="help-block text-danger" *ngIf="label.errors">
+    <md-list-item>
-        <p *ngIf="label.errors.required">The label is required.</p>
+      <md-form-field>
-      </div>
+        <input mdInput formControlName="value" type="number" placeholder="Value">
-    </div>
-  </div>
 
-  <div class="form-group row">
+        <md-error *ngIf="value.errors?.required">The value is required.</md-error>
-    <label class="col-sm-4 control-label" for="value">Montant</label>
+      </md-form-field>
+    </md-list-item>
 
-    <div class="col-sm-8"
+    <md-list-item>
-      [class.has-danger]="value.errors">
+      <md-form-field>
-      <input class="form-control"
+        <input mdInput formControlName="category"
-        id="value" formControlName="value"
-        type="number" placeholder="Value">
-
-      <div class="help-block text-danger" *ngIf="value.errors">
-        <p *ngIf="value.errors.required">The value is required.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="category">Catégorie</label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="category.errors">
-      <input class="form-control"
-        id="category" formControlName="category"
           placeholder="Category">
 
-      <div class="help-block text-danger" *ngIf="category.errors">
+        <md-error *ngIf="category.errors?.required">The category is required.</md-error>
-        <p *ngIf="category.errors.required">The category is required.</p>
+      </md-form-field>
-      </div>
+    </md-list-item>
-    </div>
+  </md-list>
-  </div>
 </form>
   `
 })

src/scheduler/scheduleList.component.ts

@@ -1,5 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
 import { ActivatedRoute } from '@angular/router';
 
 import { Observable } from 'rxjs/Rx';
@@ -8,6 +9,8 @@ import { Logger } from '@nsalaun/ng-logger';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 
+import { ScheduleDataSource } from './schedule.dataSource';
+import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
 import { ScheduleEditModalComponent } from './scheduleEditModal.component';
 import { ScheduleService } from './schedule.service';
 import { Schedule } from './schedule';
@@ -15,41 +18,95 @@ import { Schedule } from './schedule';
 @Component({
   selector: 'schedule-list',
   template: `
-<div class="row">
+<div class="containerX">
-  <table class="table table-sm table-striped table-condensed table-hover">
+  <div class="container">
-    <thead>
+    <button md-fab color="primary" (click)="add()">
-      <tr>
+      <md-icon>add</md-icon>
-        <th>Date de d&eacute;but</th>
-        <th>Date de fin</th>
-        <th>Jour</th>
-        <th>Fr&eacute;q.</th>
-        <th>Libell&eacute; de l'op&eacute;ration</th>
-        <th>Montant</th>
-        <th>Cat&eacute;gorie</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr>
-        <td colspan="8">
-          <button class="btn btn-success" (click)="add()">
-            Ajouter
     </button>
-        </td>
+  </div>
-      </tr>
 
-      <tr *ngFor="let schedule of schedules"
+  <div class="container">
-          [schedule-row]="schedule" (needsReload)="load()">
+    <md-table #table [dataSource]="schedules">
-      </tr>
+      <ng-container mdColumnDef="start_date">
-    </tbody>
+        <md-header-cell *mdHeaderCellDef>Date de d&eacute;but</md-header-cell>
-  </table>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.start_date | date: "yyyy-MM-dd" }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="stop_date">
+        <md-header-cell *mdHeaderCellDef>Date de fin</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.stop_date | date: "yyyy-MM-dd" }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="day">
+        <md-header-cell *mdHeaderCellDef>Jour</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.day }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="frequency">
+        <md-header-cell *mdHeaderCellDef>Fr&eacute;q.</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.frequency }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="label">
+        <md-header-cell *mdHeaderCellDef>Libell&eacute; de l'op&eacute;ration</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.label }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="value">
+        <md-header-cell *mdHeaderCellDef>Montant</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.value | currency: "EUR":true }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="category">
+        <md-header-cell *mdHeaderCellDef>Cat&eacute;gorie</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          {{ schedule.category }}
+        </md-cell>
+      </ng-container>
+
+      <ng-container mdColumnDef="actions">
+        <md-header-cell *mdHeaderCellDef>Actions</md-header-cell>
+        <md-cell *mdCellDef="let schedule">
+          <!-- Edit operation. -->
+          <button md-mini-fab color="primary" (click)="modify(schedule)">
+            <md-icon>mode_edit</md-icon>
+          </button>
+
+          <!-- Remove operation. -->
+          <button md-mini-fab color="warn" [hidden]="!schedule.id"
+            (click)="confirmDelete(schedule)">
+            <md-icon>delete_forever</md-icon>
+          </button>
+        </md-cell>
+      </ng-container>
+
+      <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
+      <md-row *mdRowDef="let row; columns: displayedColumns;">
+      </md-row>
+    </md-table>
+  </div>
 </div>
     `
 })
 export class ScheduleListComponent implements OnInit {
-  accountId: number;
+  private accountId: number;
-  schedules = [];
+
+  private displayedColumns: String[] = [
+    'start_date', 'stop_date', 'day', 'frequency',
+    'label', 'value', 'category', 'actions'
+  ];
 
   constructor(
     private toastrService: ToastrService,
@@ -57,6 +114,8 @@ export class ScheduleListComponent implements OnInit {
     private logger: Logger,
     private ngbModal: NgbModal,
     private route: ActivatedRoute,
+    private schedules: ScheduleDataSource,
+    private mdDialog: MdDialog,
   ) {}
 
   ngOnInit() {
@@ -66,41 +125,37 @@ export class ScheduleListComponent implements OnInit {
     this.load();
   }
 
-  /*
-   * Add a new operation at the beginning of th array.
-   */
-  add() {
-    var schedule = new Schedule();
-    schedule.account_id = this.accountId;
-
-    const modal = this.ngbModal.open(ScheduleEditModalComponent, {
-      size: 'lg'
-    });
-
-    modal.componentInstance.schedule = schedule;
-
-    modal.result.then((schedule: Schedule) => {
-      this.save(schedule);
-    }, (reason) => function(reason) {
-    });
-  };
-
   load() {
     this.logger.log("Loading schedules for accountId", this.accountId);
     if(!this.accountId) {
       return;
     }
 
-    this.scheduleService.query(this.accountId)
+    this.schedules.load(this.accountId);
-      .subscribe((schedules: Schedule[]) => {
-        this.logger.log("Schedules loaded.", schedules);
-        this.schedules = schedules;
-      }, (reason) => {
-        this.logger.log("Got error", reason);
   }
-    );
+
+  /*
+   * Add a new operation at the beginning of th array.
+   */
+  add() {
+    this.modify(new Schedule());
   };
 
+  modify(schedule: Schedule) {
+    let dialogRef = this.mdDialog.open(ScheduleEditModalComponent, {
+      data: {
+        schedule: schedule,
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((schedule: Schedule) => {
+      if(schedule) {
+        this.save(schedule);
+      }
+    }, (reason) => function(reason) {
+    });
+  }
+
   save(schedule: Schedule) {
     return this.scheduleService.create(schedule).subscribe((schedule: Schedule) => {
       this.toastrService.success('Schedule #' + schedule.id + ' saved.');
@@ -112,4 +167,35 @@ export class ScheduleListComponent implements OnInit {
       );
     });
   };
+
+  confirmDelete(schedule: Schedule) {
+    let dialogRef = this.mdDialog.open(ScheduleDeleteModalComponent, {
+      data: {
+        schedule: schedule,
+      }
+    });
+
+    dialogRef.afterClosed().subscribe((schedule: Schedule) => {
+      if(schedule) {
+        this.delete(schedule);
+      }
+    }, (reason) => function(reason) {
+      this.logger.error("Delete dialog failed", reason);
+    });
+  }
+
+  delete(schedule: Schedule) {
+    var id = schedule.id;
+
+    return this.scheduleService.delete(schedule).subscribe(() => {
+      this.toastrService.success('Schedule #' + id + ' deleted.');
+
+      this.load();
+    }, result => {
+      this.toastrService.error(
+        'An error occurred while trying to delete schedule #' + id + ':<br />'
+        + result.message
+      );
+    });
+  }
 };

src/scheduler/scheduleRow.component.ts

@@ -1,115 +0,0 @@
-// vim: set tw=80 ts=2 sw=2 sts=2 :
-import { CurrencyPipe } from '@angular/common';
-import { Component, Inject, Input, Output, EventEmitter } from '@angular/core';
-
-import { Logger } from '@nsalaun/ng-logger';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ToastrService } from 'ngx-toastr';
-
-import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
-import { ScheduleEditModalComponent } from './scheduleEditModal.component';
-import { ScheduleService } from './schedule.service';
-import { Schedule } from './schedule';
-
-@Component({
-  selector: 'tr[schedule-row]',
-  host: {
-    "[id]": "schedule.id",
-  },
-  template: `
-<td>{{ schedule.start_date | date: "yyyy-MM-dd" }}</td>
-
-
-<td>{{ schedule.stop_date | date: "yyyy-MM-dd" }}</td>
-
-<td>{{ schedule.day }}</td>
-
-<td>{{ schedule.frequency }}</td>
-
-<td>{{ schedule.label }}</td>
-
-<td>{{ schedule.value | currency:"EUR":true }}</td>
-
-<td>{{ schedule.category }}</td>
-
-<td>
-  <div class="btn-group btn-group-sm">
-    <!-- Edit operation. -->
-    <button type="button" class="btn btn-success"
-      (click)="modify()" title="edit">
-      <span class="fa fa-pencil-square-o"></span>
-    </button>
-
-    <!-- Remove operation. -->
-    <button type="button" class="btn btn-danger"
-      [hidden]="!schedule.id"
-      (click)="confirmDelete()"
-      title="remove">
-      <span class="fa fa-trash"></span>
-    </button>
-  </div>
-</td>
-  `
-})
-export class ScheduleRowComponent {
-  @Input('schedule-row') schedule: Schedule;
-  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
-
-  constructor(
-    private scheduleService: ScheduleService,
-    private logger: Logger,
-    private toastrService: ToastrService,
-    private ngbModal: NgbModal
-  ) {}
-
-  save(schedule: Schedule) {
-    return this.scheduleService.update(schedule).subscribe((schedule: Schedule) => {
-      this.toastrService.success('Schedule #' + schedule.id + ' saved.');
-
-      this.needsReload.emit();
-    }, result => {
-      this.toastrService.error(
-        'Error while saving schedule: ' + result.message
-      );
-    });
-  }
-
-  confirmDelete() {
-    const modal = this.ngbModal.open(ScheduleDeleteModalComponent);
-
-    modal.componentInstance.schedule = this.schedule;
-
-    modal.result.then((schedule: Schedule) => {
-      this.delete(schedule);
-    }, (reason) => function(reason) {
-    });
-  }
-
-  delete(schedule: Schedule) {
-    var id = schedule.id;
-
-    return this.scheduleService.delete(schedule).subscribe(() => {
-      this.toastrService.success('Schedule #' + id + ' deleted.');
-
-      this.needsReload.emit();
-    }, result => {
-      this.toastrService.error(
-        'An error occurred while trying to delete schedule #' + id + ':<br />'
-        + result.message
-      );
-    });
-  }
-
-  modify() {
-    const modal = this.ngbModal.open(ScheduleEditModalComponent, {
-      size: 'lg'
-    });
-
-    modal.componentInstance.schedule = this.schedule;
-
-    modal.result.then((schedule: Schedule) => {
-      this.save(schedule);
-    }, (reason) => function(reason) {
-    });
-  }
-}

src/vendor.ts

@@ -1,13 +0,0 @@
-// Angular
-import '@angular/platform-browser';
-import '@angular/platform-browser-dynamic';
-import '@angular/core';
-import '@angular/common';
-import '@angular/http';
-import '@angular/router';
-
-// RxJS
-import 'rxjs';
-
-// Other vendors for example jQuery, Lodash or Bootstrap
-// You can import js, ts, css, sass, ...

tsconfig.json

@@ -8,9 +8,6 @@
     "experimentalDecorators": true,
     "lib": [ "es2015", "dom" ],
     "noImplicitAny": false,
-    "suppressImplicitAnyIndexErrors": true,
+    "suppressImplicitAnyIndexErrors": true
-    "typeRoots": [
-        "../node_modules/@types"
-    ]
   }
 }

webpack.config.js

@@ -1 +1,151 @@
-module.exports = require('./config/webpack.dev.js');
+/* jshint esversion: 6 */
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+module.exports = {
+    context: path.resolve(__dirname, 'src'),
+    entry: {
+        "main": [
+            './main.ts'
+        ],
+        "styles": [
+            './main.scss'
+        ]
+    },
+    devtool: 'source-map',
+    resolve: {
+        extensions: ['.js', '.ts', '.html'],
+    },
+    module: {
+        rules: [{
+            enforce: 'pre',
+            test: /webpack\.config\.js$/,
+            include: path.resolve(__dirname),
+            loader: 'eslint-loader',
+            options: {
+                useEslintrc: false,
+                emitWarning: true,
+                emitError: true,
+                failOnWarning: true,
+                failOnError: true,
+                baseConfig: 'webpack',
+                rules: {
+                    indent: ['error', 4]
+                },
+            },
+        }, {
+            // Javascript
+            enforce: 'pre',
+            test: /\.js$/,
+            //include: path.resolve(__dirname, 'src'),
+            loader: 'eslint-loader',
+            options: {
+                useEslintrc: false,
+                emitWarning: false,
+                emitError: true,
+                failOnWarning: false,
+                failOnError: true,
+                baseConfig: 'angular',
+                rules: {
+                    indent: ['error', 4]
+                },
+                plugins: [
+                    'angular',
+                    'html',
+                    'security',
+                    'this',
+                    'jquery',
+                    'promise'
+                ]
+            },
+        }, {
+            test: /\.js$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader'
+        }, {
+            // Typescript linting
+            enforce: 'pre',
+            test: /\.ts$/,
+            loader: 'tslint-loader',
+            options: {
+                configuration: {
+                    extends: [
+                        "tslint:latest",
+                        "codelyzer"
+                    ],
+                    rules: {
+                        //quotemark: [true, 'single']
+                    }
+                },
+                configFile: 'tslint-custom.json',
+                emitErrors: true,
+                failOnHint: true,
+                typeCheck: true,
+                tsConfigFile: 'tsconfig.json',
+                formatter: 'verbose',
+                formattersDirectory: 'node_modules/tslint/lib/formatters/',
+            }
+        }, {
+            test: /\.ts$/,
+            exclude: /node_modules/,
+            loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
+        }, {
+            test: /\.html$/,
+            loader: 'raw-loader'
+        }, {
+            test: /\.css$/,
+            loaders: [
+                'style-loader',
+                'css-loader',
+            ]
+        }, {
+            test: /\.scss$/,
+            loaders: [
+                'style-loader',
+                'css-loader',
+                'sass-loader',
+                'resolve-url-loader',
+                'sass-loader?sourceMap'
+            ]
+        }, {
+            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+            loader: 'url-loader?limit=100000'
+        }]
+    },
+    plugins: [
+        new webpack.ProvidePlugin({
+            "window.jQuery": "jquery"
+        }),
+        new webpack.ContextReplacementPlugin(
+            /angular(\\|\/)core(\\|\/)@angular/,
+            path.resolve(__dirname, './')
+        ),
+        new HtmlWebpackPlugin({
+            title: 'Accountant',
+            template: 'index.ejs',
+            hash: false,
+            inject: true,
+            compile: true,
+            minify: false,
+            chunks: 'all'
+        })
+    ],
+    output: {
+        path: path.resolve(__dirname, 'build'),
+        filename: '[name].bundle.js',
+        chunkFilename: '[name].chunk.js'
+        //publicPath: 'js'
+    },
+    devServer: {
+        proxy: {
+            '/api': {
+                target: 'http://localhost:5000',
+                secure: false
+            }
+        },
+        hot: true,
+        noInfo: false,
+        quiet: false,
+    }
+};