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 { MdDialog } from '@angular/material';
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 { ScheduleDataSource } from './schedule.dataSource';
import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
import { ScheduleEditModalComponent } from './scheduleEditModal.component';
import { ScheduleService } from './schedule.service';
import { Schedule } from './schedule';

@Component({
  selector: 'schedule-list',
  template: `
<div class="containerX">
  <div class="container">
    <button md-fab color="primary" (click)="add()">
      <md-icon>add</md-icon>
    </button>
  </div>

  <div class="container">
    <md-table #table [dataSource]="schedules">
      <ng-container mdColumnDef="start_date">
        <md-header-cell *mdHeaderCellDef>Date de d&eacute;but</md-header-cell>
        <md-cell *mdCellDef="let schedule">
          {{ schedule.start_date | date: "yyyy-MM-dd" }}
        </md-cell>
      </ng-container>

      <ng-container mdColumnDef="stop_date">
        <md-header-cell *mdHeaderCellDef>Date de fin</md-header-cell>
        <md-cell *mdCellDef="let schedule">
          {{ schedule.stop_date | date: "yyyy-MM-dd" }}
        </md-cell>
      </ng-container>

      <ng-container mdColumnDef="day">
        <md-header-cell *mdHeaderCellDef>Jour</md-header-cell>
        <md-cell *mdCellDef="let schedule">
          {{ schedule.day }}
        </md-cell>
      </ng-container>

      <ng-container mdColumnDef="frequency">
        <md-header-cell *mdHeaderCellDef>Fr&eacute;q.</md-header-cell>
        <md-cell *mdCellDef="let schedule">
          {{ schedule.frequency }}
        </md-cell>
      </ng-container>

      <ng-container mdColumnDef="label">
        <md-header-cell *mdHeaderCellDef>Libell&eacute; de l'op&eacute;ration</md-header-cell>
        <md-cell *mdCellDef="let schedule">
          {{ schedule.label }}
        </md-cell>
      </ng-container>

      <ng-container mdColumnDef="value">
        <md-header-cell *mdHeaderCellDef>Montant</md-header-cell>
        <md-cell *mdCellDef="let schedule">
          {{ schedule.value | currency: "EUR":true }}
        </md-cell>
      </ng-container>

      <ng-container mdColumnDef="category">
        <md-header-cell *mdHeaderCellDef>Cat&eacute;gorie</md-header-cell>
        <md-cell *mdCellDef="let schedule">
          {{ schedule.category }}
        </md-cell>
      </ng-container>

      <ng-container mdColumnDef="actions">
        <md-header-cell *mdHeaderCellDef>Actions</md-header-cell>
        <md-cell *mdCellDef="let schedule">
          <!-- Edit operation. -->
          <button md-mini-fab color="primary" (click)="modify(schedule)">
            <md-icon>mode_edit</md-icon>
          </button>

          <!-- Remove operation. -->
          <button md-mini-fab color="warn" [hidden]="!schedule.id"
            (click)="confirmDelete(schedule)">
            <md-icon>delete_forever</md-icon>
          </button>
        </md-cell>
      </ng-container>

      <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
      <md-row *mdRowDef="let row; columns: displayedColumns;">
      </md-row>
    </md-table>
  </div>
</div>
    `
})
export class ScheduleListComponent implements OnInit {
  private accountId: number;

  private displayedColumns: String[] = [
    'start_date', 'stop_date', 'day', 'frequency',
    'label', 'value', 'category', 'actions'
  ];

  constructor(
    private toastrService: ToastrService,
    private scheduleService: ScheduleService,
    private logger: Logger,
    private ngbModal: NgbModal,
    private route: ActivatedRoute,
    private schedules: ScheduleDataSource,
    private mdDialog: MdDialog,
  ) {}

  ngOnInit() {
    this.logger.log("ngOnInit");
    this.accountId = +this.route.snapshot.paramMap.get('accountId')
    // Load operations on controller initialization.
    this.load();
  }

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

    this.schedules.load(this.accountId);
  }

  /*
   * Add a new operation at the beginning of th array.
   */
  add() {
    this.modify(new Schedule());
  };

  modify(schedule: Schedule) {
    const modal = this.ngbModal.open(ScheduleEditModalComponent, {
      size: 'lg'
    });

    modal.componentInstance.schedule = schedule;

    modal.result.then((schedule: Schedule) => {
      this.save(schedule);
    }, (reason) => function(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
      );
    });
  };

  confirmDelete(schedule: Schedule) {
    let dialogRef = this.mdDialog.open(ScheduleDeleteModalComponent, {
      data: {
        schedule: schedule,
      }
    });

    dialogRef.afterClosed().subscribe((schedule: Schedule) => {
      if(schedule) {
        this.delete(schedule);
      }
    }, (reason) => function(reason) {
      this.logger.error("Delete dialog failed", reason);
    });
  }

  delete(schedule: Schedule) {
    var id = schedule.id;

    return this.scheduleService.delete(schedule).subscribe(() => {
      this.toastrService.success('Schedule #' + id + ' deleted.');

      this.load();
    }, result => {
      this.toastrService.error(
        'An error occurred while trying to delete schedule #' + id + ':<br />'
        + result.message
      );
    });
  }
};