Commit 26f7515d authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Markus Klein
Browse files

[TASK] Hide selected items in multipleSideBySide

If a multipleSideBySide form element is not allowed to add the same
value multiple times, its selected values are hidden now and it's not
possible to add them again unless the values are removed from the
selection.

Resolves: #76071
Releases: master, 7.6
Change-Id: I99d6c609ca081f4b8cb6f8ad07f74385a23b7a5c
Reviewed-on: https://review.typo3.org/48031


Reviewed-by: Nicole Cordes's avatarNicole Cordes <typo3@cordes.co>
Tested-by: Nicole Cordes's avatarNicole Cordes <typo3@cordes.co>
Reviewed-by: Wouter Wolters's avatarWouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters's avatarWouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Markus Klein's avatarMarkus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein's avatarMarkus Klein <markus.klein@typo3.org>
parent 18cef0a5
...@@ -89,6 +89,7 @@ class SelectMultipleSideBySideElement extends AbstractFormElement ...@@ -89,6 +89,7 @@ class SelectMultipleSideBySideElement extends AbstractFormElement
$size = 2; $size = 2;
} }
$size = $config['autoSizeMax'] ? MathUtility::forceIntegerInRange(count($itemsArray) + 1, MathUtility::forceIntegerInRange($size, 1), $config['autoSizeMax']) : $size; $size = $config['autoSizeMax'] ? MathUtility::forceIntegerInRange(count($itemsArray) + 1, MathUtility::forceIntegerInRange($size, 1), $config['autoSizeMax']) : $size;
$allowMultiple = !empty($config['multiple']);
$itemsToSelect = []; $itemsToSelect = [];
$filterTextfield = []; $filterTextfield = [];
...@@ -97,7 +98,13 @@ class SelectMultipleSideBySideElement extends AbstractFormElement ...@@ -97,7 +98,13 @@ class SelectMultipleSideBySideElement extends AbstractFormElement
// Create option tags: // Create option tags:
$opt = array(); $opt = array();
foreach ($selItems as $p) { foreach ($selItems as $p) {
$opt[] = '<option value="' . htmlspecialchars($p[1]) . '" title="' . $p[0] . '">' . $p[0] . '</option>'; $disabledAttr = '';
$classAttr = '';
if (!$allowMultiple && in_array((string)$p[1], $parameterArray['itemFormElValue'], true)) {
$disabledAttr = ' disabled="disabled"';
$classAttr = ' class="hidden"';
}
$opt[] = '<option value="' . htmlspecialchars($p[1]) . '" title="' . $p[0] . '"' . $classAttr . $disabledAttr . '>' . $p[0] . '</option>';
} }
// Put together the selector box: // Put together the selector box:
$selector_itemListStyle = isset($config['itemListStyle']) $selector_itemListStyle = isset($config['itemListStyle'])
......
...@@ -80,21 +80,22 @@ define(['jquery', ...@@ -80,21 +80,22 @@ define(['jquery',
* or from a multi-select (two selects side-by-side) * or from a multi-select (two selects side-by-side)
* previously known as "setFormValueFromBrowseWin" * previously known as "setFormValueFromBrowseWin"
* *
* @param {String} fieldName formerly known as "fName" name of the field, like [tt_content][2387][header] * @param {String} fieldName Formerly known as "fName" name of the field, like [tt_content][2387][header]
* @param {(String|Number)} value the value to fill in (could be an integer) * @param {(String|Number)} value The value to fill in (could be an integer)
* @param {String} label the visible name in the selector * @param {String} label The visible name in the selector
* @param {String} title the title when hovering over it * @param {String} title The title when hovering over it
* @param {String} exclusiveValues if the select field has exclusive options that are not combine-able * @param {String} exclusiveValues If the select field has exclusive options that are not combine-able
* @param {$} $optionEl The jQuery object of the selected <option> tag
*/ */
FormEngine.setSelectOptionFromExternalSource = setFormValueFromBrowseWin = function(fieldName, value, label, title, exclusiveValues) { FormEngine.setSelectOptionFromExternalSource = setFormValueFromBrowseWin = function(fieldName, value, label, title, exclusiveValues, $optionEl) {
exclusiveValues = String(exclusiveValues); exclusiveValues = String(exclusiveValues);
var $fieldEl; var $fieldEl,
var $originalFieldEl = $fieldEl = FormEngine.getFieldElement(fieldName) $originalFieldEl = $fieldEl = FormEngine.getFieldElement(fieldName),
,isMultiple = false isMultiple = false,
,isList = false; isList = false;
if ($originalFieldEl.length == 0 || value === '--div--') { if ($originalFieldEl.length === 0 || value === '--div--') {
return; return;
} }
...@@ -122,7 +123,6 @@ define(['jquery', ...@@ -122,7 +123,6 @@ define(['jquery',
} }
if (isMultiple || isList) { if (isMultiple || isList) {
// If multiple values are not allowed, clear anything that is in the control already // If multiple values are not allowed, clear anything that is in the control already
if (!isMultiple) { if (!isMultiple) {
$fieldEl.empty(); $fieldEl.empty();
...@@ -130,16 +130,18 @@ define(['jquery', ...@@ -130,16 +130,18 @@ define(['jquery',
// Clear elements if exclusive values are found // Clear elements if exclusive values are found
if (exclusiveValues) { if (exclusiveValues) {
var $optionSelect = $optionEl.closest('select');
var m = new RegExp('(^|,)' + value + '($|,)'); var m = new RegExp('(^|,)' + value + '($|,)');
// the new value is exclusive => remove all existing values // the new value is exclusive => remove all existing values
if (exclusiveValues.match(m)) { if (exclusiveValues.match(m)) {
$fieldEl.empty(); $fieldEl.empty();
$optionSelect.find('[disabled]').removeClass('hidden').prop('disabled', false);
// there is an old value and it was exclusive => it has to be removed
} else if ($fieldEl.children('option').length == 1) { } else if ($fieldEl.children('option').length == 1) {
// there is an old value and it was exclusive => it has to be removed
m = new RegExp("(^|,)" + $fieldEl.children('option').prop('value') + "($|,)"); m = new RegExp("(^|,)" + $fieldEl.children('option').prop('value') + "($|,)");
if (exclusiveValues.match(m)) { if (exclusiveValues.match(m)) {
$fieldEl.empty(); $fieldEl.empty();
$optionSelect.find('[disabled]').removeClass('hidden').prop('disabled', false);
} }
} }
} }
...@@ -156,6 +158,10 @@ define(['jquery', ...@@ -156,6 +158,10 @@ define(['jquery',
return false; return false;
} }
}); });
if (addNewValue) {
$optionEl.addClass('hidden').prop('disabled', true);
}
} }
// element can be added // element can be added
...@@ -452,6 +458,9 @@ define(['jquery', ...@@ -452,6 +458,9 @@ define(['jquery',
case '_list': case '_list':
$fieldEl = $(':input.tceforms-multiselect[data-formengine-input-name="' + fieldName + '"]', $formEl); $fieldEl = $(':input.tceforms-multiselect[data-formengine-input-name="' + fieldName + '"]', $formEl);
break; break;
case '_avail':
$fieldEl = $(':input[data-relatedfieldname="' + fieldName + '"]', $formEl);
break;
case '_mul': case '_mul':
case '_hr': case '_hr':
$fieldEl = $(':input[type=hidden][data-formengine-input-name="' + fieldName + '"]', $formEl); $fieldEl = $(':input[type=hidden][data-formengine-input-name="' + fieldName + '"]', $formEl);
...@@ -549,10 +558,18 @@ define(['jquery', ...@@ -549,10 +558,18 @@ define(['jquery',
* removes currently selected options from a select field * removes currently selected options from a select field
* *
* @param {Object} $fieldEl a jQuery object, containing the select field * @param {Object} $fieldEl a jQuery object, containing the select field
* @param {Object} $availableFieldEl a jQuery object, containing all available value
*/ */
FormEngine.removeOption = function($fieldEl) { FormEngine.removeOption = function($fieldEl, $availableFieldEl) {
var $selected = $fieldEl.find(':selected');
$availableFieldEl
.find('option[value="' + $selected.attr('value') + '"]')
.removeClass('hidden')
.prop('disabled', false);
// remove the selected options // remove the selected options
$fieldEl.find(':selected').remove(); $selected.remove();
}; };
...@@ -588,7 +605,8 @@ define(['jquery', ...@@ -588,7 +605,8 @@ define(['jquery',
} else if ($el.hasClass('t3js-btn-moveoption-bottom')) { } else if ($el.hasClass('t3js-btn-moveoption-bottom')) {
FormEngine.moveOptionToBottom($listFieldEl); FormEngine.moveOptionToBottom($listFieldEl);
} else if ($el.hasClass('t3js-btn-removeoption')) { } else if ($el.hasClass('t3js-btn-removeoption')) {
FormEngine.removeOption($listFieldEl); var $availableFieldEl = FormEngine.getFieldElement(fieldName, '_avail');
FormEngine.removeOption($listFieldEl, $availableFieldEl);
} }
// make sure to update the hidden field value when modifying the select value // make sure to update the hidden field value when modifying the select value
...@@ -608,7 +626,7 @@ define(['jquery', ...@@ -608,7 +626,7 @@ define(['jquery',
// try to add each selected field to the "left" select field // try to add each selected field to the "left" select field
$el.find(':selected').each(function() { $el.find(':selected').each(function() {
var $optionEl = $(this); var $optionEl = $(this);
FormEngine.setSelectOptionFromExternalSource(fieldName, $optionEl.prop('value'), $optionEl.text(), $optionEl.prop('title'), exclusiveValues); FormEngine.setSelectOptionFromExternalSource(fieldName, $optionEl.prop('value'), $optionEl.text(), $optionEl.prop('title'), exclusiveValues, $optionEl);
}); });
} }
}).on('click', '.t3js-editform-close', function(e) { }).on('click', '.t3js-editform-close', function(e) {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment