Add Operation Row component.

src/operations/operation.module.ts

@@ -10,6 +10,7 @@ import { RestangularModule } from 'ngx-restangular';
 
 import { BalanceChartComponent } from './balanceChart.component';
 import { CategoryChartComponent } from './categoryChart.component';
+import { OperationRowComponent } from './operationRow.component';
 import { CategoryService } from './category.service';
 import { OperationService } from './operation.service';
 
@@ -45,10 +46,12 @@ export function accountIdServiceFactory(i: any) {
   declarations: [
     BalanceChartComponent,
     CategoryChartComponent,
+    OperationRowComponent,
   ],
   entryComponents: [
     BalanceChartComponent,
     CategoryChartComponent,
+    OperationRowComponent,
   ]
 })
 export class OperationModule {}

src/operations/operationRow.component.ts

@@ -0,0 +1,169 @@
+// 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, danger: operation.balance < operationsCtrl.account.authorized_overdraft"
+  },
+  template: `
+<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"
+      [hidden]="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"
+      [hidden]="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)"
+      [hidden]="!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)">
+      [hidden]="!operation.id || operation.scheduled_operation_id"
+      <span class="fa fa-trash-o"></span>
+    </button>
+  </div>
+</td>
+  `
+})
+export class OperationRowComponent {
+  @Input() operation: Operation;
+  @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);
+        }
+      }
+    });
+  };
+}