accountant-ui/src/scheduler/scheduleList.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 { ScheduleEditModalComponent } from './scheduleEditModal.component';
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-sm table-striped table-condensed table-hover">
    <thead>
      <tr>
        <th>Date de d&eacute;but</th>
        <th>Date de fin</th>
        <th>Jour</th>
        <th>Fr&eacute;q.</th>
        <th>Libell&eacute; de l'op&eacute;ration</th>
        <th>Montant</th>
        <th>Cat&eacute;gorie</th>
        <th>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 ScheduleListComponent implements OnInit {
    accountId: number;
    schedules = [];

    constructor(
        private toastrService: ToastrService,
        private scheduleService: ScheduleService,
        private logger: Logger,
        private ngbModal: NgbModal,
        @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;

        const modal = this.ngbModal.open(ScheduleEditModalComponent, {
          windowClass: 'in'
        });

        modal.componentInstance.schedule = schedule;

        modal.result.then((schedule: Schedule) => {
          this.save(schedule);
        }, (reason) => function(reason) {
        });
    };

    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.create(schedule).subscribe((schedule: Schedule) => {
            this.toastrService.success('Schedule #' + schedule.id + ' saved.');

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