From 5726d8bf2eb2e9aa197d8f84ec36b021dbd77695 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Tue, 1 Aug 2017 23:09:21 +0200 Subject: [PATCH] Upgrade routing to Angular2. --- package.json | 1 + src/accounts/account.module.ts | 5 ++++ src/accounts/account.states.ts | 7 ++--- src/accounts/accountRow.component.ts | 4 +-- src/app.component.ts | 18 +++++++++++++ src/app.module.ts | 32 ++++++++++++++--------- src/index.ejs | 9 +------ src/operations/operation.module.ts | 18 ++++--------- src/operations/operation.states.ts | 7 ++--- src/operations/operationList.component.ts | 12 ++++++--- src/scheduler/schedule.module.ts | 14 ++++------ src/scheduler/schedule.states.ts | 7 ++--- src/scheduler/scheduleList.component.ts | 6 +++-- 13 files changed, 81 insertions(+), 59 deletions(-) create mode 100644 src/app.component.ts diff --git a/package.json b/package.json index 5df83e3..9ec518a 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@angular/http": "^4.3.2", "@angular/platform-browser": "^4.3.2", "@angular/platform-browser-dynamic": "^4.3.2", + "@angular/router": "^4.3.2", "@angular/upgrade": "^4.3.2", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29", "@nsalaun/ng-logger": "^2.0.1", diff --git a/src/accounts/account.module.ts b/src/accounts/account.module.ts index c2c5e59..e19d292 100644 --- a/src/accounts/account.module.ts +++ b/src/accounts/account.module.ts @@ -4,6 +4,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; import { NgLoggerModule, Level } from '@nsalaun/ng-logger'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @@ -17,12 +18,16 @@ import { AccountEditModalComponent } from './accountEditModal.component'; import { AccountFormComponent } from './accountForm.component'; import { AccountRowComponent } from './accountRow.component'; import { DailyBalanceService } from './dailyBalance.service'; +import { AccountListState } from './account.states' @NgModule({ imports: [ HttpClientModule, CommonModule, FormsModule, + RouterModule.forChild([ + AccountListState + ]), NgLoggerModule, ToastrModule, NgbModule diff --git a/src/accounts/account.states.ts b/src/accounts/account.states.ts index e691de6..2b75fc0 100644 --- a/src/accounts/account.states.ts +++ b/src/accounts/account.states.ts @@ -1,7 +1,8 @@ // vim: set tw=80 ts=2 sw=2 sts=2 : +import { AccountListComponent } from './accountList.component'; + export const AccountListState = { - name: 'accounts', - url: '/accounts', - component: 'accountList' + path: 'accounts', + component: AccountListComponent } diff --git a/src/accounts/accountRow.component.ts b/src/accounts/accountRow.component.ts index c78516c..0ef93a6 100644 --- a/src/accounts/accountRow.component.ts +++ b/src/accounts/accountRow.component.ts @@ -22,7 +22,7 @@ import { AccountEditModalComponent } from './accountEditModal.component'; }, template: ` - {{ account.name }} + {{ account.name }} @@ -56,7 +56,7 @@ import { AccountEditModalComponent } from './accountEditModal.component'; + [routerLink]="['/account', account.id, 'scheduler']"> diff --git a/src/app.component.ts b/src/app.component.ts new file mode 100644 index 0000000..3ef7f99 --- /dev/null +++ b/src/app.component.ts @@ -0,0 +1,18 @@ +// vim: set tw=80 ts=2 sw=2 sts=2 : + +import { Component } from '@angular/core'; + +@Component({ + selector: 'accountant', + template: ` + + + +
+ +
+ ` +}) +export class AppComponent { } diff --git a/src/app.module.ts b/src/app.module.ts index 5184371..0bab9c5 100644 --- a/src/app.module.ts +++ b/src/app.module.ts @@ -4,12 +4,10 @@ import 'reflect-metadata'; require('./main.less'); -import { AppModule as Ng1AppModule } from './app'; - import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { UpgradeModule } from '@angular/upgrade/static'; +import { RouterModule } from '@angular/router'; import { NgLoggerModule } from '@nsalaun/ng-logger'; import { ToastrModule } from 'ngx-toastr'; @@ -19,27 +17,37 @@ import { AccountModule } from './accounts/account.module'; import { ScheduleModule } from './scheduler/schedule.module'; import { OperationModule } from './operations/operation.module'; +import { AppComponent } from './app.component'; + import { ApiBaseURL, LogLevel } from './app.config'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, - UpgradeModule, AccountModule, ScheduleModule, OperationModule, NgLoggerModule.forRoot(LogLevel), ToastrModule.forRoot(), - NgbModule.forRoot() - ] + NgbModule.forRoot(), + RouterModule.forRoot([ + { + path: '', + redirectTo: '/accounts', + pathMatch: 'full' + } + ], { + enableTracing: true, + useHash: true + }) + ], + declarations: [ + AppComponent + ], + bootstrap: [ AppComponent ] }) export class AppModule { - constructor(private upgrade: UpgradeModule) { } - - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, [Ng1AppModule.name], { strictDi: false }); - } + constructor() {} } - diff --git a/src/index.ejs b/src/index.ejs index 2292ec3..e69bd09 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -28,14 +28,7 @@ - - - -
-
-
+ diff --git a/src/operations/operation.module.ts b/src/operations/operation.module.ts index fd87ff7..1cbb3c4 100644 --- a/src/operations/operation.module.ts +++ b/src/operations/operation.module.ts @@ -4,6 +4,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; import { NgLoggerModule, Level } from '@nsalaun/ng-logger'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @@ -19,20 +20,16 @@ import { OperationListComponent } from './operationList.component'; import { OperationDeleteModalComponent } from './operationDeleteModal.component'; import { OperationFormComponent } from './operationForm.component'; import { OperationEditModalComponent } from './operationEditModal.component' - -export function $modalServiceFactory(i: any) { - return i.get('$modal'); -} - -export function accountIdServiceFactory(i: any) { - return i.get('accountIdService'); -} +import { OperationListState } from './operation.states' @NgModule({ imports: [ HttpClientModule, CommonModule, FormsModule, + RouterModule.forChild([ + OperationListState + ]), NgLoggerModule, ToastrModule, NgbModule, @@ -41,11 +38,6 @@ export function accountIdServiceFactory(i: any) { providers: [ CategoryService, OperationService, - { - provide: 'accountIdService', - deps: ['$injector'], - useFactory: accountIdServiceFactory - } ], declarations: [ BalanceChartComponent, diff --git a/src/operations/operation.states.ts b/src/operations/operation.states.ts index f3af619..7c0de6a 100644 --- a/src/operations/operation.states.ts +++ b/src/operations/operation.states.ts @@ -1,7 +1,8 @@ // vim: set tw=80 ts=2 sw=2 sts=2 : +import { OperationListComponent } from './operationList.component'; + export const OperationListState = { - name: 'operations', - url: '/account/:accountId/operations', - component: 'operationListComponent' + path: 'account/:accountId/operations', + component: OperationListComponent } diff --git a/src/operations/operationList.component.ts b/src/operations/operationList.component.ts index 07743ba..46aa328 100644 --- a/src/operations/operationList.component.ts +++ b/src/operations/operationList.component.ts @@ -1,5 +1,7 @@ // vim: set tw=80 ts=2 sw=2 sts=2 : import { Component, Inject, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + import { Observable } from 'rxjs/Rx'; import { Logger } from '@nsalaun/ng-logger'; @@ -71,16 +73,18 @@ export class OperationListComponent implements OnInit { private operations: Operation[]; constructor( - @Inject("accountIdService") private accountIdService, private toastrService: ToastrService, private operationService: OperationService, private accountService: AccountService, private logger: Logger, private ngbModal: NgbModal, + private route: ActivatedRoute ) {} ngOnInit() { - this.accountService.get(this.accountIdService.get()).subscribe(account => { + this.accountService.get( + +this.route.snapshot.paramMap.get('accountId') + ).subscribe(account => { this.account = account }); } @@ -90,7 +94,7 @@ export class OperationListComponent implements OnInit { */ add() { var operation = new Operation(); - operation.account_id = this.accountIdService.get(); + operation.account_id = this.account.id; // FIXME Alexis Lahouze 2017-06-15 i18n const modal = this.ngbModal.open(OperationEditModalComponent); @@ -111,7 +115,7 @@ export class OperationListComponent implements OnInit { this.maxDate = maxDate; return this.operationService.query( - this.accountIdService.get(), + this.account.id, minDate, maxDate ).subscribe((operations: Operation[]) => { diff --git a/src/scheduler/schedule.module.ts b/src/scheduler/schedule.module.ts index 5d2b435..a252add 100644 --- a/src/scheduler/schedule.module.ts +++ b/src/scheduler/schedule.module.ts @@ -4,6 +4,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; import { NgLoggerModule, Level } from '@nsalaun/ng-logger'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @@ -16,16 +17,16 @@ import { ScheduleEditModalComponent } from './scheduleEditModal.component'; import { ScheduleFormComponent } from './scheduleForm.component'; import { ScheduleRowComponent } from './scheduleRow.component'; import { ScheduleListComponent } from './scheduleList.component'; - -export function accountIdServiceFactory(i: any) { - return i.get('accountIdService'); -} +import { ScheduleListState } from './schedule.states'; @NgModule({ imports: [ HttpClientModule, CommonModule, FormsModule, + RouterModule.forChild([ + ScheduleListState + ]), NgLoggerModule, ToastrModule, NgbModule, @@ -33,11 +34,6 @@ export function accountIdServiceFactory(i: any) { ], providers: [ ScheduleService, - { - provide: 'accountIdService', - deps: ['$injector'], - useFactory: accountIdServiceFactory - } ], declarations: [ ScheduleDeleteModalComponent, diff --git a/src/scheduler/schedule.states.ts b/src/scheduler/schedule.states.ts index 7361322..74d95fc 100644 --- a/src/scheduler/schedule.states.ts +++ b/src/scheduler/schedule.states.ts @@ -1,7 +1,8 @@ // vim: set tw=80 ts=2 sw=2 sts=2 : +import { ScheduleListComponent } from './scheduleList.component'; + export const ScheduleListState = { - name: 'scheduler', - url: '/account/:accountId/scheduler', - component: 'scheduleListComponent', + path: 'account/:accountId/scheduler', + component: ScheduleListComponent, } diff --git a/src/scheduler/scheduleList.component.ts b/src/scheduler/scheduleList.component.ts index c5a1f10..5778fe3 100644 --- a/src/scheduler/scheduleList.component.ts +++ b/src/scheduler/scheduleList.component.ts @@ -1,4 +1,6 @@ import { Component, Inject, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + import { Observable } from 'rxjs/Rx'; import { Logger } from '@nsalaun/ng-logger'; @@ -53,7 +55,7 @@ export class ScheduleListComponent implements OnInit { private scheduleService: ScheduleService, private logger: Logger, private ngbModal: NgbModal, - @Inject('accountIdService') private accountIdService + private route: ActivatedRoute, ) {} $onInit() { @@ -62,7 +64,7 @@ export class ScheduleListComponent implements OnInit { ngOnInit() { this.logger.log("ngOnInit"); - this.accountId = this.accountIdService.get(); + this.accountId = +this.route.snapshot.paramMap.get('accountId') // Load operations on controller initialization. this.load(); }