Add Shecdule Row Component.
This commit is contained in:
parent
fa9402e25e
commit
7ea652e23e
138
src/scheduler/scheduleRow.component.ts
Normal file
138
src/scheduler/scheduleRow.component.ts
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||||
|
import { CurrencyPipe } from '@angular/common';
|
||||||
|
import { Component, Inject, Input, Output, EventEmitter, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
import { Logger } from '@nsalaun/ng-logger';
|
||||||
|
import { ToastrService } from 'ngx-toastr';
|
||||||
|
|
||||||
|
import { ScheduleService } from './schedule.service';
|
||||||
|
import { Schedule } from './schedule';
|
||||||
|
|
||||||
|
var scheduleFormTmpl = require('./schedule.form.tmpl.html'),
|
||||||
|
scheduleDeleteTmpl = require('./schedule.delete.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
|
||||||
|
) {}
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
this.$modal({
|
||||||
|
templateUrl: scheduleDeleteTmpl,
|
||||||
|
controller: function($scope, title, schedule, $delete) {
|
||||||
|
$scope.title = title;
|
||||||
|
$scope.operation = schedule;
|
||||||
|
$scope.$delete = () => {
|
||||||
|
$scope.$hide();
|
||||||
|
$delete($scope.operation);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
locals: {
|
||||||
|
title: title,
|
||||||
|
schedule: this.schedule,
|
||||||
|
$delete: (schedule) => {
|
||||||
|
this.delete(schedule);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user