Refactored snippet bar into seperate component

This commit is contained in:
Tom Bloor 2017-09-07 15:12:49 +01:00
parent 1774f2f0d5
commit cfb131b800
8 changed files with 80 additions and 56 deletions

View file

@ -21,6 +21,7 @@ import { CustomerGuard } from './_guards/customer.guard';
import { ApiService } from './providers/api-service';
import { OrgGraphsService } from './providers/org-graphs.service';
import { OrgSnippetsService } from './providers/org-snippets.service';
// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
@ -63,6 +64,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
CustomerGuard,
ApiService,
OrgGraphsService,
OrgSnippetsService,
{
provide: LocationStrategy,
useClass: HashLocationStrategy

View file

@ -1,26 +1,5 @@
<div class="animated fadeIn">
<div class="card">
<div class="card-footer">
<ul>
<li class="hidden-sm-down">
<div class="text-muted">Customers This Month</div>
<strong>{{customersThisMonth}}</strong>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Money Spent This Month</div>
<strong>{{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</strong>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Points Total</div>
<strong>{{pointsTotal}}</strong>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Average Transaction Today</div>
<strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
</li>
</ul>
</div>
</div>
<snippet-bar-org></snippet-bar-org>
<div class="row">
<div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3">
<widget-graph *ngIf="widget.type == 'graph'"

View file

@ -1,8 +1,7 @@
import { Directive, Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import { Router } from '@angular/router';
import { GraphWidget } from '../widgets/graph-widget.component';
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
import { DataType } from '../shared/data-types.enum';
@Component({
@ -10,12 +9,6 @@ import { DataType } from '../shared/data-types.enum';
})
export class DashboardComponent implements OnInit {
// Snippet data
public customersThisMonth: number;
public moneySpentThisMonth: number;
public pointsTotal: number;
public averageTransactionToday: number;
shuffledArray: any;
public widgetList = [
@ -60,20 +53,8 @@ export class DashboardComponent implements OnInit {
];
constructor(
private http: Http,
private api: ApiService,
) {
this.shuffle = this.shuffledArray;
this.api.breadcrumb_data(undefined)
.subscribe(
result => {
console.log(result);
this.customersThisMonth = result.customersthismonth;
this.moneySpentThisMonth = result.moneyspentthismonth;
this.pointsTotal = result.pointstotal;
this.averageTransactionToday = result.averagetransactiontoday;
}
);
this.shuffle = this.shuffledArray;
}
// Fisher-Yates shuffle function

View file

@ -15,6 +15,7 @@ import { FeedbackComponent } from './feedback.component';
import { TransactionLogComponent } from './transaction-log.component';
import { GraphWidget } from '../widgets/graph-widget.component';
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
import { DashboardRoutingModule } from './dashboard.routing';
import { OrgResultComponent } from '../shared/org-result.component';
@ -43,6 +44,7 @@ import { TransactionResultComponent } from '../shared/transaction-result.compone
TransactionResultComponent,
FeedbackComponent,
GraphWidget,
OrgBarSnippetComponent,
],
providers: [
CurrencyPipe

View file

@ -230,19 +230,6 @@ export class ApiService {
).map( response => response.json() );
}
// Fake Breadcrumb data
public breadcrumb_data(data) {
return Observable.of(
{
"customersthismonth" : 196,
"moneyspentthismonth" : 156.02,
"pointstotal" : 506,
"averagetransactiontoday" : 3.69
}
)
}
// Fake chart data to mimic
public graph_data(data) {

View file

@ -0,0 +1,21 @@
import { Injectable } from '@angular/core';
import { ApiService } from './api-service';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class OrgSnippetsService {
private orgSnippetsUrl = '/v1/organisation/snippets';
constructor(private api: ApiService) { }
public getData(): Observable<any> {
return Observable.of(
{
'customersthismonth' : 196,
'moneyspentthismonth' : 156.02,
'pointstotal' : 506,
'averagetransactiontoday' : 3.69
}
);
}
}

View file

@ -0,0 +1,22 @@
<div class="card">
<div class="card-footer">
<ul>
<li class="hidden-sm-down">
<div class="text-muted">Customers This Month</div>
<strong>{{customersThisMonth}}</strong>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Money Spent This Month</div>
<strong>{{moneySpentThisMonth | currency:'GBP':true:'1.2-2'}}</strong>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Points Total</div>
<strong>{{pointsTotal}}</strong>
</li>
<li class="hidden-sm-down">
<div class="text-muted">Average Transaction Today</div>
<strong>{{averageTransactionToday | currency:'GBP':true:'1.2-2'}}</strong>
</li>
</ul>
</div>
</div>

View file

@ -0,0 +1,30 @@
import { Component, OnInit } from '@angular/core';
import { OrgSnippetsService } from '../providers/org-snippets.service';
@Component({
selector: 'snippet-bar-org',
templateUrl: 'org-snippet-bar.component.html',
})
export class OrgBarSnippetComponent implements OnInit {
public customersThisMonth: number;
public moneySpentThisMonth: number;
public pointsTotal: number;
public averageTransactionToday: number;
constructor(
private snippetsService: OrgSnippetsService,
) { }
public ngOnInit(): void {
this.snippetsService.getData()
.subscribe(
result => {
this.customersThisMonth = result.customersthismonth;
this.moneySpentThisMonth = result.moneyspentthismonth;
this.pointsTotal = result.pointstotal;
this.averageTransactionToday = result.averagetransactiontoday;
}
);
}
}