feature(): add decorator pattern

Author: Patrick

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: 'tsconfig.base.json',
+    project: 'tsconfig.json',
     ecmaVersion: 2020,
     sourceType: 'module'
   },

src/app/09. Decorator/decorator.module.ts

@@ -3,13 +3,11 @@ import { CommonModule } from '@angular/common';
 
 import { DecoratorRoutingModule } from './decorator-routing.module';
 import { DecoratorComponent } from './decorator/decorator.component';
-
+import { AngularMaterialModule } from '../modules/angular-material.module';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [DecoratorComponent],
-  imports: [
-    CommonModule,
-    DecoratorRoutingModule
-  ]
+  imports: [CommonModule, DecoratorRoutingModule, AngularMaterialModule, FormsModule]
 })
-export class DecoratorModule { }
+export class DecoratorModule {}

src/app/09. Decorator/decorator/decorator.component.html

@@ -1 +1,38 @@
-<p>decorator works!</p>
+<div class="container">
+  <h1>
+    Decorator Pattern
+  </h1>
+  <div class="content">
+    <mat-card>
+      <mat-card-title>
+        Pizza Calculator
+      </mat-card-title>
+      <mat-card-subtitle>
+        Current price: {{ price }}
+      </mat-card-subtitle>
+      <mat-divider></mat-divider>
+      <mat-card-content>
+        <label id="radio-group"><b>Pick your favorite pizza</b></label>
+        <mat-radio-group
+          aria-labelledby="radio-group"
+          [(ngModel)]="pizza">
+          <mat-radio-button class="example-radio-button" *ngFor="let pizza of pizzas" [value]="pizza">
+            <div>{{ pizza.getTopping() }}</div>
+          </mat-radio-button>
+        </mat-radio-group>
+      </mat-card-content>
+      <mat-card-actions *ngIf="pizza != null">
+        <button mat-raised-button color="primary" (click)="btnCheese()">With cheese</button>
+        <button mat-raised-button color="primary" (click)="btnMushrooms()">With mushrooms</button>
+        <button mat-raised-button color="primary" (click)="btnJalapeno()">With jalapeno</button>
+        <button mat-raised-button color="primary" (click)="btnCheeseAndJalapeno()">With cheese & jalapeno</button>
+        <button mat-raised-button color="primary" (click)="btnCheeseAndMushrooms()">With cheese & mushrooms</button>
+      </mat-card-actions>
+      <mat-card-footer>
+        <div *ngFor="let topping of toppings">
+          {{ topping }}
+        </div>
+      </mat-card-footer>
+    </mat-card>
+  </div>
+</div>

src/app/09. Decorator/decorator/decorator.component.scss

@@ -0,0 +1,37 @@
+button {
+  margin-top: 5px !important;
+}
+
+div {
+  text-align: center;
+}
+
+div.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+div.content {
+  display: flex;
+  flex-direction: row;
+}
+
+label {
+  margin-bottom: 15px;
+}
+
+mat-card-content {
+  display: flex;
+  flex-direction: column;
+  padding-top: 15px;
+  align-items: center;
+}
+
+mat-radio-group {
+  display: flex;
+}
+
+.mat-radio-button ~ .mat-radio-button {
+  margin-left: 16px;
+}

src/app/09. Decorator/decorator/decorator.component.ts

@@ -1,15 +1,65 @@
 import { Component, OnInit } from '@angular/core';
+import { Margherita, Pizza, Detroit, Fugazzeta } from '../models/pizza.model';
+import {
+  ExtraCheeseToppingDecorator,
+  JalapenoToppingDecorator,
+  MushroomToppingDecorator
+} from '../models/topping.decorator';
 
 @Component({
   selector: 'app-decorator',
   templateUrl: './decorator.component.html',
   styleUrls: ['./decorator.component.scss']
 })
