diff --git a/ui/src/core/xibo-cms.js b/ui/src/core/xibo-cms.js index 2a5452971f..8b45fcbd2c 100644 --- a/ui/src/core/xibo-cms.js +++ b/ui/src/core/xibo-cms.js @@ -3156,8 +3156,17 @@ function ToggleFilterView(div) { * @param element * @param parent * @param dataFormatter + * @param addRandomId */ -function makePagedSelect(element, parent, dataFormatter) { +function makePagedSelect(element, parent, dataFormatter, addRandomId = false) { + // If we need to append random id + if (addRandomId === true) { + const randomNum = Math.floor(1000000000 + Math.random() * 9000000000); + const previousId = $(element).attr('id'); + const newId = previousId ? previousId + '_' + randomNum : randomNum; + $(element).attr('data-select2-id', newId); + } + element.select2({ dropdownParent: ((parent == null) ? $("body") : $(parent)), minimumResultsForSearch: (element.data('hideSearch')) ? Infinity : 1, @@ -3278,6 +3287,8 @@ function makePagedSelect(element, parent, dataFormatter) { ) { var initialValue = element.data("initialValue"); var initialKey = element.data("initialKey"); + var textProperty = element.data("textProperty"); + var idProperty = element.data("idProperty"); var dataObj = {}; dataObj[initialKey] = initialValue; @@ -3292,23 +3303,37 @@ function makePagedSelect(element, parent, dataFormatter) { type: 'GET', data: dataObj }).then(function(data) { + // Do we need to check if it's selected + var checkSelected = false; + // If we have a custom data formatter if ( dataFormatter && typeof dataFormatter === 'function' ) { data = dataFormatter(data); + checkSelected = true; } // create the option and append to Select2 data.data.forEach(object => { - var option = new Option( - object[element.data("textProperty")], - object[element.data("idProperty")], - true, - true - ); - element.append(option) + var isSelected = true; + + // Check if it's selected if needed + if(checkSelected) { + isSelected = (initialValue == object[idProperty]); + } + + // Only had if the option is selected + if (isSelected) { + var option = new Option( + object[textProperty], + object[idProperty], + isSelected, + isSelected + ); + element.append(option) + } }); // Trigger change but skip auto save @@ -3334,8 +3359,17 @@ function makePagedSelect(element, parent, dataFormatter) { * Make a dropwdown with a search field for option's text and tag datafield (data-tags) * @param element * @param parent + * @param addRandomId */ -function makeLocalSelect(element, parent) { +function makeLocalSelect(element, parent, addRandomId = false) { + // If we need to append random id + if (addRandomId === true) { + const randomNum = Math.floor(1000000000 + Math.random() * 9000000000); + const previousId = $(element).attr('id'); + const newId = previousId ? previousId + '_' + randomNum : randomNum; + $(element).attr('data-select2-id', newId); + } + element.select2({ dropdownParent: ((parent == null) ? $("body") : $(parent)), matcher: function(params, data) { diff --git a/ui/src/editor-core/toolbar.js b/ui/src/editor-core/toolbar.js index c316101455..6ce24454bd 100644 --- a/ui/src/editor-core/toolbar.js +++ b/ui/src/editor-core/toolbar.js @@ -2325,11 +2325,11 @@ Toolbar.prototype.mediaContentHandleInputs = function( // Initialize user list input const $userListInput = $mediaForm.find('select[name="ownerId"]'); - makePagedSelect($userListInput); + makePagedSelect($userListInput, $mediaContainer, null, true); // Initialize folder input const $folderInput = $mediaForm.find('select[name="folderId"]'); - makePagedSelect($folderInput, null, function(data) { + makePagedSelect($folderInput, $mediaContainer, function(data) { // Format data const newData = []; @@ -2355,7 +2355,7 @@ Toolbar.prototype.mediaContentHandleInputs = function( return { data: newData, }; - }); + }, true); // Initialize other select inputs $mediaForm @@ -2661,7 +2661,7 @@ Toolbar.prototype.layoutTemplatesContentPopulate = function(menu) { // Initialize folder input const $folderInput = $searchForm.find('select[name="folderId"]'); - makePagedSelect($folderInput, null, function(data) { + makePagedSelect($folderInput, $searchForm, function(data) { // Format data const newData = []; @@ -2687,7 +2687,7 @@ Toolbar.prototype.layoutTemplatesContentPopulate = function(menu) { return { data: newData, }; - }); + }, true); // Initialize other select inputs $container @@ -2916,11 +2916,11 @@ Toolbar.prototype.playlistsContentPopulate = function(menu) { // Initialize user list input const $userListInput = $container .find('.media-search-form select[name="userId"]'); - makePagedSelect($userListInput); + makePagedSelect($userListInput, $container, null, true); // Initialize folder input const $folderInput = $container.find('select[name="folderId"]'); - makePagedSelect($folderInput, null, function(data) { + makePagedSelect($folderInput, $container, function(data) { // Format data const newData = []; @@ -2946,7 +2946,7 @@ Toolbar.prototype.playlistsContentPopulate = function(menu) { return { data: newData, }; - }); + }, true); // Initialize other select inputs $container