Implemented new Userfield type "Select list" (closes #325)

changelog/52_UNRELEASED_2019-xx-xx.md

@@ -19,6 +19,8 @@
   - When tracking an execution from the chores overview page, filter are re-applied afterwards (means when have filtered the page to only show overdue chores and after the execution the chore is not overdue anymore, it will now immediately hide id)
 - Equipment improvements/fixes
   - Fixed that the delete button not always deleted the currently selected equipment item
+- Userfield improvements
+  - New userfield type "Select list" for a list of predefined values where a single or also multiple values can then be selected on the entity object
 - General improvements/fixes
   - Improved the handling which entry page to use with disabled feature flags (thanks @nielstholenaar)
   - Fixed that the Userfield type "Preset list" had always the caption "Product group" instead of the configured one (thanks @oncleben31)

localization/en/userfield_types.po

@@ -32,3 +32,9 @@ msgstr "Date & time"
 
 msgid "checkbox"
 msgstr "Checkbox"
+
+msgid "preset-list"
+msgstr "Select list (a single item can be selected)"
+
+msgid "preset-checklist"
+msgstr "Select list (multiple items can be selected)"

localization/userfield_types.pot

@@ -35,3 +35,6 @@ msgstr ""
 
 msgid "preset-list"
 msgstr ""
+
+msgid "preset-checklist"
+msgstr ""

public/js/extensions.js

@@ -112,3 +112,8 @@ FindAllObjectsInArrayByPropertyValue = function(array, propertyName, propertyVal
 	
 	return returnArray;
 }
+
+$.fn.hasAttr = function(name)
+{
+	return this.attr(name) !== undefined;
+};

public/viewjs/components/userfieldsform.js

@@ -14,7 +14,7 @@ Grocy.Components.UserfieldsForm.Save = function(success, error)
 
 	var jsonData = { };
 
-	$("#userfields-form .userfield-input").each(function()
+	$("#userfields-form .userfield-input").not("div").each(function()
 	{
 		var input = $(this);
 		var fieldName = input.attr("data-userfield-name");
@@ -28,6 +28,10 @@ Grocy.Components.UserfieldsForm.Save = function(success, error)
 				jsonData[fieldName] = "1";
 			}
 		}
+		else if ($(this).hasAttr("multiple"))
+		{
+			jsonData[fieldName] = $(this).val().join(",");
+		}
 		else
 		{
 			jsonData[fieldName] = fieldValue;
@@ -70,6 +74,11 @@ Grocy.Components.UserfieldsForm.Load = function()
 				{
 					input.prop("checked", true);
 				}
+				else if (input.hasAttr("multiple"))
+				{
+					input.val(value.split(","));
+					$(".selectpicker").selectpicker("render");
+				}
 				else
 				{
 					input.val(value);

public/viewjs/userfieldform.js

@@ -72,7 +72,7 @@ $("#type").on("change", function(e)
 {
 	var value = $(this).val();
 
-	if (value === "preset-list")
+	if (value === "preset-list" || value === "preset-checklist")
 	{
 		$("#config").parent().removeClass("d-none");
 		$("#config-hint").text(__t("A predefined list of values, one per line"));

services/UserfieldsService.php

@@ -12,6 +12,7 @@ class UserfieldsService extends BaseService
 	const USERFIELD_TYPE_DATETIME = 'datetime';
 	const USERFIELD_TYPE_CHECKBOX = 'checkbox';
 	const USERFIELD_TYPE_PRESET_LIST = 'preset-list';
+	const USERFIELD_TYPE_PRESET_CHECKLIST = 'preset-checklist';
 
 	public function __construct()
 	{

views/choreform.blade.php

@@ -8,15 +8,6 @@
 
 @section('viewJsName', 'choreform')
 
-@push('pageScripts')
-	<script src="{{ $U('/node_modules/bootstrap-select/dist/js/bootstrap-select.min.js?v=', true) }}{{ $version }}"></script>
-	@if(!empty($__t('bootstrap-select_locale') && $__t('bootstrap-select_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/bootstrap-select/dist/js/i18n/defaults-{{ $__t('bootstrap-select_locale') }}.js?v={{ $version }}"></script>@endif
-@endpush
-
-@push('pageStyles')
-	<link href="{{ $U('/node_modules/bootstrap-select/dist/css/bootstrap-select.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
-@endpush
-
 @section('content')
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/components/userfields_tbody.blade.php

@@ -7,9 +7,11 @@
 	<td>
 	@if($userfieldObject !== null)
 		@if($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_CHECKBOX)
-		@if($userfieldObject->value == 1)<i class="fas fa-check"></i>@endif
+			@if($userfieldObject->value == 1)<i class="fas fa-check"></i>@endif
+		@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_PRESET_CHECKLIST)
+			{!! str_replace(',', '<br>', $userfieldObject->value) !!}
 		@else
-		{{ $userfieldObject->value }}
+			{{ $userfieldObject->value }}
 		@endif
 	@endif
 	</td>

views/components/userfieldsform.blade.php

@@ -84,6 +84,15 @@
 			@endforeach
 		</select>
 	</div>
+	@elseif($userfield->type == \Grocy\Services\UserfieldsService::USERFIELD_TYPE_PRESET_CHECKLIST)
+	<div class="form-group">
+		<label for="{{ $userfield->name }}">{{ $userfield->caption }}</label>
+		<select multiple class="form-control userfield-input selectpicker" data-userfield-name="{{ $userfield->name }}" data-actions-Box="true" data-live-search="true">
+			@foreach(preg_split('/\r\n|\r|\n/', $userfield->config) as $option)
+				<option value="{{ $option }}">{{ $option }}</option>
+			@endforeach
+		</select>
+	</div>
 	@endif
 
 	@endforeach

views/layout/default.blade.php

@@ -35,6 +35,7 @@
 	<link href="{{ $U('/node_modules/toastr/build/toastr.min.css?v=', true) }}{{ $version }}" rel="stylesheet">	
 	<link href="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/node_modules/summernote/dist/summernote-bs4.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/node_modules/bootstrap-select/dist/css/bootstrap-select.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/css/grocy.css?v=', true) }}{{ $version }}" rel="stylesheet">
 	<link href="{{ $U('/css/grocy_night_mode.css?v=', true) }}{{ $version }}" rel="stylesheet">
@@ -387,6 +388,8 @@
 	<script src="{{ $U('/node_modules/gettext-translator/src/translator.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/summernote/dist/summernote-bs4.js?v=', true) }}{{ $version }}"></script>
 	@if(!empty($__t('summernote_locale') && $__t('summernote_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/summernote/dist/lang/summernote-{{ $__t('summernote_locale') }}.js?v={{ $version }}"></script>@endif
+	<script src="{{ $U('/node_modules/bootstrap-select/dist/js/bootstrap-select.min.js?v=', true) }}{{ $version }}"></script>
+	@if(!empty($__t('bootstrap-select_locale') && $__t('bootstrap-select_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/bootstrap-select/dist/js/i18n/defaults-{{ $__t('bootstrap-select_locale') }}.js?v={{ $version }}"></script>@endif
 
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>