From c5910a2d94ab92eef69ea4c113238cee5c0d7e8f Mon Sep 17 00:00:00 2001 From: Christophe Chevalier Date: Thu, 24 Nov 2016 19:18:07 +0100 Subject: [PATCH] Refactor structure app for release v0.1 - Update & add new dependencies - Create new components - Delete modal profile & settings - Configure new routes - Update mockup for authentication - Update all views of app - Overall interfaces - Overall actions - Create dialog-service - Translate en & fr - Add new terms of environment - Add new cosmetics style - Create Dialog Component in shared-module - Clean Navigation Component - Create const for modules & components ... --- frontend/package.json | 37 +- frontend/src/app/app.module.ts | 50 +- frontend/src/app/app.state.ts | 19 - .../auth-module/auth-module.component.html | 8 +- .../auth-module/auth-module.component.scss | 17 +- .../auth-module/auth-module.component.ts | 39 +- .../auth-module/auth-module.module.ts | 18 +- .../auth-module/login/login.component.html | 38 +- .../auth-module/login/login.component.scss | 23 +- .../auth-module/login/login.component.ts | 35 +- .../register/register.component.html | 14 +- .../register/register.component.ts | 1 + .../features-module-routing.module.ts | 13 +- .../features-module.component.ts | 8 +- .../features-module/features-module.module.ts | 23 +- .../itinerary-module.component.html | 8 +- .../itinerary-module.component.ts | 1 + .../itinerary-module.module.ts | 13 +- .../itinerary/itinerary.component.html | 2 +- .../nav-module/nav-module-routing.module.ts | 34 - .../nav-module/nav-module.component.html | 30 +- .../nav-module/nav-module.component.scss | 13 - .../nav-module/nav-module.component.ts | 74 +- .../nav-module/nav-module.module.ts | 35 +- .../navigation/navigation.component.html | 17 +- .../navigation/navigation.component.ts | 59 +- .../profile-module.component.html | 6 +- .../profile-module.component.ts | 22 +- .../profile-module/profile-module.module.ts | 20 +- .../profile/profile.component.html | 87 +- .../profile/profile.component.spec.ts | 11 - .../profile/profile.component.ts | 23 +- .../settings-module.component.html | 6 + .../settings-module.component.scss} | 0 .../settings-module.component.spec.ts | 28 + .../settings-module.component.ts | 22 + .../settings-module/settings-module.module.ts | 24 + .../settings/settings.component.html | 46 + .../settings/settings.component.scss | 3 + .../settings/settings.component.ts | 73 + .../settings/settings.component.html | 3 - .../settings/settings.component.spec.ts | 11 - .../nav-module/settings/settings.component.ts | 15 - .../confirm-dialog.component.html | 12 + .../confirm-dialog.component.scss | 3 + .../confirm-dialog.component.ts | 20 + .../app/shared-module/effects/user.effects.ts | 119 +- .../interfaces/config.interface.ts | 6 + .../interfaces/location.interface.ts | 5 + .../interfaces/marker.interface.ts | 5 + .../interfaces/store.interface.ts | 12 + .../interfaces/user.interface.ts | 16 +- .../shared-module/mocks/user-mock.service.ts | 60 +- .../opaque-tokens/opaque-tokens.ts | 3 + .../shared-module/reducers/config.actions.ts | 3 + .../reducers/config.reducer.spec.ts | 50 + .../shared-module/reducers/config.reducer.ts | 20 +- .../shared-module/reducers/config.state.ts | 26 +- .../shared-module/reducers/user.actions.ts | 8 + .../shared-module/reducers/user.reducer.ts | 43 +- .../app/shared-module/reducers/user.state.ts | 40 +- .../shared-module/services/dialogs.service.ts | 23 +- .../shared-module/services/route.service.ts | 9 + .../shared-module/services/user.service.ts | 29 +- .../app/shared-module/shared-module.module.ts | 17 +- .../toggle-theme/toggle-theme.component.html | 4 - .../toggle-theme/toggle-theme.component.scss | 0 .../toggle-theme.component.spec.ts | 11 - .../toggle-theme/toggle-theme.component.ts | 24 - frontend/src/assets/i18n/de.json | 3 - frontend/src/assets/i18n/en.json | 17 +- frontend/src/assets/i18n/fr.json | 17 +- frontend/src/assets/i18n/jp.json | 3 - frontend/src/custom-theme.scss | 4 +- frontend/src/environments/environment.prod.ts | 3 +- frontend/src/environments/environment.ts | 7 +- frontend/src/main.ts | 14 +- frontend/src/styles.scss | 66 + frontend/tslint.json | 1 - frontend/yarn.lock | 8044 +++++++++++++++++ 80 files changed, 9103 insertions(+), 673 deletions(-) delete mode 100644 frontend/src/app/app.state.ts delete mode 100644 frontend/src/app/features-module/nav-module/nav-module-routing.module.ts delete mode 100644 frontend/src/app/features-module/nav-module/profile-module/profile/profile.component.spec.ts create mode 100644 frontend/src/app/features-module/nav-module/settings-module/settings-module.component.html rename frontend/src/app/features-module/nav-module/{settings/settings.component.scss => settings-module/settings-module.component.scss} (100%) create mode 100644 frontend/src/app/features-module/nav-module/settings-module/settings-module.component.spec.ts create mode 100644 frontend/src/app/features-module/nav-module/settings-module/settings-module.component.ts create mode 100644 frontend/src/app/features-module/nav-module/settings-module/settings-module.module.ts create mode 100644 frontend/src/app/features-module/nav-module/settings-module/settings/settings.component.html create mode 100644 frontend/src/app/features-module/nav-module/settings-module/settings/settings.component.scss create mode 100644 frontend/src/app/features-module/nav-module/settings-module/settings/settings.component.ts delete mode 100644 frontend/src/app/features-module/nav-module/settings/settings.component.html delete mode 100644 frontend/src/app/features-module/nav-module/settings/settings.component.spec.ts delete mode 100644 frontend/src/app/features-module/nav-module/settings/settings.component.ts create mode 100644 frontend/src/app/shared-module/components/confirm-dialog/confirm-dialog.component.html create mode 100644 frontend/src/app/shared-module/components/confirm-dialog/confirm-dialog.component.scss create mode 100644 frontend/src/app/shared-module/components/confirm-dialog/confirm-dialog.component.ts create mode 100644 frontend/src/app/shared-module/interfaces/store.interface.ts create mode 100644 frontend/src/app/shared-module/opaque-tokens/opaque-tokens.ts create mode 100644 frontend/src/app/shared-module/reducers/config.actions.ts create mode 100644 frontend/src/app/shared-module/reducers/config.reducer.spec.ts create mode 100644 frontend/src/app/shared-module/reducers/user.actions.ts create mode 100644 frontend/src/app/shared-module/services/route.service.ts delete mode 100644 frontend/src/app/shared-module/toggle-theme/toggle-theme.component.html delete mode 100644 frontend/src/app/shared-module/toggle-theme/toggle-theme.component.scss delete mode 100644 frontend/src/app/shared-module/toggle-theme/toggle-theme.component.spec.ts delete mode 100644 frontend/src/app/shared-module/toggle-theme/toggle-theme.component.ts delete mode 100644 frontend/src/assets/i18n/de.json delete mode 100644 frontend/src/assets/i18n/jp.json create mode 100644 frontend/yarn.lock diff --git a/frontend/package.json b/frontend/package.json index 0dc6af9..366567a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "ezaw", - "version": "0.0.0", + "version": "0.1.0", "license": "MIT", "angular-cli": {}, "scripts": { @@ -12,34 +12,36 @@ }, "private": true, "dependencies": { - "@angular/common": "2.1.1", - "@angular/compiler": "2.1.1", - "@angular/core": "2.1.1", - "@angular/forms": "2.1.1", - "@angular/http": "2.1.1", + "@angular/common": "2.2.1", + "@angular/compiler": "2.2.1", + "@angular/core": "2.2.1", + "@angular/forms": "2.2.1", + "@angular/http": "2.2.1", "@angular/material": "2.0.0-alpha.9-3", - "@angular/platform-browser": "2.1.1", - "@angular/platform-browser-dynamic": "2.1.1", - "@angular/router": "3.1.1", + "@angular/platform-browser": "2.2.1", + "@angular/platform-browser-dynamic": "2.2.1", + "@angular/router": "3.2.1", "@ngrx/core": "1.2.0", "@ngrx/effects": "2.0.0", "@ngrx/store": "2.2.1", + "@ngrx/store-devtools": "3.2.2", "@types/hammerjs": "2.0.33", - "angular2-google-maps": "^0.15.0", + "angular-material": "1.1.1", + "angular2-google-maps": "0.15.0", "core-js": "2.4.1", "hammerjs": "2.0.8", "immutable": "3.8.1", "material-design-icons": "3.0.1", - "ng2-translate": "3.1.3", - "rxjs": "5.0.0-rc.1", + "ng2-translate": "4.0.1", + "rxjs": "5.0.0-rc.4", "ts-helpers": "1.1.2", "typed-immutable-record": "0.0.6", "zone.js": "0.6.26" }, "devDependencies": { - "@types/jasmine": "2.5.35", + "@types/jasmine": "2.5.38", "angular-cli": "1.0.0-beta.18", - "codelyzer": "1.0.0-beta.3", + "codelyzer": "1.0.0-beta.4", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.7.0", "karma": "1.3.0", @@ -48,9 +50,10 @@ "karma-jasmine": "1.0.2", "karma-phantomjs-launcher": "1.0.2", "karma-remap-istanbul": "0.2.1", - "protractor": "4.0.9", - "ts-node": "1.6.0", + "ngrx-store-freeze": "0.1.4", + "protractor": "4.0.11", + "ts-node": "1.7.0", "tslint": "3.15.1", - "typescript": "2.0.6" + "typescript": "2.0.10" } } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 3312e08..59a5327 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -13,18 +13,25 @@ import { MaterialModule } from '@angular/material'; // angular-translate import { TranslateStaticLoader, TranslateLoader, TranslateModule } from 'ng2-translate'; -// ngrx - store -import { StoreModule } from '@ngrx/store'; +// ngrx +import { StoreModule, combineReducers } from '@ngrx/store'; +import { compose } from '@ngrx/core/compose'; +import { EffectsModule } from '@ngrx/effects'; +import { StoreDevtoolsModule } from '@ngrx/store-devtools'; // our effects import { UserEffects } from './shared-module/effects/user.effects'; +// store freeze +import { storeFreeze } from 'ngrx-store-freeze'; + // our reducers import { UserReducer } from './shared-module/reducers/user.reducer'; import { ConfigReducer } from './shared-module/reducers/config.reducer'; // our services import { UserService } from './shared-module/services/user.service'; +import { RouteService } from './shared-module/services/route.service'; // our mocks import { UserMockService } from './shared-module/mocks/user-mock.service'; @@ -38,6 +45,21 @@ import { FeatureModule } from './features-module/features-module.module'; // shared module import { SharedModule } from './shared-module/shared-module.module'; +// opaque tokens +import { AVAILABLE_LANGUAGES } from './shared-module/opaque-tokens/opaque-tokens'; + +export function createTranslateLoader(http: Http) { + return new TranslateStaticLoader(http, './assets/i18n', '.json'); +} + +// define a meta reducer that prevent object mutation when dev env +const metaReducers = !environment.production ? [storeFreeze, combineReducers] : [combineReducers]; + +const store = compose(...metaReducers)({ + config: ConfigReducer, + user: UserReducer +}); + @NgModule({ declarations: [ AppComponent @@ -49,26 +71,34 @@ import { SharedModule } from './shared-module/shared-module.module'; FormsModule, // ngrx - store - StoreModule.provideStore({ - config: ConfigReducer, - user: UserReducer - }), + StoreModule.provideStore(store), - // material design - MaterialModule.forRoot(), + // ngrx + StoreDevtoolsModule.instrumentOnlyWithExtension(), + + // effects + EffectsModule.runAfterBootstrap(UserEffects), // translate TranslateModule.forRoot({ provide: TranslateLoader, - useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'), + useFactory: createTranslateLoader, deps: [Http] }), + + // material design + MaterialModule.forRoot(), ], providers: [ - UserEffects, + // services + RouteService, { provide: UserService, useClass: (environment.mock ? UserMockService : UserService) + }, + { + provide: AVAILABLE_LANGUAGES, + useValue: ['en', 'fr'] } ], bootstrap: [AppComponent] diff --git a/frontend/src/app/app.state.ts b/frontend/src/app/app.state.ts deleted file mode 100644 index b90d8e3..0000000 --- a/frontend/src/app/app.state.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { TypedRecord, makeTypedFactory } from 'typed-immutable-record'; - - -// the typeScript interface that defines the application state's properties -// this is to be imported wherever a reference to the app state is used -// (reducers, components, services...) -export interface AppState {} - -// an Immutable.js Record implementation of the AppState interface. -// this only needs to be imported by reducers, since they produce new versions -// of the state -// components should only ever read the state, never change it, -// so they should only need the interface, not the record -export interface AppStateRecord extends TypedRecord, AppState {} - -// an Immutable.js record factory for the record -export const appStateFactory = makeTypedFactory({ - -}); diff --git a/frontend/src/app/features-module/auth-module/auth-module.component.html b/frontend/src/app/features-module/auth-module/auth-module.component.html index 56fc12d..4107dc1 100644 --- a/frontend/src/app/features-module/auth-module/auth-module.component.html +++ b/frontend/src/app/features-module/auth-module/auth-module.component.html @@ -1,10 +1,10 @@ -
+
- + @@ -13,7 +13,7 @@ - + @@ -21,7 +21,7 @@ -

GPS, Cartes & Trafic

+

GPS, {{ 'MAPS' | translate }} & Trafic


diff --git a/frontend/src/app/features-module/auth-module/auth-module.component.scss b/frontend/src/app/features-module/auth-module/auth-module.component.scss index 7c6d808..a872924 100644 --- a/frontend/src/app/features-module/auth-module/auth-module.component.scss +++ b/frontend/src/app/features-module/auth-module/auth-module.component.scss @@ -32,11 +32,8 @@ md-card-content > * { .background-auth { background-color: rgba(224, 224, 224, .8); - position: fixed; - padding: auto; - width: 100%; - min-height: 100%; - flex: 1 1 auto; + display: flex; + min-height: 100vh; } .background-logo-ezaw { @@ -52,7 +49,6 @@ md-card-content > * { md-toolbar-row { justify-content: space-between; width: 100%; - flex: 1 1 auto; } .flex-space { @@ -65,14 +61,11 @@ md-toolbar-row { /* Mobile */ -@media screen and (max-width: 600px) { +@media screen and (max-width: 420px) { .background-auth { background-color: rgba(224, 224, 224, .8); - position: fixed; - padding: auto; - width: 100%; - min-height: 100%; - flex: 1 1 auto; + display: block; + min-height: 100vh; } .background-logo-ezaw { diff --git a/frontend/src/app/features-module/auth-module/auth-module.component.ts b/frontend/src/app/features-module/auth-module/auth-module.component.ts index b2e5378..6cd84c6 100644 --- a/frontend/src/app/features-module/auth-module/auth-module.component.ts +++ b/frontend/src/app/features-module/auth-module/auth-module.component.ts @@ -1,11 +1,19 @@ -import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; +// angular modules +import { Component, OnInit, OnDestroy, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; // ngrx - store import { Store } from '@ngrx/store'; -// our states -import { AppState } from '../../app.state'; +// our interfaces +import { IStore } from '../../shared-module/interfaces/store.interface'; +import { IUser, IUserRecord } from '../../shared-module/interfaces/user.interface'; + +// rxjs +import { Subscription } from 'rxjs/Rx'; + +// reducer +import { USR_IS_CONNECTING } from '../../shared-module/reducers/user.reducer'; @Component({ selector: 'app-auth', @@ -15,17 +23,25 @@ import { AppState } from '../../app.state'; changeDetection: ChangeDetectionStrategy.OnPush }) -export class AuthComponent implements OnInit { +export class AuthComponent implements OnInit, OnDestroy { tabs: Array <{ title: string, url: string }>; + private user: IUser; + private userSub: Subscription; + + constructor(private store$: Store, private router: Router, private route: ActivatedRoute) { + + this.userSub = + store$.select('user') + .map((userR: IUserRecord) => userR.toJS()) + .subscribe((user: IUser) => this.user = user); - constructor(private store: Store, private router: Router, private route: ActivatedRoute) { this.tabs = [ { - title: 'Log In', + title: 'LOG_ME', url: 'login' }, { - title: 'Register', + title: 'SIGN_UP', url: 'register' } ]; @@ -36,6 +52,15 @@ export class AuthComponent implements OnInit { this.route.params.subscribe(params => { }); } + ngOnDestroy() { + this.userSub.unsubscribe(); + } + + connectUser(user: IUser) { + this.store$.dispatch({ type: USR_IS_CONNECTING, payload: user }); + } + + openTab(index) { this.router.navigate(['/auth', this.tabs[index].url]); } diff --git a/frontend/src/app/features-module/auth-module/auth-module.module.ts b/frontend/src/app/features-module/auth-module/auth-module.module.ts index cf2c09f..7680606 100644 --- a/frontend/src/app/features-module/auth-module/auth-module.module.ts +++ b/frontend/src/app/features-module/auth-module/auth-module.module.ts @@ -1,14 +1,20 @@ // angular modules import { NgModule } from '@angular/core'; -import { AuthComponent } from './auth-module.component'; +import { RouterModule } from '@angular/router'; // our modules import { SharedModule } from '../../shared-module/shared-module.module'; +// our components +import { AuthComponent } from './auth-module.component'; import { LoginComponent } from './login/login.component'; import { RegisterComponent } from './register/register.component'; -import { RouterModule } from '@angular/router'; +const AUTH_COMPONENTS = [ + AuthComponent, + LoginComponent, + RegisterComponent +]; @NgModule({ @@ -17,14 +23,10 @@ import { RouterModule } from '@angular/router'; RouterModule ], declarations: [ - AuthComponent, - LoginComponent, - RegisterComponent + ...AUTH_COMPONENTS ], exports: [ - AuthComponent, - LoginComponent, - RegisterComponent + ...AUTH_COMPONENTS ] }) diff --git a/frontend/src/app/features-module/auth-module/login/login.component.html b/frontend/src/app/features-module/auth-module/login/login.component.html index bfb067e..d0573f9 100644 --- a/frontend/src/app/features-module/auth-module/login/login.component.html +++ b/frontend/src/app/features-module/auth-module/login/login.component.html @@ -1,52 +1,46 @@