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 { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';

import { Account } from '../accounts/account';
import { Operation } from './operation';
import { OperationService } from './operation.service';
import { OperationDeleteModalComponent } from './operationDeleteModal.component';
import { OperationEditModalComponent } from './operationEditModal.component';

@Component({
  selector: 'tr[operation-row]',
  host: {
    "[id]": "operation.id",
    "[class.stroke]": "operation.canceled",
    "[class.italic]": "!operation.confirmed",
    "class": "lighten-5",
    "[class.orange]": "account.authorized_overdraft < 0 && operation.balance < 0",
    "[class.red]": "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':true }}</td>

<td class="test-lighten-2"
  [class.orange-text]="account.authorized_overdraft < 0 && operation.balance < 0"
  [class.red-text]="operation.balance < account.authorized_overdraft">
  {{ operation.balance | currency:'EUR':true }}
</td>

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

<td>
  <!-- Edit operation, for non-canceled operation. -->
  <button mz-button [float]="true" class="green"
    *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 mz-button [float]="true" class="blue"
    *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 mz-button [float]="true" class="orange"
    (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 mz-button [float]="true" class="red"
    (click)="confirmDelete(operation)"
    *ngIf="operation.id && !operation.scheduled_operation_id">
    <span class="fa fa-trash-o"></span>
  </button>
</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,
    private ngbModal: NgbModal,
  ) {}

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

    this.save(operation);
  };

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

    this.save(operation);
  };

  save(operation) {
    operation.confirmed = true;

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

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

  confirmDelete(operation) {
    const modal = this.ngbModal.open(OperationDeleteModalComponent);

    modal.componentInstance.operation = this.operation;

    var id = operation.id;

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

  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
    const modal = this.ngbModal.open(OperationEditModalComponent, {
      size: 'lg'
    });

    modal.componentInstance.operation = operation;

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