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

// vim: set tw=80 ts=2 sw=2 sts=2 :
import { CurrencyPipe } from '@angular/common';
import { Component, Inject, Input, Output, EventEmitter } from '@angular/core';

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

import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
import { ScheduleEditModalComponent } from './scheduleEditModal.component';
import { ScheduleService } from './schedule.service';
import { Schedule } from './schedule';

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

@Component({
  selector: 'tr[schedule-row]',
  host: {
    "[id]": "schedule.id",
  },
  template: `
<td class="col-md-1">{{ schedule.start_date | date: "yyyy-MM-dd" }}</td>


<td>{{ schedule.stop_date | date: "yyyy-MM-dd" }}</td>

<td>{{ schedule.day }}</td>

<td>{{ schedule.frequency }}</td>

<td>{{ schedule.label }}</td>

<td>{{ schedule.value | currency:"EUR":true }}</td>

<td>{{ schedule.category }}</td>

<td>
  <div class="btn-group btn-group-xs">
    <!-- Edit operation. -->
    <button type="button" class="btn btn-default"
      (click)="modify()" title="edit">
      <span class="fa fa-pencil-square-o"></span>
    </button>

    <!-- Remove operation. -->
    <button type="button" class="btn btn-default"
      [hidden]="!schedule.id"
      (click)="confirmDelete()"
      title="remove">
      <span class="fa fa-trash"></span>
    </button>
  </div>
</td>
  `
})
export class ScheduleRowComponent {
  @Input('schedule-row') schedule: Schedule;
  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();

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

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

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

  confirmDelete() {
    var title = "Delete schedule #" + this.schedule.id;

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

    modal.componentInstance.schedule = this.schedule;

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

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

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

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

  modify() {
    // FIXME Alexis Lahouze 2017-06-15 i18n
    var title = "Modify schedule #" + this.schedule.id;

    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: this.schedule,
        $save: (operation) => {
          this.save(operation);
        }
      }
    });
  }
}