From da5a3779dd1fef8c571d861d19c3397a29d6d508 Mon Sep 17 00:00:00 2001
From: Nils Dittberner <nils.dittberner@pta.de>
Date: Wed, 22 Nov 2017 14:14:01 +0100
Subject: [PATCH] 12-154 Adding recipe edit and edit navigation

---
 src/app/app-routing.module.ts                      |  5 ++++-
 src/app/app.module.ts                              |  4 +++-
 .../recipe-detail/recipe-detail.component.html     |  2 +-
 .../recipe-detail/recipe-detail.component.ts       |  9 ++++++--
 .../recipes/recipe-edit/recipe-edit.component.css  |  0
 .../recipes/recipe-edit/recipe-edit.component.html |  3 +++
 .../recipes/recipe-edit/recipe-edit.component.ts   | 24 ++++++++++++++++++++++
 .../recipes/recipe-list/recipe-list.component.html |  2 +-
 .../recipes/recipe-list/recipe-list.component.ts   | 11 +++++++++-
 9 files changed, 53 insertions(+), 7 deletions(-)
 create mode 100644 src/app/recipes/recipe-edit/recipe-edit.component.css
 create mode 100644 src/app/recipes/recipe-edit/recipe-edit.component.html
 create mode 100644 src/app/recipes/recipe-edit/recipe-edit.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 763ac23..c058c0f 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,12 +5,15 @@ import { RecipesComponent } from './recipes/recipes.component';
 import { ShoppingListComponent } from './shopping-list/shopping-list.component';
 import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
 import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
+import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
 
 const appRoutes: Routes = [
     { path: '', redirectTo: '/recipes', pathMatch: 'full' },
     { path: 'recipes' , component: RecipesComponent, children: [
         { path: '', component: RecipeStartComponent },
-        { path: ':id', component: RecipeDetailComponent }
+        { path: 'new', component: RecipeEditComponent },
+        { path: ':id', component: RecipeDetailComponent },
+        { path: ':id/edit', component: RecipeEditComponent}
     ] },
     { path: 'shopping-list', component: ShoppingListComponent }
 ];
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fc596b3..094fe7e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -16,6 +16,7 @@ import { DropdownDirective } from './shared/dropdown.directive';
 import { ShoppingListService } from './shopping-list/shopping-list.service';
 import { AppRoutingModule } from './app-routing.module';
 import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
+import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
 
 
 @NgModule({
@@ -29,7 +30,8 @@ import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.compon
     ShoppingListComponent,
     ShoppingEditComponent,
     DropdownDirective,
-    RecipeStartComponent
+    RecipeStartComponent,
+    RecipeEditComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/recipes/recipe-detail/recipe-detail.component.html b/src/app/recipes/recipe-detail/recipe-detail.component.html
index 3210f82..61b650e 100644
--- a/src/app/recipes/recipe-detail/recipe-detail.component.html
+++ b/src/app/recipes/recipe-detail/recipe-detail.component.html
@@ -18,7 +18,7 @@
       </button>
       <ul class="dropdown-menu">
         <li><a (click)="onAddToShoppingList()" style="cursor: pointer;">Add Ingredients</a></li>
-        <li><a style="cursor: pointer;">Edit Recipe</a></li>
+        <li><a style="cursor: pointer;" (click)="onEditRecipe()">Edit Recipe</a></li>
         <li><a style="cursor: pointer;">Delete Recipe</a></li>
       </ul>
     </div>
diff --git a/src/app/recipes/recipe-detail/recipe-detail.component.ts b/src/app/recipes/recipe-detail/recipe-detail.component.ts
index 23cdcea..65a82c3 100644
--- a/src/app/recipes/recipe-detail/recipe-detail.component.ts
+++ b/src/app/recipes/recipe-detail/recipe-detail.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+
 import { Recipe } from '../recipe.model';
 import { RecipeService } from '../recipe.service';
-import { ActivatedRoute, Params } from '@angular/router';
 
 @Component({
   selector: 'app-recipe-detail',
@@ -13,7 +14,8 @@ export class RecipeDetailComponent implements OnInit {
   id: number;
   
   constructor(private recipeService: RecipeService,
-    private route: ActivatedRoute) { }
+              private route: ActivatedRoute,
+              private router: Router) { }
 
   ngOnInit() {
     this.route.params.subscribe(
@@ -28,4 +30,7 @@ export class RecipeDetailComponent implements OnInit {
     this.recipeService.addIngredientsToShoppingList(this.recipe.ingredients);
   }
 
+  onEditRecipe() {
+    this.router.navigate(['edit'], {relativeTo: this.route});
+  }
 }
diff --git a/src/app/recipes/recipe-edit/recipe-edit.component.css b/src/app/recipes/recipe-edit/recipe-edit.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/recipes/recipe-edit/recipe-edit.component.html b/src/app/recipes/recipe-edit/recipe-edit.component.html
new file mode 100644
index 0000000..786f11f
--- /dev/null
+++ b/src/app/recipes/recipe-edit/recipe-edit.component.html
@@ -0,0 +1,3 @@
+<p>
+  recipe-edit works!
+</p>
diff --git a/src/app/recipes/recipe-edit/recipe-edit.component.ts b/src/app/recipes/recipe-edit/recipe-edit.component.ts
new file mode 100644
index 0000000..738c7bd
--- /dev/null
+++ b/src/app/recipes/recipe-edit/recipe-edit.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+
+@Component({
+  selector: 'app-recipe-edit',
+  templateUrl: './recipe-edit.component.html',
+  styleUrls: ['./recipe-edit.component.css']
+})
+export class RecipeEditComponent implements OnInit {
+  id: number;
+  editMode: boolean = false;
+
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.id = +params['id'];
+        this.editMode = params['id'] != null;
+      }
+    );
+  }
+
+}
diff --git a/src/app/recipes/recipe-list/recipe-list.component.html b/src/app/recipes/recipe-list/recipe-list.component.html
index ef855f6..8b7ecc0 100644
--- a/src/app/recipes/recipe-list/recipe-list.component.html
+++ b/src/app/recipes/recipe-list/recipe-list.component.html
@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-xs-12">
-    <button class="btn btn-success">New Recipe</button>
+    <button class="btn btn-success" (click)="onNewRecipe()">New Recipe</button>
   </div>
 </div>
 <hr>
diff --git a/src/app/recipes/recipe-list/recipe-list.component.ts b/src/app/recipes/recipe-list/recipe-list.component.ts
index 094cedd..8344e46 100644
--- a/src/app/recipes/recipe-list/recipe-list.component.ts
+++ b/src/app/recipes/recipe-list/recipe-list.component.ts
@@ -1,7 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
 import { Recipe } from '../recipe.model';
 import { RecipeService } from '../recipe.service';
 
+
 @Component({
   selector: 'app-recipe-list',
   templateUrl: './recipe-list.component.html',
@@ -10,9 +13,15 @@ import { RecipeService } from '../recipe.service';
 export class RecipeListComponent implements OnInit {
   recipes: Recipe[];
 
-  constructor(private recipeService: RecipeService) { }
+  constructor(private recipeService: RecipeService,
+              private router: Router,
+              private route: ActivatedRoute) { }
 
   ngOnInit() {
     this.recipes = this.recipeService.getRecipes();
   }
+
+  onNewRecipe() {
+    this.router.navigate(['new'], {relativeTo: this.route});
+  }
 }