1 files changed, 65 insertions, 0 deletions
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.ts b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.ts
new file mode 100644
index 0000000..710b967
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/toolbar/toolbar.component.ts
@@ -0,0 +1,65 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { LocalStorageService } from 'src/app/shared/services/local-storage.service';
+import { RecipesService } from 'src/app/shared/services/recipes.service';
+import { slugify } from 'src/app/shared/utilities/slugify';
+
+@Component({
+  selector: 'toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss'],
+})
+export class ToolbarComponent {
+  @Output() isEditionMode = new EventEmitter<boolean>();
+  isEditionEnabled: boolean = false;
+  recipeId = history.state?.id;
+  savedRecipes: object[] = this.storage.get('recipes');
+  toggleLabel: string = 'Edition disabled';
+
+  constructor(
+    private storage: LocalStorageService,
+    private recipes: RecipesService,
+    private router: Router
+  ) {}
+
+  isSavedRecipe(): boolean {
+    let recipeIndex;
+
+    if (this.recipeId) {
+      recipeIndex = this.savedRecipes.findIndex(
+        (recipe: any) => recipe.idMeal === this.recipeId
+      );
+    } else {
+      const slug = this.router.url.replace('/recipe/', '');
+      recipeIndex = this.savedRecipes.findIndex(
+        (recipe: any) => recipe.slug === slug
+      );
+    }
+
+    return recipeIndex === -1 ? false : true;
+  }
+
+  shouldDisplaySave(): boolean {
+    return !this.isSavedRecipe();
+  }
+
+  saveRecipe(): void {
+    this.recipes.getRecipeById(this.recipeId).subscribe((recipe: any) => {
+      const currentRecipe = recipe.meals[0];
+      const newRecipe = {
+        ...currentRecipe,
+        slug: slugify(currentRecipe.strMeal),
+      };
+      this.savedRecipes.push(newRecipe);
+      this.storage.set('recipes', this.savedRecipes);
+    });
+  }
+
+  toggleEdition() {
+    this.isEditionEnabled = !this.isEditionEnabled;
+    this.toggleLabel = this.isEditionEnabled
+      ? 'Edition enabled'
+      : 'Edition disabled';
+    this.isEditionMode.emit(this.isEditionEnabled);
+  }
+}