feature/ingredients and preparation steps for recipe groups

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>

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,
+      },
+    ];
   }
 }

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>

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];