From 598f239251a3df19ff9a0f5ea00d43ca804ec236 Mon Sep 17 00:00:00 2001 From: Abhay Chawla Date: Sun, 12 Aug 2018 20:46:54 +0530 Subject: [PATCH] refractor: home module (#297) * Refractor components. * Redesign home component. * Add comments. Fixes #296 --- .../home/dashboard/dashboard.component.html | 104 +----------- .../home/dashboard/dashboard.component.scss | 3 - src/app/home/dashboard/dashboard.component.ts | 28 +--- src/app/home/dashboard/data.ts | 58 ------- src/app/home/home-routing.module.ts | 8 + src/app/home/home.component.html | 37 +++-- src/app/home/home.component.scss | 19 +-- src/app/home/home.component.spec.ts | 16 +- src/app/home/home.component.ts | 27 +-- src/app/home/home.module.ts | 22 +-- src/app/home/quote.service.spec.ts | 72 -------- src/app/home/quote.service.ts | 31 ---- .../navigation/navigation-routing.module.ts | 2 +- src/app/navigation/navigation.component.html | 156 +----------------- src/app/navigation/navigation.component.ts | 6 +- src/app/navigation/navigation.module.ts | 20 ++- 16 files changed, 98 insertions(+), 511 deletions(-) delete mode 100644 src/app/home/dashboard/data.ts delete mode 100644 src/app/home/quote.service.spec.ts delete mode 100644 src/app/home/quote.service.ts diff --git a/src/app/home/dashboard/dashboard.component.html b/src/app/home/dashboard/dashboard.component.html index c6064d221..d3fcf0142 100644 --- a/src/app/home/dashboard/dashboard.component.html +++ b/src/app/home/dashboard/dashboard.component.html @@ -1,101 +1,7 @@ - + diff --git a/src/app/home/dashboard/dashboard.component.scss b/src/app/home/dashboard/dashboard.component.scss index 070300710..e69de29bb 100644 --- a/src/app/home/dashboard/dashboard.component.scss +++ b/src/app/home/dashboard/dashboard.component.scss @@ -1,3 +0,0 @@ -// .ngx-charts { -// position: relative; -// } diff --git a/src/app/home/dashboard/dashboard.component.ts b/src/app/home/dashboard/dashboard.component.ts index 05b10e7b0..cf7487d81 100644 --- a/src/app/home/dashboard/dashboard.component.ts +++ b/src/app/home/dashboard/dashboard.component.ts @@ -1,7 +1,9 @@ +/** Angular Imports */ import { Component, OnInit } from '@angular/core'; -import { single } from './data'; - +/** + * Dashboard component. + */ @Component({ selector: 'mifosx-dashboard', templateUrl: './dashboard.component.html', @@ -9,27 +11,7 @@ import { single } from './data'; }) export class DashboardComponent implements OnInit { - single: any[]; - multi: any[]; - view: any[] = [600, 350]; - - // options - showXAxis = true; - showYAxis = true; - gradient = false; - showLegend = true; - showXAxisLabel = true; - xAxisLabel = 'Country'; - showYAxisLabel = true; - yAxisLabel = 'Population'; - - colorScheme = { - domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] - }; - - constructor() { - Object.assign(this, { single }); - } + constructor() { } ngOnInit() { } diff --git a/src/app/home/dashboard/data.ts b/src/app/home/dashboard/data.ts deleted file mode 100644 index a7c7f783e..000000000 --- a/src/app/home/dashboard/data.ts +++ /dev/null @@ -1,58 +0,0 @@ -export const single = [ - { - 'name': 'Germany', - 'value': 89400001 - }, - { - 'name': 'USA', - 'value': 5000000 - }, - { - 'name': 'France', - 'value': 7200000 - } -]; - -export const multi = [ - { - 'name': 'Germany', - 'series': [ - { - 'name': '2010', - 'value': 7300000 - }, - { - 'name': '2011', - 'value': 8940000 - } - ] - }, - - { - 'name': 'USA', - 'series': [ - { - 'name': '2010', - 'value': 7870000 - }, - { - 'name': '2011', - 'value': 8270000 - } - ] - }, - - { - 'name': 'France', - 'series': [ - { - 'name': '2010', - 'value': 5000002 - }, - { - 'name': '2011', - 'value': 5800000 - } - ] - } -]; diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts index 8a77aa333..885586b61 100644 --- a/src/app/home/home-routing.module.ts +++ b/src/app/home/home-routing.module.ts @@ -1,3 +1,4 @@ +/** Angular Imports */ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; @@ -7,9 +8,11 @@ import { Route } from '../core/route/route.service'; /** Translation Imports */ import { extract } from '../core/i18n/i18n.service'; +/** Custom Components */ import { HomeComponent } from './home.component'; import { DashboardComponent } from './dashboard/dashboard.component'; +/** Home and Dashboard Routes */ const routes: Routes = [ Route.withShell([ { @@ -30,6 +33,11 @@ const routes: Routes = [ ]) ]; +/** + * Home Routing Module + * + * Configures the home and dashboard routes. + */ @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index ac039922d..f2f644f3c 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,19 +1,24 @@ - +
+ + -
- - - - - - Link
-
-
- +
+ + + + + + Welcome, {{ username }}! + + + + Mifos X + + + +
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index be79d8b19..d568e21c9 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -1,15 +1,8 @@ -// .logo { -// width: 500px; -// } +.container { + max-width: 37rem; -// q { -// font-style: italic; -// font-size: 1.2rem; -// quotes: "« " " »"; -// } - -.button-row { - display: flex; - align-items: center; - justify-content: space-around; + .title { + font-size: 1.25rem; + font-weight: 500; + } } diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts index fa04b0da7..490e81bdf 100644 --- a/src/app/home/home.component.spec.ts +++ b/src/app/home/home.component.spec.ts @@ -1,10 +1,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { CoreModule } from '../core'; -import { SharedModule } from '../shared'; import { HomeComponent } from './home.component'; -import { QuoteService } from './quote.service'; describe('HomeComponent', () => { let component: HomeComponent; @@ -12,15 +8,9 @@ describe('HomeComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [ - CoreModule, - SharedModule, - HttpClientTestingModule - ], - declarations: [HomeComponent], - providers: [QuoteService] - }) - .compileComponents(); + declarations: [ HomeComponent ] + }) + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 5ba81aabd..fc071a4d7 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,9 +1,12 @@ +/** Angular Imports */ import { Component, OnInit } from '@angular/core'; -import { finalize } from 'rxjs/operators'; - -import { QuoteService } from './quote.service'; +/** Custom Services */ +import { AuthenticationService } from '../core/authentication/authentication.service'; +/** + * Home component. + */ @Component({ selector: 'mifosx-home', templateUrl: './home.component.html', @@ -11,16 +14,20 @@ import { QuoteService } from './quote.service'; }) export class HomeComponent implements OnInit { - quote: string; - isLoading: boolean; + /** Username of authenticated user. */ + username: string; - constructor(private quoteService: QuoteService) { } + /** + * @param {AuthenticationService} authenticationService Authentication Service. + */ + constructor(private authenticationService: AuthenticationService) { } + /** + * Sets the username of the authenticated user. + */ ngOnInit() { - this.isLoading = true; - // this.quoteService.getRandomQuote({ category: 'dev' }) - // .pipe(finalize(() => { this.isLoading = false; })) - // .subscribe((quote: string) => { this.quote = quote; }); + const credentials = this.authenticationService.getCredentials(); + this.username = credentials.username; } } diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index c4920b319..407d447c7 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -1,31 +1,27 @@ +/** Angular Imports */ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { TranslateModule } from '@ngx-translate/core'; -import { NgxChartsModule } from '@swimlane/ngx-charts'; - -import { CoreModule } from '../core/core.module'; +/** Custom Modules */ import { SharedModule } from '../shared/shared.module'; import { HomeRoutingModule } from './home-routing.module'; + +/** Custom Components */ import { HomeComponent } from './home.component'; -import { QuoteService } from './quote.service'; import { DashboardComponent } from './dashboard/dashboard.component'; +/** + * Home Component + * + * Home and dashboard components should be declared here. + */ @NgModule({ imports: [ - CommonModule, - CoreModule, - TranslateModule, - NgxChartsModule, SharedModule, HomeRoutingModule ], declarations: [ HomeComponent, DashboardComponent - ], - providers: [ - QuoteService ] }) export class HomeModule { } diff --git a/src/app/home/quote.service.spec.ts b/src/app/home/quote.service.spec.ts deleted file mode 100644 index 60497975b..000000000 --- a/src/app/home/quote.service.spec.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { TestBed, inject, async } from '@angular/core/testing'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; - -import { CoreModule, HttpCacheService } from '../core'; -import { QuoteService } from './quote.service'; - -describe('QuoteService', () => { - let quoteService: QuoteService; - let httpMock: HttpTestingController; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - CoreModule, - HttpClientTestingModule - ], - providers: [ - HttpCacheService, - QuoteService - ] - }); - })); - - beforeEach(inject([ - HttpCacheService, - QuoteService, - HttpTestingController - ], (htttpCacheService: HttpCacheService, - _quoteService: QuoteService, - _httpMock: HttpTestingController) => { - - quoteService = _quoteService; - httpMock = _httpMock; - - htttpCacheService.cleanCache(); - })); - - afterEach(() => { - httpMock.verify(); - }); - - describe('getRandomQuote', () => { - it('should return a random Chuck Norris quote', () => { - // Arrange - const mockQuote = { value: 'a random quote' }; - - // Act - const randomQuoteSubscription = quoteService.getRandomQuote({ category: 'toto' }); - - // Assert - randomQuoteSubscription.subscribe((quote: string) => { - expect(quote).toEqual(mockQuote.value); - }); - httpMock.expectOne({}).flush(mockQuote); - }); - - it('should return a string in case of error', () => { - // Act - const randomQuoteSubscription = quoteService.getRandomQuote({ category: 'toto' }); - - // Assert - randomQuoteSubscription.subscribe((quote: string) => { - expect(typeof quote).toEqual('string'); - expect(quote).toContain('Error'); - }); - httpMock.expectOne({}).flush(null, { - status: 500, - statusText: 'error' - }); - }); - }); -}); diff --git a/src/app/home/quote.service.ts b/src/app/home/quote.service.ts deleted file mode 100644 index 57ce3c066..000000000 --- a/src/app/home/quote.service.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; - -import { Observable, of } from 'rxjs'; -import { map, catchError } from 'rxjs/operators'; - -const routes = { - quote: (c: RandomQuoteContext) => `/jokes/random?category=${c.category}` -}; - -export interface RandomQuoteContext { - // The quote's category: 'dev', 'explicit'... - category: string; -} - -@Injectable() -export class QuoteService { - - constructor(private httpClient: HttpClient) { } - - getRandomQuote(context: RandomQuoteContext): Observable { - return this.httpClient - .cache() - .get(routes.quote(context)) - .pipe( - map((body: any) => body.value), - catchError(() => of('Error, could not load joke :-(')) - ); - } - -} diff --git a/src/app/navigation/navigation-routing.module.ts b/src/app/navigation/navigation-routing.module.ts index ee38cf9bc..40cf1f2ec 100644 --- a/src/app/navigation/navigation-routing.module.ts +++ b/src/app/navigation/navigation-routing.module.ts @@ -17,7 +17,7 @@ const routes: Routes = [ { path: 'navigation', component: NavigationComponent, - data: { title: extract('Navigation') } + data: { title: extract('Navigation'), breadcrumb: 'Navigation' } } ]) ]; diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html index edf5f5a59..a73eb0ffe 100644 --- a/src/app/navigation/navigation.component.html +++ b/src/app/navigation/navigation.component.html @@ -1,153 +1,7 @@ - +
diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts index 0797a52f8..85a5f478c 100644 --- a/src/app/navigation/navigation.component.ts +++ b/src/app/navigation/navigation.component.ts @@ -1,5 +1,9 @@ +/** Angular Imports */ import { Component, OnInit } from '@angular/core'; +/** + * Navigation component. (by office) + */ @Component({ selector: 'mifosx-navigation', templateUrl: './navigation.component.html', @@ -7,8 +11,6 @@ import { Component, OnInit } from '@angular/core'; }) export class NavigationComponent implements OnInit { - currentJustify = 'start'; - constructor() { } ngOnInit() { diff --git a/src/app/navigation/navigation.module.ts b/src/app/navigation/navigation.module.ts index 48c074dc3..c806429b7 100644 --- a/src/app/navigation/navigation.module.ts +++ b/src/app/navigation/navigation.module.ts @@ -1,17 +1,25 @@ +/** Angular Imports */ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { CoreModule } from '../core/core.module'; -import { NavigationComponent } from './navigation.component'; +/** Custom Modules */ +import { SharedModule } from '../shared/shared.module'; import { NavigationRoutingModule } from './navigation-routing.module'; +/** Custom Components */ +import { NavigationComponent } from './navigation.component'; +/** + * Navigation Module + * + * Navigation components should be declared here. + */ @NgModule({ imports: [ - CoreModule, - CommonModule, + SharedModule, NavigationRoutingModule ], - declarations: [NavigationComponent] + declarations: [ + NavigationComponent + ] }) export class NavigationModule { }