Add modal for editing sub ingredients of an ingredient.

views/dashboardPage/dashboard.css

@@ -807,6 +807,13 @@ Modal
             width: 100%;
         }
 
+    
+    #modalEditSubIngredients{
+        flex-direction: column;
+        align-items: center;
+        background: white;
+    }
+
 @media screen and (orientation: portrait){
     @media screen and (max-width: 1400px){
         body{

views/dashboardPage/ejs/modal.ejs

@@ -57,6 +57,30 @@
 
                 <button id="squareLocationsCancel" class="dangerButton">CANCEL</button>
             </div>
+
+            <div id="modalEditSubIngredients" style="display:none">
+                <h2>Edit Sub Ingredients</h2>
+
+                <div id="editSubIngredientsContainer">
+                    <div id="editSubAllIng"></div>
+                    <div id="verticalBorder"></div>
+                    <div id="editSubCurrentIng"></div>
+                </div>
+
+                <button id="submitEditSubIngredients" class="button">CONFIRM</button>
+
+                <template id="selectedSubIngredient">
+                    <div class="selectedIngredient">
+                        <div>
+                            <p></p>
+            
+                            <button class="newOrderRemove">REMOVE</button>
+                        </div>
+                        
+                        <input type="number" min="0" step="0.01" placeholder="QUANTITY">
+                    </div>
+                </template>
+            </div>
         </div>
     </div>
 </div>

views/dashboardPage/ejs/sidebars/editIngredient.ejs

@@ -26,7 +26,7 @@
     
     <h3>SUB INGREDIENTS</h3>
 
-    <div id="subIngredientList"></div>
+    <button id="editSubIngredients" class="sidebarButton">EDIT</button>
 
     <div class="lineBorder"></div>
 

views/dashboardPage/ejs/sidebars/newOrder.ejs

@@ -48,7 +48,6 @@
                 <button class="newOrderRemove">REMOVE</button>
             </div>
             
-
             <div>
                 <input type="number" min="0" step="0.01" placeholder="QUANTITY">
 

views/dashboardPage/js/classes/Ingredient.js

@@ -7,7 +7,7 @@ class Ingredient{
         this._unit = unit;
         this._parent = parent;
         this._unitSize = unitSize;
-        this._ingredients = [];
+        this._subIngredients = [];
     }
 
     get id(){
@@ -82,6 +82,19 @@ class Ingredient{
         this._unitSize = unitSize;
     }
 
+    get subIngredients(){
+        return this._subIngredients;
+    }
+
+    addIngredients(ingredients){
+        for(let i = 0; i < ingredients.length; i++){
+            this.subIngredients.push({
+                ingredient: this._parent.getIngredient(ingredients[i].ingredient).ingredient,
+                quantity: ingredients[i].quantity
+            });
+        }
+    }
+
     getBaseUnitSize(){
         return this._unitSize;
     }
@@ -100,19 +113,7 @@ class Ingredient{
         if(length.includes(this._unit)) return length;
         if(this._unit === "bottle") return volume;
         return [];
-    }
-
-    addIngredients(ingredients){
-        for(let i = 0; i < ingredients.length; i++){
-            // console.log(typeof(ingredients[i].ingredient));
-            // console.log(this._parent.getIngredient(ingredients[i].ingredient));
-            // console.log();
-            this._ingredients.push({
-                ingredient: this._parent.getIngredient(ingredients[i].ingredient),
-                quantity: ingredients[i].quantity
-            });
-        }
-    }
+    }    
 }
 
 module.exports = Ingredient;

views/dashboardPage/js/classes/Merchant.js

@@ -215,18 +215,14 @@ class Merchant{
 
     removeIngredient(ingredient){
         const index = this._ingredients.indexOf(ingredient);
-        if(index === undefined){
-            return false;
-        }
+        if(index === undefined) return false;
 
         this._ingredients.splice(index, 1);
     }
 
     getIngredient(id){
         for(let i = 0; i < this._ingredients.length; i++){
-            if(this._ingredients[i].ingredient.id === id){
-                return this._ingredients[i];
-            }
+            if(this._ingredients[i].ingredient.id === id) return this._ingredients[i];
         }
     }
 
@@ -236,9 +232,7 @@ class Merchant{
 
     getRecipe(id){
         for(let i = 0; i < this._recipes.length; i++){
-            if(this._recipes[i].id === id){
-                return this._recipes[i];
-            }
+            if(this._recipes[i].id === id) return this._recipes[i];
         }
     }
 

views/dashboardPage/js/dashboard.js

@@ -267,6 +267,9 @@ controller = {
             case "squareLocations":
                 modalScript.squareLocations(data);
                 break;
+            case "editSubIngredients":
+                modalScript.editSubIngredients(data);
+                break;
         }
     },
 

views/dashboardPage/js/modal.js

@@ -149,6 +149,33 @@ let modal = {
             .finally(()=>{
                 loader.style.display = "none";
             });
+    },
+
+    editSubIngredients: function(ingredient){
+        document.getElementById("modalEditSubIngredients").style.display = "flex";
+
+        let left = document.getElementById("editSubAllIng");
+        let right = document.getElementById("editSubCurrentIng");
+        let template = document.getElementById("selectedSubIngredient").content.children[0];
+
+        for(let i = 0; i < merchant.ingredients.length; i++){
+            let skip = false;
+            for(let j = 0; j < ingredient.subIngredients.length; j++){
+                if(merchant.ingredients[i].ingredient === ingredient.subIngredients[j].ingredient){
+                    let div = template.cloneNode(true);
+                    div.children[0].children[0].innerText = merchant.ingredients[i].ingredient.name;
+                    right.appendChild(div);
+                    skip = true;
+                    break;
+                }
+            }
+            if(skip === true) continue;
+
+            let button = document.createElement("button");
+            button.innerText = merchant.ingredients[i].ingredient.name;
+            button.classList.add("choosable");
+            left.appendChild(button);
+        }
     }
 };
 

views/dashboardPage/js/sidebars/editIngredient.js

@@ -4,6 +4,8 @@ let editIngredient = {
         let quantLabel = document.getElementById("editIngQuantityLabel");
         let specialLabel = document.getElementById("editSpecialLabel");
 
+        document.getElementById("editSubIngredients").onclick = ()=>{controller.openModal("editSubIngredients", ingredient.ingredient)};
+
         //Clear any existing data
         while(buttonList.children.length > 0){
             buttonList.removeChild(buttonList.firstChild);
@@ -32,13 +34,6 @@ let editIngredient = {
             specialLabel.style.display = "none";
         }
 
-        //Populate sub ingredients
-        let list = document.getElementById("subIngredientList");
-
-        while(list.children.length > 0){
-            list.removeChild(list.firstChild);
-        }
-
         //Populate the unit buttons
         const units = ingredient.ingredient.getPotentialUnits();
 

views/dashboardPage/sidebars.css

@@ -226,6 +226,11 @@
         cursor: pointer;
     }
 
+.verticalBorder{
+    border-left: 2px solid black;
+    height: 100%;
+}
+
 /* 
 Ingredient Details 
 */