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">
  <div class="col s12">
    <table class="bordered highlight responsive-table">
      <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 mz-button class="green" (click)="add()">
              Ajouter
            </button>
          </td>
        </tr>

        <tr *ngFor="let account of accounts"
          [account-row]="account" (needsReload)="load()">
        </tr>
      </tbody>
    </table>
  </div>
</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.logger.log("Load accounts.");
    this.accountService.query().subscribe(accounts => {
      this.accounts = accounts;
    });
  };

  /*
   * Add an empty account.
   */
  add() {
    const modal = this.ngbModal.open(AccountEditModalComponent, {
      size: 'lg'
    });

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