Make the meal plan entry day editable (closes #775)

changelog/67_UNRELEASED_xxxx-xx-xx.md

@@ -55,6 +55,7 @@
 
 ### Meal plan
 
+- The day is now editable in the edit dialog of any meal plan entry, which makes it possible to move entries to a different day
 - Fixed that it was not possible to print the meal plan (and other pages) in landscape (thanks @miguelangel-nubla)
 
 ### Chores

localization/strings.pot

@@ -2362,3 +2362,21 @@ msgstr ""
 
 msgid "Now / today"
 msgstr ""
+
+msgid "Add recipe meal plan entry"
+msgstr ""
+
+msgid "Add note meal plan entry"
+msgstr ""
+
+msgid "Add product meal plan entry"
+msgstr ""
+
+msgid "Edit note meal plan entry"
+msgstr ""
+
+msgid "Edit product meal plan entry"
+msgstr ""
+
+msgid "Edit recipe meal plan entry"
+msgstr ""

public/viewjs/components/datetimepicker.js

@@ -25,8 +25,7 @@ Grocy.Components.DateTimePicker.SetValue = function(value, inputElement = Grocy.
 
 Grocy.Components.DateTimePicker.Clear = function()
 {
-	$(".datetimepicker").datetimepicker("destroy");
+	Grocy.Components.DateTimePicker.Init(true);
-	Grocy.Components.DateTimePicker.Init();
 
 	Grocy.Components.DateTimePicker.GetInputElement().val("");
 
@@ -74,8 +73,13 @@ if (Grocy.Components.DateTimePicker.GetInputElement().data('limit-end-to-now') =
 	limitDate = moment();
 }
 
-Grocy.Components.DateTimePicker.Init = function()
+Grocy.Components.DateTimePicker.Init = function(reInit = false)
 {
+	if (reInit)
+	{
+		$(".datetimepicker").datetimepicker("destroy");
+	}
+
 	$(".datetimepicker").each(function()
 	{
 		$(this).datetimepicker(

public/viewjs/components/datetimepicker2.js

@@ -25,8 +25,7 @@ Grocy.Components.DateTimePicker2.SetValue = function(value, inputElement = Grocy
 
 Grocy.Components.DateTimePicker2.Clear = function()
 {
-	$(".datetimepicker2").datetimepicker("destroy");
+	Grocy.Components.DateTimePicker2.Init(true);
-	Grocy.Components.DateTimePicker2.Init();
 
 	Grocy.Components.DateTimePicker2.GetInputElement().val("");
 
@@ -50,11 +49,11 @@ Grocy.Components.DateTimePicker2.ChangeFormat = function(format)
 
 	if (format == "YYYY-MM-DD")
 	{
-		Grocy.Components.DateTimePicker2.GetInputElement().addClass("date-only-datetimepicker");
+		Grocy.Components.DateTimePicker2.GetInputElement().addClass("date-only-datetimepicker2");
 	}
 	else
 	{
-		Grocy.Components.DateTimePicker2.GetInputElement().removeClass("date-only-datetimepicker");
+		Grocy.Components.DateTimePicker2.GetInputElement().removeClass("date-only-datetimepicker2");
 	}
 }
 
@@ -74,8 +73,13 @@ if (Grocy.Components.DateTimePicker2.GetInputElement().data('limit-end-to-now')
 	limitDate = moment();
 }
 
-Grocy.Components.DateTimePicker2.Init = function()
+Grocy.Components.DateTimePicker2.Init = function(reInit = false)
 {
+	if (reInit)
+	{
+		$(".datetimepicker2").datetimepicker("destroy");
+	}
+
 	$(".datetimepicker2").each(function()
 	{
 		$(this).datetimepicker(

public/viewjs/mealplan.js

@@ -363,8 +363,11 @@ $(document).on("click", ".add-recipe-button", function(e)
 {
 	var day = $(this).parent().parent().data("date");
 
-	$("#add-recipe-modal-title").text(__t("Add recipe on %s", day.toString()));
+	$("#add-recipe-modal-title").text(__t("Add recipe meal plan entry"));
-	$("#day").val(day.toString());
+	$(".datetimepicker-wrapper").detach().prependTo("#add-recipe-form");
+	$("input#day").detach().appendTo("#add-recipe-form");
+	Grocy.Components.DateTimePicker.Init(true);
+	Grocy.Components.DateTimePicker.SetValue(day);
 	Grocy.Components.RecipePicker.Clear();
 	$("#section_id_note").val(-1);
 	$("#add-recipe-modal").modal("show");
@@ -376,8 +379,11 @@ $(document).on("click", ".add-note-button", function(e)
 {
 	var day = $(this).parent().parent().parent().data("date");
 
-	$("#add-note-modal-title").text(__t("Add note on %s", day.toString()));
+	$("#add-note-modal-title").text(__t("Add note meal plan entry"));
-	$("#day").val(day.toString());
+	$(".datetimepicker-wrapper").detach().prependTo("#add-note-form");
+	$("input#day").detach().appendTo("#add-note-form")
+	Grocy.Components.DateTimePicker.Init(true);
+	Grocy.Components.DateTimePicker.SetValue(day);
 	$("#note").val("");
 	$("#section_id_note").val(-1);
 	$("#add-note-modal").modal("show");
@@ -389,8 +395,11 @@ $(document).on("click", ".add-product-button", function(e)
 {
 	var day = $(this).parent().parent().parent().data("date");
 
-	$("#add-product-modal-title").text(__t("Add product on %s", day.toString()));
+	$("#add-product-modal-title").text(__t("Add product meal plan entry"));
-	$("#day").val(day.toString());
+	$(".datetimepicker-wrapper").detach().prependTo("#add-product-form");
+	$("input#day").detach().appendTo("#add-product-form")
+	Grocy.Components.DateTimePicker.Init(true);
+	Grocy.Components.DateTimePicker.SetValue(day);
 	Grocy.Components.ProductPicker.Clear();
 	$("#section_id_note").val(-1);
 	$("#add-product-modal").modal("show");
@@ -404,8 +413,11 @@ $(document).on("click", ".edit-meal-plan-entry-button", function(e)
 
 	if (mealPlanEntry.type == "recipe")
 	{
-		$("#add-recipe-modal-title").text(__t("Edit recipe on %s", mealPlanEntry.day.toString()));
+		$(".datetimepicker-wrapper").detach().prependTo("#add-recipe-form");
-		$("#day").val(mealPlanEntry.day.toString());
+		$("input#day").detach().appendTo("#add-recipe-form")
+		Grocy.Components.DateTimePicker.Init(true);
+		Grocy.Components.DateTimePicker.SetValue(mealPlanEntry.day);
+		$("#add-recipe-modal-title").text(__t("Edit recipe meal plan entry"));
 		$("#recipe_servings").val(mealPlanEntry.recipe_servings);
 		Grocy.Components.RecipePicker.SetId(mealPlanEntry.recipe_id);
 		$("#add-recipe-modal").modal("show");
@@ -414,8 +426,11 @@ $(document).on("click", ".edit-meal-plan-entry-button", function(e)
 	}
 	else if (mealPlanEntry.type == "product")
 	{
-		$("#add-product-modal-title").text(__t("Edit product on %s", mealPlanEntry.day.toString()));
+		$(".datetimepicker-wrapper").detach().prependTo("#add-product-form");
-		$("#day").val(mealPlanEntry.day.toString());
+		$("input#day").detach().appendTo("#add-product-form")
+		Grocy.Components.DateTimePicker.Init(true);
+		Grocy.Components.DateTimePicker.SetValue(mealPlanEntry.day);
+		$("#add-product-modal-title").text(__t("Edit product meal plan entry"));
 		Grocy.Components.ProductPicker.SetId(mealPlanEntry.product_id);
 		$("#add-product-modal").modal("show");
 		$("#section_id_product").val(mealPlanEntry.section_id);
@@ -424,8 +439,11 @@ $(document).on("click", ".edit-meal-plan-entry-button", function(e)
 	}
 	else if (mealPlanEntry.type == "note")
 	{
-		$("#add-note-modal-title").text(__t("Edit note on %s", mealPlanEntry.day.toString()));
+		$(".datetimepicker-wrapper").detach().prependTo("#add-note-form");
-		$("#day").val(mealPlanEntry.day.toString());
+		$("input#day").detach().appendTo("#add-note-form");
+		Grocy.Components.DateTimePicker.Init(true);
+		Grocy.Components.DateTimePicker.SetValue(mealPlanEntry.day);
+		$("#add-note-modal-title").text(__t("Edit note meal plan entry"));
 		$("#note").val(mealPlanEntry.note);
 		$("#add-note-modal").modal("show");
 		$("#section_id_note").val(mealPlanEntry.section_id);
@@ -440,8 +458,8 @@ $(document).on("click", ".copy-day-button", function(e)
 	var day = $(this).parent().parent().parent().data("date");
 
 	$("#copy-day-modal-title").text(__t("Copy all meal plan entries of %s", day.toString()));
-	$("#day").val(day.toString());
+	Grocy.Components.DateTimePicker.SetValue(day);
-	Grocy.Components.DateTimePicker.Clear();
+	Grocy.Components.DateTimePicker2.Clear();
 	$("#copy-day-modal").modal("show");
 	Grocy.FrontendHelpers.ValidateForm("copy-day-form");
 	Grocy.IsMealPlanEntryEditAction = false;
@@ -474,7 +492,7 @@ $("#add-product-modal").on("shown.bs.modal", function(e)
 
 $("#copy-day-modal").on("shown.bs.modal", function(e)
 {
-	Grocy.Components.DateTimePicker.GetInputElement().focus();
+	Grocy.Components.DateTimePicker2.GetInputElement().focus();
 })
 
 $(document).on("click", ".remove-recipe-button, .remove-note-button, .remove-product-button", function(e)
@@ -497,17 +515,7 @@ $('#save-add-recipe-button').on('click', function(e)
 {
 	e.preventDefault();
 
-	if (!Grocy.FrontendHelpers.ValidateForm("add-recipe-form", true))
+	if (!Grocy.FrontendHelpers.ValidateForm("add-recipe-form", true) || $(".combobox-menu-visible").length)
-	{
-		return;
-	}
-
-	if ($(".combobox-menu-visible").length)
-	{
-		return;
-	}
-
-	if (!Grocy.FrontendHelpers.ValidateForm('add-recipe-form'))
 	{
 		return false;
 	}
@@ -515,6 +523,7 @@ $('#save-add-recipe-button').on('click', function(e)
 	var formData = $('#add-recipe-form').serializeJSON();
 	formData.section_id = formData.section_id_recipe;
 	delete formData.section_id_recipe;
+	formData.day = Grocy.Components.DateTimePicker.GetValue();
 
 	if (Grocy.IsMealPlanEntryEditAction)
 	{
@@ -548,23 +557,13 @@ $('#save-add-note-button').on('click', function(e)
 {
 	e.preventDefault();
 
-	if (!Grocy.FrontendHelpers.ValidateForm("add-note-form", true))
+	if (!Grocy.FrontendHelpers.ValidateForm("add-note-form", true) || $(".combobox-menu-visible").length)
-	{
-		return;
-	}
-
-	if ($(".combobox-menu-visible").length)
-	{
-		return;
-	}
-
-	if (!Grocy.FrontendHelpers.ValidateForm('add-note-form'))
 	{
 		return false;
 	}
 
 	var jsonData = $('#add-note-form').serializeJSON();
-	jsonData.day = $("#day").val();
+	jsonData.day = Grocy.Components.DateTimePicker.GetValue();
 	jsonData.section_id = jsonData.section_id_note;
 	delete jsonData.section_id_note;
 
@@ -601,23 +600,13 @@ $('#save-add-product-button').on('click', function(e)
 {
 	e.preventDefault();
 
-	if (!Grocy.FrontendHelpers.ValidateForm("add-product-form", true))
+	if (!Grocy.FrontendHelpers.ValidateForm("add-product-form", true) || $(".combobox-menu-visible").length)
-	{
-		return;
-	}
-
-	if ($(".combobox-menu-visible").length)
-	{
-		return;
-	}
-
-	if (!Grocy.FrontendHelpers.ValidateForm('add-product-form'))
 	{
 		return false;
 	}
 
 	var jsonData = $('#add-product-form').serializeJSON();
-	jsonData.day = $("#day").val();
+	jsonData.day = Grocy.Components.DateTimePicker.GetValue();;
 	delete jsonData.display_amount;
 	jsonData.product_amount = jsonData.amount;
 	delete jsonData.amount;
@@ -661,17 +650,12 @@ $('#save-copy-day-button').on('click', function(e)
 	e.preventDefault();
 
 	if (!Grocy.FrontendHelpers.ValidateForm("copy-day-form", true))
-	{
-		return;
-	}
-
-	if (!Grocy.FrontendHelpers.ValidateForm('copy-day-form'))
 	{
 		return false;
 	}
 
-	var dayFrom = $("#day").val();
+	var dayFrom = Grocy.Components.DateTimePicker.GetValue();
-	var dayTo = Grocy.Components.DateTimePicker.GetValue();
+	var dayTo = Grocy.Components.DateTimePicker2.GetValue();
 
 	Grocy.Api.Get('objects/meal_plan?query[]=day=' + dayFrom,
 		function(sourceMealPlanEntries)

views/mealplan.blade.php

@@ -158,6 +158,18 @@
 				<form id="add-recipe-form"
 					novalidate>
 
+					@include('components.datetimepicker', array(
+					'id' => 'day',
+					'label' => 'Day',
+					'format' => 'YYYY-MM-DD',
+					'initWithNow' => false,
+					'limitEndToNow' => false,
+					'limitStartToNow' => false,
+					'isRequired' => true,
+					'additionalCssClasses' => 'date-only-datetimepicker',
+					'invalidFeedback' => $__t('A date is required')
+					))
+
 					@include('components.recipepicker', array(
 					'recipes' => $recipes,
 					'isRequired' => true,
@@ -321,7 +333,7 @@
 				<form id="copy-day-form"
 					novalidate>
 
-					@include('components.datetimepicker', array(
+					@include('components.datetimepicker2', array(
 					'id' => 'copy_to_date',
 					'label' => 'Day',
 					'format' => 'YYYY-MM-DD',
@@ -329,7 +341,7 @@
 					'limitEndToNow' => false,
 					'limitStartToNow' => false,
 					'isRequired' => true,
-					'additionalCssClasses' => 'date-only-datetimepicker',
+					'additionalCssClasses' => 'date-only-datetimepicker2',
 					'invalidFeedback' => $__t('A date is required')
 					))