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 } 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-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">
            <button class="btn btn-success" (click)="add()">
              Ajouter
            </button>
          </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(() => {
      this.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');

    if(! fromDay && ! toDay) {
      this.router.navigate(['account', accountId, 'operations'], {
        queryParams: {
          from: moment().startOf('month').format('YYYY-MM-DD'),
          to: moment().endOf('month').format('YYYY-MM-DD')
        }
      }).then(() => {
        this.loadData();
      });
    }

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

  /*
   * Add an empty operation.
   */
  add() {
    var operation = new Operation();
    let accountId = this.route.snapshot.paramMap.get('accountId');
    operation.account_id = +accountId;

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

  /*
   * 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.loadData();
        this.logger.info('Reload route', this.router.url);
        this.router.navigateByUrl(this.router.url);
      }, (result) => {
        this.toastrService.error(
          'Error while saving operation: ' + result.message
        );
      }
    );
  }
}