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

120 lines
3.1 KiB
TypeScript
Raw Normal View History

2017-07-25 08:55:34 +02:00
// vim: set tw=80 ts=2 sw=2 sts=2 :
import { CurrencyPipe } from '@angular/common';
2017-07-25 16:14:48 +02:00
import { Component, Inject, Input, Output, EventEmitter } from '@angular/core';
2017-07-25 08:55:34 +02:00
import { Logger } from '@nsalaun/ng-logger';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
2017-07-25 08:55:34 +02:00
import { ToastrService } from 'ngx-toastr';
import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
2017-07-25 17:18:04 +02:00
import { ScheduleEditModalComponent } from './scheduleEditModal.component';
2017-07-25 08:55:34 +02:00
import { ScheduleService } from './schedule.service';
import { Schedule } from './schedule';
@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,
private ngbModal: NgbModal
2017-07-25 08:55:34 +02:00
) {}
save(schedule: Schedule) {
2017-07-25 17:26:09 +02:00
return this.scheduleService.update(schedule).subscribe((schedule: Schedule) => {
2017-07-25 08:55:34 +02:00
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) {
2017-07-25 08:55:34 +02:00
});
}
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() {
const modal = this.ngbModal.open(ScheduleEditModalComponent, {
windowClass: 'in'
});
modal.componentInstance.schedule = this.schedule;
modal.result.then((schedule: Schedule) => {
this.save(schedule);
}, (reason) => function(reason) {
2017-07-25 08:55:34 +02:00
});
}
}