Issue #1832862 by jerdavis, nlisgo, Zekvyrin, Maouna, nod_, royal121, tadityar, Lendude, dawehner, tim.plunkett, B_man, damiankloip, ohthehugemanatee, YesCT, Bojhan, xjm, dajjen, yoroy, lisarex, penyaskito, metzlerd, veronicanerak: Make views add field scannable

core/modules/views_ui/css/views_ui.admin.theme.css

@@ -560,20 +560,20 @@ td.group-title {
 
 /* The contents of the popup dialog on the views edit form. */
 .views-filterable-options .form-type-checkbox {
-  border: 1px solid #ccc;
   padding: 5px 8px;
   border-top: none;
 }
 .views-filterable-options {
   border-top:  1px solid #ccc;
 }
-.views-filterable-options .filterable-option.odd .form-type-checkbox {
-  background-color: #f3f4ee;
-}
 .filterable-option .form-item {
   margin-bottom: 0;
   margin-top: 0;
 }
+.views-filterable-options .filterable-option .title {
+  font-weight: bold;
+  cursor: pointer;
+}
 .views-filterable-options .form-type-checkbox .description {
   margin-top: 0;
   margin-bottom: 0;

core/modules/views_ui/js/views-admin.js

@@ -291,7 +291,7 @@
    */
   Drupal.viewsUi.AddItemForm.prototype.handleCheck = function (event) {
     var $target = $(event.target);
-    var label = $.trim($target.next().html());
+    var label = $.trim($target.closest('td').next().html());
     // Add/remove the checked item to the list.
     if ($target.is(':checked')) {
       this.$selected_div.show().css('display', 'block');
@@ -443,11 +443,18 @@
      */
     this.$form = $form;
 
-    /**
+    // Click on the title checks the box.
-     * Add a keyup handler to the search box.
+    this.$form.on('click', 'td.title', function (event) {
-     */
+      var $target = $(event.currentTarget);
-    this.$searchBox = this.$form.find('[data-drupal-selector="edit-override-controls-options-search"]');
+      $target.closest('tr').find('input').trigger('click');
-    this.$searchBox.on('keyup', $.proxy(this.handleKeyup, this));
+    });
+
+    var searchBoxSelector = '[data-drupal-selector="edit-override-controls-options-search"]';
+    var controlGroupSelector = '[data-drupal-selector="edit-override-controls-group"]';
+    this.$form.on('formUpdated', searchBoxSelector + ',' + controlGroupSelector, $.proxy(this.handleFilter, this));
+
+    this.$searchBox = this.$form.find(searchBoxSelector);
+    this.$controlGroup = this.$form.find(controlGroupSelector);
 
     /**
      * Get a list of option labels and their corresponding divs and maintain it
@@ -455,8 +462,6 @@
      */
     this.options = this.getOptions(this.$form.find('.filterable-option'));
 
-    // Restripe on initial loading.
-    this.handleKeyup();
     // Trap the ENTER key in the search box so that it doesn't submit the form.
     this.$searchBox.on('keypress', function (event) {
       if (event.which === 13) {
@@ -486,7 +491,7 @@
       for (var i = 0; i < length; i++) {
         $option = $($allOptions[i]);
         $label = $option.find('label');
-        $description = $option.find('div.description');
+        $description = $option.find('.description');
         options[i] = {
           // Search on the lowercase version of the label text + description.
           searchText: $label.text().toLowerCase() + " " + $description.text().toLowerCase(),
@@ -500,52 +505,41 @@
     },
 
     /**
-     * Keyup handler for the search box that hides or shows the relevant
+     * Filter handler for the search box and type select that hides or shows the relevant
      * options.
      *
      * @param {jQuery.Event} event
-     *   The keyup event.
+     *   The formUpdated event.
      */
-    handleKeyup: function (event) {
+    handleFilter: function (event) {
-      var found;
-      var option;
-      var zebraClass;
-
       // Determine the user's search query. The search text has been converted
       // to lowercase.
       var search = this.$searchBox.val().toLowerCase();
       var words = search.split(' ');
-      var wordsLength = words.length;
+      // Get selected Group
-
+      var group = this.$controlGroup.val();
-      // Start the counter for restriping rows.
-      var zebraCounter = 0;
 
       // Search through the search texts in the form for matching text.
-      var length = this.options.length;
+      this.options.forEach(function (option) {
-      for (var i = 0; i < length; i++) {
+        function hasWord(word) {
-        // Use a local variable for the option being searched, for performance.
+          return option.searchText.indexOf(word) !== -1;
-        option = this.options[i];
+        }
-        found = true;
+
+        var found = true;
         // Each word in the search string has to match the item in order for the
         // item to be shown.
-        for (var j = 0; j < wordsLength; j++) {
+        if (search) {
-          if (option.searchText.indexOf(words[j]) === -1) {
+          found = words.every(hasWord);
-            found = false;
-          }
         }
-        if (found) {
+        if (found && group !== 'all') {
-          zebraClass = (zebraCounter % 2) ? 'odd' : 'even';
+          found = option.$div.hasClass(group);
-          // Show the checkbox row, and restripe it.
-          option.$div.removeClass('even odd');
-          option.$div.addClass(zebraClass);
-          option.$div.show();
-          zebraCounter++;
         }
-        else {
+
-          // The search string wasn't found; hide this item.
+        option.$div.toggle(found);
-          option.$div.hide();
+      });
-        }
+
-      }
+      // Adapt dialog to content size.
+      $(event.target).trigger('dialogContentResize');
     }
   });
 

core/modules/views_ui/src/Form/Ajax/AddHandler.php

@@ -107,11 +107,15 @@ class AddHandler extends ViewsFormBase {
       $form['options']['name'] = array(
         '#prefix' => '<div class="views-radio-box form-checkboxes views-filterable-options">',
         '#suffix' => '</div>',
-        '#tree' => TRUE,
+        '#type' => 'tableselect',
-        '#default_value' => 'all',
+        '#header' => array(
+          'title' => $this->t('Title'),
+          'group' => $this->t('Category'),
+          'help' => $this->t('Description'),
+        ),
+        '#js_select' => FALSE,
       );
 
-      // Group options first to simplify the usage of #states.
       $grouped_options = array();
       foreach ($options as $key => $option) {
         $group = preg_replace('/[^a-z0-9]/', '-', strtolower($option['group']));
@@ -137,23 +141,22 @@ class AddHandler extends ViewsFormBase {
 
       foreach ($grouped_options as $group => $group_options) {
         foreach ($group_options as $key => $option) {
-          $form['options']['name'][$key] = array(
+          $form['options']['name']['#options'][$key] = array(
-            '#type' => 'checkbox',
+            '#attributes' => array(
-            '#title' => $this->t('@group: @field', array('@group' => $option['group'], '@field' => $option['title'])),
+              'class' => array('filterable-option', $group),
-            '#description' => $option['help'],
+            ),
-            '#return_value' => $key,
+            'title' => array(
-            '#prefix' => "<div class='filterable-option'>",
+              'data' => array(
-            '#suffix' => '</div>',
+                '#title' => $option['title'],
-            '#states' => array(
+                '#plain_text' => $option['title'],
-              'visible' => array(
+              ),
-                array(
+              'class' => array('title'),
-                  ':input[name="override[controls][group]"]' => array('value' => 'all'),
+            ),
-                ),
+            'group' => $option['group'],
-                array(
+            'help' => array(
-                  ':input[name="override[controls][group]"]' => array('value' => $group),
+              'data' => $option['help'],
-                ),
+              'class' => array('description'),
-              )
+            ),
-            )
           );
         }
       }

core/modules/views_ui/views_ui.libraries.yml

@@ -10,6 +10,7 @@ views_ui.admin:
     - core/drupalSettings
     - core/jquery.once
     - core/jquery.form
+    - core/drupal.form
     - core/drupal.ajax
     - core/drupal.dropbutton
     - views/views.ajax