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="container">
<div class="row mt-5">
<div class="col-sm-4">
<p>
TODO: dashboard component.
</p>
<div class="card"> </div>
<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> -->
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 { Component, OnInit } from '@angular/core';
import { single } from './data'; /**
* Dashboard component.
*/
@Component({ @Component({
selector: 'mifosx-dashboard', selector: 'mifosx-dashboard',
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
@@ -9,27 +11,7 @@ import { single } from './data';
}) })
export class DashboardComponent implements OnInit { export class DashboardComponent implements OnInit {
single: any[]; constructor() { }
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 });
}
ngOnInit() { 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 { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
@@ -7,9 +8,11 @@ import { Route } from '../core/route/route.service';
/** Translation Imports */ /** Translation Imports */
import { extract } from '../core/i18n/i18n.service'; import { extract } from '../core/i18n/i18n.service';
/** Custom Components */
import { HomeComponent } from './home.component'; import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
/** Home and Dashboard Routes */
const routes: Routes = [ const routes: Routes = [
Route.withShell([ Route.withShell([
{ {
@@ -30,6 +33,11 @@ const routes: Routes = [
]) ])
]; ];
/**
* Home Routing Module
*
* Configures the home and dashboard routes.
*/
@NgModule({ @NgModule({
imports: [RouterModule.forChild(routes)], imports: [RouterModule.forChild(routes)],
exports: [RouterModule], exports: [RouterModule],
src/app/home/home.component.html
+21 -16
View File
@@ -1,19 +1,24 @@
<!-- <div class="container-fluid"> <div fxLayput="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
<div class="text-center mt-5">
<app-loader [isLoading]="isLoading"></app-loader> <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
<q [hidden]="isLoading">{{quote}}</q> <fa-icon icon="tachometer-alt"></fa-icon>&nbsp;&nbsp;
</div> Dashboard
</div> --> </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> </div>
<br> <div class="container">
<br>
<img class="logo" src="assets/images/mifos_lg-logo.jpg"/> <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 { .container {
// width: 500px; max-width: 37rem;
// }
// q { .title {
// font-style: italic; font-size: 1.25rem;
// font-size: 1.2rem; font-weight: 500;
// quotes: "« " " »"; }
// }
.button-row {
display: flex;
align-items: center;
justify-content: space-around;
} }
src/app/home/home.component.spec.ts
+3 -13
View File
@@ -1,10 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 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 { HomeComponent } from './home.component';
import { QuoteService } from './quote.service';
describe('HomeComponent', () => { describe('HomeComponent', () => {
let component: HomeComponent; let component: HomeComponent;
@@ -12,15 +8,9 @@ describe('HomeComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [ declarations: [ HomeComponent ]
CoreModule, })
SharedModule, .compileComponents();
HttpClientTestingModule
],
declarations: [HomeComponent],
providers: [QuoteService]
})
.compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {
src/app/home/home.component.ts
+17 -10
View File
@@ -1,9 +1,12 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { finalize } from 'rxjs/operators'; /** Custom Services */
import { AuthenticationService } from '../core/authentication/authentication.service';
import { QuoteService } from './quote.service';
/**
* Home component.
*/
@Component({ @Component({
selector: 'mifosx-home', selector: 'mifosx-home',
templateUrl: './home.component.html', templateUrl: './home.component.html',
@@ -11,16 +14,20 @@ import { QuoteService } from './quote.service';
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
quote: string; /** Username of authenticated user. */
isLoading: boolean; username: string;
constructor(private quoteService: QuoteService) { } /**
* @param {AuthenticationService} authenticationService Authentication Service.
*/
constructor(private authenticationService: AuthenticationService) { }
/**
* Sets the username of the authenticated user.
*/
ngOnInit() { ngOnInit() {
this.isLoading = true; const credentials = this.authenticationService.getCredentials();
// this.quoteService.getRandomQuote({ category: 'dev' }) this.username = credentials.username;
// .pipe(finalize(() => { this.isLoading = false; }))
// .subscribe((quote: string) => { this.quote = quote; });
} }
} }
src/app/home/home.module.ts
+9 -13
View File
@@ -1,31 +1,27 @@
/** Angular Imports */
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core'; /** Custom Modules */
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { CoreModule } from '../core/core.module';
import { SharedModule } from '../shared/shared.module'; import { SharedModule } from '../shared/shared.module';
import { HomeRoutingModule } from './home-routing.module'; import { HomeRoutingModule } from './home-routing.module';
/** Custom Components */
import { HomeComponent } from './home.component'; import { HomeComponent } from './home.component';
import { QuoteService } from './quote.service';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
/**
* Home Component
*
* Home and dashboard components should be declared here.
*/
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule,
CoreModule,
TranslateModule,
NgxChartsModule,
SharedModule, SharedModule,
HomeRoutingModule HomeRoutingModule
], ],
declarations: [ declarations: [
HomeComponent, HomeComponent,
DashboardComponent DashboardComponent
],
providers: [
QuoteService
] ]
}) })
export class HomeModule { } 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 :-('))
);
}
}
src/app/navigation/navigation-routing.module.ts
+1 -1
View File
@@ -17,7 +17,7 @@ const routes: Routes = [
{ {
path: 'navigation', path: 'navigation',
component: NavigationComponent, component: NavigationComponent,
data: { title: extract('Navigation') } data: { title: extract('Navigation'), breadcrumb: 'Navigation' }
} }
]) ])
]; ];
src/app/navigation/navigation.component.html
+5 -151
View File
@@ -1,153 +1,7 @@
<!-- <div class="fluid-container"> <div class="container">
<div class="container">
<div class="col-sm-4 mt-5 mb-3 mx-auto"> <p>
<input class="form-control mr-sm-2" placeholder="Filter by Name" type="text"> TODO: navigation component.
</div> </p>
</div>
<div>
<div>
<ng-template>
<div class="card col-sm-4 mx-auto">
<table class="table table-hover table-responsive-md table-fixed">
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Gary</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Angie</td>
</tr>
<tr>
<th scope="row">8</th>
<td>John</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
</div>
<div>
<ng-template>
Loan</ng-template>
<ng-template>
<div class="card col-sm-4 mx-auto">
<table class="table table-hover table-responsive-md table-fixed">
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
</div>
<div>
<ng-template>
<p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et
odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed
diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus
nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies
in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
</ng-template>
</div>
</div>
</div>
</div> -->
src/app/navigation/navigation.component.ts
+4 -2
View File
@@ -1,5 +1,9 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
/**
* Navigation component. (by office)
*/
@Component({ @Component({
selector: 'mifosx-navigation', selector: 'mifosx-navigation',
templateUrl: './navigation.component.html', templateUrl: './navigation.component.html',
@@ -7,8 +11,6 @@ import { Component, OnInit } from '@angular/core';
}) })
export class NavigationComponent implements OnInit { export class NavigationComponent implements OnInit {
currentJustify = 'start';
constructor() { } constructor() { }
ngOnInit() { ngOnInit() {
src/app/navigation/navigation.module.ts
+14 -6
View File
@@ -1,17 +1,25 @@
/** Angular Imports */
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreModule } from '../core/core.module'; /** Custom Modules */
import { NavigationComponent } from './navigation.component'; import { SharedModule } from '../shared/shared.module';
import { NavigationRoutingModule } from './navigation-routing.module'; import { NavigationRoutingModule } from './navigation-routing.module';
/** Custom Components */
import { NavigationComponent } from './navigation.component';
/**
* Navigation Module
*
* Navigation components should be declared here.
*/
@NgModule({ @NgModule({
imports: [ imports: [
CoreModule, SharedModule,
CommonModule,
NavigationRoutingModule NavigationRoutingModule
], ],
declarations: [NavigationComponent] declarations: [
NavigationComponent
]
}) })
export class NavigationModule { } export class NavigationModule { }