accountant-ui/src/accounts/accountList.component.ts

// vim: set tw=80 ts=2 sw=2 sts=2 :
import { Component, Inject, OnInit } from '@angular/core';
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 { AccountService } from './account.service';
import { AccountEditModalComponent } from './accountEditModal.component';

@Component({
  selector: 'account-list',
  template: `
<div class="row">
  <table class="table table-striped table-condensed table-hover">
    <thead>
      <tr>
        <th>Nom du compte</th>
        <th class="col-md-1">Solde courant</th>
        <th class="col-md-1">Solde pointé</th>
        <th class="col-md-1">Découvert autorisé</th>
        <th class="col-md-1">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>
    `,
})
export class AccountListComponent implements OnInit {
  accounts: Account[];

  constructor(
    private AccountService: AccountService,
    private ToastrService: ToastrService,
    private Logger: Logger,
    private NgbModal: NgbModal
  ) {
  }

  ngOnInit() {
    // Load accounts.
    this.load();
  }

  load() {
    this.AccountService.query().subscribe(accounts => {
      this.accounts = accounts;
    });
  };

  /*
   * Add an empty account.
   */
  add() {
    const modal = this.NgbModal.open(AccountEditModalComponent, {
      windowClass: 'in'
    });

    modal.componentInstance.account = new Account();

    modal.result.then((account: Account) => {
      this.Logger.log("Modal closed => save account", account);
      this.save(account);
    }, (reason) => function(reason) {
    });
  };

  /*
   * Save account.
   */
  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);

      this.ToastrService.error(
        'Error while saving account: ' + result.message
      );
    });
  };
};