update: adding in totals module

angular.json

@@ -144,6 +144,34 @@
           }
         }
       }
+    },
+    "totals-view": {
+      "root": "libs/totals-view",
+      "sourceRoot": "libs/totals-view/src",
+      "projectType": "library",
+      "prefix": "workspace",
+      "architect": {
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "libs/totals-view/src/test.ts",
+            "tsConfig": "libs/totals-view/tsconfig.spec.json",
+            "karmaConfig": "libs/totals-view/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/totals-view/tsconfig.lib.json",
+              "libs/totals-view/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "cli": {

apps/dashboard/src/app/app.module.ts

@@ -3,9 +3,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+import { CommonDataModule } from '@workspace/common-data';
+import { TotalsViewModule } from '@workspace/totals-view';
 import { AppRoutingModule } from './app-routing.module';
 import { AppMaterialModule } from './app-material.module';
-import { CommonDataModule } from '@workspace/common-data';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
@@ -15,6 +16,8 @@ import { ItemDetailComponent } from './items/item-detail/item-detail.component';
 import { WidgetsComponent } from './widgets/widgets.component';
 import { WidgetDetailComponent } from './widgets/widget-detail/widget-detail.component';
 import { WidgetsListComponent } from './widgets/widgets-list/widgets-list.component';
+import { ItemsTotalComponent } from './items/items-total/items-total.component';
+import { WidgetsTotalComponent } from './widgets/widgets-total/widgets-total.component';
 
 @NgModule({
   declarations: [
@@ -23,17 +26,20 @@ import { WidgetsListComponent } from './widgets/widgets-list/widgets-list.compon
     ItemsComponent,
     ItemsListComponent,
     ItemDetailComponent,
+    ItemsTotalComponent,
     WidgetsComponent,
     WidgetDetailComponent,
-    WidgetsListComponent
+    WidgetsListComponent,
+    WidgetsTotalComponent
   ],
   imports: [
     BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
     AppRoutingModule,
     AppMaterialModule,
-    CommonDataModule
+    CommonDataModule,
+    TotalsViewModule
   ],
   bootstrap: [AppComponent]
 })

apps/dashboard/src/app/home/home.component.html

@@ -1,9 +1,11 @@
 <div class="container">
   <div class="col-50">
+    <app-items-total [items]="items"></app-items-total>
     <app-items-list [items]="items" [readonly]="true"></app-items-list>
   </div>
 
   <div class="col-50">
+    <app-widgets-total [widgets]="widgets"></app-widgets-total>
     <app-widgets-list [widgets]="widgets" [readonly]="true"></app-widgets-list>
   </div>
 </div>

apps/dashboard/src/app/items/item-detail/item-detail.component.html

@@ -3,7 +3,7 @@
     <mat-card-title>
       <h1>
         <span *ngIf="selectedItem.id; else prompt">Editing {{originalName}}</span>
-        <ng-template #prompt>Create</ng-template>
+        <ng-template #prompt>Create Item</ng-template>
       </h1>
     </mat-card-title>
   </mat-card-header>
@@ -12,6 +12,9 @@ <h1>
       <mat-form-field class="full-width">
         <input matInput placeholder="Name" [(ngModel)]="selectedItem.name" type="text" name="name">
       </mat-form-field>
+      <mat-form-field class="full-width">
+        <input matInput placeholder="Price" [(ngModel)]="selectedItem.price" type="text" name="price">
+      </mat-form-field>
       <mat-form-field class="full-width">
         <input matInput placeholder="Description" [(ngModel)]="selectedItem.description" type="text" name="description">
       </mat-form-field>

apps/dashboard/src/app/items/items-total/items-total.component.html

@@ -0,0 +1,11 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>
+      <h1>Items Total</h1>
+    </mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <app-totals [collection]="items"></app-totals>
+  </mat-card-content>
+</mat-card>
+

apps/dashboard/src/app/items/items-total/items-total.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemsTotalComponent } from './items-total.component';
+
+describe('ItemsTotalComponent', () => {
+  let component: ItemsTotalComponent;
+  let fixture: ComponentFixture<ItemsTotalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemsTotalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemsTotalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/dashboard/src/app/items/items-total/items-total.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Item } from '@workspace/common-data';
+
+@Component({
+  selector: 'app-items-total',
+  templateUrl: './items-total.component.html',
+  styleUrls: ['./items-total.component.css']
+})
+export class ItemsTotalComponent implements OnInit {
+  @Input() items: Item;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

apps/dashboard/src/app/items/items.component.html

@@ -1,8 +1,12 @@
 <div class="container">
-  <app-items-list class="col-50" [items]="items"
-                  (selected)="selectItem($event)"
-                  (deleted)="deleteItem($event)">
-  </app-items-list>
+  <div class="col-50">
+    <app-items-total [items]="items"></app-items-total>
+
+    <app-items-list [items]="items"
+                    (selected)="selectItem($event)"
+                    (deleted)="deleteItem($event)">
+    </app-items-list>
+  </div>
 
   <app-item-detail class="col-50" [item]="currentItem"
                    (saved)="saveItem($event)"

apps/dashboard/src/app/items/items.component.ts

@@ -18,7 +18,7 @@ export class ItemsComponent implements OnInit {
   }
 
   resetCurrentItem() {
-    this.currentItem = { id: null, name: '', description: '' };
+    this.currentItem = { id: null, name: '', price: 0, description: '' };
   }
 
   selectItem(item) {

apps/dashboard/src/app/widgets/widget-detail/widget-detail.component.html

@@ -4,7 +4,7 @@
     <mat-card-title>
       <h1>
         <span *ngIf="selectedWidget.id; else prompt">Editing {{originalName}}</span>
-        <ng-template #prompt>Create</ng-template>
+        <ng-template #prompt>Create Widget</ng-template>
       </h1>
     </mat-card-title>
   </mat-card-header>
@@ -13,6 +13,9 @@ <h1>
       <mat-form-field class="full-width">
         <input matInput placeholder="Name" [(ngModel)]="selectedWidget.name" type="text" name="name">
       </mat-form-field>
+      <mat-form-field class="full-width">
+        <input matInput placeholder="Price" [(ngModel)]="selectedWidget.price" type="text" name="price">
+      </mat-form-field>
       <mat-form-field class="full-width">
         <input matInput placeholder="Description" [(ngModel)]="selectedWidget.description" type="text" name="description">
       </mat-form-field>

apps/dashboard/src/app/widgets/widgets-total/widgets-total.component.html

@@ -0,0 +1,10 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>
+      <h1>Widgets Total</h1>
+    </mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <app-totals [collection]="widgets"></app-totals>
+  </mat-card-content>
+</mat-card>

apps/dashboard/src/app/widgets/widgets-total/widgets-total.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WidgetsTotalComponent } from './widgets-total.component';
+
+describe('WidgetsTotalComponent', () => {
+  let component: WidgetsTotalComponent;
+  let fixture: ComponentFixture<WidgetsTotalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WidgetsTotalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WidgetsTotalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/dashboard/src/app/widgets/widgets-total/widgets-total.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Widget } from '@workspace/common-data';
+
+@Component({
+  selector: 'app-widgets-total',
+  templateUrl: './widgets-total.component.html',
+  styleUrls: ['./widgets-total.component.css']
+})
+export class WidgetsTotalComponent implements OnInit {
+  @Input() widgets: Widget[];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

apps/dashboard/src/app/widgets/widgets.component.html

@@ -1,8 +1,12 @@
 <div class="container">
-  <app-widgets-list class="col-50" [widgets]="widgets"
-                    (selected)="selectWidget($event)"
-                    (deleted)="deleteWidget($event)">
-  </app-widgets-list>
+  <div class="col-50">
+    <app-widgets-total [widgets]="widgets"></app-widgets-total>
+
+    <app-widgets-list [widgets]="widgets"
+                      (selected)="selectWidget($event)"
+                      (deleted)="deleteWidget($event)">
+    </app-widgets-list>
+  </div>
 
   <app-widget-detail class="col-50" [widget]="currentWidget"
                      (saved)="saveWidget($event)"

apps/dashboard/src/app/widgets/widgets.component.ts

@@ -23,7 +23,7 @@ export class WidgetsComponent implements OnInit {
   }
 
   reset() {
-    this.currentWidget = { id: null, name: '', description: ''};
+    this.currentWidget = { id: null, name: '', price: 0, description: ''};
   }
 
   selectWidget(widget) {

apps/dashboard/src/styles.css

@@ -104,3 +104,7 @@ mat-card-header .mat-card-header-text {
 mat-card-title h1 {
   display: inline;
 }
+
+mat-card {
+  margin-bottom: 20px !important;
+}

libs/common-data/src/lib/items/item.model.ts

@@ -1,5 +1,6 @@
 export interface Item {
   id: number;
-  name?: string;
+  name: string;
+  price: number;
   description?: string;
 }

libs/common-data/src/lib/widgets/widget.model.ts

@@ -1,5 +1,6 @@
 export interface Widget {
   id: number;
-  name?: string;
+  name: string;
+  price: number;
   description?: string;
 }

libs/totals-view/karma.conf.js

@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

libs/totals-view/src/index.ts

@@ -0,0 +1,2 @@
+export { TotalsViewModule } from './lib/totals-view.module';
+export { TotalsComponent } from './lib/totals/totals.component';

libs/totals-view/src/lib/totals-view.module.spec.ts

@@ -0,0 +1,16 @@
+import { async, TestBed } from '@angular/core/testing';
+import { TotalsViewModule } from './totals-view.module';
+
+describe('TotalsViewModule', () => {
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        imports: [TotalsViewModule]
+      }).compileComponents();
+    })
+  );
+
+  it('should create', () => {
+    expect(TotalsViewModule).toBeDefined();
+  });
+});

libs/totals-view/src/lib/totals-view.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TotalsComponent } from './totals/totals.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [TotalsComponent],
+  exports: [TotalsComponent]
+})
+export class TotalsViewModule {
+}

libs/totals-view/src/lib/totals/totals.component.html

@@ -0,0 +1 @@
+<h3>{{total | currency}}</h3>