Added the ability to delete a Recipe

application/recipes/database_recipes.py

@@ -199,3 +199,17 @@ def postDeleteRecipeItem(site:str, payload:tuple, convert:bool=True):
             elif rows and not convert:
                 deleted = rows
     return deleted
+
+def deleteRecipe(site:str, payload:tuple, convert:bool=True):
+    database_config = config.config()
+    deleted = ()
+    sql = f"DELETE FROM {site}_recipes WHERE id=%s RETURNING *;"
+    with psycopg2.connect(**database_config) as conn:
+        with conn.cursor() as cur:
+            cur.execute(sql, payload)
+            rows = cur.fetchone()
+            if rows and convert:
+                deleted = postsqldb.tupleDictionaryFactory(cur.description, rows)
+            elif rows and not convert:
+                deleted = rows
+    return deleted

application/recipes/recipes_api.py

@@ -46,6 +46,16 @@ def getRecipes():
         return jsonify({'recipes': recipes, 'end': math.ceil(count/limit), 'error': False, 'message': 'fetch was successful!'})
     return jsonify({'recipes': recipes, 'end': math.ceil(count/limit), 'error': True, 'message': f'method is not allowed: {request.method}'})
 
+@recipes_api.route('/api/deleteRecipe', methods=["POST"])
+@access_api.login_required
+def deleteRecipe():
+    if request.method == "POST":
+        recipe_id = request.get_json()['recipe_id']
+        site_name = session['selected_site']
+        database_recipes.deleteRecipe(site_name, (recipe_id, ))
+        return jsonify(status=201, message="Recipe deleted successfully!")
+    return jsonify(status=405, message=f"{request.method} is not an allowed method on this endpoint.")
+
 @recipes_api.route('/getRecipe', methods=["GET"])
 @access_api.login_required
 def getRecipe():

application/recipes/static/js/recipesListHandler.js

@@ -177,17 +177,25 @@ async function replenishRecipesCards() {
         footer_div.style = 'height: 40px; border: none;'
 
         let editOp = document.createElement('a')
-        editOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
+        editOp.setAttribute('class', 'uk-button uk-button-small uk-button-primary')
         editOp.innerHTML = '<span uk-icon="icon: pencil"></span>   Edit'
         editOp.style = "margin-right: 10px;"
         editOp.href = `/recipes/edit/${recipes[i].id}`
 
         let viewOp = document.createElement('a')
-        viewOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
+        viewOp.setAttribute('class', 'uk-button uk-button-small uk-button-primary')
         viewOp.innerHTML = '<span uk-icon="icon: eye"></span>    View'
         viewOp.href = `/recipes/view/${recipes[i].id}`
 
-        footer_div.append(editOp, viewOp)
+        let deleteOp = document.createElement('button')
+        deleteOp.setAttribute('class', 'uk-button uk-button-small uk-button-danger')
+        deleteOp.innerHTML = '<span uk-icon="icon: trash"></span>    Delete'
+        deleteOp.onclick = async function() {
+            await openDeleteRecipeModal(recipes[i].id)
+        }
+        
+        
+        footer_div.append(editOp, viewOp, deleteOp)
 
         main_div.append(card_header_div, body_div, footer_div)
 
@@ -242,6 +250,53 @@ async function addRecipe() {
 
 }
 
+var select_recipe_id_to_delete = 0
+async function openDeleteRecipeModal(recipe_id) {
+    select_recipe_id_to_delete = recipe_id
+    document.getElementById('deleteRecipeConfirm').value = ""
+    UIkit.modal(document.getElementById('deleteRecipeModal')).show();
+}
+
+
+async function deleteRecipe() {
+    let confirm = String(document.getElementById('deleteRecipeConfirm').value)
+    if (confirm === "DELETE"){
+        const response = await fetch(`/recipes/api/deleteRecipe`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                recipe_id: select_recipe_id_to_delete
+            }),
+        });
+        data =  await response.json();
+        transaction_status = "success"
+        if (data.error){
+            transaction_status = "danger"
+        }
+
+        UIkit.notification({
+            message: data.message,
+            status: transaction_status,
+            pos: 'top-right',
+            timeout: 5000
+        });
+        recipes = await getRecipes()
+        await replenishRecipes()
+        await updatePaginationElement()
+        UIkit.modal(document.getElementById('deleteRecipeModal')).hide();
+    } else {
+        UIkit.modal(document.getElementById('deleteRecipeModal')).hide();
+        UIkit.notification({
+            message: "Confirmation Incorrect!",
+            status: "danger",
+            pos: 'top-right',
+            timeout: 5000
+        });
+    }
+}
+
 async function updatePaginationElement() {
     let paginationElement = document.getElementById("paginationElement");
     paginationElement.innerHTML = "";

application/recipes/templates/recipes_index.html

@@ -156,6 +156,26 @@
                 </div>
             </div>
         </div>
+        <!-- Delete Recipe modal -->
+        <div id="deleteRecipeModal" uk-modal>
+            <div class="uk-modal-dialog">
+                <button class="uk-modal-close-default" type="button" uk-close></button>
+                <div class="uk-modal-header">
+                    <h2 class="uk-modal-title">Delte Recipe...</h2>
+                </div>
+                <div class="uk-modal-body">
+                    <p class="uk-text-meta">You are attempting to delete something that will be hard to get back, please confirm you want to 
+                        complete this action by typing the <strong>DELETE</strong> in the box below!</p>
+                    </p>
+                    <div class="uk-margin">
+                        <input id="deleteRecipeConfirm" class="uk-input" type="text" placeholder="" aria-label="Input">
+                    </div>
+                </div>
+                <div class="uk-modal-footer">
+                    <button onclick="deleteRecipe()" class="uk-button uk-button-default uk-align-right" type="button">Delete Recipe</button>
+                </div>
+            </div>
+        </div>
     </body>
     <script>
         const session = {{session|tojson}}