[Rt-commit] rt branch, 4.6/update-query-builder-display-columns, created. rt-5.0.0alpha1-206-g06fac39a09

[Craig Kaiser]

The branch, 4.6/update-query-builder-display-columns has been created
        at  06fac39a09641364a9dedc766a1279899739d742 (commit)

- Log -----------------------------------------------------------------
commit 4741dbc505d685a785444c4cd667e8bf64eaa067
Author: Craig Kaiser <craig at bestpractical.com>
Date:   Thu Feb 13 10:25:25 2020 -0500

    Use selectize.js for display columns add columns input

diff --git a/share/html/Search/Elements/EditFormat b/share/html/Search/Elements/EditFormat
index 598235cb89..ef2a81cb69 100644
--- a/share/html/Search/Elements/EditFormat
+++ b/share/html/Search/Elements/EditFormat
@@ -58,9 +58,12 @@
 
 <script type="text/javascript">
 jQuery( function() {
+    jQuery('#SelectDisplayColumns').selectize();
+
     jQuery('[name=AddCol], [name=RemoveCol], [name=ColUp], [name=ColDown]').click( function() {
         var name = jQuery(this).attr('name');
         var form = jQuery(this).closest('form');
+
         jQuery.ajax({
             url: '<% RT->Config->Get('WebPath') %>/Helpers/BuildFormatString?' + name + '=1&' + form.serialize(),
             success: function (data) {
@@ -69,6 +72,7 @@ jQuery( function() {
                     form.find('select[name=CurrentDisplayColumns]').html(data.CurrentDisplayColumns);
                     form.find('select[name=SelectDisplayColumns]').val('').change();
                     form.find('[name=Link],[name=Title],[name=Size],[name=Face]').val('');
+                    form.find('[name=Link],[name=Title],[name=Size],[name=Face]').selectpicker('refresh');
                 }
                 else {
                     alert('<% loc("Failed to update format. Reason:") %>' + ' ' + data.message);
@@ -87,8 +91,8 @@ jQuery( function() {
 
     <div class="col-12 col-md-3">
       <div class="form-row">
-        <div class="col-12">
-          <select name="SelectDisplayColumns" multiple="multiple" class="form-control selectpicker">
+        <div class="col-md-12">
+          <select name="SelectDisplayColumns" id="SelectDisplayColumns" multiple="multiple">
 % my %seen;
 % foreach my $field ( grep !$seen{lc $_}++, @$AvailableColumns) {
           <option class="<% CSSClass($field) %>" value="<% $field %>" <% $selected{$field} ? 'selected="selected"' : '' |n%>>\

commit 885e31a69e74b38832946165110dd41001156902
Author: Craig Kaiser <craig at bestpractical.com>
Date:   Thu Feb 13 10:43:50 2020 -0500

    Use empty quotes for 'None' value of Link display columns input
    
    After we add a new display column to the search format we clear the
    Link, Title, Size and style inputs by setting their value to "".
    Having the None value for Link be different results in a Bootstrap
    selectpicker JavaScript error as "" is not a valid value for Link.

diff --git a/share/html/Search/Elements/EditFormat b/share/html/Search/Elements/EditFormat
index ef2a81cb69..6ead08456f 100644
--- a/share/html/Search/Elements/EditFormat
+++ b/share/html/Search/Elements/EditFormat
@@ -109,7 +109,7 @@ jQuery( function() {
 %# leave 1 col to save some space to the right "->"
         <div class="value col-8">
           <select name="Link" class="form-control selectpicker">
-              <option value="None">-</option>
+              <option value="">-</option>
               <option value="Display"><&|/l&>Display</&></option>
 % if ($IncludeTicketLinks) {
               <option value="Take"><&|/l&>Take</&></option>

commit 06fac39a09641364a9dedc766a1279899739d742
Author: Craig <craig at bestpractical.com>
Date:   Fri May 1 17:04:36 2020 -0400

    Set max-height for display columns selectize input
    
    This allows for a vertical scroll on the select options.

diff --git a/share/html/Search/Elements/EditFormat b/share/html/Search/Elements/EditFormat
index 6ead08456f..98f4d95f3d 100644
--- a/share/html/Search/Elements/EditFormat
+++ b/share/html/Search/Elements/EditFormat
@@ -59,6 +59,7 @@
 <script type="text/javascript">
 jQuery( function() {
     jQuery('#SelectDisplayColumns').selectize();
+    jQuery('.selectize-dropdown-content').addClass("selectize-max-height");
 
     jQuery('[name=AddCol], [name=RemoveCol], [name=ColUp], [name=ColDown]').click( function() {
         var name = jQuery(this).attr('name');
diff --git a/share/static/css/elevator-light/selectize.customized.css b/share/static/css/elevator-light/selectize.customized.css
index 5d3106c0fd..f54b428b5e 100644
--- a/share/static/css/elevator-light/selectize.customized.css
+++ b/share/static/css/elevator-light/selectize.customized.css
@@ -35,6 +35,10 @@
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff284691', endColorstr='#ff284691', GradientType=0);
 }
 
+.selectize-dropdown-content.selectize-max-height {
+    max-height: 200px;
+}
+
 .selectize-dropdown-content {
   max-height: none;
 }

-----------------------------------------------------------------------