From 033cd306c1f0f1317afb4ec1112c760fdced3586 Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Sat, 26 Mar 2022 11:17:08 +0100
Subject: [PATCH] Improved products/chore merge dialogs form validation

---
 localization/strings.pot  |  2 +-
 public/viewjs/chores.js   |  9 +++++-
 public/viewjs/products.js |  9 +++++-
 views/chores.blade.php    | 66 +++++++++++++++++++++------------------
 views/products.blade.php  | 66 +++++++++++++++++++++------------------
 5 files changed, 89 insertions(+), 63 deletions(-)

diff --git a/localization/strings.pot b/localization/strings.pot
index e1d4938d..4b17ab64 100644
--- a/localization/strings.pot
+++ b/localization/strings.pot
@@ -2040,7 +2040,7 @@ msgstr ""
 msgid "After merging, this product will be kept"
 msgstr ""
 
-msgid "After merging, all occurences of this product will be replaced by \"Product to keep\" (means this product will not exist anymore)"
+msgid "After merging, all occurences of this product will be replaced by the kept product (means this product will not exist anymore)"
 msgstr ""
 
 msgid "Merge"
diff --git a/public/viewjs/chores.js b/public/viewjs/chores.js
index 37a4958d..6c2f789d 100644
--- a/public/viewjs/chores.js
+++ b/public/viewjs/chores.js
@@ -88,8 +88,15 @@ $(".merge-chores-button").on("click", function(e)
 	$("#merge-chores-modal").modal("show");
 });
 
