feature(): add facade pattern

Author: Patrick

src/app/01. Abstract Factory/abstract-factory/abstract-factory.component.html

@@ -5,7 +5,7 @@
     [style.fontFamily]="selectedTheme.getFontName()"
   >
     <h1>
-      Abstract Factory
+      Abstract Factory Pattern
     </h1>
 
     <div>

src/app/02. Singleton/singleton/singleton.component.html

@@ -1,7 +1,7 @@
 
 <div class="container">
   <h1>
-    Singleton
+    Singleton Pattern
   </h1>
   <div class="description">
     id stays the same, because we don't create a new instance. If you reload the page, there would be a new instance, because the component (parent of teas) is destroyed and initialized

src/app/03. Prototype/prototype/prototype.component.html

@@ -1,6 +1,6 @@
 <div class="container">
   <h1>
-    Prototype
+    Prototype Pattern
   </h1>
   <mat-card>
     <mat-card-title>

src/app/04. Builder/builder/builder.component.html

@@ -1,6 +1,6 @@
 <div class="container">
   <h1>
-    Builder
+    Builder Pattern
   </h1>
   <div class="content">
     <mat-card *ngFor="let house of houses; index as i">

src/app/05. Factory Method/factory-method/factory-method.component.html

@@ -1,6 +1,6 @@
 <div class="container">
   <h1>
-    Factory Method
+    Factory Method Pattern
   </h1>
   <mat-card>
     <mat-card-title>

src/app/06. Adapter/adapter/adapter.component.html

@@ -1,6 +1,6 @@
 <div class="container">
   <h1>
-    Adapter
+    Adapter Pattern
   </h1>
   <div class="content">
     <mat-card>

