add protocol preview modal

app/assets/javascripts/protocols/index.js

@@ -16,6 +16,7 @@ function init() {
   initProtocolsTable();
   initRowSelection();
   initKeywordFiltering();
+  initProtocolPreviewModal();
   initLinkedChildrenModal();
   initCreateNewModal();
   initModals();
@@ -187,6 +188,33 @@ function initKeywordFiltering() {
   });
 }
 
+function initProtocolPreviewModal() {
+  // Only do this if the repository is public/private
+  if (repositoryType !== "archive") {
+    protocolsTableEl.on("click", "a[data-action='protocol-preview']", function(e) {
+      var link = $(this);
+      $.ajax({
+        url: link.attr("data-url"),
+        type: "GET",
+        dataType: "json",
+        success: function (data) {
+          var modal = $("#protocol-preview-modal");
+          var modalTitle = modal.find(".modal-title");
+          var modalBody = modal.find(".modal-body");
+          modalTitle.html(data.title);
+          modalBody.html(data.html);
+          modal.modal("show");
+        },
+        error: function (error) {
+          // TODO
+        }
+      });
+      e.preventDefault();
+      return false;
+    });
+  }
+}
+
 function initLinkedChildrenModal() {
   // Only do this if the repository is public/private
   if (repositoryType !== "archive") {
@@ -343,6 +371,13 @@ function initModals() {
     $(this).find(".modal-body #linked-children-table").DataTable().destroy();
     $(this).find(".modal-body").html("");
   });
+
+  // Protocol preview modal close action
+  $("#protocol-preview-modal").on("hidden.bs.modal", function(e) {
+    $(this).find(".modal-title").html("");
+    // Destroy the embedded data
+    $(this).find(".modal-body").html("");
+  });
 }
 
 function updateDataTableSelectAllCheckbox() {

app/controllers/protocols_controller.rb

@@ -11,6 +11,7 @@ class ProtocolsController < ApplicationController
   before_action :check_view_permissions, only: [
     :protocol_status_bar,
     :updated_at_label,
+    :preview,
     :linked_children,
     :linked_children_datatable
   ]
@@ -80,6 +81,21 @@ class ProtocolsController < ApplicationController
     end
   end
 
+  def preview
+    respond_to do |format|
+      format.json do
+        render json: {
+          title: I18n.t('protocols.index.preview.title',
+                        protocol: @protocol.name),
+          html: render_to_string(
+            partial: 'protocols/index/protocol_preview_modal_body.html.erb',
+            locals: { protocol: @protocol }
+          )
+        }
+      end
+    end
+  end
+
   def linked_children
     respond_to do |format|
       format.json {

app/datatables/protocols_datatable.rb

@@ -12,6 +12,7 @@ class ProtocolsDatatable < AjaxDatatablesRails::Base
   def_delegator :@view, :can_restore_protocol
   def_delegator :@view, :can_export_protocol
   def_delegator :@view, :linked_children_protocol_path
+  def_delegator :@view, :preview_protocol_path
 
   def initialize(view, organization, type, user)
     super(view)
@@ -94,7 +95,7 @@ class ProtocolsDatatable < AjaxDatatablesRails::Base
         "DT_CanArchive": can_archive_protocol(protocol),
         "DT_CanRestore": can_restore_protocol(protocol),
         "DT_CanExport": can_export_protocol(protocol),
-        "1": record.name,
+        "1": name_html(record),
         "2": keywords_html(record),
         "3": modules_html(record),
         "4": record.full_username_str,
@@ -164,6 +165,13 @@ class ProtocolsDatatable < AjaxDatatablesRails::Base
     end
   end
 
+  def name_html(record)
+    "<a href='#' data-action='protocol-preview'" +
+    " data-url='#{preview_protocol_path(record)}'>" +
+    "#{record.name}" +
+    "</a>"
+  end
+
   def keywords_html(record)
     if !record.protocol_keywords_str || record.protocol_keywords_str.empty?
       "<i>#{I18n.t("protocols.no_keywords")}</i>"

app/views/protocols/index.html.erb

@@ -130,6 +130,7 @@
 <%= render partial: "protocols/index/restore_results_modal.html.erb" %>
 <%= render partial: "protocols/index/import_results_modal.html.erb" %>
 <%= render partial: "protocols/index/linked_children_modal.html.erb" %>
+<%= render partial: "protocols/index/protocol_preview_modal.html.erb" %>
 
 <%= render partial: "protocols/import_export/import_elements.html.erb" %>
 

app/views/protocols/index/_protocol_preview_modal.html.erb

@@ -0,0 +1,15 @@
+<div class="modal" id="protocol-preview-modal" tabindex="-1" role="dialog" aria-labelledby="protocol-preview-modal-label">
+  <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" id="protocol-preview-modal-label">
+        </h4>
+      </div>
+      <div class="modal-body"></div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal"><%=t "general.close" %></button>
+      </div>
+    </div>
+  </div>
+</div>

config/locales/en.yml

@@ -1201,6 +1201,8 @@ en:
       thead_created_at: "Created at"
       thead_archived_on: "Archived at"
       thead_updated_at: "Last modified at"
+      preview:
+        title: "Protocol preview"
       linked_children:
         title: "Tasks linked to protocol %{protocol}"
         used_in: "Number of tasks linked to this protocol: %{nr}"

config/routes.rb

@@ -240,6 +240,7 @@ Rails.application.routes.draw do
     member do
       get "linked_children", to: "protocols#linked_children"
       post "linked_children_datatable", to: "protocols#linked_children_datatable"
+      get "preview", to: "protocols#preview"
       patch "metadata", to: "protocols#update_metadata"
       patch "keywords", to: "protocols#update_keywords"
       post "clone", to: "protocols#clone"