Add an option to make Userfields mandatory (closes #1339)

changelog/62_UNRELEASED_xxxx-xx-xx.md

@@ -76,7 +76,8 @@
   - => The on chore execution tracking entered information is then visible on the corresponding chore journal entry
 - Fixed that tracking chores with "Done by" a different user was not possible
 
-### Userfield fixes
+### Userfield improvements/fixes
+- Userfields can now be configured as mandatory (new Userfield option, defaults to disabled)
 - Fixed that numeric Userfields were initialised with `1.0`
 - Fixed that shortcuts (up/down key) and the format did not work correctly when using multiple date/time Userfields per object
 - Fixed that Userfields were not saved when adding a product or a recipe (only on editing)

localization/strings.pot

@@ -2157,3 +2157,12 @@ msgstr ""
 
 msgid "Mark this item as undone"
 msgstr ""
+
+msgid "Mandatory"
+msgstr ""
+
+msgid "Mandatory Userfield"
+msgstr ""
+
+msgid "When enabled, then this field must be filled on the destination form"
+msgstr ""

migrations/0145.sql

@@ -0,0 +1,2 @@
+ALTER TABLE userfields
+ADD input_required TINYINT NOT NULL DEFAULT 0 CHECK(input_required IN (0, 1));

public/viewjs/components/userfieldsform.js

@@ -158,6 +158,11 @@ Grocy.Components.UserfieldsForm.Load = function()
 					input.val(value);
 				}
 			});
+
+			$("form").each(function()
+			{
+				Grocy.FrontendHelpers.ValidateForm(this.id);
+			});
 		},
 		function(xhr)
 		{
@@ -179,3 +184,11 @@ $(".userfield-link").keyup(function(e)
 
 	formRow.find(".userfield-input").val(JSON.stringify(value));
 });
+
+$(".userfield-input").change(function(e)
+{
+	$("form").each(function()
+	{
+		Grocy.FrontendHelpers.ValidateForm(this.id);
+	});
+});

views/components/userfieldsform.blade.php

@@ -19,14 +19,18 @@
 		<label>{{ $userfield->caption }}</label>
 		<input type="text"
 			class="form-control userfield-input"
-			data-userfield-name="{{ $userfield->name }}">
+			data-userfield-name="{{ $userfield->name }}"
+			@if($userfield->input_required == 1) required @endif>
+		<div class="invalid-feedback">{{ $__t('Mandatory Userfield') }}</div>
 	</div>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_SINGLE_MULTILINE_TEXT)
 	<div class="form-group">
 		<label for="description">{{ $userfield->caption }}</label>
 		<textarea class="form-control userfield-input"
 			rows="4"
-			data-userfield-name="{{ $userfield->name }}"></textarea>
+			data-userfield-name="{{ $userfield->name }}"
+			@if($userfield->input_required == 1) required @endif></textarea>
+		<div class="invalid-feedback">{{ $__t('Mandatory Userfield') }}</div>
 	</div>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_INTEGRAL_NUMBER)
 	@include('components.numberpicker', array(
@@ -34,7 +38,7 @@
 	'label' => $userfield->caption,
 	'noNameAttribute' => true,
 	'min' => 0,
-	'isRequired' => false,
+	'isRequired' => $userfield->input_required == 1,
 	'additionalCssClasses' => 'userfield-input',
 	'additionalAttributes' => 'data-userfield-name="' . $userfield->name . '"',
 	'value' => ''
@@ -46,7 +50,7 @@
 	'noNameAttribute' => true,
 	'min' => 0,
 	'decimals' => 4,
-	'isRequired' => false,
+	'isRequired' => $userfield->input_required == 1,
 	'additionalCssClasses' => 'userfield-input',
 	'additionalAttributes' => 'data-userfield-name="' . $userfield->name . '"',
 	'value' => ''
@@ -61,7 +65,7 @@
 	'limitEndToNow' => false,
 	'limitStartToNow' => false,
 	'additionalGroupCssClasses' => 'date-only-datetimepicker',
-	'isRequired' => false,
+	'isRequired' => $userfield->input_required == 1,
 	'additionalCssClasses' => 'userfield-input',
 	'additionalAttributes' => 'data-userfield-name="' . $userfield->name . '"'
 	))
@@ -74,7 +78,7 @@
 	'initWithNow' => false,
 	'limitEndToNow' => false,
 	'limitStartToNow' => false,
-	'isRequired' => false,
+	'isRequired' => $userfield->input_required == 1,
 	'additionalCssClasses' => 'userfield-input',
 	'additionalAttributes' => 'data-userfield-name="' . $userfield->name . '"'
 	))
@@ -85,21 +89,25 @@
 				type="checkbox"
 				id="userfield-{{ $userfield->name }}"
 				data-userfield-name="{{ $userfield->name }}"
-				value="1">
+				value="1"
+				@if($userfield->input_required == 1) required @endif>
 			<label class="form-check-label custom-control-label"
 				for="userfield-{{ $userfield->name }}">{{ $userfield->caption }}</label>
