Merge branch '19-edit-single-list-entries-without-deleting-and-readding' into 'develop'

Resolve "Edit Single list Entries without deleting and readding"

See merge request bluekay/shopping-list!15

README.md

@@ -1,3 +1,9 @@
+# Shoutout!
+We Use BrowserStack for cross browser testing, as it provides full testing capabillities within one application.
+
+[ ![BrowserStack](https://live.browserstack.com/favicon.ico) BrowserStack](https://www.browserstack.com)
+
+
 # Requirements
 
 ## Apache Modules:

cont/list.php

@@ -6,53 +6,70 @@
   <form action="api/list/new" method="post" class="d-flex flex-column">
     <button type="button" id="remove" class="btn btn-primary align-self-end mt-4">Auswahl entfernen</button>
     <?php
-      include $_SESSION["docroot"].'/php/classes.list.php';
+    include $_SESSION["docroot"] . '/php/classes.list.php';
-      $units = new units;
+    $units = new units;
-      $shopping = new shopping;
+    $shopping = new shopping;
 
-      $div_item_row_classes = "d-flex flex-row justify-content-start align-items-center rounded-lg mt-1 text-light";
+    $div_item_row_classes = "d-flex flex-row justify-content-start align-items-center rounded-lg mt-1 text-light";
-      $div_item_checkbox_classes = "align-self-center p-1 pl-2";
+    $div_item_checkbox_classes = "align-self-center p-1 pl-2";
-      $input_item_checkbox_classes = "checkbox";
+    $input_item_checkbox_classes = "checkbox";
-      $div_item_quantity_classes = "p-1 col-3";
+    $div_item_quantity_classes = "p-1 col-3";
-      $div_item_name_classes = "p-1 font-weight-bold";
+    $div_item_name_classes = "p-1 font-weight-bold";
+    $div_item_menu = "ml-auto mr-2";
+    $button_dropdown_classes = "dropdown-menu-button btn text-light pt-0 pb-0";
 
-      foreach ($shopping->list as $index => $item) {
+    foreach ($shopping->list as $index => $item) {
-        if($index%2==0){$color_theme = "bg-primary";}
+      if ($index % 2 == 0) {
-        else{$color_theme = "bg-secondary";}
+        $color_theme = "bg-primary";
-        if($item->Erledigt){
+      } else {
-          $div_item_row_color_classes = "bg-success";
+        $color_theme = "bg-secondary";
-          $checked = "checked";
-        }
-        else{
-          $div_item_row_color_classes = $color_theme;
-          $checked = "";
-        }
-
-        print_r("<div class='list-row $div_item_row_classes $div_item_row_color_classes'>");
-            print_r("<div class='$div_item_checkbox_classes'><input type='checkbox' class='$input_item_checkbox_classes' data-color='$color_theme' data-id='$item->ID' $checked></div>");
-            print_r("<div class='$div_item_quantity_classes'>$item->Anzahl $item->Einheit</div>");
-            print_r("<div class='$div_item_name_classes'>$item->Name</div>");
-        print_r("</div>");
       }
+      if ($item->Erledigt) {
+        $div_item_row_color_classes = "bg-success";
+        $checked = "checked";
+      } else {
+        $div_item_row_color_classes = $color_theme;
+        $checked = "";
+      }
+
+      print_r("<div class='list-row $div_item_row_classes $div_item_row_color_classes'>");
+        print_r("<div class='$div_item_checkbox_classes'><input type='checkbox' class='$input_item_checkbox_classes' data-color='$color_theme' data-id='$item->ID' $checked></div>");
+        print_r("<div class='list-row-amount $div_item_quantity_classes' data-amount='$item->Anzahl' data-unit='$item->Einheit'>$item->Anzahl $item->Einheit</div>");
+        print_r("<div class='list-row-name $div_item_name_classes'>$item->Name</div>");
+        print_r("<div class='$div_item_menu dropdown'>");
+          print_r("<button type='button' class='$button_dropdown_classes' id='dropdown-menu-button-dataID-" . $item->ID . "' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>");
+            print_r("<i class='fas fa-angle-down'></i>");
+          print_r("</button>");
+          print_r("<div class='dropdown-menu dropdown-menu-right' aria-labelledby='dropdown-menu-button-dataID-" . $item->ID . "'>");
+            print_r("<button type='button' class='edit-listitem dropdown-item'><i class='fas fa-edit'></i> Bearbeiten</button>");
+            print_r("<button type='button' class='del-listitem dropdown-item'><i class='fas fa-trash-alt'></i> Löschen</button>");
+          print_r("</div>");
+        print_r("</div>");
+      print_r("</div>");
+    }
     ?>
 
     <div class="input-group mb-3 mt-3" data-id='new'>
       <div class="input-group-prepend col-3 p-0">
-        <input type='number' name='anzahl' value='1' class='w-50'>
+        <input type='number' name='anzahl' value='1' step=".25" class='form-control w-50 mr-1'>
-        <select class="w-50" name="einheit">
+        <select class="form-control w-50 mr-1" name="einheit">
           <?php
-            foreach ($units->list as $index => $unit) {
+          foreach ($units->list as $index => $unit) {
-              if($unit->Standard){$selected="selected";}else{$selected=NULL;}
+            if ($unit->Standard) {
-              print_r("<option value='$unit->ID' $selected>$unit->Name</option>");
+              $selected = "selected";
+            } else {
+              $selected = NULL;
             }
+            print_r("<option value='$unit->ID' $selected>$unit->Name</option>");
+          }
           ?>
         </select>
       </div>
-      <input type="text" name='name' class="form-control" id="nameField" placeholder="Item" aria-label="Item" aria-describedby="button-addon2"  autocomplete='off' required>
+      <input type="text" name='name' class="form-control" id="nameField" placeholder="Item" aria-label="Item" aria-describedby="button-addon2" autocomplete='off' required>
       <div class="input-group-append">
         <button class="btn btn-outline-secondary" type="submit" id="button-addon2"><i class="fas fa-plus"></i></button>
       </div>
     </div>
 
   </form>
-</div>
+</div>

js/list.js

@@ -5,6 +5,8 @@ $(document).ready(function () {
   $("#nameField").focus();
   $("#anzahl").on("focus", function () { $(this).select(); });
   $("#nameField").on("focus", function () { $(this).select(); });
+  $(".edit-listitem").click(editItem);
+  $(".del-listitem").click(deleteSingleItem);
 });
 
 function highlightNewEntry(){
@@ -27,22 +29,83 @@ function highlightNewEntry(){
 
 function deleteCheckeditems() {
   $.post({
-    url: "api/list/del",
+    url: "api/list/clear",
-    data: {
-      function: "del"
-    },
     success: function () {
       location.reload();
     }
   });
 }
 
+function deleteSingleItem() {
+  var id = $(this).parent().parent().parent().find("input[type=checkbox]").data("id");
+  $.post({
+    url: "api/list/del",
+    data: {
+      id: id
+    },
+    success: function (data) {
+      location.reload();
+    }
+  });
+}
+
+function editItem(){
+  var row = $(this).parent().parent().parent();
+  var amount = row.find(".list-row-amount").data("amount");
+  var unit = row.find(".list-row-amount").data("unit");
+  var name = row.find(".list-row-name").html();
+
+  row.find(".list-row-amount").html("");
+  row.find(".list-row-amount").addClass("d-flex", "flex-row");
+  var options = $("[data-id='new']").find("select").html();
+  row.find(".list-row-amount").append(
+    '<input type="number" class="form-control w-50 mr-1" step=".25" value="' + amount +'" required>'
+  ).append(
+    '<select class="form-control w-50 mr-1">'+options+'</select>'
+  );
+  row.find(".list-row-amount").find("option:selected").attr("selected", false);
+  row.find(".list-row-amount").find("option:contains('"+unit+"')").attr("selected", true);
+
+  row.find(".list-row-name").html("");
+  row.find(".list-row-name").addClass("w-100");
+  row.find(".list-row-name").append('<input type="text" class="form-control ml-auto" autocomplete="off" value="'+name+'" required>');
+
+  row.find(".dropdown").html("");
+  row.find(".dropdown").addClass("d-flex", "flex-row");
+  var checkButton = $("<button type='button' class='save-list-row-changes btn p-2'><i class='fas fa-check'></i></button>");
+  var removeButton = $("<button type='button' class='del-list-row-changes btn p-2'><i class='fas fa-times'></i></button>");
+  row.find(".dropdown").append(checkButton);
+  row.find(".dropdown").append(removeButton);
+
+  checkButton.click(changeListItem);
+  removeButton.click(function(){window.location = window.location;});
+}
+
+function changeListItem(){
+  var id = $(this).parent().parent().find("input[type=checkbox]").data("id");
+  var amount = $(this).parent().parent().find("input[type=number]").val();
+  var unit = $(this).parent().parent().find("select option:selected").val();
+  var name = $(this).parent().parent().find("input[type=text]").val();
+  $.post({
+    url: "api/list/change",
+    data: {
+      id: id,
+      anzahl: amount,
+      einheit: unit,
+      name: name
+    },
+    success: function(data){
+      window.location = window.location;
+    }
+  });
+}
+
 function checkItem() {
   var dataId = $(this).data("id");
   $.post({
     url: "api/list/check",
     data: {
-      function: "check",
+      // function: "check",
       id: dataId,
       status: $(this).prop("checked")
     },
@@ -50,6 +113,7 @@ function checkItem() {
       var dataIdSelector = (`[data-id='${dataId}']`);
       var color = $(dataIdSelector).data("color");
       $(dataIdSelector).parent().parent().removeClass("bg-danger");
+      $(dataIdSelector).parent().parent().find(".dropdown-menu-button").removeClass("btn-danger");
 
       if($(dataIdSelector).prop("checked")){
         $(dataIdSelector).parent().parent().removeClass(color);

php/classes.list.php

@@ -52,6 +52,58 @@
       }
     }
 
+    function removeSingleItem($id){
+      include $_SESSION["docroot"].'/config/config.php';
+      include $_SESSION["docroot"].'/php/connect.php';
+      $deleteQuery = $mysqli->prepare("DELETE FROM `Einkauf` WHERE `Einkauf`.`ID` = ?;");
+      $deleteQuery->bind_param("s", $id);
+      $deleteQuery->execute();
+      $mysqli->close();
+    }
+
+    function changeSingleItem($id, $anzahl, $einheit, $name){
+      include $_SESSION["docroot"].'/config/config.php';
+      include $_SESSION["docroot"].'/php/connect.php';
+      $paramCount = "s";
+      $query = "UPDATE `Einkauf` SET";
+      if($anzahl!=""){
+        $paramCount .= "s";
+        $query .= " `Anzahl` = ?";
+      }
+      if($einheit!=""){
+        if(strlen($paramCount)>1){
+          $query .= ",";
+        }
+        $paramCount .= "s";
+        $query .= " `Einheit` = ?";
+      }
+      if($name!=""){
+        if(strlen($paramCount)>1){
+          $query .= ",";
+        }
+        $paramCount .= "s";
+        $query .= " `Name` = ?";
+      }
+      if(strlen($paramCount)>1){
+        $query .= " WHERE `Einkauf`.`ID` = ?;";
+        $updateQuery = $mysqli->prepare($query);
+        if($anzahl!="" && $name!=""){
+          $updateQuery->bind_param($paramCount, $anzahl, $einheit, $name, $id);
+        }
+        elseif($anzahl!="" && $name==""){
+          $updateQuery->bind_param($paramCount, $anzahl, $einheit, $id);
+        }
+        elseif($anzahl=="" && $name!=""){
+          $updateQuery->bind_param($paramCount, $einheit, $name, $id);
+        }
+        elseif($anzahl=="" && $name==""){
+          $updateQuery->bind_param($paramCount, $einheit, $id);
+        }
+        $updateQuery->execute();
+        $mysqli->close();
+      }
+    }
+
     function removeChecked(){
       include $_SESSION["docroot"].'/config/config.php';
       include $_SESSION["docroot"].'/php/connect.php';

php/edit-list.php

@@ -13,7 +13,15 @@
       $shopping->newItems($_POST["list"]);
       break;
 
+    case 'change':
+      $shopping->changeSingleItem($_POST["id"], $_POST["anzahl"], $_POST["einheit"], $_POST["name"]);
+      break;
+
     case 'del':
+      $shopping->removeSingleItem($_POST["id"]);
+      break;
+
+    case 'clear':
       $shopping->removeChecked();
       break;
 

style/helper.css

@@ -8,6 +8,26 @@
     transition: .5s;
 }
 
+.dropdown-menu-button {
+    transition: .5s;
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.save-list-row-changes {
+    color: var(--light);
+}
+.save-list-row-changes:hover {
+    color: var(--success);
+}
+.del-list-row-changes {
+    color: var(--light);
+}
+.del-list-row-changes:hover {
+    color: var(--danger);
+}
+
 .nav-link-font {
     font-size: 16px !important;
 }

style/themes/sketchy.css

@@ -7095,26 +7095,27 @@ select.form-control {
 
 [type="checkbox"] {
   position: relative;
+  -webkit-appearance: none;
   appearance: none;
   cursor: pointer; }
   [type="checkbox"]:before {
     content: "";
-    position: absolute;
+    /* position: absolute; */
-    left: -1.2em;
+    /* left: -1.2em; */
-    top: -0.9em;
+    /* top: -0.9em; */
     display: inline-block;
     width: 15px;
     height: 16px;
-    border: 2px solid #333;
+    border: 2px solid #fff;
     border-radius: 2px 8px 2px 4px / 5px 3px 5px 3px; }
   [type="checkbox"]:checked:after {
     content: "x";
     position: absolute;
-    left: -0.64em;
+    left: 3px;
-    top: -0.48em;
+    /* top: -0.48em; */
     font-size: 1.5rem;
     line-height: 0.5;
-    color: #333; }
+    color: #fff; }
   [type="checkbox"]:disabled:before {
     border: 2px solid #aaa; }