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

// 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": "lighten-5",
    "[class.orange]": "account.authorized_overdraft < 0 && accountBalances?.current < 0",
    "[class.red]": "accountBalances?.current < account.authorized_overdraft",
  },
  template: `
<td>
  <a [routerLink]="['/account', account.id, 'operations']">{{ account.name }}</a>
</td>

<td>
  <span class="text-lighten-2"
    [class.orange-text]="account.authorized_overdraft < 0 && accountBalances?.current < 0"
    [class.red-text]="accountBalances?.current < account.authorized_overdraft">
    {{ accountBalances?.current | currency:"EUR":true }}
  </span>
</td>

<td>
  <span class="text-lighten-2"
    [class.orange-text]="account.authorized_overdraft < 0 && accountBalances?.pointed < 0"
    [class.red-text]="accountBalances?.pointed < account.authorized_overdraft">
    {{ accountBalances?.pointed | currency:"EUR":true }}
  </span>
</td>

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

<td>
  <!-- Edit account. -->
  <button type="button" class="btn-floating green lighten-2"
    (click)="modify()">
    <span class="fa fa-pencil-square-o"></span>
  </button>

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

  <!-- Open account scheduler. -->
  <button class="btn-floating"
    [hidden]="!account.id"
    [routerLink]="['/account', account.id, 'scheduler']">
    <span class="fa fa-clock-o"></span>
  </button>
</td>
  `
})
export class AccountRowComponent implements OnInit {
  @Input('account-row') account: Account;
  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();

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

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