-$("#merge-chores-save-button").on("click", function()
+$("#merge-chores-save-button").on("click", function(e)
 {
+	e.preventDefault();
+
+	if (!Grocy.FrontendHelpers.ValidateForm("merge-chores-form", true))
+	{
+		return;
+	}
+
 	var choreIdToKeep = $("#merge-chores-keep").val();
 	var choreIdToRemove = $("#merge-chores-remove").val();
 
diff --git a/public/viewjs/products.js b/public/viewjs/products.js
index 894e858b..3810d122 100644
--- a/public/viewjs/products.js
+++ b/public/viewjs/products.js
@@ -137,8 +137,15 @@ $(".merge-products-button").on("click", function(e)
 	$("#merge-products-modal").modal("show");
 });
 
-$("#merge-products-save-button").on("click", function()
+$("#merge-products-save-button").on("click", function(e)
 {
+	e.preventDefault();
+
+	if (!Grocy.FrontendHelpers.ValidateForm("merge-products-form", true))
+	{
+		return;
+	}
+
 	var productIdToKeep = $("#merge-products-keep").val();
 	var productIdToRemove = $("#merge-products-remove").val();
 
diff --git a/views/chores.blade.php b/views/chores.blade.php
index b0ace94b..cb369ec6 100644
--- a/views/chores.blade.php
+++ b/views/chores.blade.php
@@ -163,34 +163,41 @@
 				<h4 class="modal-title w-100">{{ $__t('Merge chores') }}</h4>
 			</div>
 			<div class="modal-body">
-				<div class="form-group">
-					<label for="merge-chores-keep">{{ $__t('Chore to keep') }}&nbsp;<i class="fas fa-question-circle text-muted"
-							data-toggle="tooltip"
-							data-trigger="hover click"
-							title="{{ $__t('After merging, this chore will be kept') }}"></i>
-					</label>
-					<select class="custom-control custom-select"
-						id="merge-chores-keep">
-						<option></option>
-						@foreach($chores as $chore)
-						<option value="{{ $chore->id }}">{{ $chore->name }}</option>
-						@endforeach
-					</select>
-				</div>
-				<div class="form-group">
-					<label for="merge-chores-remove">{{ $__t('Chore to remove') }}&nbsp;<i class="fas fa-question-circle text-muted"
-							data-toggle="tooltip"
-							data-trigger="hover click"
-							title="{{ $__t('After merging, all occurences of this chore will be replaced by the kept chore (means this chore will not exist anymore)') }}"></i>
-					</label>
-					<select class="custom-control custom-select"
-						id="merge-chores-remove">
-						<option></option>
-						@foreach($chores as $chore)
-						<option value="{{ $chore->id }}">{{ $chore->name }}</option>
-						@endforeach
-					</select>
-				</div>
+				<form id="merge-chores-form"
+					novalidate>
+
+					<div class="form-group">
+						<label for="merge-chores-keep">{{ $__t('Chore to keep') }}&nbsp;<i class="fas fa-question-circle text-muted"
+								data-toggle="tooltip"
+								data-trigger="hover click"
+								title="{{ $__t('After merging, this chore will be kept') }}"></i>
+						</label>
+						<select class="custom-control custom-select"
+							id="merge-chores-keep"
+							required>
+							<option></option>
+							@foreach($chores as $chore)
+							<option value="{{ $chore->id }}">{{ $chore->name }}</option>
+							@endforeach
+						</select>
+					</div>
+					<div class="form-group">
+						<label for="merge-chores-remove">{{ $__t('Chore to remove') }}&nbsp;<i class="fas fa-question-circle text-muted"
+								data-toggle="tooltip"
+								data-trigger="hover click"
+								title="{{ $__t('After merging, all occurences of this chore will be replaced by the kept chore (means this chore will not exist anymore)') }}"></i>
+						</label>
+						<select class="custom-control custom-select"
+							id="merge-chores-remove"
+							required>
+							<option></option>
+							@foreach($chores as $chore)
+							<option value="{{ $chore->id }}">{{ $chore->name }}</option>
+							@endforeach
+						</select>
+					</div>
+
+				</form>
 			</div>
 			<div class="modal-footer">
 				<button type="button"
@@ -198,8 +205,7 @@
 					data-dismiss="modal">{{ $__t('Cancel') }}</button>
 				<button id="merge-chores-save-button"
 					type="button"
-					class="btn btn-primary"
-					data-dismiss="modal">{{ $__t('OK') }}</button>
+					class="btn btn-primary">{{ $__t('OK') }}</button>
 			</div>
 		</div>
 	</div>
diff --git a/views/products.blade.php b/views/products.blade.php
index b6aee6ce..b2fd4543 100644
--- a/views/products.blade.php
+++ b/views/products.blade.php
@@ -233,34 +233,41 @@
 				<h4 class="modal-title w-100">{{ $__t('Merge products') }}</h4>
 			</div>
 			<div class="modal-body">
-				<div class="form-group">
-					<label for="merge-products-keep">{{ $__t('Product to keep') }}&nbsp;<i class="fas fa-question-circle text-muted"
-							data-toggle="tooltip"
-							data-trigger="hover click"
-							title="{{ $__t('After merging, this product will be kept') }}"></i>
-					</label>
-					<select class="custom-control custom-select"
-						id="merge-products-keep">
-						<option></option>
-						@foreach($products as $product)
-						<option value="{{ $product->id }}">{{ $product->name }}</option>
-						@endforeach
-					</select>
-				</div>
-				<div class="form-group">
-					<label for="merge-products-remove">{{ $__t('Product to remove') }}&nbsp;<i class="fas fa-question-circle text-muted"
-							data-toggle="tooltip"
-							data-trigger="hover click"
-							title="{{ $__t('After merging, all occurences of this product will be replaced by "Product to keep" (means this product will not exist anymore)') }}"></i>
-					</label>
-					<select class="custom-control custom-select"
-						id="merge-products-remove">
-						<option></option>
-						@foreach($products as $product)
-						<option value="{{ $product->id }}">{{ $product->name }}</option>
-						@endforeach
-					</select>
-				</div>
+				<form id="merge-products-form"
+					novalidate>
+
+					<div class="form-group">
+						<label for="merge-products-keep">{{ $__t('Product to keep') }}&nbsp;<i class="fas fa-question-circle text-muted"
+								data-toggle="tooltip"
+								data-trigger="hover click"
+								title="{{ $__t('After merging, this product will be kept') }}"></i>
+						</label>
+						<select class="custom-control custom-select"
+							id="merge-products-keep"
+							required>
+							<option></option>
+							@foreach($products as $product)
+							<option value="{{ $product->id }}">{{ $product->name }}</option>
+							@endforeach
+						</select>
+					</div>
+					<div class="form-group">
+						<label for="merge-products-remove">{{ $__t('Product to remove') }}&nbsp;<i class="fas fa-question-circle text-muted"
+								data-toggle="tooltip"
+								data-trigger="hover click"
+								title="{{ $__t('After merging, all occurences of this product will be replaced by the kept product (means this product will not exist anymore)') }}"></i>
+						</label>
+						<select class="custom-control custom-select"
+							id="merge-products-remove"
+							required>
+							<option></option>
+							@foreach($products as $product)
+							<option value="{{ $product->id }}">{{ $product->name }}</option>
+							@endforeach
+						</select>
+					</div>
+
+				</form>
 			</div>
 			<div class="modal-footer">
 				<button type="button"
@@ -268,8 +275,7 @@
 					data-dismiss="modal">{{ $__t('Cancel') }}</button>
 				<button id="merge-products-save-button"
 					type="button"
-					class="btn btn-primary"
-					data-dismiss="modal">{{ $__t('OK') }}</button>
+					class="btn btn-primary">{{ $__t('OK') }}</button>
 			</div>
 		</div>
 	</div>