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

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() {
        return this.modify(new Account());
    };

    /*
     * 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) {
        });
    };
};