Merge pull request #320 from ZmagoD/zd_SCI_698

adds new samples columns dropdown [fixes SCI-698]

app/assets/javascripts/samples/sample_datatable.js

@@ -9,18 +9,8 @@ var selectedSample;
 
 table = $("#samples").DataTable({
     order: [[2, "desc"]],
-    dom: "RB<'row'<'col-sm-9-custom toolbar'l><'col-sm-3-custom'f>>tpi",
+    dom: "R<'row'<'col-sm-9-custom toolbar'l><'col-sm-3-custom'f>>tpi",
     stateSave: true,
-    buttons: [{
-        extend: "colvis",
-        text: function () {
-            return '<span class="glyphicon glyphicon-option-horizontal"></span> ' +
-                "<span class='hidden-xs-custom'>" +
-                I18n.t('samples.column_visibility') +
-                '</span>';
-        },
-        columns: ":gt(2)"
-    }],
     processing: true,
     serverSide: true,
     ajax: {
@@ -116,8 +106,6 @@ table = $("#samples").DataTable({
     }
 });
 
-table.buttons().container().appendTo('#datatables-buttons');
-
 // Enables noSearchHidden plugin
 $.fn.dataTable.defaults.noSearchHidden = true
 
@@ -763,4 +751,78 @@ function changeToEditMode() {
 
     // Table specific stuff
     table.button(0).enable(false);
-}
+}
+
+(function(table) {
+  'use strict';
+
+  var dropdownList = $('#samples-columns-list');
+
+  // loads the columns names in the dropdown list
+  function loadColumnsNames() {
+    _.each(table.columns().header(), function(el, index) {
+      if( index > 1 ) {
+        var colIndex = $(el).attr('data-column-index');
+        var visible = table.column(colIndex).visible();
+        var visClass = (visible) ? 'glyphicon-eye-open' : 'glyphicon-eye-close';
+        var visLi = (visible) ? '' : 'col-invisible';
+        var html = '<li data-position="' + colIndex + '" class="' + visLi +
+                   '"><i class="grippy"></i> <span class="text">' +
+                   el.innerText + '</span> <span class="pull-right controls">' +
+                   '<span class="vis glyphicon ' + visClass + '"></span> ' +
+                   '<span class="edit glyphicon glyphicon-pencil"></span> ' +
+                   '<span class="del glyphicon glyphicon-trash"></span>' +
+                   '</span></li>';
+        dropdownList.append(html);
+      }
+    });
+
+    // toggles grip img
+    customLiHoverEffect();
+  }
+
+  function customLiHoverEffect() {
+    var liEl = dropdownList.find('li');
+    liEl.mouseover(function() {
+      $(this)
+        .find('.grippy')
+        .addClass('grippy-img');
+    }).mouseout(function() {
+      $(this)
+        .find('.grippy')
+        .removeClass('grippy-img');
+    });
+  }
+
+  function toggleColumnVisibility() {
+    var lis = dropdownList.find('.vis');
+    lis.on('click', function(event) {
+      event.stopPropagation();
+      var self = $(this);
+      var li = self.closest('li');
+      var column = table.column(li.attr('data-position'));
+
+      if ( column.visible() ) {
+        self.addClass('glyphicon-eye-close');
+        self.removeClass('glyphicon-eye-open');
+        li.addClass('col-invisible');
+        column.visible(false);
+      } else {
+        self.addClass('glyphicon-eye-open');
+        self.removeClass('glyphicon-eye-close');
+        li.removeClass('col-invisible');
+        column.visible(true);
+      }
+    });
+  }
+
+  // initialze dropdown after the table is loaded
+  function initDropdown() {
+    table.on('draw.dt', function() {
+      loadColumnsNames();
+      toggleColumnVisibility();
+    });
+  }
+
+  initDropdown();
+})(table);

app/assets/stylesheets/themes/scinote.scss

@@ -1580,3 +1580,55 @@ textarea.textarea-sm {
     }
   }
 }
+
+// new smart dropdown styles
+
+.smart-dropdown {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 0;
+  width: 300px;
+
+  li {
+    border: 1px solid $color-alto;
+    padding: 10px 10px 10px 0;
+    vertical-align: middle;
+  }
+
+  .vis {
+    cursor: pointer;
+    margin-right: 5px;
+  }
+
+  .edit {
+    margin-right: 5px;
+  }
+
+  .grippy {
+    background-repeat: none;
+    display: inline-block;
+    height: 19px;
+    margin-top: 5px;
+    width: 10px;
+  }
+
+  .grippy-img {
+    background: url(asset-path('custom/grippy.png'));
+  }
+
+  .text {
+    display: inline-block;
+    padding-left: 15px;
+    padding-top: 5px;
+    position: absolute;
+  }
+
+  .col-invisible {
+    color: $color-alto;
+  }
+
+  .controls {
+    display: inline-block;
+    margin-top: 5px;
+  }
+}

app/views/shared/_samples.html.erb

@@ -41,39 +41,26 @@
   <% end %>
 
   <div id="datatables-buttons" style="display: inline;">
+    <div id="samples-columns-dropdown" class="dropdown">
+      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+        <%= t('samples.columns') %>
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right smart-dropdown" id="samples-columns-list">
+      </ul>
+    </div>
   </div>
 
   <div class="dropdown pull-right" style="display: inline;">
-    <button class="btn btn-default dropdown-toggle" type="button" id="addMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" <%= "disabled" unless can_add_sample_related_things_to_organization%>>
-      <span class="glyphicon glyphicon-plus"></span>
-      <span class="hidden-xs-custom">
-        <%= t'More' %>
-        <span class="caret"></span>
-      </span>
+    <button class="btn btn-default dropdown-toggle"
+            type="button"
+            id="addMenu"
+            data-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="true"
+            <%= "disabled" unless can_add_sample_related_things_to_organization%>>
+      <%= t('samples.types_and_groups') %>
     </button>
-    <ul class="dropdown-menu" aria-labelledby="addMenu">
-      <% if can_create_custom_field_in_organization(@organization) %>
-      <li>
-        <a id="addNewColumn" data-toggle="modal" data-target="#modal-create-custom-field">
-        <%= t("samples.add_new_column")%>
-        </a>
-      </li>
-      <% end %>
-      <% if can_create_sample_type_in_organization(@organization) %>
-      <li>
-        <a data-toggle="modal" data-target="#modal-create-sample-type">
-        <%= t("samples.add_new_sample_type") %>
-        </a>
-      </li>
-      <% end %>
-      <% if can_create_sample_group_in_organization(@organization) %>
-      <li>
-        <a data-toggle="modal" data-target="#modal-create-sample-group">
-        <%= t("samples.add_new_sample_group") %>
-        </a>
-      </li>
-      <% end %>
-    </ul>
   </div>
 </div>
 

config/locales/en.yml

@@ -798,6 +798,8 @@ en:
       success_flash: "Table result successfully deleted."
 
   samples:
+    columns: 'Columns'
+    types_and_groups: 'Types and groups'
     actions: "Actions"
     add_new_sample: "Add new sample"
     import: "Import"