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

// vim: set tw=80 ts=2 sw=2 sts=2 :
import { CurrencyPipe } from '@angular/common';
import { Component, Inject, Input, Output, EventEmitter } from '@angular/core';

import { ToastrService } from 'ngx-toastr';

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

import { Account } from '../accounts/account';
import { Operation } from './operation';
import { OperationService } from './operation.service';

@Component({
  selector: 'tr[operation-row]',
  host: {
    "[id]": "operation.id",
    "[class.stroke]": "operation.canceled",
    "[class.italic]": "!operation.confirmed",
    "[class.warning]": "operation.balance < 0",
    "[class.danger]": "operation.balance < account.authorized_overdraft"
  },
  template: `
<td>{{ operation.id }}</td>

<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>

<td>{{ operation.label }}</td>

<td>{{ operation.value | currency:'EUR':yes }}</td>

<td [class.text-warning]="operation.balance < 0"
    [class.text-danger]="operation.balance < account.authorized_overdraft">
  {{ operation.balance | currency:'EUR':true }}
</td>

<td>{{ operation.category }}</td>

<td>
  <div class="btn-group btn-group-sm">
    <!-- Edit operation, for non-canceled operation. -->
    <button type="button" class="btn btn-success"
      *ngIf="!operation.canceled"
      (click)="modify(operation)" title="edit">
      <span class="fa fa-pencil-square-o"></span>
    </button>

    <!-- Toggle pointed operation, for non-canceled operations. -->
    <button type="button" class="btn btn-secondary"
      *ngIf="!operation.canceled"
      (click)="togglePointed(operation)"
      [class.active]="operation.pointed" title="point">
      <span class="fa" [class.fa-check-square-o]="operation.pointed"
        [class.fa-square-o]="!operation.pointed"></span>
    </button>

    <!-- Toggle canceled operation. -->
    <button type="button" class="btn btn-warning"
      (click)="toggleCanceled(operation)"
      *ngIf="operation.scheduled_operation_id"
      [class.active]="operation.canceled" title="cancel">
      <span class="fa fa-remove"></span>
    </button>

    <!-- Delete operation, with confirm. -->
    <button type="button" class="btn btn-danger"
      (click)="confirmDelete(operation)"
      *ngIf="operation.id && !operation.scheduled_operation_id">
      <span class="fa fa-trash-o"></span>
    </button>
  </div>
</td>
  `
})
export class OperationRowComponent {
  @Input('operation-row') operation: Operation;
  @Input() account: Account;
  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();

  constructor(
    private operationService: OperationService,
    private toastrService: ToastrService,
    @Inject('$modal') private $modal,
  ) {}

  togglePointed(operation, rowform) {
    operation.pointed = !operation.pointed;

    this.save(operation);
  };

  toggleCanceled(operation) {
    operation.canceled = !operation.canceled;

    this.save(operation);
  };

  save(operation) {
    return this.operationService.update(operation).subscribe((operation) => {
      operation.confirmed = true;

      this.toastrService.success('Operation #' + operation.id + ' saved.');

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

  confirmDelete(operation) {
    var title = "Delete operation #" + operation.id;

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

  delete(operation) {
    var id = operation.id;

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

      this.needsReload.emit();
    }, (result) => {
      this.toastrService.error(
        'An error occurred while trying to delete operation #' +
        id + ':<br />' + result
      );
    });
  };

  modify(operation) {
    // FIXME Alexis Lahouze 2017-06-15 i18n
    var title = "Modify operation #" + operation.id;

    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);
        }
      }
    });
  };
}