src/app/07. Bridge/.gitkeep

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FacadeComponent } from './facade/facade.component';
+
+const routes: Routes = [{ path: '', component: FacadeComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class FacadeRoutingModule { }

src/app/08. Composite/.gitkeep

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FacadeRoutingModule } from './facade-routing.module';
+import { FacadeComponent } from './facade/facade.component';
+import {AngularMaterialModule} from "../modules/angular-material.module";
+
+
+@NgModule({
+  declarations: [FacadeComponent],
+  imports: [
+    CommonModule,
+    FacadeRoutingModule,
+    AngularMaterialModule
+  ]
+})
+export class FacadeModule { }

src/app/09. Decorator/.gitkeep

@@ -0,0 +1,21 @@
+<div class="container">
+  <h1>
+    Facade Pattern
+  </h1>
+  <div class="content">
+    <mat-card>
+      <mat-card-title>
+        Coffee factory log
+      </mat-card-title>
+      <mat-card-actions>
+        <button mat-raised-button (click)="btnProduceCoffee()">Make coffee</button>
+      </mat-card-actions>
+      <mat-card-content>
+        <div *ngFor="let log of logProduction">
+          {{ log }}
+          <div>-------</div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>

src/app/10. Facade/facade-routing.module.ts

@@ -0,0 +1,20 @@
+div {
+  text-align: center;
+}
+
+div.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+div.content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+mat-card {
+  margin: 15px;
+  max-width: 300px;
+}

src/app/10. Facade/facade.module.ts

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

src/app/10. Facade/facade/facade.component.html

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import {CoffeeFacade, Facade} from "../models/facade.model";
+
+@Component({
+  selector: 'app-facade',
+  templateUrl: './facade.component.html',
+  styleUrls: ['./facade.component.scss']
+})
+export class FacadeComponent implements OnInit {
+  public logProduction: string[];
+  private facade: Facade;
+
+  constructor() {
+    this.facade = new CoffeeFacade();
+    this.logProduction = new Array<string>();
+  }
+
+  ngOnInit(): void {
+  }
+
+  public btnProduceCoffee() {
+    const log = this.facade.produce();
+    console.log(log);
+    this.logProduction.push(log);
+  }
+
+}

src/app/10. Facade/facade/facade.component.scss

@@ -0,0 +1,9 @@
+export interface Drink {
+  cook(): string;
+}
+
+export class Coffee implements Coffee {
+  public cook(): string {
+    return 'cook coffee...';
+  }
+}

src/app/10. Facade/facade/facade.component.spec.ts

@@ -0,0 +1,29 @@
+import {CoffeeTrader, Trader} from "./trader.model";
+import {CoffeeMill, Mill} from "./mill.model";
+import {Coffee, Drink} from "./drink.model";
+
+export interface Facade {
+  produce(): string;
+}
+
+export class CoffeeFacade implements Facade {
+  protected trader: Trader;
+  protected mill: Mill;
+  protected drink: Drink;
+
+  constructor(trader: Trader = null,
+              mill: Mill = null,
+              drink: Drink = null) {
+    this.trader = trader || new CoffeeTrader();
+    this.mill = mill || new CoffeeMill();
+    this.drink = drink || new Coffee();
+  }
+
+  public produce(): string {
+    let result = 'Start producing coffee...';
+    result += this.trader.getCoffee();
+    result += this.mill.grindCoffee();
+    result += this.drink.cook();
+    return result;
+  }
+}

src/app/10. Facade/facade/facade.component.ts

@@ -0,0 +1,9 @@
+export interface Mill {
+  grindCoffee(): string;
+}
+
+export class CoffeeMill implements Mill {
+  public grindCoffee(): string {
+    return 'grind coffee...';
+  }
+}

src/app/10. Facade/models/drink.model.ts

@@ -0,0 +1,9 @@
+export interface Trader {
+  getCoffee(): string;
+}
+
+export class CoffeeTrader implements Trader {
+  public getCoffee() {
+    return 'get coffee from Brazil..';
+  }
+}

src/app/10. Facade/models/facade.model.ts

@@ -2,6 +2,10 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 const routes: Routes = [
+  {
+    path: 'home',
+    loadChildren: () => import('./xx. components/Home/home.module').then(m => m.HomeModule)
+  },
   {
     path: 'abstract-factory',
     loadChildren: () => import('./01. Abstract Factory/abstract-factory.module').then(m => m.AbstractFactoryModule)
@@ -26,10 +30,14 @@ const routes: Routes = [
     loadChildren: () => import('./06. Adapter/adapter.module').then(m => m.AdapterModule)
   },
   {
-    path: 'home',
-    loadChildren: () => import('./xx. components/Home/home.module').then(m => m.HomeModule)
+    path: 'facade',
+    loadChildren: () => import('./10. Facade/facade.module').then(m => m.FacadeModule)
   },
-  { path: '',   redirectTo: '/home', pathMatch: 'full' }
+  {
+    path: '',
+    redirectTo: '/home', pathMatch: 'full'
+  }
+
 ];
 
 @NgModule({

src/app/10. Facade/models/mill.model.ts

@@ -1,22 +1,39 @@
-<mat-card>
-  <mat-card-title>
-    Creational Pattern
-  </mat-card-title>
-  <mat-card-content>
-    <a mat-raised-button [routerLink]="['/abstract-factory']" routerLinkActive="abstract-factory" color="primary">
-      Abstract Factory
-    </a>
-    <a mat-raised-button [routerLink]="['/factory-method']" routerLinkActive="factory-method" color="primary">
-      Factory Method
-    </a>
-    <a mat-raised-button [routerLink]="['/builder']" routerLinkActive="builder" color="primary">
-      Builder
-    </a>
-    <a mat-raised-button [routerLink]="['/singleton']" routerLinkActive="singleton" color="primary">
-      Singleton
-    </a>
-    <a mat-raised-button [routerLink]="['/prototype']" routerLinkActive="prototype" color="primary">
-      Prototype
-    </a>
-  </mat-card-content>
-</mat-card>
+<div class="container">
+  <mat-card>
+    <mat-card-title>
+      Creational Patterns
+    </mat-card-title>
+    <mat-card-content>
+      <a mat-raised-button [routerLink]="['/abstract-factory']" routerLinkActive="abstract-factory" color="primary">
+        Abstract Factory
+      </a>
+      <a mat-raised-button [routerLink]="['/factory-method']" routerLinkActive="factory-method" color="primary">
+        Factory Method
+      </a>
+      <a mat-raised-button [routerLink]="['/builder']" routerLinkActive="builder" color="primary">
+        Builder
+      </a>
+      <a mat-raised-button [routerLink]="['/singleton']" routerLinkActive="singleton" color="primary">
+        Singleton
+      </a>
+      <a mat-raised-button [routerLink]="['/prototype']" routerLinkActive="prototype" color="primary">
+        Prototype
+      </a>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card>
+    <mat-card-title>
+      Structural Patterns
+    </mat-card-title>
+    <mat-card-content>
+      <a mat-raised-button [routerLink]="['/adapter']" routerLinkActive="adapter" color="primary">
+        Adapter
+      </a>
+      <a mat-raised-button [routerLink]="['/facade']" routerLinkActive="facade" color="primary">
+        Facade
+      </a>
+    </mat-card-content>
+  </mat-card>
+
+</div>

src/app/10. Facade/models/trader.model.ts

@@ -1,5 +1,10 @@
+div.container {
+  display: flex;
+  flex-direction: row;
+}
 mat-card {
   text-align: center;
+  margin: 15px;
 }
 
 mat-card-content {