adding popup sample info

app/assets/javascripts/samples/sample_datatable.js

@@ -45,6 +45,13 @@ table = $("#samples").DataTable({
         searchable: false,
         orderable: true,
         sWidth: "1%"
+    }, {
+        targets: 2,
+        render: function ( data, type, row, full, meta ) {
+            return '<a href="#" data-href="' + row.sampleUpdateUrl + '"' +
+                    'class="sample_info" data-toggle="modal"' +
+                    'data-target="#modal-info-sample">'+data+'</a>';
+        }
     }],
     rowCallback: function(row, data, dataIndex){
         // Get row ID
@@ -74,6 +81,7 @@ table = $("#samples").DataTable({
     fnDrawCallback: function(settings, json) {
         animateSpinner(this, false);
         changeToViewMode();
+        sampleInfoListener();
         updateButtons();
     },
     stateLoadParams: function(settings, data) {
@@ -155,9 +163,9 @@ function updateDataTableSelectAllCtrl(table){
 }
 
 // Handle click on table cells with checkboxes
-$('#samples').on('click', 'tbody td, thead th:first-child', function(e){
-    $(this).parent().find('input[type="checkbox"]').trigger('click');
-});
+// $('#samples').on('click', 'tbody td, thead th:first-child', function(e){
+//     $(this).parent().find('input[type="checkbox"]').trigger('click');
+// });
 
 // Handle clicks on checkbox
 $("#samples tbody").on("click", "input[type='checkbox']", function(e){
@@ -271,6 +279,32 @@ table.on('draw', function(){
     updateDataTableSelectAllCtrl(table);
 });
 
+//Show sample info
+function sampleInfoListener() {
+    $(".sample_info")
+      .on("click", function(){
+        var that = $(this);
+        $.ajax({
+            method: "GET",
+            url: that.attr("data-href")  + '.json',
+            dataType: "json"
+        }).done(function(xhr, settings, data) {
+            $("body")
+              .append($.parseHTML(data.responseJSON.html));
+            $("#modal-info-sample").modal('show',{
+              backdrop: true,
+              keyboard: false,
+            }).on('hidden.bs.modal', function () {
+              $(this).remove();
+            });
+        }).fail(function(error){
+            // TODO
+        }).always(function(data){
+            // TODO
+        })
+      })
+};
+
 // Edit sample
 function onClickEdit() {
     if (rowsSelected.length != 1) return;

app/controllers/samples_controller.rb

@@ -1,9 +1,9 @@
 class SamplesController < ApplicationController
-  before_action :load_vars, only: [:edit, :update, :destroy]
+  before_action :load_vars, only: [:edit, :update, :destroy, :show]
   before_action :load_vars_nested, only: [:new, :create]
 
-  before_action :check_edit_permissions, only: [:edit]
-  before_action :check_destroy_permissions, only: [:destroy]
+  before_action :check_edit_permissions, only: :edit
+  before_action :check_destroy_permissions, only: :destroy
 
   def new
     respond_to do |format|
@@ -100,6 +100,18 @@ class SamplesController < ApplicationController
     end
   end
 
+  def show
+    respond_to do |format|
+      format.json do
+        render json: {
+          html: render_to_string(
+            partial: 'info_sample_modal.html.erb'
+          )
+        }
+      end
+    end
+  end
+
   def edit
     json = {
       sample: {

app/views/samples/_info_sample_modal.html.erb

@@ -0,0 +1,23 @@
+
+<div class="modal fade" id="modal-info-sample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <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">
+
+
+
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary" data-dismiss="modal"><%= t("general.close")%></button>
+      </div>
+    </div>
+  </div>
+</div>

config/locales/en.yml

@@ -873,6 +873,8 @@ en:
     add_new_sample_type: "Add sample type"
     add_new_sample_group: "Add sample group"
     add_new_column: "Add column"
+    modal_info:
+      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."

config/routes.rb

@@ -195,6 +195,8 @@ Rails.application.routes.draw do
   end
 
   resources :samples, only: [:edit, :update, :destroy]
+  get 'samples/:id', to: 'samples#show'
+
   resources :sample_types, only: [:edit, :update]
   resources :sample_groups, only: [:edit, :update]
   resources :result_texts, only: [:edit, :update, :destroy]