Upgrade routing to Angular2.
This commit is contained in:
parent
2ae8a9cfad
commit
5726d8bf2e
@ -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",
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -22,7 +22,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
|
||||
},
|
||||
template: `
|
||||
<td>
|
||||
<a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a>
|
||||
<a [routerLink]="['/account', account.id, 'operations']">{{ account.name }}</a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
@ -56,7 +56,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
|
||||
<!-- Open account scheduler. -->
|
||||
<a class="btn btn-secondary"
|
||||
[hidden]="!account.id"
|
||||
href="#!/account/{{ account.id }}/scheduler">
|
||||
[routerLink]="['/account', account.id, 'scheduler']">
|
||||
<span class="fa fa-clock-o"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
18
src/app.component.ts
Normal file
18
src/app.component.ts
Normal file
@ -0,0 +1,18 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'accountant',
|
||||
template: `
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" routerLink="/accounts"> Accountant</a>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class AppComponent { }
|
@ -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() {}
|
||||
}
|
||||
|
||||
|
@ -28,14 +28,7 @@
|
||||
<!-- htmllint attr-bans="false" -->
|
||||
<body style="padding-bottom: 50px; padding-top: 70px">
|
||||
<!-- htmllint attr-bans="$previous" -->
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar fixed-top navbar-inverse bg-inverse">
|
||||
<a class="navbar-brand" href="#!/accounts"> Accountant</a>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div ui-view></div>
|
||||
</div>
|
||||
<accountant></accountant>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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[]) => {
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
}
|
||||
|
@ -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();
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user