0001-Improve-query-columns-selector-by-replacing-the-comb.patch - Redmine

Gemfile
4	4	gem 'bundler', '>= 1.12.0'
5	5
6	6	gem 'rails', '5.2.4.4'
	7	gem "view_component", require: "view_component/engine"
7	8	gem 'sprockets', '~> 3.7.2' if RUBY_VERSION < '2.5'
8	9	gem 'rouge', '~> 3.26.0'
9	10	gem 'request_store', '~> 1.5.0'

     <div class="drdn <%= @css_classes %>">
       <span class="drdn-trigger">
         <span class="selected"><%= @selected_items_count  %></span> out of <span class="total"><%= @selected_items_count + @available_items_count %></span> selected
       </span>
       <div class="drdn-content">
         <div class="quick-search">
           <%= search_field_tag('q', '', :id => nil, :class => 'autocomplete',  :autocomplete => 'off') %>
         </div>
         <ul class="drdn-items">
           <% @items.each do |c| %>
             <li>
               <div class="item-content">
                 <%= check_box_tag "#{@name}[]", c[1], c.last, id: "#{@name}_#{c[1]}" %>
                 <%= label_tag "#{@name}_#{c[1]}", c.first, :class => 'label-item'%>
               </div>
               <% if @sortable %>
                 <div class="item-handler">
                   <span class="icon-only icon-sort-handle sort-handle"></span>
                 </div>
               <% end %>
             </li>
           <% end %>
         </ul>
       </div>
     </div>
     <%= javascript_tag do %>
       enableAutocomplete(document.querySelector(".query-columns"));
     <% end %>

     # frozen_string_literal: true
     class SelectComponent < ViewComponent::Base
       def initialize(
         items:,
         name:,
         css_class:
+      )
         @selected_items_count = items.count{|v| v[2] == true }
         @available_items_count = items.count - @selected_items_count
         @sortable = true
         @name = name
         @items = items
         @css_classes = css_classes(css_class)
       end
       private
       def css_classes(css_class)
         s = +''
         s << css_class
         s << " dropdown-sortable" if @sortable
+        s
       end
     end

           reject(&:frozen?).collect {|column| [column.caption, column.name]}
       end
       def query_options_for_multiselect(query)
         selected_columns = query_selected_inline_columns_options(query).map{|s| s.append(true)}
         available_columns = query_available_inline_columns_options(query).map{|s| s.append(false)}
         columns = selected_columns + available_columns
         columns
       end
       def render_query_columns_selection(query, options={})
         tag_name = (options[:name] || 'c') + '[]'
         render :partial => 'queries/columns', :locals => {:query => query, :tag_name => tag_name}

     <% tag_id = tag_name.gsub(/[\[\]]+/, '_').sub(/_+$/, '') %>
     <% available_tag_id = "available_#{tag_id}" %>
     <% selected_tag_id = "selected_#{tag_id}" %>
     <span class="query-columns">
       <span>
           <%= label_tag available_tag_id, l(:description_available_columns) %>
           <%= select_tag 'available_columns',
                   options_for_select(query_available_inline_columns_options(query)),
                   :id => available_tag_id,
                   :multiple => true, :size => 10,
                   :ondblclick => "moveOptions(this.form.#{available_tag_id}, this.form.#{selected_tag_id});" %>
       </span>
       <span class="buttons">
           <input type="button" value="&#8594;" class="move-right"
            onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);" />
           <input type="button" value="&#8592;" class="move-left"
            onclick="moveOptions(this.form.<%= selected_tag_id %>, this.form.<%= available_tag_id %>);" />
       </span>
       <span>
           <%= label_tag selected_tag_id, l(:description_selected_columns) %>
           <%= select_tag tag_name,
                   options_for_select(query_selected_inline_columns_options(query)),
                   :id => selected_tag_id,
                   :multiple => true, :size => 10,
                   :ondblclick => "moveOptions(this.form.#{selected_tag_id}, this.form.#{available_tag_id});" %>
       </span>
       <span class="buttons">
           <input type="button" value="&#8648;" onclick="moveOptionTop(this.form.<%= selected_tag_id %>);" />
           <input type="button" value="&#8593;" onclick="moveOptionUp(this.form.<%= selected_tag_id %>);" />
           <input type="button" value="&#8595;" onclick="moveOptionDown(this.form.<%= selected_tag_id %>);" />
           <input type="button" value="&#8650;" onclick="moveOptionBottom(this.form.<%= selected_tag_id %>);" />
       </span>
     </span>
     <%= javascript_tag do %>
     $(document).ready(function(){
       $('.query-columns').closest('form').submit(function(){
         $('#<%= selected_tag_id %> option:not(:disabled)').prop('selected', true);
       });
     });
     <% end %>
     <%= render SelectComponent.new(
       items: query_options_for_multiselect(query),
       name: "c",
       css_class: "query-columns",
     ) %>

         tribute.attach(element);
