From 9aa74b863e31c9cbe00c163520f48af9fbd57772 Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Mon, 12 Dec 2016 13:36:02 +0100 Subject: [PATCH 1/9] moved header to its own component --- src/app/app.component.html | 19 +-------- src/app/app.component.ts | 59 +++++++--------------------- src/app/app.module.ts | 6 ++- src/app/header/header.component.html | 18 +++++++++ src/app/header/header.component.scss | 0 src/app/header/header.component.ts | 54 +++++++++++++++++++++++++ 6 files changed, 92 insertions(+), 64 deletions(-) create mode 100644 src/app/header/header.component.html create mode 100644 src/app/header/header.component.scss create mode 100644 src/app/header/header.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 83a269739f..a562e0b675 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,21 +1,4 @@ -
- -
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5f1726afd0..5170832e41 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,12 @@ -import { Component, HostListener, Input, ChangeDetectionStrategy, ViewEncapsulation, OnDestroy, OnInit } from '@angular/core'; -import { Event, NavigationEnd, Router } from '@angular/router'; - -import { TranslateService } from 'ng2-translate'; +import { + Component, + ChangeDetectionStrategy, + ViewEncapsulation, + OnDestroy, + OnInit +} from "@angular/core"; +import { Router } from "@angular/router"; +import { TranslateService } from "ng2-translate"; @Component({ changeDetection: ChangeDetectionStrategy.Default, @@ -11,14 +16,6 @@ import { TranslateService } from 'ng2-translate'; styleUrls: ['./app.component.css'] }) export class AppComponent implements OnDestroy, OnInit { - - // TODO: move header and all related properties into its own component - - private navCollapsed: boolean; - - private routerSubscription: any; - - private translateSubscription: any; example: string; @@ -26,56 +23,28 @@ export class AppComponent implements OnDestroy, OnInit { data: any = { greeting: 'Hello', recipient: 'World' - } + }; - constructor(public translate: TranslateService, private router: Router) { + constructor( + private translate: TranslateService, + private router: Router + ) { // this language will be used as a fallback when a translation isn't found in the current language translate.setDefaultLang('en'); // the lang to use, if the lang isn't available, it will use the current loader to get them translate.use('en'); - - this.collapse(); } ngOnInit() { - this.routerSubscription = this.router.events.subscribe((event: Event) => { - if (event instanceof NavigationEnd) { - this.collapse(); - } - }); this.translateSubscription = this.translate.get('example.with.data', { greeting: 'Hello', recipient: 'DSpace' }).subscribe((translation: string) => { this.example = translation; }); } ngOnDestroy() { - if (this.routerSubscription) { - this.routerSubscription.unsubscribe(); - } if (this.translateSubscription) { this.translateSubscription.unsubscribe(); } } - @HostListener('window:resize', ['$event']) - private onResize(event): void { - this.collapse(); - } - - private collapse(): void { - this.navCollapsed = true; - } - - private expand(): void { - this.navCollapsed = false; - } - - public toggle(): void { - this.navCollapsed ? this.expand() : this.collapse(); - } - - public isNavBarCollaped(): boolean { - return this.navCollapsed; - } - } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8defafd570..d69f5e116a 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,10 +5,14 @@ import { SharedModule } from './shared/shared.module'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { HeaderComponent } from './header/header.component'; @NgModule({ - declarations: [AppComponent], + declarations: [ + AppComponent, + HeaderComponent + ], imports: [ SharedModule, HomeModule, diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html new file mode 100644 index 0000000000..652b12d920 --- /dev/null +++ b/src/app/header/header.component.html @@ -0,0 +1,18 @@ +
+ +
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts new file mode 100644 index 0000000000..401e8d0620 --- /dev/null +++ b/src/app/header/header.component.ts @@ -0,0 +1,54 @@ +import { Component, OnInit, OnDestroy, HostListener } from "@angular/core"; +import { Router, NavigationEnd, Event } from "@angular/router"; + +@Component({ + selector: 'ds-header', + styleUrls: ['header.component.css'], + templateUrl: 'header.component.html' +}) +export class HeaderComponent implements OnDestroy, OnInit { + private navCollapsed: boolean; + private routerSubscription: any; + + constructor( + private router: Router + ) { + this.collapse(); + } + + ngOnInit(): void { + this.routerSubscription = this.router.events.subscribe((event: Event) => { + if (event instanceof NavigationEnd) { + this.collapse(); + } + }); + } + + ngOnDestroy(): void { + if (this.routerSubscription) { + this.routerSubscription.unsubscribe(); + } + } + + @HostListener('window:resize', ['$event']) + private onResize(event): void { + this.collapse(); + } + + private collapse(): void { + this.navCollapsed = true; + } + + private expand(): void { + this.navCollapsed = false; + } + + public toggle(): void { + this.navCollapsed ? this.expand() : this.collapse(); + } + + public isNavBarCollaped(): boolean { + return this.navCollapsed; + } + +} From 69f8d9855a412952aa7696676190221da287fe58 Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Mon, 12 Dec 2016 14:57:07 +0100 Subject: [PATCH 2/9] reimplemented header navbar toggle using redux --- package.json | 4 +++ src/app/app.actions.ts | 5 ++++ src/app/app.module.ts | 30 ++++++++++++++++++++- src/app/app.reducers.ts | 5 ++++ src/app/header/header.actions.ts | 26 +++++++++++++++++++ src/app/header/header.component.html | 4 +-- src/app/header/header.component.ts | 23 +++++++++------- src/app/header/header.reducer.ts | 39 ++++++++++++++++++++++++++++ 8 files changed, 123 insertions(+), 13 deletions(-) create mode 100644 src/app/app.actions.ts create mode 100644 src/app/app.reducers.ts create mode 100644 src/app/header/header.actions.ts create mode 100644 src/app/header/header.reducer.ts diff --git a/package.json b/package.json index b2f1e7760b..d3876f5f5a 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,10 @@ "@angularclass/bootloader": "1.0.1", "@angularclass/idle-preload": "1.0.4", "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.14", + "@ngrx/core": "^1.2.0", + "@ngrx/effects": "^2.0.0", + "@ngrx/store": "^2.2.1", + "@ngrx/store-devtools": "^3.2.2", "angular2-express-engine": "2.1.0-rc.1", "angular2-platform-node": "2.1.0-rc.1", "angular2-universal": "2.1.0-rc.1", diff --git a/src/app/app.actions.ts b/src/app/app.actions.ts new file mode 100644 index 0000000000..3660dc77ac --- /dev/null +++ b/src/app/app.actions.ts @@ -0,0 +1,5 @@ +import { HeaderActions } from "./header/header.actions"; + +export default [ + HeaderActions +]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d69f5e116a..decf650d78 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,12 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HeaderComponent } from './header/header.component'; +import { StoreModule } from "@ngrx/store"; +import { StoreDevtoolsModule } from "@ngrx/store-devtools"; + +import reducers from './app.reducers' +import actions from './app.actions' + @NgModule({ declarations: [ @@ -16,7 +22,29 @@ import { HeaderComponent } from './header/header.component'; imports: [ SharedModule, HomeModule, - AppRoutingModule + AppRoutingModule, + /** + * StoreModule.provideStore is imported once in the root module, accepting a reducer + * function or object map of reducer functions. If passed an object of + * reducers, combineReducers will be run creating your application + * meta-reducer. This returns all providers for an @ngrx/store + * based application. + */ + StoreModule.provideStore(reducers), + /** + * Store devtools instrument the store retaining past versions of state + * and recalculating new states. This enables powerful time-travel + * debugging. + * + * To use the debugger, install the Redux Devtools extension for either + * Chrome or Firefox + * + * See: https://github.com/zalmoxisus/redux-devtools-extension + */ + StoreDevtoolsModule.instrumentOnlyWithExtension(), + ], + providers: [ + actions ] }) export class AppModule { diff --git a/src/app/app.reducers.ts b/src/app/app.reducers.ts new file mode 100644 index 0000000000..415006cd51 --- /dev/null +++ b/src/app/app.reducers.ts @@ -0,0 +1,5 @@ +import { headerReducer } from './header/header.reducer'; + +export default { + headerReducer +} diff --git a/src/app/header/header.actions.ts b/src/app/header/header.actions.ts new file mode 100644 index 0000000000..5fdbe0abc6 --- /dev/null +++ b/src/app/header/header.actions.ts @@ -0,0 +1,26 @@ +import { Injectable } from "@angular/core"; +import { Action } from "@ngrx/store"; + +@Injectable() +export class HeaderActions { + static COLLAPSE = 'dspace/header/COLLAPSE'; + collapse(): Action { + return { + type: HeaderActions.COLLAPSE + } + } + + static EXPAND = 'dspace/header/EXPAND'; + expand(): Action { + return { + type: HeaderActions.EXPAND + } + } + + static TOGGLE = 'dspace/header/TOGGLE'; + toggle(): Action { + return { + type: HeaderActions.TOGGLE + } + } +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 652b12d920..a4b7cf117c 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -3,11 +3,11 @@ -
+ -