mirror of
https://github.com/tim-krehan/shopping-list.git
synced 2024-11-23 22:30:41 +01:00
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
This commit is contained in:
Tim Krehan
commit
12a64f38d6
7 changed files with 212 additions and 44 deletions
|
|
@ -1,3 +1,9 @@
|
|||
# Shoutout!
|
||||
We Use BrowserStack for cross browser testing, as it provides full testing capabillities within one application.
|
||||
|
||||
[  BrowserStack](https://www.browserstack.com)
|
||||
|
||||
|
||||
# Requirements
|
||||
|
||||
## Apache Modules:
|
||||
|
|
|
|||
|
|
@ -15,34 +15,51 @@
|
|||
$input_item_checkbox_classes = "checkbox";
|
||||
$div_item_quantity_classes = "p-1 col-3";
|
||||
$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) {
|
||||
if($index%2==0){$color_theme = "bg-primary";}
|
||||
else{$color_theme = "bg-secondary";}
|
||||
if ($index % 2 == 0) {
|
||||
$color_theme = "bg-primary";
|
||||
} else {
|
||||
$color_theme = "bg-secondary";
|
||||
}
|
||||
if ($item->Erledigt) {
|
||||
$div_item_row_color_classes = "bg-success";
|
||||
$checked = "checked";
|
||||
}
|
||||
else{
|
||||
} 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 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'>
|
||||
<select class="w-50" name="einheit">
|
||||
<input type='number' name='anzahl' value='1' step=".25" class='form-control w-50 mr-1'>
|
||||
<select class="form-control w-50 mr-1" name="einheit">
|
||||
<?php
|
||||
foreach ($units->list as $index => $unit) {
|
||||
if($unit->Standard){$selected="selected";}else{$selected=NULL;}
|
||||
if ($unit->Standard) {
|
||||
$selected = "selected";
|
||||
} else {
|
||||
$selected = NULL;
|
||||
}
|
||||
print_r("<option value='$unit->ID' $selected>$unit->Name</option>");
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
74
js/list.js
74
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",
|
||||
data: {
|
||||
function: "del"
|
||||
},
|
||||
url: "api/list/clear",
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -7095,26 +7095,27 @@ select.form-control {
|
|||
|
||||
[type="checkbox"] {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer; }
|
||||
[type="checkbox"]:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -1.2em;
|
||||
top: -0.9em;
|
||||
/* position: absolute; */
|
||||
/* left: -1.2em; */
|
||||
/* 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;
|
||||
top: -0.48em;
|
||||
left: 3px;
|
||||
/* top: -0.48em; */
|
||||
font-size: 1.5rem;
|
||||
line-height: 0.5;
|
||||
color: #333; }
|
||||
color: #fff; }
|
||||
[type="checkbox"]:disabled:before {
|
||||
border: 2px solid #aaa; }
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue