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

// vim: set tw=80 ts=2 sw=2 sts=2 :
import { CurrencyPipe } from '@angular/common';
import { Component, Inject } 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 { AccountBalancesService } from './accountBalances.service';
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
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 id="{{ account.id }}"
        class="form-inline" ng-class="rowClass(account)"
        *ngFor="let account of accounts">
        <td>
          <a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a>
        </td>

        <td>
          <span (ngClass)="valueClass(account, account.balances.current)">
            {{ account.balances?.current | currency:"EUR" }}
          </span>
        </td>

        <td>
          <span ng-class="valueClass(account, account.balancess.pointed)">
            {{ account.balances?.pointed | currency:"EUR" }}
          </span>
        </td>

        <td>{{ account.authorized_overdraft | currency:"EUR" }}</td>

        <td>
          <div class="btn-group btn-group-xs">
            <!-- Edit account. -->
            <button type="button" class="btn btn-success"
              (click)="modify(account)">
              <span class="fa fa-pencil-square-o"></span>
            </button>

            <!-- Delete account, with confirm. -->
            <button type="button" class="btn btn-default"
              (click)="confirmDelete(account)">
              <span class="fa fa-trash-o"></span>
            </button>

            <!-- Open account scheduler. -->
            <a class="btn btn-default"
              [hidden]="!account.id"
              href="#!/account/{{ account.id }}/scheduler">
              <span class="fa fa-clock-o"></span>
            </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
    `,
})
export class AccountListComponent {
  static $inject = [
    'AccountService',
    'AccountBalancesService',
    'ToastrService',
    'Logger',
    'NgbModal'
  ];

  accounts: Account[];

  constructor(
    private AccountService: AccountService,
    private AccountBalancesService: AccountBalancesService,
    private ToastrService: ToastrService,
    private Logger: Logger,
    private NgbModal: NgbModal
  ) {
    // Load accounts.
    this.load();
  }

  /*
   * Return the class for an account current value compared to authorized
   * overdraft.
   */
  rowClass(account) {
    // eslint-disable-next-line camelcase
    if (!account || !account.authorized_overdraft || !account.current) {
      return;
    }

    // eslint-disable-next-line camelcase
    if (account.current < account.authorized_overdraft) {
      return 'danger';
    } else if (account.current < 0) {
      return 'warning';
    }
  };

  /*
   * Return the class for a value compared to account authorized overdraft.
   */
  valueClass(account, value) {
    if (!account || !value) {
      return;
    }

    // eslint-disable-next-line camelcase
    if (value < account.authorized_overdraft) {
      return 'text-danger';
    } else if (value < 0) {
      return 'text-warning';
    }
  };

  load() {
    this.AccountService.query().subscribe(accounts => {
      this.accounts = accounts.map((account: Account) => {
        this.Logger.log(account);
        this.AccountBalancesService
          .get(account.id)
          .subscribe((accountBalances: AccountBalances) => {
            account.balances = accountBalances;
          })
        return account;
      })
    });
  };

  /*
   * 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) {
    var observable: Observable<Account>;

    if(account.id) {
      observable = this.AccountService.update(account);
    } else {
      observable = this.AccountService.create(account);
    }

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

  confirmDelete(account) {
    const modal = this.NgbModal.open(AccountDeleteModalComponent, {
      windowClass: 'in'
    });

    modal.componentInstance.account = account;

    modal.result.then((account: Account) => {
      this.delete(account);
    }, (reason) => function(reason) {
    });
  };

  /*
   * Delete an account.
   */
  delete(account) {
    var id = account.id;

    this.AccountService.delete(account).subscribe(account => {
      this.ToastrService.success('account #' + id + ' deleted.');

      this.load();

      return account;
    }, 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(account) {
    const modal = this.NgbModal.open(AccountEditModalComponent, {
      windowClass: 'in'
    });

    modal.componentInstance.account = account;

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