accountant-ui/src/operations/operation.controller.ts

import { Component, Inject, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { ToastrService } from 'ngx-toastr';

var operationFormTmpl   = require('./operation.form.tmpl.html'),
    operationDeleteTmpl = require('./operation.delete.tmpl.html');

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-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>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 OperationController implements OnInit {
    private account: Account;
    private minDate: Date;
    private maxDate: Date;
    private operations: Operation[];

    constructor(
        @Inject("$modal") private $modal,
        @Inject("accountIdService") private accountIdService,
        private toastrService: ToastrService,
        private operationService: OperationService,
        private accountService: AccountService
    ) {}

    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
        var title = "New operation";

        this.$modal({
            templateUrl: operationFormTmpl,
            controller: function($scope, title, operation, $save) {
                $scope.title = title;
                $scope.operation = operation;
                $scope.$save = () => {
                    $scope.$hide();
                    $save($scope.operation);
                };
            },
            locals: {
                title: title,
                operation: operation,
                $save: (operation: Operation) => {
                    this.save(operation);
                }
            }
        });
    };

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