[TASK] Hide selected items in multipleSideBySide 54/48054/2
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Sat, 7 May 2016 08:30:06 +0000 (10:30 +0200)
committerMarkus Klein <markus.klein@typo3.org>
Tue, 10 May 2016 08:01:15 +0000 (10:01 +0200)
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/48054
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
typo3/sysext/backend/Classes/Form/Element/SelectMultipleSideBySideElement.php
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js

index cd3c538..d74b3a1 100644 (file)
@@ -89,6 +89,7 @@ class SelectMultipleSideBySideElement extends AbstractFormElement
             $size = 2;
         }
         $size = $config['autoSizeMax'] ? MathUtility::forceIntegerInRange(count($itemsArray) + 1, MathUtility::forceIntegerInRange($size, 1), $config['autoSizeMax']) : $size;
+        $allowMultiple = !empty($config['multiple']);
 
         $itemsToSelect = [];
         $filterTextfield = [];
@@ -97,7 +98,13 @@ class SelectMultipleSideBySideElement extends AbstractFormElement
             // Create option tags:
             $opt = array();
             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:
             $selector_itemListStyle = isset($config['itemListStyle'])
index 15878a9..9136d30 100644 (file)
@@ -80,21 +80,22 @@ define(['jquery',
         * or from a multi-select (two selects side-by-side)
         * previously known as "setFormValueFromBrowseWin"
         *
-        * @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} label the visible name in the selector
-        * @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} 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} label The visible name in the selector
+        * @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 {$} $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);
 
-               var $fieldEl;
-               var $originalFieldEl = $fieldEl = FormEngine.getFieldElement(fieldName)
-                               ,isMultiple = false
-                               ,isList = false;
+               var $fieldEl,
+                       $originalFieldEl = $fieldEl = FormEngine.getFieldElement(fieldName),
+                       isMultiple = false,
+                       isList = false;
 
-               if ($originalFieldEl.length == 0 || value === '--div--') {
+               if ($originalFieldEl.length === 0 || value === '--div--') {
                        return;
                }
 
@@ -122,7 +123,6 @@ define(['jquery',
                }
 
                if (isMultiple || isList) {
-
                        // If multiple values are not allowed, clear anything that is in the control already
                        if (!isMultiple) {
                                $fieldEl.empty();
@@ -130,16 +130,18 @@ define(['jquery',
 
                        // Clear elements if exclusive values are found
                        if (exclusiveValues) {
+                               var $optionSelect = $optionEl.closest('select');
                                var m = new RegExp('(^|,)' + value + '($|,)');
                                // the new value is exclusive => remove all existing values
                                if (exclusiveValues.match(m)) {
                                        $fieldEl.empty();
-
-                               // there is an old value and it was exclusive => it has to be removed
+                                       $optionSelect.find('[disabled]').removeClass('hidden').prop('disabled', false);
                                } 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') + "($|,)");
                                        if (exclusiveValues.match(m)) {
                                                $fieldEl.empty();
+                                               $optionSelect.find('[disabled]').removeClass('hidden').prop('disabled', false);
                                        }
                                }
                        }
@@ -156,6 +158,10 @@ define(['jquery',
                                                return false;
                                        }
                                });
+
+                               if (addNewValue) {
+                                       $optionEl.addClass('hidden').prop('disabled', true);
+                               }
                        }
 
                        // element can be added
@@ -452,6 +458,9 @@ define(['jquery',
                                case '_list':
                                        $fieldEl = $(':input.tceforms-multiselect[data-formengine-input-name="' + fieldName + '"]', $formEl);
                                        break;
+                               case '_avail':
+                                       $fieldEl = $(':input[data-relatedfieldname="' + fieldName + '"]', $formEl);
+                                       break;
                                case '_mul':
                                case '_hr':
                                        $fieldEl = $(':input[type=hidden][data-formengine-input-name="' + fieldName + '"]', $formEl);
@@ -549,10 +558,18 @@ define(['jquery',
         * removes currently selected options from a 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
-               $fieldEl.find(':selected').remove();
+               $selected.remove();
        };
 
 
@@ -585,7 +602,8 @@ define(['jquery',
                                } else if ($el.hasClass('t3js-btn-moveoption-bottom')) {
                                        FormEngine.moveOptionToBottom($listFieldEl);
                                } 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
@@ -605,7 +623,7 @@ define(['jquery',
                                // try to add each selected field to the "left" select field
                                $el.find(':selected').each(function() {
                                        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) {