Merge pull request #347 from ZmagoD/zd_SCI_790

fixes few bugs in sample table SCI-787, 790, 784

app/assets/javascripts/samples/sample_datatable.js.erb

@@ -860,8 +860,7 @@ function changeToEditMode() {
             'data-editable data-deletable ' +
             'data-edit-url="' + data.edit_url + '" ' +
             'data-destroy-html-url="' + data.destroy_html_url + '"' +
-            '>' +
-            data.name + '</th>');
+            '>' + generateColumnNameTooltip(data.name) + '</th>');
           var colOrder = table.colReorder.order();
           colOrder.push(colOrder.length);
           // Remove all event handlers as we re-initialize them later with
@@ -876,6 +875,7 @@ function changeToEditMode() {
           table = dataTableInit();
           table.on('init.dt', function() {
             loadColumnsNames();
+            dropdownOverflow();
           });
         },
         url: url
@@ -941,7 +941,7 @@ function changeToEditMode() {
           'class="' + visLi + '"' +
           '>' +
           '<i class="grippy"></i> ' +
-          '<span class="text">' + el.innerText + '</span> ' +
+          '<span class="text">' + generateColumnNameTooltip(el.innerText) + '</span> ' +
           '<input type="text" class="text-edit form-control" style="display: none;" />' +
           '<span class="pull-right controls">' +
           '<span class="ok glyphicon glyphicon-ok" style="display: none;"></span>' +
@@ -1039,8 +1039,9 @@ function changeToEditMode() {
         data: {custom_field: {name: newName}},
         dataType: 'json',
         success: function() {
-          text.text(newName);
-          $(table.columns().header()).filter('#' + id).text(newName);
+          text.html(generateColumnNameTooltip(newName));
+          $(table.columns().header()).filter('#' + id)
+            .html(generateColumnNameTooltip(newName));
           cancelEditMode();
         },
         error: function(xhr) {
@@ -1210,6 +1211,28 @@ function changeToEditMode() {
     });
   }
 
+  // calculate the max height of window and adjust dropdown max-height
+  function dropdownOverflow() {
+    var windowHeight = $( window ).height();
+    var offset = windowHeight - dropdownList.offset().top;
+
+    if(dropdownList.height() >= offset) {
+      dropdownList.css('maxHeight', offset);
+    }
+  }
+
+  function generateColumnNameTooltip(name) {
+    if( $.trim(name).length >
+        <%= Constants::NAME_TRUNCATION_LENGTH_DROPDOWN %>) {
+      return '<div class="modal-tooltip">' +
+             truncateLongString(name,
+               <%= Constants::NAME_TRUNCATION_LENGTH_DROPDOWN %>) +
+             '<span class="modal-tooltiptext">' + name + '</span></div>';
+    } else {
+      return name;
+    }
+  }
+
   // initialze dropdown after the table is loaded
   function initDropdown() {
     table.on('init.dt', function() {
@@ -1223,6 +1246,10 @@ function changeToEditMode() {
       loadColumnsNames();
       dropdownList.sortable('enable');
     });
+
+    $('#samples-columns-dropdown').on('shown.bs.dropdown', function() {
+      dropdownOverflow();
+    })
   }
 
   initDropdown();

app/assets/javascripts/sitewide/string_utils.js

@@ -2,15 +2,24 @@
  * Truncate long strings where is necessary.
  */
 function truncateLongString( el, chars ) {
+  if($.type(el) !== 'string'){
     var input = $.trim(el.text());
+  } else {
+    var input = $.trim(el);
+  }
 
   var html = "";
-  if( el.children().hasClass("glyphicon") ){
+  if( $.type(el) !== 'string' &&
+      el.children().hasClass("glyphicon")) {
     html = el.children()[0];
   }
 
   if( input.length >= chars ){
+    if($.type(el) != 'string') {
       var newText = el.text().slice(0, chars);
+    }else {
+      var newText = el.slice(0, chars);
+    }
     for( var i = newText.length; i > 0; i--){
       if(newText[i] === ' ' && i > 10){
         newText = newText.slice(0, i);
@@ -20,10 +29,16 @@ function truncateLongString( el, chars ) {
 
     if ( html ) {
       el.html(html.outerHTML + newText + '...' );
+    } else {
+      if($.type(el) === 'string'){
+        return newText + '...';
       } else {
       el.html(newText + '...' );
       }
     }
+  } else {
+    return el;
+  }
 }
 
 /*

app/assets/stylesheets/themes/scinote.scss

@@ -1453,6 +1453,7 @@ html.turbolinks-progress-bar::before {
     text-align: center;
     visibility: hidden;
     width: 200px;
+    word-wrap: break-word;
     z-index: $infinity;
   }
 }
@@ -1596,11 +1597,15 @@ textarea.textarea-sm {
 // new smart dropdown styles
 
 .smart-dropdown {
-  max-height: 400px;
   overflow-y: auto;
   padding: 0;
   width: 300px;
 
+  .modal-tooltiptext {
+    margin-left: 0;
+    z-index: 99999999;
+  }
+
   li {
     background: $color-white;
     border: 1px solid $color-alto;
@@ -1691,3 +1696,8 @@ textarea.textarea-sm {
     }
   }
 }
+
+th.custom-field .modal-tooltiptext {
+  margin-left: 0;
+  z-index: 99999999;
+}

app/controllers/user_samples_controller.rb

@@ -21,6 +21,7 @@ class UserSamplesController < ApplicationController
   def load_samples_table_status
     @samples_table_state = SamplesTable.find_status(current_user,
                                                     current_organization).first
+
     respond_to do |format|
       if @samples_table_state
         format.json do

app/helpers/application_helper.rb

@@ -12,6 +12,15 @@ module ApplicationHelper
       (controller_name == 'reports' && action_name == 'index')
   end
 
+  def display_tooltip(message, len = Constants::NAME_TRUNCATION_LENGTH)
+    if message.strip.length > Constants::NAME_TRUNCATION_LENGTH
+      "<div class='modal-tooltip'>#{truncate(message.strip, length: len)} \
+        <span class='modal-tooltiptext'>#{message.strip}</span></div>".html_safe
+    else
+      truncate(message.strip, length: len)
+    end
+  end
+
   def sample_types_page_project?
     controller_name == 'sample_types' &&
       @my_module.nil? &&

app/models/samples_table.rb

@@ -5,7 +5,7 @@ class SamplesTable < ActiveRecord::Base
   belongs_to :organization, inverse_of: :samples_tables
 
   scope :find_status,
-        ->(org, user) { where(user: user, organization: org).pluck(:status) }
+        ->(user, org) { where(user: user, organization: org).pluck(:status) }
 
   def self.update_samples_table_state(custom_field, column_index)
     samples_table = SamplesTable.where(user: custom_field.user,

app/views/shared/_samples.html.erb

@@ -147,7 +147,7 @@
             <%= "data-edit-url='#{organization_custom_field_path(@organization, cf)}'" %>
             <%= "data-destroy-html-url='#{organization_custom_field_destroy_html_path(@organization, cf)}'" %>
         >
-          <%= cf.name %>
+          <%= display_tooltip(cf.name) %>
         </th>
         <% end %>
       </tr>

config/initializers/constants.rb

@@ -9,6 +9,8 @@ class Constants
   NAME_MAX_LENGTH = 255
   # Max characters for short text fields, after which they get truncated
   NAME_TRUNCATION_LENGTH = 25
+  # Max characters for short text fields, in dropdownList
+  NAME_TRUNCATION_LENGTH_DROPDOWN = 20
   # Max characters for long text fields
   TEXT_MAX_LENGTH = 10000
   # Max characters for rich text fields (in html format)