From e8247e30ab68cb9d08f847815c910c184dbe4c7c Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Tue, 25 Jul 2017 12:03:42 +0200 Subject: [PATCH] Upgrade Schedule component to Angular4. --- src/scheduler/index.ts | 12 +- src/scheduler/schedule.component.ts | 187 ++++++++++++---------------- src/scheduler/schedule.module.ts | 3 + 3 files changed, 84 insertions(+), 118 deletions(-) diff --git a/src/scheduler/index.ts b/src/scheduler/index.ts index 07bc9f9..427a500 100644 --- a/src/scheduler/index.ts +++ b/src/scheduler/index.ts @@ -62,15 +62,9 @@ export default angular.module('accountant.scheduler', [ .factory('scheduleService', downgradeInjectable(ScheduleService)) - .component('scheduleComponent', { - bindings: { - accountId: '<', - $modal: '<' - }, - templateUrl: schedulerTmpl, - controller: ScheduleComponent, - controllerAs: 'schedulerCtrl' - }) + .directive('scheduleComponent', downgradeComponent({ + component: ScheduleComponent + })) .run(function($transitions, accountIdService) { $transitions.onSuccess({}, (transition) => { diff --git a/src/scheduler/schedule.component.ts b/src/scheduler/schedule.component.ts index a117e8f..966bee2 100644 --- a/src/scheduler/schedule.component.ts +++ b/src/scheduler/schedule.component.ts @@ -1,3 +1,4 @@ +import { Component, Inject, OnInit } from '@angular/core'; import { Observable } from 'rxjs/Rx'; import { Logger } from '@nsalaun/ng-logger'; @@ -7,22 +8,61 @@ 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'); +var scheduleFormTmpl = require('./schedule.form.tmpl.html'); -export class ScheduleComponent { +@Component({ + selector: 'schedule-list', + template: ` +
+ + + + + + + + + + + + + + + + + + + + + + +
Date de débutDate de finJourFréq.Libellé de l'opérationMontantCatégorieActions
+ +
+
+ ` +}) +export class ScheduleComponent implements OnInit { accountId: number; - operations = []; + schedules = []; constructor( private toastrService: ToastrService, private scheduleService: ScheduleService, private logger: Logger, - private $modal, - private accountIdService + @Inject('$modal') private $modal, + @Inject('accountIdService') private accountIdService ) {} $onInit() { + this.ngOnInit(); + } + + ngOnInit() { + this.logger.log("ngOnInit"); this.accountId = this.accountIdService.get(); // Load operations on controller initialization. this.load(); @@ -35,124 +75,53 @@ export class ScheduleComponent { var schedule = new Schedule(); 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() { - 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[]) => { - this.operations = schedules; + this.logger.log("Schedules loaded.", schedules); + this.schedules = schedules; }, (reason) => { this.logger.log("Got error", reason); } ); }; - /* - * Save operation. - */ - save(operation: Schedule) { - let subscription: Observable; - - 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.'); + save(schedule: Schedule) { + return this.scheduleService.update(schedule).subscribe((schedule: Schedule) => { + this.toastrService.success('Schedule #' + schedule.id + ' saved.'); this.load(); - - return operation; }, (result) => { 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 + ':
' + 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); - } - } - }); - }; }; diff --git a/src/scheduler/schedule.module.ts b/src/scheduler/schedule.module.ts index 505d983..42d8da1 100644 --- a/src/scheduler/schedule.module.ts +++ b/src/scheduler/schedule.module.ts @@ -13,6 +13,7 @@ import { ToastrModule } from 'ngx-toastr'; import { ScheduleService } from './schedule.service'; import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component'; import { ScheduleRowComponent } from './scheduleRow.component'; +import { ScheduleComponent } from './schedule.component'; export function $modalServiceFactory(i: any) { return i.get('$modal'); @@ -46,10 +47,12 @@ export function accountIdServiceFactory(i: any) { ], declarations: [ ScheduleDeleteModalComponent, + ScheduleComponent, ScheduleRowComponent ], entryComponents: [ ScheduleDeleteModalComponent, + ScheduleComponent, ScheduleRowComponent ] })