From f64f627e6e105249e5bd9e0c2093a61ac3ffdaab Mon Sep 17 00:00:00 2001
From: Marius BALTEANU <marius.balteanu@zitec.com>
Date: Wed, 9 Dec 2020 09:06:41 +0200
Subject: [PATCH] Improve query columns selector by replacing the combo multi
 select with a custom multi select with sortable items

---
 app/views/queries/_columns.html.erb    | 69 ++++++++++++++------------
 app/views/queries/_query_form.html.erb |  4 +-
 public/javascripts/application.js      | 31 ++++++++++++
 public/stylesheets/application.css     | 29 ++++++++---
 4 files changed, 92 insertions(+), 41 deletions(-)

diff --git a/app/views/queries/_columns.html.erb b/app/views/queries/_columns.html.erb
index 18443de57..d9def8ecf 100644
--- a/app/views/queries/_columns.html.erb
+++ b/app/views/queries/_columns.html.erb
@@ -2,41 +2,44 @@
 <% 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 %>);" />
+<% selected_columns = query_selected_inline_columns_options(query) %>
+<% available_columns = query_available_inline_columns_options(query) %>
+<div class="query-columns drdn">
+  <span class="drdn-trigger">
+    <%= "#{selected_columns.count} out of #{available_columns.count} columns" %>
   </span>
+  <div class="drdn-content">
+    <div class="quick-search">
+      <%= search_field_tag('q', '', :id => nil, :class => 'autocomplete',  :autocomplete => 'off') %>
+    </div>
+      <ul class="drdn-items">
+        <% query_selected_inline_columns_options(query).each do |c| %>
+          <li>
+            <span class="item-content">
+              <%= check_box_tag 'c[]', c.last, true, id: "c_#{c.last}" %>
+              <%= label_tag "c_#{c.last}", c.first %>
+            </span>
+            <span class="icon-only icon-sort-handle sort-handle"></span>
+          </li>
+        <% end %>
+        <% query_available_inline_columns_options(query).each do |c| %>
+          <li>
+            <span class="item-content">
+              <%= check_box_tag 'c[]', c.last, nil, id: "c_#{c.last}" %>
+              <%= label_tag "c_#{c.last}", c.first %>
+            </span>
+            <span class="icon-only icon-sort-handle sort-handle"></span>
+          </li>
+        <% end %>
+        </ul>
+  </div>
 </span>
-
 <%= javascript_tag do %>
-$(document).ready(function(){
-  $('.query-columns').closest('form').submit(function(){
-    $('#<%= selected_tag_id %> option:not(:disabled)').prop('selected', true);
+  $(document).ready(function(){
+    $('.query-columns').closest('form').submit(function(){
+        $('#<%= selected_tag_id %> option:not(:disabled)').prop('selected', true);
+    });
   });
-});
+  enableAutocomplete(document.querySelector(".query-columns"));
 <% end %>
+
diff --git a/app/views/queries/_query_form.html.erb b/app/views/queries/_query_form.html.erb
index bb29827f8..39cb28823 100644
--- a/app/views/queries/_query_form.html.erb
+++ b/app/views/queries/_query_form.html.erb
@@ -12,9 +12,9 @@
   </fieldset>
 
   <% if @query.available_columns.any? %>
-    <fieldset id="options" class="collapsible collapsed">
+    <fieldset id="options" class="collapsible">
       <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_options) %></legend>
-        <div class="hidden">
+        <div class="">
           <% if @query.available_display_types.size > 1 %>
           <div>
             <span class="field"><label for='display_type'><%= l(:label_display_type) %></label></span>
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index c9b7d943d..1f9f553dd 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -1103,6 +1103,37 @@ function inlineAutoComplete(element) {
     tribute.attach(element);
 }
 
+function enableAutocomplete(element) {
+  const items = $(element).find('.drdn-items')
+  items.sortable();
+  // ToDo: Replace disableSelection with CSS user-select
+  items.disableSelection();
+
+  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("span");
+      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);
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 70911e4f6..4d3f13a57 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -155,6 +155,10 @@ a#toggle-completed-versions {color:#999;}
 
 /***** Dropdown *****/
 .drdn {position:relative;}
+.drdn ul {
+  margin: 0;
+  padding: 0;
+}
 .drdn-trigger {
   box-sizing:border-box;
   overflow:hidden;
@@ -190,7 +194,8 @@ div + .drdn-items {border-top:1px solid #ccc;}
   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;}
@@ -216,10 +221,10 @@ div + .drdn-items {border-top:1px solid #ccc;}
 .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;
@@ -233,7 +238,7 @@ div + .drdn-items {border-top:1px solid #ccc;}
 }
 #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 *****/
@@ -397,9 +402,9 @@ div.table-list.boards .table-list-cell.name {width: 30%;}
   height:100%;
   vertical-align: middle;
 }
-.query-columns label {
+/*.query-columns label {
   display:block;
-}
+}*/
 .query-columns .buttons input[type=button] {
   width:35px;
   display:block;
@@ -407,6 +412,18 @@ div.table-list.boards .table-list-cell.name {width: 30%;}
 .query-columns select {
   min-width:150px;
 }
+.query-columns .drdn-trigger {
+  height: 24px;
+}
+
+.query-columns .drdn-items span.sort-handle {
+  float: right;
+  display: none;
+}
+.query-columns .drdn-items li:hover span.sort-handle {
+  display: block;
+}
+
 
 .query-totals {text-align:right; margin-top:-2.3em;}
 .query-totals>span:not(:first-child) {margin-left:0.6em;}
-- 
2.22.0