mirror of
https://github.com/grocy/grocy.git
synced 2025-04-28 17:23:56 +00:00
76cbf796b6
* Simplified stock overview on mobile. * Stock table horizontally scrollable * Use the new mobile views for all pages (except the shopping list page, use the existing special handling there for now) And add a clear filter button to all pages Co-authored-by: Bernd Bestel <bernd@berrnd.de>
470 lines
12 KiB
JavaScript
470 lines
12 KiB
JavaScript
var collapsedGroups = {};
|
|
|
|
var shoppingListTable = $('#shoppinglist-table').DataTable({
|
|
'order': [[1, 'asc']],
|
|
"orderFixed": [[3, 'asc']],
|
|
'columnDefs': [
|
|
{ 'orderable': false, 'targets': 0 },
|
|
{ 'searchable': false, "targets": 0 },
|
|
{ 'visible': false, 'targets': 3 }
|
|
],
|
|
'rowGroup': {
|
|
dataSrc: 3,
|
|
startRender: function(rows, group)
|
|
{
|
|
var collapsed = !!collapsedGroups[group];
|
|
var toggleClass = collapsed ? "fa-caret-right" : "fa-caret-down";
|
|
|
|
rows.nodes().each(function(row)
|
|
{
|
|
row.style.display = collapsed ? "none" : "";
|
|
});
|
|
|
|
return $("<tr/>")
|
|
.append('<td colspan="' + rows.columns()[0].length + '">' + group + ' <span class="fa fa-fw ' + toggleClass + '"/></td>')
|
|
.attr("data-name", group)
|
|
.toggleClass("collapsed", collapsed);
|
|
}
|
|
}
|
|
});
|
|
$('#shoppinglist-table tbody').removeClass("d-none");
|
|
shoppingListTable.columns.adjust().draw();
|
|
$('.dataTables_scrollBody').addClass("dragscroll");
|
|
dragscroll.reset();
|
|
|
|
$(document).on("click", "tr.dtrg-group", function()
|
|
{
|
|
var name = $(this).data('name');
|
|
collapsedGroups[name] = !collapsedGroups[name];
|
|
shoppingListTable.draw();
|
|
});
|
|
|
|
$("#search").on("keyup", Delay(function()
|
|
{
|
|
var value = $(this).val();
|
|
if (value === "all")
|
|
{
|
|
value = "";
|
|
}
|
|
|
|
shoppingListTable.search(value).draw();
|
|
}, 200));
|
|
|
|
$("#clear-filter-button").on("click", function()
|
|
{
|
|
$("#search").val("");
|
|
$("#status-filter").val("all");
|
|
$("#search").trigger("keyup");
|
|
$("#status-filter").trigger("change");
|
|
});
|
|
|
|
$("#status-filter").on("change", function()
|
|
{
|
|
var value = $(this).val();
|
|
if (value === "all")
|
|
{
|
|
value = "";
|
|
}
|
|
|
|
// Transfer CSS classes of selected element to dropdown element (for background)
|
|
$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
|
|
|
|
shoppingListTable.column(4).search(value).draw();
|
|
});
|
|
|
|
$("#selected-shopping-list").on("change", function()
|
|
{
|
|
var value = $(this).val();
|
|
window.location.href = U('/shoppinglist?list=' + value);
|
|
});
|
|
|
|
$(".status-filter-message").on("click", function()
|
|
{
|
|
var value = $(this).data("status-filter");
|
|
$("#status-filter").val(value);
|
|
$("#status-filter").trigger("change");
|
|
});
|
|
|
|
$("#delete-selected-shopping-list").on("click", function()
|
|
{
|
|
var objectName = $("#selected-shopping-list option:selected").text();
|
|
var objectId = $("#selected-shopping-list").val();
|
|
|
|
bootbox.confirm({
|
|
message: __t('Are you sure to delete shopping list "%s"?', objectName),
|
|
closeButton: false,
|
|
buttons: {
|
|
confirm: {
|
|
label: __t('Yes'),
|
|
className: 'btn-success'
|
|
},
|
|
cancel: {
|
|
label: __t('No'),
|
|
className: 'btn-danger'
|
|
}
|
|
},
|
|
callback: function(result)
|
|
{
|
|
if (result === true)
|
|
{
|
|
Grocy.Api.Delete('objects/shopping_lists/' + objectId, {},
|
|
function(result)
|
|
{
|
|
window.location.href = U('/shoppinglist');
|
|
},
|
|
function(xhr)
|
|
{
|
|
console.error(xhr);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '.shoppinglist-delete-button', function(e)
|
|
{
|
|
e.preventDefault();
|
|
|
|
// Remove the focus from the current button
|
|
// to prevent that the tooltip stays until clicked anywhere else
|
|
document.activeElement.blur();
|
|
|
|
var shoppingListItemId = $(e.currentTarget).attr('data-shoppinglist-id');
|
|
Grocy.FrontendHelpers.BeginUiBusy();
|
|
|
|
Grocy.Api.Delete('objects/shopping_list/' + shoppingListItemId, {},
|
|
function(result)
|
|
{
|
|
animateCSS("#shoppinglistitem-" + shoppingListItemId + "-row", "fadeOut", function()
|
|
{
|
|
Grocy.FrontendHelpers.EndUiBusy();
|
|
$("#shoppinglistitem-" + shoppingListItemId + "-row").remove();
|
|
OnListItemRemoved();
|
|
});
|
|
},
|
|
function(xhr)
|
|
{
|
|
Grocy.FrontendHelpers.EndUiBusy();
|
|
console.error(xhr);
|
|
}
|
|
);
|
|
});
|
|
|
|
$(document).on("click", ".product-name-cell", function(e)
|
|
{
|
|
if ($(e.currentTarget).attr("data-product-id") != "")
|
|
{
|
|
Grocy.Components.ProductCard.Refresh($(e.currentTarget).attr("data-product-id"));
|
|
$("#shoppinglist-productcard-modal").modal("show");
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '#add-products-below-min-stock-amount', function(e)
|
|
{
|
|
Grocy.Api.Post('stock/shoppinglist/add-missing-products', { "list_id": $("#selected-shopping-list").val() },
|
|
function(result)
|
|
{
|
|
window.location.href = U('/shoppinglist?list=' + $("#selected-shopping-list").val());
|
|
},
|
|
function(xhr)
|
|
{
|
|
console.error(xhr);
|
|
}
|
|
);
|
|
});
|
|
|
|
$(document).on('click', '#add-expired-products', function(e)
|
|
{
|
|
Grocy.Api.Post('stock/shoppinglist/add-expired-products', { "list_id": $("#selected-shopping-list").val() },
|
|
function(result)
|
|
{
|
|
window.location.href = U('/shoppinglist?list=' + $("#selected-shopping-list").val());
|
|
},
|
|
function(xhr)
|
|
{
|
|
console.error(xhr);
|
|
}
|
|
);
|
|
});
|
|
|
|
$(document).on('click', '#clear-shopping-list', function(e)
|
|
{
|
|
bootbox.confirm({
|
|
message: __t('Are you sure to empty shopping list "%s"?', $("#selected-shopping-list option:selected").text()),
|
|
closeButton: false,
|
|
buttons: {
|
|
confirm: {
|
|
label: __t('Yes'),
|
|
className: 'btn-success'
|
|
},
|
|
cancel: {
|
|
label: __t('No'),
|
|
className: 'btn-danger'
|
|
}
|
|
},
|
|
callback: function(result)
|
|
{
|
|
if (result === true)
|
|
{
|
|
Grocy.FrontendHelpers.BeginUiBusy();
|
|
|
|
Grocy.Api.Post('stock/shoppinglist/clear', { "list_id": $("#selected-shopping-list").val() },
|
|
function(result)
|
|
{
|
|
animateCSS("#shoppinglist-table tbody tr", "fadeOut", function()
|
|
{
|
|
Grocy.FrontendHelpers.EndUiBusy();
|
|
$("#shoppinglist-table tbody tr").remove();
|
|
OnListItemRemoved();
|
|
});
|
|
},
|
|
function(xhr)
|
|
{
|
|
Grocy.FrontendHelpers.EndUiBusy();
|
|
console.error(xhr);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '.shopping-list-stock-add-workflow-list-item-button', function(e)
|
|
{
|
|
e.preventDefault();
|
|
|
|
// Remove the focus from the current button
|
|
// to prevent that the tooltip stays until clicked anywhere else
|
|
document.activeElement.blur();
|
|
|
|
var href = $(e.currentTarget).attr('href');
|
|
|
|
$("#shopping-list-stock-add-workflow-purchase-form-frame").attr("src", href);
|
|
$("#shopping-list-stock-add-workflow-modal").modal("show");
|
|
|
|
if (Grocy.ShoppingListToStockWorkflowAll)
|
|
{
|
|
$("#shopping-list-stock-add-workflow-purchase-item-count").removeClass("d-none");
|
|
$("#shopping-list-stock-add-workflow-purchase-item-count").text(__t("Adding shopping list item %1$s of %2$s", Grocy.ShoppingListToStockWorkflowCurrent, Grocy.ShoppingListToStockWorkflowCount));
|
|
$("#shopping-list-stock-add-workflow-skip-button").removeClass("d-none");
|
|
}
|
|
else
|
|
{
|
|
$("#shopping-list-stock-add-workflow-skip-button").addClass("d-none");
|
|
}
|
|
});
|
|
|
|
Grocy.ShoppingListToStockWorkflowAll = false;
|
|
Grocy.ShoppingListToStockWorkflowCount = 0;
|
|
Grocy.ShoppingListToStockWorkflowCurrent = 0;
|
|
$(document).on('click', '#add-all-items-to-stock-button', function(e)
|
|
{
|
|
Grocy.ShoppingListToStockWorkflowAll = true;
|
|
Grocy.ShoppingListToStockWorkflowCount = $(".shopping-list-stock-add-workflow-list-item-button").length;
|
|
Grocy.ShoppingListToStockWorkflowCurrent++;
|
|
$(".shopping-list-stock-add-workflow-list-item-button").first().click();
|
|
});
|
|
|
|
$("#shopping-list-stock-add-workflow-modal").on("hidden.bs.modal", function(e)
|
|
{
|
|
Grocy.ShoppingListToStockWorkflowAll = false;
|
|
Grocy.ShoppingListToStockWorkflowCount = 0;
|
|
Grocy.ShoppingListToStockWorkflowCurrent = 0;
|
|
})
|
|
|
|
$(window).on("message", function(e)
|
|
{
|
|
var data = e.originalEvent.data;
|
|
|
|
if (data.Message === "AfterItemAdded")
|
|
{
|
|
$(".shoppinglist-delete-button[data-shoppinglist-id='" + data.Payload + "']").click();
|
|
}
|
|
else if (data.Message === "Ready")
|
|
{
|
|
if (!Grocy.ShoppingListToStockWorkflowAll)
|
|
{
|
|
$("#shopping-list-stock-add-workflow-modal").modal("hide");
|
|
}
|
|
else
|
|
{
|
|
Grocy.ShoppingListToStockWorkflowCurrent++;
|
|
if (Grocy.ShoppingListToStockWorkflowCurrent <= Grocy.ShoppingListToStockWorkflowCount)
|
|
{
|
|
$(".shopping-list-stock-add-workflow-list-item-button")[1].click();
|
|
}
|
|
else
|
|
{
|
|
$("#shopping-list-stock-add-workflow-modal").modal("hide");
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '#shopping-list-stock-add-workflow-skip-button', function(e)
|
|
{
|
|
e.preventDefault();
|
|
|
|
window.postMessage(WindowMessageBag("Ready"), Grocy.BaseUrl);
|
|
});
|
|
|
|
$(document).on('click', '.order-listitem-button', function(e)
|
|
{
|
|
e.preventDefault();
|
|
|
|
// Remove the focus from the current button
|
|
// to prevent that the tooltip stays until clicked anywhere else
|
|
document.activeElement.blur();
|
|
|
|
Grocy.FrontendHelpers.BeginUiBusy();
|
|
|
|
var listItemId = $(e.currentTarget).attr('data-item-id');
|
|
|
|
var done = 1;
|
|
if ($(e.currentTarget).attr('data-item-done') == 1)
|
|
{
|
|
done = 0;
|
|
}
|
|
|
|
$(e.currentTarget).attr('data-item-done', done);
|
|
|
|
Grocy.Api.Put('objects/shopping_list/' + listItemId, { 'done': done },
|
|
function()
|
|
{
|
|
if (done == 1)
|
|
{
|
|
$('#shoppinglistitem-' + listItemId + '-row').addClass("text-muted");
|
|
$('#shoppinglistitem-' + listItemId + '-row').addClass("text-strike-through");
|
|
}
|
|
else
|
|
{
|
|
$('#shoppinglistitem-' + listItemId + '-row').removeClass("text-muted");
|
|
$('#shoppinglistitem-' + listItemId + '-row').removeClass("text-strike-through");
|
|
}
|
|
|
|
Grocy.FrontendHelpers.EndUiBusy();
|
|
},
|
|
function(xhr)
|
|
{
|
|
Grocy.FrontendHelpers.EndUiBusy();
|
|
console.error(xhr);
|
|
}
|
|
);
|
|
|
|
|
|
var statusInfoCell = $("#shoppinglistitem-" + listItemId + "-status-info");
|
|
if (done == 1)
|
|
{
|
|
statusInfoCell.text(statusInfoCell.text().replace("xxUNDONExx", ""));
|
|
}
|
|
else
|
|
{
|
|
statusInfoCell.text(statusInfoCell.text() + " xxUNDONExx");
|
|
}
|
|
shoppingListTable.rows().invalidate().draw(false);
|
|
|
|
$("#status-filter").trigger("change");
|
|
});
|
|
|
|
function OnListItemRemoved()
|
|
{
|
|
if ($(".shopping-list-stock-add-workflow-list-item-button").length === 0)
|
|
{
|
|
$("#add-all-items-to-stock-button").addClass("disabled");
|
|
}
|
|
}
|
|
OnListItemRemoved();
|
|
|
|
$(document).on("click", "#print-shopping-list-button", function(e)
|
|
{
|
|
$(".print-timestamp").text(moment().format("l LT"));
|
|
$("#description-for-print").html($("#description").val());
|
|
window.print();
|
|
});
|
|
|
|
$("#description").on("summernote.change", function()
|
|
{
|
|
$("#save-description-button").removeClass("disabled");
|
|
|
|
if ($("#description").summernote("isEmpty"))
|
|
{
|
|
$("#clear-description-button").addClass("disabled");
|
|
}
|
|
else
|
|
{
|
|
$("#clear-description-button").removeClass("disabled");
|
|
}
|
|
});
|
|
|
|
$(document).on("click", "#save-description-button", function(e)
|
|
{
|
|
e.preventDefault();
|
|
document.activeElement.blur();
|
|
|
|
Grocy.Api.Put('objects/shopping_lists/' + $("#selected-shopping-list").val(), { description: $("#description").val() },
|
|
function(result)
|
|
{
|
|
$("#save-description-button").addClass("disabled");
|
|
},
|
|
function(xhr)
|
|
{
|
|
console.error(xhr);
|
|
}
|
|
);
|
|
});
|
|
|
|
$(document).on("click", "#clear-description-button", function(e)
|
|
{
|
|
e.preventDefault();
|
|
document.activeElement.blur();
|
|
|
|
$("#description").summernote("reset");
|
|
$("#save-description-button").click();
|
|
});
|
|
|
|
$(".switch-view-mode-button").on('click', function(e)
|
|
{
|
|
e.preventDefault();
|
|
|
|
$("#shoppinglist-main").toggleClass("fullscreen");
|
|
$(".dataTables_scrollHeadInner").width(""); // Remove absolute width on element set by DataTables
|
|
$(".dataTables_scrollHeadInner table").width(""); // Remove absolute width on element set by DataTables
|
|
$("body").toggleClass("fullscreen-card");
|
|
$("#shopping-list-normal-view-button").toggleClass("d-none");
|
|
$("#mainNav").toggleClass("d-none");
|
|
|
|
if ($("body").hasClass("fullscreen-card"))
|
|
{
|
|
window.location.hash = "#compact";
|
|
}
|
|
else
|
|
{
|
|
window.history.replaceState(null, null, " ");
|
|
}
|
|
});
|
|
|
|
$("#description").trigger("summernote.change");
|
|
$("#save-description-button").addClass("disabled");
|
|
|
|
if (window.location.hash === "#compact")
|
|
{
|
|
$("#shopping-list-compact-view-button").click();
|
|
}
|
|
|
|
// Auto switch to compact view on mobile when enabled
|
|
if ($(window).width() < 768 & window.location.hash !== "#compact" && !BoolVal(Grocy.UserSettings.shopping_list_disable_auto_compact_view_on_mobile))
|
|
{
|
|
$("#shopping-list-compact-view-button").click();
|
|
}
|
|
|
|
$(window).on("message", function(e)
|
|
{
|
|
var data = e.originalEvent.data;
|
|
|
|
if (data.Message === "ShoppingListChanged")
|
|
{
|
|
window.location.href = U('/shoppinglist?list=' + data.Payload);
|
|
}
|
|
});
|