+    }
     function enableAutocomplete(element) {
       const items = $(element).find('.drdn-items')
       if (element.classList.contains('dropdown-sortable')) {
         items.sortable();
         // ToDo: Replace disableSelection with CSS user-select
         items.disableSelection();
+      }
       element.querySelector(".drdn-items").addEventListener('click', function(event) {
         if (event.target.tagName.toLowerCase() === 'input') {
           const checkedEl = element.querySelectorAll('.item-content input:checked').length
           element.querySelector('.drdn-trigger span.selected').innerText = checkedEl
+        }
       })
       element.querySelector("input.autocomplete").addEventListener('input', function(event) {
         filterValues(element, event)
       })
       function filterValues(context, event) {
         var input, filter, ul, li, a, i, txtValue;
         input = event.currentTarget;
         filter = input.value.toLowerCase();
         ul = element.querySelector(".drdn-items");
         li = ul.getElementsByTagName("li");
         for (i = 0; i < li.length; i++) {
           a = li[i].querySelector("div");
           txtValue = a.textContent || a.innerText;
           if (txtValue.toLowerCase().indexOf(filter) > -1) {
             li[i].style.display = '';
           } else {
             li[i].style.display = 'none';
+          }
+        }
+      }
+    }
     $(document).ready(setupAjaxIndicator);
     $(document).ready(hideOnLoad);

     a#toggle-completed-versions {color:#999;}
     /***** Dropdown *****/
     .drdn {position:relative;}
     .drdn {
       position: relative;
+    }
     .drdn ul {
       margin: 0;
       padding: 0;
+    }
     .drdn li {
       list-style: none;
       display: flex;
+    }
     .drdn li:first-child {
       margin-top: 4px;
+    }
     .drdn li .item-content {
       display: flex;
       flex-grow: 1;
       line-height: 26px;
+    }
     .drdn .label-item {
       width: 100%;
+    }
     .drdn li .item-handler {
       display: none;
+    }
     .drdn li:hover .item-handler {
       display: block;
+    }
     .drdn li .item-handler span {
       height: 26px;
+    }
     .drdn-trigger {
       box-sizing:border-box;
       overflow:hidden;
-...
       overflow:hidden;
       text-overflow: ellipsis;
       white-space:nowrap;
       padding:4px 8px;
       padding-left: 8px;
       padding-right: 8px;
+    }
     .drdn-items>a:hover {text-decoration:none;}
     .drdn-items>*:focus {border:1px dotted #bbb;}
-...
     .contextual .drdn-items {padding:2px; min-width: 160px;}
     .contextual .drdn-items>a {padding: 5px 8px;}
     .contextual .drdn-items>a.icon {padding-left: 24px; background-position-x: 4px;}
     .contextual .drdn-items>a:hover {color:#2A5685; border:1px solid #628db6; background-color:#eef5fd; border-radius:3px;}
     .contextual .drdn-items>a:hover, .query-columns .drdn-items li:hover {color:#2A5685; border:1px solid #628db6; background-color:#eef5fd; border-radius:3px;}
     #project-jump.drdn {width:200px;display:inline-block;}
     #project-jump .drdn-trigger {
     #project-jump .drdn-trigger, .query-columns .drdn-trigger {
       width:100%;
       height:24px;
       display:inline-block;
-...
+    }
     #project-jump .drdn.expanded .drdn-trigger {background-image:url(../images/arrow_up.png);}
     #project-jump .drdn-content {width:280px;}
     #project-jump .drdn-items>* {color:#555 !important;}
     #project-jump .drdn-items>* {color:#555 !important; padding-top: 4px; padding-bottom: 8px;}
     #project-jump .drdn-items>a:hover {background-color:#759FCF; color:#fff !important;}
     /***** Tables *****/
-...
       height:100%;
       vertical-align: middle;
+    }
     .query-columns label {
       display:block;
+    }
     .query-columns .buttons input[type=button] {
       width:35px;
       display:block;

Project

General

Profile

Redmine

Feature #34420 » 0001-Improve-query-columns-selector-by-replacing-the-comb.patch