Upgrade Schedule component to Angular4.
This commit is contained in:
parent
2166def0f1
commit
e8247e30ab
@ -62,15 +62,9 @@ export default angular.module('accountant.scheduler', [
|
|||||||
|
|
||||||
.factory('scheduleService', downgradeInjectable(ScheduleService))
|
.factory('scheduleService', downgradeInjectable(ScheduleService))
|
||||||
|
|
||||||
.component('scheduleComponent', {
|
.directive('scheduleComponent', downgradeComponent({
|
||||||
bindings: {
|
component: ScheduleComponent
|
||||||
accountId: '<',
|
}))
|
||||||
$modal: '<'
|
|
||||||
},
|
|
||||||
templateUrl: schedulerTmpl,
|
|
||||||
controller: ScheduleComponent,
|
|
||||||
controllerAs: 'schedulerCtrl'
|
|
||||||
})
|
|
||||||
|
|
||||||
.run(function($transitions, accountIdService) {
|
.run(function($transitions, accountIdService) {
|
||||||
$transitions.onSuccess({}, (transition) => {
|
$transitions.onSuccess({}, (transition) => {
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { Component, Inject, OnInit } from '@angular/core';
|
||||||
import { Observable } from 'rxjs/Rx';
|
import { Observable } from 'rxjs/Rx';
|
||||||
|
|
||||||
import { Logger } from '@nsalaun/ng-logger';
|
import { Logger } from '@nsalaun/ng-logger';
|
||||||
@ -7,22 +8,61 @@ import { ToastrService } from 'ngx-toastr';
|
|||||||
import { ScheduleService } from './schedule.service';
|
import { ScheduleService } from './schedule.service';
|
||||||
import { Schedule } from './schedule';
|
import { Schedule } from './schedule';
|
||||||
|
|
||||||
var scheduleFormTmpl = require('./schedule.form.tmpl.html'),
|
var scheduleFormTmpl = require('./schedule.form.tmpl.html');
|
||||||
scheduleDeleteTmpl = require('./schedule.delete.tmpl.html');
|
|
||||||
|
|
||||||
export class ScheduleComponent {
|
@Component({
|
||||||
|
selector: 'schedule-list',
|
||||||
|
template: `
|
||||||
|
<div class="row">
|
||||||
|
<table class="table table-striped table-condensed table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="col-md-1">Date de début</th>
|
||||||
|
<th class="col-md-1">Date de fin</th>
|
||||||
|
<th class="col-md-1">Jour</th>
|
||||||
|
<th class="col-md-1">Fréq.</th>
|
||||||
|
<th>Libellé de l'opération</th>
|
||||||
|
<th class="col-md-1">Montant</th>
|
||||||
|
<th class="col-md-2">Catégorie</th>
|
||||||
|
<th class="col-md-1">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 ScheduleComponent implements OnInit {
|
||||||
accountId: number;
|
accountId: number;
|
||||||
operations = [];
|
schedules = [];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private toastrService: ToastrService,
|
private toastrService: ToastrService,
|
||||||
private scheduleService: ScheduleService,
|
private scheduleService: ScheduleService,
|
||||||
private logger: Logger,
|
private logger: Logger,
|
||||||
private $modal,
|
@Inject('$modal') private $modal,
|
||||||
private accountIdService
|
@Inject('accountIdService') private accountIdService
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
$onInit() {
|
$onInit() {
|
||||||
|
this.ngOnInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.logger.log("ngOnInit");
|
||||||
this.accountId = this.accountIdService.get();
|
this.accountId = this.accountIdService.get();
|
||||||
// Load operations on controller initialization.
|
// Load operations on controller initialization.
|
||||||
this.load();
|
this.load();
|
||||||
@ -35,124 +75,53 @@ export class ScheduleComponent {
|
|||||||
var schedule = new Schedule();
|
var schedule = new Schedule();
|
||||||
schedule.account_id = this.accountId;
|
schedule.account_id = this.accountId;
|
||||||
|
|
||||||
return this.modify(schedule);
|
var title = "New schedule";
|
||||||
|
|
||||||
|
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: schedule,
|
||||||
|
$save: (schedule) => {
|
||||||
|
this.save(schedule);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
* Load operations.
|
|
||||||
*/
|
|
||||||
load() {
|
load() {
|
||||||
return this.scheduleService.query(this.accountId)
|
this.logger.log("Loading schedules for accountId", this.accountId);
|
||||||
|
if(!this.accountId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scheduleService.query(this.accountId)
|
||||||
.subscribe((schedules: Schedule[]) => {
|
.subscribe((schedules: Schedule[]) => {
|
||||||
this.operations = schedules;
|
this.logger.log("Schedules loaded.", schedules);
|
||||||
|
this.schedules = schedules;
|
||||||
}, (reason) => {
|
}, (reason) => {
|
||||||
this.logger.log("Got error", reason);
|
this.logger.log("Got error", reason);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
save(schedule: Schedule) {
|
||||||
* Save operation.
|
return this.scheduleService.update(schedule).subscribe((schedule: Schedule) => {
|
||||||
*/
|
this.toastrService.success('Schedule #' + schedule.id + ' saved.');
|
||||||
save(operation: Schedule) {
|
|
||||||
let subscription: Observable<Schedule>;
|
|
||||||
|
|
||||||
if(operation.id) {
|
|
||||||
this.logger.log("updating schedule", operation);
|
|
||||||
subscription = this.scheduleService.update(operation);
|
|
||||||
} else {
|
|
||||||
this.logger.log("creating schedule", operation);
|
|
||||||
subscription = this.scheduleService.create(operation);
|
|
||||||
}
|
|
||||||
|
|
||||||
return subscription.subscribe((operation: Schedule) => {
|
|
||||||
this.toastrService.success('Scheduled operation #' + operation.id + ' saved.');
|
|
||||||
|
|
||||||
this.load();
|
this.load();
|
||||||
|
|
||||||
return operation;
|
|
||||||
}, (result) => {
|
}, (result) => {
|
||||||
this.toastrService.error(
|
this.toastrService.error(
|
||||||
'Error while saving scheduled operation: ' + result.message
|
'Error while saving schedule: ' + result.message
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
* Delete an operation and return a promise.
|
|
||||||
*/
|
|
||||||
confirmDelete(operation: Schedule) {
|
|
||||||
var title = "Delete operation #" + operation.id;
|
|
||||||
|
|
||||||
this.$modal({
|
|
||||||
templateUrl: scheduleDeleteTmpl,
|
|
||||||
controller: function($scope, title, operation, $delete) {
|
|
||||||
$scope.title = title;
|
|
||||||
$scope.operation = operation;
|
|
||||||
$scope.$delete = () => {
|
|
||||||
$scope.$hide();
|
|
||||||
$delete($scope.operation);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
locals: {
|
|
||||||
title: title,
|
|
||||||
operation: operation,
|
|
||||||
$delete: (operation) => {
|
|
||||||
this.delete(operation);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Delete operation.
|
|
||||||
*/
|
|
||||||
delete(operation: Schedule) {
|
|
||||||
var id = operation.id;
|
|
||||||
|
|
||||||
return this.scheduleService.delete(operation).subscribe(() => {
|
|
||||||
this.toastrService.success('Scheduled operation #' + id + ' deleted.');
|
|
||||||
|
|
||||||
this.load();
|
|
||||||
|
|
||||||
return operation;
|
|
||||||
}, (result) => {
|
|
||||||
this.toastrService.error(
|
|
||||||
'An error occurred while trying to delete scheduled operation #' +
|
|
||||||
id + ':<br />' + result
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Open the popup to modify the operation, save it on confirm.
|
|
||||||
* @returns a promise.
|
|
||||||
*/
|
|
||||||
modify(operation: Schedule) {
|
|
||||||
// FIXME Alexis Lahouze 2017-06-15 i18n
|
|
||||||
var title = "Operation";
|
|
||||||
|
|
||||||
if (operation.id) {
|
|
||||||
title = title + " #" + operation.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$modal({
|
|
||||||
templateUrl: scheduleFormTmpl,
|
|
||||||
controller: function($scope, title, operation, $save) {
|
|
||||||
$scope.title = title;
|
|
||||||
$scope.operation = operation;
|
|
||||||
$scope.$save = () => {
|
|
||||||
$scope.$hide();
|
|
||||||
$save($scope.operation);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
locals: {
|
|
||||||
title: title,
|
|
||||||
operation: operation,
|
|
||||||
$save: (operation) => {
|
|
||||||
this.save(operation);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
@ -13,6 +13,7 @@ import { ToastrModule } from 'ngx-toastr';
|
|||||||
import { ScheduleService } from './schedule.service';
|
import { ScheduleService } from './schedule.service';
|
||||||
import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
|
import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
|
||||||
import { ScheduleRowComponent } from './scheduleRow.component';
|
import { ScheduleRowComponent } from './scheduleRow.component';
|
||||||
|
import { ScheduleComponent } from './schedule.component';
|
||||||
|
|
||||||
export function $modalServiceFactory(i: any) {
|
export function $modalServiceFactory(i: any) {
|
||||||
return i.get('$modal');
|
return i.get('$modal');
|
||||||
@ -46,10 +47,12 @@ export function accountIdServiceFactory(i: any) {
|
|||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
ScheduleDeleteModalComponent,
|
ScheduleDeleteModalComponent,
|
||||||
|
ScheduleComponent,
|
||||||
ScheduleRowComponent
|
ScheduleRowComponent
|
||||||
],
|
],
|
||||||
entryComponents: [
|
entryComponents: [
|
||||||
ScheduleDeleteModalComponent,
|
ScheduleDeleteModalComponent,
|
||||||
|
ScheduleComponent,
|
||||||
ScheduleRowComponent
|
ScheduleRowComponent
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user