docs(hierarchical-dependency-injection): heroes example as tax returns

Author: wardbell

public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts

@@ -11,73 +11,70 @@ describe('Hierarchical dependency injection', () => {
   describe('Heroes Scenario', () => {
     let page = {
       heroName: '',
-      heroText: '',
+      income: '',
 
       // queries
       heroEl: element.all(by.css('heroes-list li')).get(0), // first hero
-      heroCardEl: element(by.css('heroes-list hero-card')), // first hero card
-      cardNameInputEl: element.all(by.css('heroes-list hero-card input')).get(0),
-      cancelButtonEl: element(by.cssContainingText('heroes-list hero-card button', 'Cancel')),
-      closeButtonEl: element(by.cssContainingText('heroes-list hero-card button', 'Close')),
-      saveButtonEl: element(by.cssContainingText('heroes-list hero-card button', 'Save'))
+      heroCardEl: element(by.css('heroes-list hero-tax-return')), // first hero tax-return
+      taxReturnNameEl: element.all(by.css('heroes-list hero-tax-return #name')).get(0),
+      incomeInputEl: element.all(by.css('heroes-list hero-tax-return input')).get(0),
+      cancelButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Cancel')),
+      closeButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Close')),
+      saveButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Save'))
     };
 
     it('should list multiple heroes', () => {
       expect(element.all(by.css('heroes-list li')).count()).toBeGreaterThan(1);
     });
 
-    it('should show no hero cards at the start', () => {
-      expect(element.all(by.css('heroes-list li hero-card')).count()).toBe(0);
+    it('should show no hero tax-returns at the start', () => {
+      expect(element.all(by.css('heroes-list li hero-tax-return')).count()).toBe(0);
     });
 
-    it('should open first hero in hero-card view after click', () => {
+    it('should open first hero in hero-tax-return view after click', () => {
       page.heroEl.getText()
         .then(val => {
-          // console.log('Selected hero text: ' + val);
-          page.heroText = val;
-          page.heroName = val.substring(0, val.indexOf('()') - 1);
+          page.heroName = val;
         })
         .then(() => page.heroEl.click())
         .then(() => {
           expect(page.heroCardEl.isDisplayed()).toBe(true);
         });
     });
 
-    it('hero card should have first hero\'s name', () => {
-      // Not `page.cardNameInputEl.getAttribute('value')` although later that is essential
-      expect(page.cardNameInputEl.getText()).toEqual(page.heroName);
+    it('hero tax-return should have first hero\'s name', () => {
+      // Not `page.tax-returnNameInputEl.getAttribute('value')` although later that is essential
+      expect(page.taxReturnNameEl.getText()).toEqual(page.heroName);
     });
 
     it('should be able to cancel change', () => {
-      page.cardNameInputEl.sendKeys('foo')
+      page.incomeInputEl.clear()
+        .then(() => page.incomeInputEl.sendKeys('777'))
         .then(() => {
-          expect(page.cardNameInputEl.getAttribute('value')).toContain('foo', 'input name should have foo');
-          expect(page.heroEl.getText()).toEqual(page.heroText, 'list text should be unchanged');
+          expect(page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777');
           return page.cancelButtonEl.click();
         })
         .then(() => {
-          expect(page.cardNameInputEl.getAttribute('value')).not.toContain('foo', 'input name should not have foo');
-          expect(page.heroEl.getText()).toEqual(page.heroText, 'list text should be unchanged');
+          expect(page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777');
         });
     });
 
     it('should be able to save change', () => {
-      page.cardNameInputEl.sendKeys('bar')
+      page.incomeInputEl.clear()
+        .then(() => page.incomeInputEl.sendKeys('999'))
         .then(() => {
-          expect(page.cardNameInputEl.getAttribute('value')).toContain('bar', 'input name should have bar');
-          expect(page.heroEl.getText()).toEqual(page.heroText, 'list text should be unchanged');
+          expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999');
           return page.saveButtonEl.click();
         })
         .then(() => {
-          expect(page.cardNameInputEl.getAttribute('value')).toContain('bar', 'input name should still have bar');
-          expect(page.heroEl.getText()).toContain('bar', 'list text should have changed to include bar');
+          expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999');
         });
     });
 
-    it('should be able to close card', () => {
+    it('should be able to close tax-return', () => {
       page.saveButtonEl.click()
         .then(() => {
-          expect(element.all(by.css('heroes-list li hero-card')).count()).toBe(0);
+          expect(element.all(by.css('heroes-list li hero-tax-return')).count()).toBe(0);
         });
     });
 

public/docs/_examples/hierarchical-dependency-injection/ts/app/app.module.ts

@@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 
 import { AppComponent }          from './app.component';
-import { HeroCardComponent }     from './hero-card.component';
+import { HeroTaxReturnComponent }     from './hero-tax-return.component';
 import { HeroesListComponent }   from './heroes-list.component';
 import { HeroesService }         from './heroes.service';
 import { VillainsListComponent } from './villains-list.component';
@@ -24,7 +24,7 @@ import { carComponents, carServices } from './car.components';
     AppComponent,
     carComponents,
     HeroesListComponent,
-    HeroCardComponent,
+    HeroTaxReturnComponent,
     VillainsListComponent
   ],
   bootstrap: [ AppComponent ]

public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.css

@@ -0,0 +1,22 @@
+.tax-return { border: thin dashed green; margin: 1em; padding: 1em; width: 18em; position: relative }
+#name { font-weight: bold;}
+#tid { float: right; }
+input { font-size: 100%; padding-left: 2px; width: 6em; }
+input.num { text-align: right; padding-left: 0; padding-right: 4px; width: 4em;}
+fieldset { border: 0 none;}
+
+.msg {
+  color: white;
+  font-size: 150%;
+  position: absolute;
+  /*opacity: 0.3;*/
+  left: 2px;
+  top: 3em;
+  width: 98%;
+  background-color: green;
+  text-align: center;
+}
+.msg.canceled {
+  color: white;
+  background-color: red;
+}

public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.html

@@ -0,0 +1,20 @@
+<div class="tax-return">
+  <div class="msg" [class.canceled]="message==='Canceled'">{{message}}</div>
+  <fieldset>
+    <span  id=name>{{taxReturn.name}}</span>
+    <label id=tid>TID: {{taxReturn.tid}}</label>
+  </fieldset>
+  <fieldset>
+    <label>
+      Income: <input [(ngModel)]="taxReturn.income" class="num">
+    </label>
+  </fieldset>
+  <fieldset>
+    <label>Tax: {{taxReturn.tax}}</label>
+  </fieldset>
+  <fieldset>
+    <button (click)="onSaved()">Save</button>
+    <button (click)="onCanceled()">Cancel</button>
+    <button (click)="onClose()">Close</button>
+  </fieldset>
+</div>

public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts

@@ -0,0 +1,44 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { HeroTaxReturn }        from './hero';
+import { HeroTaxReturnService } from './hero-tax-return.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-tax-return',
+  templateUrl: './hero-tax-return.component.html',
+  styleUrls: [ './hero-tax-return.component.css' ],
+  // #docregion providers
+  providers: [ HeroTaxReturnService ]
+  // #enddocregion providers
+})
+export class HeroTaxReturnComponent {
+  message = '';
+  @Output() close = new EventEmitter<void>();
+  @Input()
+  get taxReturn(): HeroTaxReturn {
+    return this.heroTaxReturnService.taxReturn;
+  }
+  set taxReturn (htr: HeroTaxReturn) {
+    this.heroTaxReturnService.taxReturn = htr;
+  }
+
+  constructor(private heroTaxReturnService: HeroTaxReturnService ) { }
+
+  onCanceled()  {
+    this.flashMessage('Canceled');
+    this.heroTaxReturnService.restoreTaxReturn();
+  };
+
+  onClose()  { this.close.emit(); };
+
+  onSaved() {
+    this.flashMessage('Saved');
+    this.heroTaxReturnService.saveTaxReturn();
+  }
+
+  flashMessage(msg: string) {
+    this.message = msg;
+    setTimeout(() => this.message = '', 500);
+  }
+}

public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-state.service.ts

@@ -0,0 +1,30 @@
+// #docregion
+import { Injectable }    from '@angular/core';
+import { HeroTaxReturn } from './hero';
+import { HeroesService } from './heroes.service';
+
+@Injectable()
+export class HeroTaxReturnService {
+  private currentTaxReturn: HeroTaxReturn;
+  private originalTaxReturn: HeroTaxReturn;
+
+  constructor(private heroService: HeroesService) { }
+
+  set taxReturn (htr: HeroTaxReturn) {
+    this.originalTaxReturn = htr;
+    this.currentTaxReturn  = htr.clone();
+  }
+
+  get taxReturn (): HeroTaxReturn {
+    return this.currentTaxReturn;
+  }
+
+  restoreTaxReturn() {
+    this.taxReturn = this.originalTaxReturn;
+  }
+
+  saveTaxReturn() {
+    this.taxReturn = this.currentTaxReturn;
+    this.heroService.saveTaxReturn(this.currentTaxReturn).subscribe();
+  }
+}