add sample information in pop-up

app/assets/javascripts/samples/sample_datatable.js

@@ -163,9 +163,9 @@ function updateDataTableSelectAllCtrl(table){
 }
 
 // Handle click on table cells with checkboxes
-// $('#samples').on('click', 'tbody td, thead th:first-child', function(e){
+$('#samples').on('click', 'tbody td, thead th:first-child', function(e){
-//     $(this).parent().find('input[type="checkbox"]').trigger('click');
+    $(this).parent().find('input[type="checkbox"]').trigger('click');
-// });
+});
 
 // Handle clicks on checkbox
 $("#samples tbody").on("click", "input[type='checkbox']", function(e){
@@ -281,28 +281,50 @@ table.on('draw', function(){
 
 //Show sample info
 function sampleInfoListener() {
-    $(".sample_info")
+    $(".sample_info").on("click", function(e){
-      .on("click", function(){
         var that = $(this);
         $.ajax({
             method: "GET",
             url: that.attr("data-href")  + '.json',
             dataType: "json"
         }).done(function(xhr, settings, data) {
-            $("body")
+            $("body").append($.parseHTML(data.responseJSON.html));
-              .append($.parseHTML(data.responseJSON.html));
             $("#modal-info-sample").modal('show',{
-              backdrop: true,
+                backdrop: true,
-              keyboard: false,
+                keyboard: false,
             }).on('hidden.bs.modal', function () {
-              $(this).remove();
+                $(this).find(".modal-body #sample-info-table").DataTable().destroy();
+                $(this).remove();
+            });
+
+            $('#sample-info-table').DataTable({
+                dom: "RBltpi",
+                stateSave: false,
+                buttons: [],
+                processing: true,
+                colReorder: {
+                    fixedColumnsLeft: 1000000 // Disable reordering
+                },
+                columnDefs: [{
+                    targets: 0,
+                    searchable: false,
+                    orderable: false
+                }],
+                fnDrawCallback: function(settings, json) {
+                    animateSpinner(this, false);
+                },
+                preDrawCallback: function(settings) {
+                    animateSpinner(this);
+                }
             });
         }).fail(function(error){
             // TODO
         }).always(function(data){
             // TODO
         })
-      })
+        e.preventDefault();
+        return false;
+    })
 };
 
 // Edit sample

app/views/samples/_info_sample_modal.html.erb

@@ -6,13 +6,43 @@
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title"><%= t('samples.modal_info.title', sample: @sample.name) %></h4>
       </div>
-<% byebug %>
+
       <div class="modal-body">
-        <div class="row">
+      <% if @sample.my_modules.count > 0 %>
-
+        <div class="linked-children-datatable">
-
+          <table id="sample-info-table" class="table dataTable no-footer" role="grid">
-
+            <tbody>
+              <% @sample.my_modules.each_with_index do |mod, i|  %>
+                <tr role="row">
+                  <td class="sorting_1">
+                    <ol class='breadcrumb'>
+                      <li><span class='glyphicon glyphicon-blackboard'></span>&nbsp;
+                        <%= render partial: 'search/results/partials/project_text.html.erb',
+                                  locals: { project: mod.experiment.project } %>
+                      </li>
+                      <li><i class='fa fa-flask'></i>&nbsp;
+                        <%= render partial: 'search/results/partials/experiment_text.html.erb',
+                                  locals: { experiment: mod.experiment } %>
+                      </li>
+                      <li><span class='glyphicon glyphicon-credit-card'></span>&nbsp;
+                        <%= render partial: 'search/results/partials/my_module_text.html.erb',
+                                  locals: { my_module: mod, link_to_page: :samples } %>
+                      </li>
+                    </ol>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+            <thead>
+              <tr>
+                <th></th>
+              </tr>
+            </thead>
+          </table>
         </div>
+      <% else %>
+        <em><%=t "search.index.sample_no_modules" %></em>
+      <% end %>
       </div>
 
       <div class="modal-footer">

config/locales/en.yml

@@ -880,7 +880,7 @@ en:
     add_new_sample_group: "Add sample group"
     add_new_column: "Add column"
     modal_info:
-      title: "Information for sample %{sample}"
+      title: "Information for sample '%{sample}'"
     modal_import:
       title: "Import samples"
       notice: "You may upload .csv file (comma separated) or tab separated file (.txt or .tdv) or Excel file (.xls, .xlsx). First row should include header names, followed by rows with sample data."