accountant-ui/src/scheduler/schedule.component.ts

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

import { Logger } from '@nsalaun/ng-logger';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';

import { ScheduleService } from './schedule.service';
import { Schedule } from './schedule';

var scheduleFormTmpl   = require('./schedule.form.tmpl.html');

@Component({
    selector: 'schedule-list',
    template: `
<div class="row">
  <table class="table table-striped table-condensed table-hover">
    <thead>
      <tr>
        <th class="col-md-1">Date de d&eacute;but</th>
        <th class="col-md-1">Date de fin</th>
        <th class="col-md-1">Jour</th>
        <th class="col-md-1">Fr&eacute;q.</th>
        <th>Libell&eacute; de l'op&eacute;ration</th>
        <th class="col-md-1">Montant</th>
        <th class="col-md-2">Cat&eacute;gorie</th>
        <th class="col-md-1">Actions</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td colspan="8">
          <button class="btn btn-success" (click)="add()">
            Ajouter
          </button>
        </td>
      </tr>

      <tr *ngFor="let schedule of schedules"
          [schedule-row]="schedule" (needsReload)="load()">
      </tr>
    </tbody>
  </table>
</div>
    `
})
export class ScheduleComponent implements OnInit {
    accountId: number;
    schedules = [];

    constructor(
        private toastrService: ToastrService,
        private scheduleService: ScheduleService,
        private logger: Logger,
        @Inject('$modal') private $modal,
        @Inject('accountIdService') private accountIdService
    ) {}

    $onInit() {
        this.ngOnInit();
    }

    ngOnInit() {
        this.logger.log("ngOnInit");
        this.accountId = this.accountIdService.get();
        // Load operations on controller initialization.
        this.load();
    }

    /*
     * Add a new operation at the beginning of th array.
     */
    add() {
        var schedule = new Schedule();
        schedule.account_id = this.accountId;

        var title = "New schedule";

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

    load() {
        this.logger.log("Loading schedules for accountId", this.accountId);
        if(!this.accountId) {
            return;
        }

        this.scheduleService.query(this.accountId)
            .subscribe((schedules: Schedule[]) => {
                this.logger.log("Schedules loaded.", schedules);
                this.schedules = schedules;
            }, (reason) => {
                this.logger.log("Got error", reason);
            }
        );
    };

    save(schedule: Schedule) {
        return this.scheduleService.update(schedule).subscribe((schedule: Schedule) => {
            this.toastrService.success('Schedule #' + schedule.id + ' saved.');

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