Refactored snippet bar into seperate component

src/app/app.module.ts

@@ -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

src/app/dashboard/dashboard.component.html

@@ -1,26 +1,5 @@
 <div class="animated fadeIn">
-  <div class="card">
+  <snippet-bar-org></snippet-bar-org>
-    <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>
   <div class="row">
     <div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3">
       <widget-graph *ngIf="widget.type == 'graph'"

src/app/dashboard/dashboard.component.ts

@@ -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.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;
-      }
-    );
   }
 
   // Fisher-Yates shuffle function

src/app/dashboard/dashboard.module.ts

@@ -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

src/app/providers/api-service.ts

@@ -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) {

src/app/providers/org-snippets.service.ts

@@ -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
+      }
+    );
+  }
+}

src/app/snippets/org-snippet-bar.component.html

@@ -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>

src/app/snippets/org-snippet-bar.component.ts

@@ -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;
+        }
+      );
+  }
+}