CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refractor: home module (#297)

Browse Source 
* Refractor components.
* Redesign home component.
* Add comments.

Fixes #296
This commit is contained in:
Abhay Chawla
2018-08-12 20:46:54 +05:30
committed by GitHub
parent b54e2a2b01
commit 598f239251
16 changed files with 98 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/dashboard/dashboard.component.html
+5 -99
View File
@@ -1,101 +1,7 @@
<!-- <div class="fluid-container">
<div class="container">
<div class="row mt-5">
<div class="col-sm-4">
<div class="container">
<p>
TODO: dashboard component.
</p>
<div class="card">
<div class="card-header">Recent Activities </div>
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
</a>
<a href="#" class="list-group-item list-group-item-action">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">Frequent Activities </div>
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus
</a>
<a href="#" class="list-group-item list-group-item-action ">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">Amount distributed </div>
<div class="card-body">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus
</a>
<a href="#" class="list-group-item list-group-item-action ">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
</a>
<a href="#" class="list-group-item list-group-item-action ">Morbi leo risus
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-8 mx-auto">
<div class="card">
<div class="card-body">
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="single"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel">
</ngx-charts-bar-vertical>
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>
src/app/home/dashboard/dashboard.component.scss
-3
View File
@@ -1,3 +0,0 @@
// .ngx-charts {
// position: relative;
// }
src/app/home/dashboard/dashboard.component.ts
+5 -23
View File
@@ -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() {
}
src/app/home/dashboard/data.ts
-58
View File
@@ -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
}
]
}
];
src/app/home/home-routing.module.ts
+8
View File
@@ -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],
src/app/home/home.component.html
+21 -16
View File
@@ -1,19 +1,24 @@
<!-- <div class="container-fluid">
<div class="text-center mt-5">
<app-loader [isLoading]="isLoading"></app-loader>
<q [hidden]="isLoading">{{quote}}</q>
</div>
</div> -->
<div fxLayput="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
<button mat-raised-button color="primary" [routerLink]="['/dashboard']">
<fa-icon icon="tachometer-alt"></fa-icon>&nbsp;&nbsp;
Dashboard
</button>
<div class="button-row">
<button mat-raised-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
<a mat-raised-button routerLink=".">Link</a>
</div>
<br>
<br>
<img class="logo" src="assets/images/mifos_lg-logo.jpg"/>
<div class="container">
<mat-card>
<mat-card-header>
<mat-card-title class="title">
Welcome, {{ username }}!
</mat-card-title>
</mat-card-header>
<img mat-card-image src="assets/images/mifos_lg-logo.jpg" alt="Mifos X">
</mat-card>
</div>
src/app/home/home.component.scss
+6 -13
View File
@@ -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;
}
}
src/app/home/home.component.spec.ts
+3 -13
View File
@@ -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(() => {
src/app/home/home.component.ts
+17 -10
View File
@@ -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;
}
}
src/app/home/home.module.ts
+9 -13
View File
@@ -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 { }
src/app/home/quote.service.spec.ts
-72
View File
@@ -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'
});
});
});
});
src/app/home/quote.service.ts
-31
View File
@@ -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<string> {
return this.httpClient
.cache()
.get(routes.quote(context))
.pipe(
map((body: any) => body.value),
catchError(() => of('Error, could not load joke :-('))
);
}
}