Rename Operation controller to Operation List component.

2017-07-30 15:16:44 +02:00
parent 8d63b30a32
commit 072efe7fc3
3 changed files with 6 additions and 6 deletions
--- a/src/operations/operationList.component.ts
+++ b/src/operations/operationList.component.ts
@ -0,0 +1,164 @@
+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 OperationListComponent 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);
+    };
+};