From 2a2892c71c6313974ef42c1b6e45e98e6676531e Mon Sep 17 00:00:00 2001
From: christophka <chris@ckapp.net>
Date: Mon, 16 Nov 2020 00:51:14 +0100
Subject: [PATCH] feat: display ingredients and preparation steps for recipe
 groups

---
 .../preparation/preparation.component.html    | 31 +++++----
 .../preparation/preparation.component.ts      | 66 +++++++++++++++++--
 .../components/recipe/recipe.component.html   |  4 +-
 .../components/recipe/recipe.component.ts     | 26 +++++++-
 4 files changed, 106 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/app/modules/domain/recipe/components/preparation/preparation.component.html b/packages/frontend/src/app/modules/domain/recipe/components/preparation/preparation.component.html
index 2dc642c..f9352e2 100644
--- a/packages/frontend/src/app/modules/domain/recipe/components/preparation/preparation.component.html
+++ b/packages/frontend/src/app/modules/domain/recipe/components/preparation/preparation.component.html
@@ -1,13 +1,20 @@
-<div
-  class="text-justify"
-  *ngIf="this.asList === false; else listTemplate"
-  [innerHTML]="this.steps"
-></div>
+<div class="mb-2" *ngFor="let group of this.preparationGroups$ | async">
+  <h5 *ngIf="group.label">{{ group.label }}</h5>
 
-<ng-template #listTemplate>
-  <ol [class]="this.recipe.stepsEnumerated ? '' : 'list-unstyled'">
-    <li *ngFor="let step of this.steps" class="mb-1">
-      {{ step }}
-    </li>
-  </ol>
-</ng-template>
+  <div
+    class="text-justify"
+    *ngIf="!this.isArray(group.steps); else listTemplate"
+    [innerHTML]="group.steps"
+  ></div>
+
+  <ng-template #listTemplate>
+    <ol
+      [class.list-unstyled]="!group.stepsEnumerated"
+      [start]="group.start || 1"
+    >
+      <li *ngFor="let step of group.steps" class="mb-1">
+        {{ step }}
+      </li>
+    </ol>
+  </ng-template>
+</div>
diff --git a/packages/frontend/src/app/modules/domain/recipe/components/preparation/preparation.component.ts b/packages/frontend/src/app/modules/domain/recipe/components/preparation/preparation.component.ts
index 8b300d2..453f0de 100644
--- a/packages/frontend/src/app/modules/domain/recipe/components/preparation/preparation.component.ts
+++ b/packages/frontend/src/app/modules/domain/recipe/components/preparation/preparation.component.ts
@@ -1,7 +1,19 @@
 import { Component, OnInit, Input } from '@angular/core';
 
 import { Recipe } from '@overckd/domain';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
+interface PreparationGroup {
+  label?: string;
+  steps: Recipe['steps'];
+  stepsEnumerated?: Recipe['stepsEnumerated'];
+  start?: number;
+}
+
+/**
+ * Component for displaying recipe preparation steps
+ */
 @Component({
   selector: 'overckd-preparation',
   templateUrl: './preparation.component.html',
@@ -10,15 +22,59 @@ import { Recipe } from '@overckd/domain';
 export class PreparationComponent implements OnInit {
   @Input() recipe: Recipe;
 
+  private recipe$: BehaviorSubject<Recipe>;
+  public preparationGroups$: Observable<PreparationGroup[]>;
+
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.recipe$ = new BehaviorSubject<Recipe>(this.recipe);
+
+    this.preparationGroups$ = this.recipe$
+      .asObservable()
+      .pipe(map(recipe => this.getPreparationGroups(recipe)));
+  }
 
-  public get steps() {
-    return this.recipe.steps;
+  public isArray(obj: any) {
+    return Array.isArray(obj);
   }
 
-  public get asList() {
-    return Array.isArray(this.steps);
+  private getPreparationGroups(recipe: Recipe): PreparationGroup[] {
+    const { groups } = recipe;
+
+    if (!groups || groups.length === 0) {
+      return [
+        {
+          steps: recipe.steps,
+          stepsEnumerated: recipe.stepsEnumerated,
+        },
+      ];
+    }
+
+    let start = 1;
+    const stepsFromGroups = groups.map<PreparationGroup>(
+      ({ label, steps, stepsEnumerated }) => {
+        const group = {
+          start,
+          label,
+          steps,
+          stepsEnumerated,
+        };
+
+        start += this.isArray(steps) ? steps.length : 1;
+
+        return group;
+      },
+    );
+
+    return [
+      ...stepsFromGroups,
+      {
+        label: 'Weitere Zubereitung',
+        start,
+        steps: recipe.steps,
+        stepsEnumerated: recipe.stepsEnumerated,
+      },
+    ];
   }
 }
diff --git a/packages/frontend/src/app/modules/domain/recipe/components/recipe/recipe.component.html b/packages/frontend/src/app/modules/domain/recipe/components/recipe/recipe.component.html
index cec3b7c..bd16b77 100644
--- a/packages/frontend/src/app/modules/domain/recipe/components/recipe/recipe.component.html
+++ b/packages/frontend/src/app/modules/domain/recipe/components/recipe/recipe.component.html
@@ -24,10 +24,10 @@
     >
     </overckd-portion-converter>
 
-    <div>
+    <div *ngIf="this.ingredients$ | async as ingredients">
       <h4 class="d-none subtitle--v2">Zutaten</h4>
       <overckd-ingredient-list
-        [ingredients]="this.recipe.ingredients"
+        [ingredients]="ingredients"
         [amountScale]="this.portionScaling"
       ></overckd-ingredient-list>
     </div>
diff --git a/packages/frontend/src/app/modules/domain/recipe/components/recipe/recipe.component.ts b/packages/frontend/src/app/modules/domain/recipe/components/recipe/recipe.component.ts
index 9c4f73c..b1dc611 100644
--- a/packages/frontend/src/app/modules/domain/recipe/components/recipe/recipe.component.ts
+++ b/packages/frontend/src/app/modules/domain/recipe/components/recipe/recipe.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, Input, HostBinding } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
-import { Recipe } from '@overckd/domain';
+import { Recipe, IngredientGroup } from '@overckd/domain';
 
 /**
  * Component to display a recipe
@@ -15,6 +17,9 @@ export class RecipeComponent implements OnInit {
   @Input() recipe: Recipe;
   @Input() numberOfLines = 5;
 
+  public recipe$: BehaviorSubject<Recipe>;
+  public ingredients$: Observable<Recipe['ingredients']>;
+
   /**
    * This is the target amount for the portion size
    */
@@ -35,7 +40,24 @@ export class RecipeComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.recipe$ = new BehaviorSubject(this.recipe);
+
+    this.ingredients$ = this.recipe$.pipe(
+      map(recipe => {
+        const { groups } = recipe;
+        const ingredientGroups = groups
+          ? groups.map<IngredientGroup>(g => ({
+              label: g.label,
+              group: g.name,
+              ingredients: g.ingredients,
+            }))
+          : [];
+
+        return [...ingredientGroups, ...recipe.ingredients];
+      }),
+    );
+  }
 
   get primaryImage() {
     return this.recipe.images[0];