accountant-ui/src/operations/operationList.component.ts

// vim: set tw=80 ts=2 sw=2 sts=2 :

import * as moment from 'moment';

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, Params } 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';

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

    <div class="col-md-4">
      <category-chart></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">
            <a class="btn btn-success"
              [routerLink]="['new']">
              Ajouter
            </a>
          </td>
        </tr>

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

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

  ngOnInit() {
    this.route.queryParamMap.subscribe((params: Params) => {
      if (params.get('from') && params.get('to')) {
        this.loadData();
      } else {
        this.router.navigate([], {
          queryParams: {
            from: moment().startOf('month').format('YYYY-MM-DD'),
            to: moment().endOf('month').format('YYYY-MM-DD')
          }
        });
      }
    });

    this.route.paramMap.subscribe((params: Params) => {
      let accountId = params.get('accountId');

      this.accountService.get(
        +accountId
      ).subscribe(account => {
        this.account = account;
      });
    });
  }

  /*
   * Load operations.
   */
  loadData() {
    let accountId = this.route.snapshot.paramMap.get('accountId');
    let fromDay = this.route.snapshot.queryParamMap.get('from');
    let toDay = this.route.snapshot.queryParamMap.get('to');

    return this.operationService.query(
      +accountId,
      fromDay,
      toDay
    ).subscribe((operations: Operation[]) => {
      this.operations = operations.reverse();
    });
  }
}