Add front end changing of quantity

views/inventory/inventory.css

@@ -18,6 +18,13 @@
         min-width: 150px;
         cursor: pointer;
     }
+    th:nth-of-type(5){
+        border: none;
+        background: none;
+        color: white;
+        min-width: 0;
+        cursor: auto;
+    }
 
     td{
         border: 1px solid black;
@@ -25,7 +32,16 @@
         padding: 1px 10px;
     }
 
+    td:nth-of-type(5n){
+        border: none;
+    }
+
     .input-new{
         display: flex;
         flex-wrap: nowrap;
+    }
+
+    .edit-button{
+        padding: 0;
+        margin: 0;
     }

views/inventory/inventory.ejs

@@ -19,6 +19,7 @@
                         <th onclick="sortIngredients('category')">Category</th>
                         <th onclick="sortIngredients('quantity')">Quantity</th>
                         <th onclick="sortIngredients('unit')">Unit</th>
+                        <th></th>
                     </tr>
                     <tbody></tbody>
                 </thead>

views/inventory/inventory.js

@@ -25,6 +25,14 @@ let renderIngredients = ()=>{
         let unit = document.createElement("td");
         unit.innerText = item.unit;
         row.appendChild(unit);
+
+        let action = document.createElement("td");
+        row.appendChild(action);
+        let editBtn = document.createElement("button");
+        editBtn.onclick = ()=>{editThis(item.id, row)};
+        editBtn.innerText = "Edit";
+        editBtn.className = "edit-button"
+        action.appendChild(editBtn);
     }
 }
 
@@ -39,6 +47,7 @@ let filter = ()=>{
     for(let item of merchant.inventory){
         if(item.ingredient.name.toLowerCase().includes(searchString)){
             items.push({
+                id: item.ingredient._id,
                 name: item.ingredient.name,
                 category: item.ingredient.category,
                 quantity: item.quantity,
@@ -51,4 +60,30 @@ let filter = ()=>{
     renderIngredients(items);
 }
 
+let editThis = (id, row)=>{
+    let quantity = row.childNodes[2];
+    let button = row.childNodes[4].childNodes[0];
+
+    let quantityInput = document.createElement("input");
+    quantityInput.type = "number";
+    quantityInput.step = "0.01";
+    quantityInput.value = quantity.innerText;
+
+    quantity.innerText = "";
+    quantity.appendChild(quantityInput);
+
+    button.innerText = "Save";
+    button.onclick = ()=>{updateOne(id, row)};
+}
+
+let updateOne = (id, row)=>{
+    let quantityField = row.childNodes[2];
+    let quantity = quantityField.childNodes[0].value;
+
+    quantityField.removeChild(quantityField.firstChild);
+    quantityField.innerText = quantity;
+
+    row.childNodes[4].childNodes[0].innerText = "Edit";
+}
+
 filter();