accountant-ui/src/operations/operationList.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 '../accounts/account';
import { AccountService } from '../accounts/account.service';
import { Operation } from './operation';
import { OperationService } from './operation.service';
import { OperationEditModalComponent } from './operationEditModal.component';

@Component({
  selector: 'operation-list',
  template: `
<div>
  <div class="row">
    <div class="col-md-9">
      <balance-chart (onUpdate)="onUpdate($event)"
        [account]="account"></balance-chart>
    </div>

    <div class="col-md-3">
      <category-chart
        [minDate]="minDate"
        [maxDate]="maxDate"
        [account]="account"></category-chart>
    </div>
  </div>

  <div class="row">
    <table class="table table-striped table-condensed table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>Date d'op.</th>
          <th>Libell&eacute; de l'op&eacute;ration</th>
          <th>Montant</th>
          <th>Solde</th>
          <th>Cat&eacute;gorie</th>
          <th>Actions</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td colspan="6">
            <button class="btn btn-success" (click)="add()">
              Ajouter
            </button>
          </td>
        </tr>

        <tr [operation-row]="operation"
          [account]="account"
          (needsReload)="load(minDate, maxDate)"
          *ngFor="let operation of operations">
        </tr>
      </tbody>
    </table>
  </div>
</div>
    `
})
export class OperationListComponent implements OnInit {
  private account: Account;
  private minDate: Date;
  private maxDate: Date;
  private operations: Operation[];

  constructor(
    @Inject("accountIdService") private accountIdService,
    private toastrService: ToastrService,
    private operationService: OperationService,
    private accountService: AccountService,
    private logger: Logger,
    private ngbModal: NgbModal,
  ) {}

  ngOnInit() {
    this.accountService.get(this.accountIdService.get()).subscribe(account => {
      this.account = account
    });
  }

  /*
   * Add an empty operation.
   */
  add() {
    var operation = new Operation();
    operation.account_id = this.accountIdService.get();

    return this.modify(operation);
  };

  /*
   * Load operations.
   */
  load(minDate, maxDate) {
    this.minDate = minDate;
    this.maxDate = maxDate;

    return this.operationService.query(
      this.accountIdService.get(),
      minDate,
      maxDate
    ).subscribe((operations: Operation[]) => {
      this.operations = operations.reverse();
    });
  };

  /*
   * Save an operation and return a promise.
   */
  save(operation) {
    operation.confirmed = true;

    var observable: Observable<Operation>;

    if(operation.id){
      observable = this.operationService.update(operation);
    } else {
      observable = this.operationService.create(operation);
    }

    return observable.subscribe((operation) => {
      this.toastrService.success('Operation #' + operation.id + ' saved.');

      this.load(this.minDate, this.maxDate);

      return operation;
    }, (result) => {
      this.toastrService.error(
        'Error while saving operation: ' + result.message
      );
    });
  };

  modify(operation) {
    // FIXME Alexis Lahouze 2017-06-15 i18n
    const modal = this.ngbModal.open(OperationEditModalComponent, {
      windowClass: 'in'
    });

    modal.componentInstance.operation = operation;

    modal.result.then((operation: Operation) => {
      this.save(operation);
    }, (reason) => {
    });
  };

  onUpdate(dateRange) {
    this.load(dateRange.minDate, dateRange.maxDate);
  };
};