Add ability to delete (hide) recipes

src/components/EditRecipePage.vue

@@ -12,7 +12,7 @@
 
     <div v-if="!parse_failed && recipe">
         <div class="image-container" v-if="image_styling" :style="image_styling" ></div>
-        <h1><input class="recipe-name" type="text" :value="recipe.name"></h1>
+        <h1><input class="recipe-name" type="text" v-model="recipe.name" /></h1>
         <h3 class="recipe-link"><a :href="recipe.link">View Recipe</a></h3>
         <h2>Ingredients</h2>
         <ul>
@@ -29,7 +29,10 @@
         </ul>
 
         <button @click="addIngredient">Add Ingredient</button>
-        <button class="submit-btn" @click="saveRecipe">Save</button>
+        <div>
+            <button v-if="recipe.id" class="delete-btn" @click="deleteRecipe">Delete</button>
+            <button class="submit-btn" @click="saveRecipe">{{ recipe.id ? "Save" : "Create" }}</button>
+        </div>
     </div>
 </div>
 </template>
@@ -173,6 +176,12 @@ export default {
         },
         addIngredient() {
             this.recipe.ingredients.push({ line: '', product: null });
+        },
+        async deleteRecipe() {
+            if (confirm('Are you sure you want to delete this recipe?')) {
+                await data.deleteRecipe(this.recipe.id);
+                this.$router.push('/');
+            }
         }
     },
 }

src/data.js

@@ -115,5 +115,11 @@ export default {
 
         user = await response.json();
         return user;
+    },
+    async deleteRecipe(id) {
+        var response = await fetch(BASE_URL + `/recipes/${encodeURIComponent(id)}`, {
+            method: "DELETE",
+        });
+        return await response.json();
     }
 }