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

// vim: set tw=80 ts=2 sw=2 sts=2 :
import { Component, Inject, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

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';

@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,
    private route: ActivatedRoute,
  ) {}

  ngOnInit() {
    this.logger.log("ngOnInit");
    this.accountId = +this.route.snapshot.paramMap.get('accountId')
    // 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, {
      size: 'lg'
    });

    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
      );
    });
  };
};