-export class DecoratorComponent implements OnInit {
+export class DecoratorComponent {
+  public price: number;
+  public toppings: string[];
+  public pizzas: Pizza[];
 
-  constructor() { }
+  public pizza: Pizza;
 
-  ngOnInit(): void {
+  constructor() {
+    this.price = 0;
+    this.toppings = new Array<string>();
+    this.initPizzas();
   }
 
+  public btnCheese(): void {
+    const decorator = new ExtraCheeseToppingDecorator(this.pizza);
+    this.logOrder(decorator);
+  }
+
+  public btnMushrooms(): void {
+    const decorator = new MushroomToppingDecorator(this.pizza);
+    this.logOrder(decorator);
+  }
+
+  public btnJalapeno(): void {
+    const decorator = new JalapenoToppingDecorator(this.pizza);
+    this.logOrder(decorator);
+  }
+
+  public btnCheeseAndJalapeno(): void {
+    const cheeseDecorator = new ExtraCheeseToppingDecorator(this.pizza);
+    const cheeseAndJalapenoDecorator = new JalapenoToppingDecorator(cheeseDecorator);
+    this.logOrder(cheeseAndJalapenoDecorator);
+  }
+
+  public btnCheeseAndMushrooms(): void {
+    const cheeseDecorator = new ExtraCheeseToppingDecorator(this.pizza);
+    const cheeseAndMushroomDecorator = new MushroomToppingDecorator(cheeseDecorator);
+    this.logOrder(cheeseAndMushroomDecorator);
+  }
+
+  private logOrder(decorator: Pizza) {
+    this.price = decorator.getPrice();
+    this.toppings.push(decorator.getTopping());
+  }
+
+  private initPizzas() {
+    this.pizzas = new Array<Pizza>();
+    this.pizzas.push(new Margherita());
+    this.pizzas.push(new Detroit());
+    this.pizzas.push(new Fugazzeta());
+  }
 }

src/app/09. Decorator/models/email.decorator.ts

@@ -0,0 +1,43 @@
+// inspired by https://stackoverflow.com/a/2707425
+
+export interface Pizza {
+  getPrice(): number;
+  getTopping(): string;
+}
+
+class BasePizza implements Pizza {
+  protected price: number;
+  protected topping: string;
+
+  public getPrice(): number {
+    return this.price;
+  }
+
+  public getTopping(): string {
+    return this.topping;
+  }
+}
+
+export class Margherita extends BasePizza implements Pizza {
+  constructor() {
+    super();
+    this.price = 5.95;
+    this.topping = 'Pizza Margherita';
+  }
+}
+
+export class Detroit extends BasePizza implements Pizza {
+  constructor() {
+    super();
+    this.price = 7.99;
+    this.topping = 'Pizza Detroit';
+  }
+}
+
+export class Fugazzeta extends BasePizza implements Pizza {
+  constructor() {
+    super();
+    this.price = 6.89;
+    this.topping = 'Pizza Fugazzeta';
+  }
+}

src/app/09. Decorator/models/notifier.model.ts

@@ -0,0 +1,56 @@
+import { Pizza } from './pizza.model';
+
+export class ExtraCheeseToppingDecorator implements Pizza {
+  readonly priceCheese: number = 1.3;
+  protected pizza: Pizza;
+
+  constructor(pizzaToDecorate: Pizza) {
+    this.pizza = pizzaToDecorate;
+  }
+
+  public getPrice(): number {
+    return this.pizza.getPrice() + this.priceCheese;
+  }
+
+  public getTopping(): string {
+    return this.pizza.getTopping() + '.. with extra cheese';
+  }
+}
+
+export class MushroomToppingDecorator implements Pizza {
+  readonly priceMushrooms: number = 0.9;
+  protected pizza: Pizza;
+
+  constructor(pizzaToDecorate: Pizza) {
+    this.pizza = pizzaToDecorate;
+  }
+
+  public getPrice(): number {
+    return this.pizza.getPrice() + this.priceMushrooms;
+  }
+
+  public getTopping(): string {
+    return this.pizza.getTopping() + '.. with extra mushrooms';
+  }
+}
+
+export class JalapenoToppingDecorator implements Pizza {
+  readonly priceJalapeno: number = 1.5;
+  protected pizza: Pizza;
+
+  constructor(pizzaToDecorate: Pizza) {
+    this.pizza = pizzaToDecorate;
+  }
+
+  public getPrice(): number {
+    return this.pizza.getPrice() + this.priceJalapeno;
+  }
+
+  public getTopping(): string {
+    return this.pizza.getTopping() + '.. with extra jalapeno';
+  }
+
+  public extraHot(): number {
+    return 0.8;
+  }
+}

src/app/09. Decorator/models/pizza.model.ts

@@ -33,6 +33,9 @@
       <a mat-raised-button [routerLink]="['/facade']" routerLinkActive="facade" color="primary">
         Facade
       </a>
+      <a mat-raised-button [routerLink]="['/decorator']" routerLinkActive="decorator" color="primary">
+        Decorator
+      </a>
     </mat-card-content>
   </mat-card>