+			<div class="invalid-feedback">{{ $__t('Mandatory Userfield') }}</div>
 		</div>
 	</div>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_PRESET_LIST)
 	<div class="form-group">
 		<label for="{{ $userfield->name }}">{{ $userfield->caption }}</label>
 		<select class="custom-control custom-select userfield-input"
-			data-userfield-name="{{ $userfield->name }}">
+			data-userfield-name="{{ $userfield->name }}"
+			@if($userfield->input_required == 1) required @endif>
 			<option></option>
 			@foreach(preg_split('/\r\n|\r|\n/', $userfield->config) as $option)
 			<option value="{{ $option }}">{{ $option }}</option>
 			@endforeach
 		</select>
+		<div class="invalid-feedback">{{ $__t('Mandatory Userfield') }}</div>
 	</div>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_PRESET_CHECKLIST)
 	<div class="form-group">
@@ -108,18 +116,21 @@
 			class="form-control userfield-input selectpicker"
 			data-userfield-name="{{ $userfield->name }}"
 			data-actions-Box="true"
-			data-live-search="true">
+			data-live-search="true"
+			@if($userfield->input_required == 1) required @endif>
 			@foreach(preg_split('/\r\n|\r|\n/', $userfield->config) as $option)
 			<option value="{{ $option }}">{{ $option }}</option>
 			@endforeach
 		</select>
+		<div class="invalid-feedback">{{ $__t('Mandatory Userfield') }}</div>
 	</div>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_LINK)
 	<div class="form-group">
 		<label>{{ $userfield->caption }}</label>
 		<input type="link"
 			class="form-control userfield-input"
-			data-userfield-name="{{ $userfield->name }}">
+			data-userfield-name="{{ $userfield->name }}"
+			@if($userfield->input_required == 1) required @endif>
 	</div>
 	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_LINK_WITH_TITLE)
 	<div class="form-group">
@@ -128,13 +139,16 @@
 			<div class="col-4">
 				<input type="text"
 					class="form-control userfield-link userfield-link-title"
-					placeholder="{{ $__t('Title') }}">
+					placeholder="{{ $__t('Title') }}"
+					@if($userfield->input_required == 1) required @endif>
 			</div>
 			<div class="col-8">
 				<input type="link"
 					class="form-control userfield-link userfield-link-link"
-					placeholder="{{ $__t('Link') }}">
+					placeholder="{{ $__t('Link') }}"
+					@if($userfield->input_required == 1) required @endif>
 			</div>
+			<div class="invalid-feedback">{{ $__t('Mandatory Userfield') }}</div>
 			<input data-userfield-type="link"
 				type="hidden"
 				class="userfield-input"
@@ -148,11 +162,13 @@
 			<div class="custom-file">
 				<input type="file"
 					class="custom-file-input userfield-input"
-					data-userfield-name="{{ $userfield->name }}">
+					data-userfield-name="{{ $userfield->name }}"
+					@if($userfield->input_required == 1) required @endif>
 				<label class="custom-file-label"
 					for="{{ $userfield->name }}">
 					{{ $__t('No file selected') }}
 				</label>
+				<div class="invalid-feedback">{{ $__t('Mandatory Userfield') }}</div>
 			</div>
 			<div class="input-group-append userfield-file-delete">
 				<span class="input-group-text"><i class="fas fa-trash"></i></span>
@@ -171,11 +187,13 @@
 			<div class="custom-file">
 				<input type="file"
 					class="custom-file-input userfield-input"
-					data-userfield-name="{{ $userfield->name }}">
+					data-userfield-name="{{ $userfield->name }}"
+					@if($userfield->input_required == 1) required @endif>
 				<label class="custom-file-label"
 					for="{{ $userfield->name }}">
 					{{ $__t('No file selected') }}
 				</label>
+				<div class="invalid-feedback">{{ $__t('Mandatory Userfield') }}</div>
 			</div>
 			<div class="input-group-append userfield-file-delete">
 				<span class="input-group-text"><i class="fas fa-trash"></i></span>

views/userfieldform.blade.php

@@ -128,6 +128,22 @@
 				</div>
 			</div>
 
+			<div class="form-group">
+				<div class="custom-control custom-checkbox">
+					<input @if($mode=='edit'
+						&&
+						$userfield->input_required == 1) checked @endif class="form-check-input custom-control-input" type="checkbox" id="input_required" name="input_required" value="1">
+					<label class="form-check-label custom-control-label"
+						for="input_required">
+						{{ $__t('Mandatory') }}
+						&nbsp;<i class="fas fa-question-circle text-muted"
+							data-toggle="tooltip"
+							data-trigger="hover click"
+							title="{{ $__t('When enabled, then this field must be filled on the destination form') }}"></i>
+					</label>
+				</div>
+			</div>
+
 			<button id="save-userfield-button"
 				class="btn btn-success">{{ $__t('Save') }}</button>