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 { ActivatedRoute } from '@angular/router';

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 s9">
      <balance-chart (onUpdate)="onUpdate($event)"
        [account]="account"></balance-chart>
    </div>

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

  <div class="row">
    <div class="col s12">
      <table class="bordered highlight responsive-table">
        <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="7">
              <button mz-button class="green" (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>
</div>
    `
})
export class OperationListComponent implements OnInit {
  private account: Account;
  private minDate: Date;
  private maxDate: Date;
  private operations: Operation[];

  constructor(
    private toastrService: ToastrService,
    private operationService: OperationService,
    private accountService: AccountService,
    private logger: Logger,
    private ngbModal: NgbModal,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.accountService.get(
      +this.route.snapshot.paramMap.get('accountId')
    ).subscribe(account => {
      this.account = account
    });
  }

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

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

    modal.componentInstance.operation = operation;

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

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

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

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

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

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

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