Merge pull request #373 from mlorb/ml_sci_709

Add Protocol Preview to Protocol repository [SCI-709]

app/assets/javascripts/protocols/index.js

@@ -16,6 +16,7 @@ function init() {
   initProtocolsTable();
   initRowSelection();
   initKeywordFiltering();
+  initProtocolPreviewModal();
   initLinkedChildrenModal();
   initCreateNewModal();
   initModals();
@@ -187,6 +188,37 @@ 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");
+          var modalFooter = modal.find(".modal-footer");
+          modalTitle.html(data.title);
+          modalBody.html(data.html);
+          modalFooter.html(data.footer);
+          initHandsOnTable(modalBody);
+          modal.modal("show");
+          initHandsOnTable(modalBody);
+        },
+        error: function (error) {
+          // TODO
+        }
+      });
+      e.preventDefault();
+      return false;
+    });
+  }
+}
+
 function initLinkedChildrenModal() {
   // Only do this if the repository is public/private
   if (repositoryType !== "archive") {
@@ -343,6 +375,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("");
+    $(this).find(".modal-body").html("");
+    $(this).find(".modal-footer").html("");
+  });
 }
 
 function updateDataTableSelectAllCheckbox() {

app/assets/stylesheets/themes/scinote.scss

@@ -1139,6 +1139,25 @@ ul.content-module-activities {
   }
 }
 
+// Preview protocol modal
+@media (min-width: 768px) {
+  #protocol-preview-modal .modal-dialog {
+    width: 70%;
+  }
+}
+
+#protocol-preview-modal .modal-dialog {
+  .modal-body {
+    max-height: 75vh;
+    overflow-y: auto;
+    width: 100%;
+
+    .ql-editor {
+      min-height: initial;
+    }
+  }
+}
+
 /* Import protocol/s modal */
 #import-protocol-modal .modal-dialog {
   width: 70%;

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,25 @@ 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 }
+          ),
+          footer: render_to_string(
+            partial: 'protocols/index/protocol_preview_modal_footer.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": protocol.in_repository_archived? ? record.name : 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,8 +130,23 @@
 <%= 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" %>
 
 <%= stylesheet_link_tag 'datatables' %>
 <%= javascript_include_tag "protocols/index" %>
+<%= javascript_include_tag "protocols/steps" %>
+
+<!-- Libraries for formulas -->
+<%= javascript_include_tag "lodash" %>
+<%= javascript_include_tag "numeral" %>
+<%= javascript_include_tag "numeric" %>
+<%= javascript_include_tag "md5" %>
+<%= javascript_include_tag "jstat" %>
+<%= javascript_include_tag "formula" %>
+<%= javascript_include_tag "parser" %>
+<%= javascript_include_tag "ruleJS" %>
+<%= javascript_include_tag "handsontable.formula" %>
+<%= javascript_include_tag "big.min" %>
+<%= stylesheet_link_tag "handsontable.formula" %>

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

@@ -0,0 +1,13 @@
+<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>
+        <h2 class="modal-title" id="protocol-preview-modal-label">
+        </h2>
+      </div>
+      <div class="modal-body"></div>
+      <div class="modal-footer"></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,164 @@
+<div class="row">
+  <div class="col-xs-6 col-sm-4 col-md-4">
+    <div class="badge-icon bg-primary">
+      <span class="glyphicon glyphicon-calendar"></span>
+    </div>
+    <div class="well well-sm">
+      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.created_at" %>:</span>
+      <strong><%= l(@protocol.created_at, format: :full) %></strong>
+    </div>
+  </div>
+
+  <div class="col-xs-6 col-sm-4 col-md-4">
+    <div class="badge-icon bg-primary">
+      <span class="glyphicon glyphicon-calendar"></span>
+    </div>
+    <div class="well well-sm">
+      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.updated_at" %>:</span>
+      <strong data-role="updated-at-refresh"><%= render partial: "protocols/header/updated_at_label.html.erb" %></strong>
+    </div>
+  </div>
+
+  <div class="col-xs-12 col-sm-4 col-md-4">
+    <div class="badge-icon bg-primary">
+      <span class="glyphicon glyphicon-user"></span>
+    </div>
+    <div class="well well-sm">
+      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.added_by" %>:</span>
+      <strong><%= @protocol.added_by.full_name %></strong>
+    </div>
+  </div>
+
+  <div class="col-xs-12 col-sm-6 col-md-6">
+    <div class="badge-icon bg-primary">
+      <span class="glyphicon glyphicon-text-color"></span>
+    </div>
+    <div class="well well-sm">
+      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.keywords" %>:</span>
+        <%= render partial: "protocols/header/keywords_label.html.erb" %>
+    </div>
+  </div>
+
+  <div class="col-xs-12 col-sm-6 col-md-6">
+    <div class="badge-icon bg-primary">
+      <span class="glyphicon glyphicon-education"></span>
+    </div>
+    <div class="well well-sm">
+      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.authors" %>:</span>
+        <%= render partial: "protocols/header/authors_label.html.erb" %>
+    </div>
+  </div>
+
+  <div class="col-xs-12 col-sm-12 col-md-12">
+    <div class="badge-icon bg-primary">
+      <span class="glyphicon glyphicon-info-sign"></span>
+    </div>
+    <div class="well well-sm">
+      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.description" %>:</span>
+        <%= render partial: "protocols/header/description_label.html.erb" %>
+    </div>
+  </div>
+</div>
+
+<div data-role="steps-container">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2><%= t("protocols.steps.subtitle") %></h2>
+    </div>
+  </div>
+  <div id="steps">
+    <% protocol.steps.order(:position).each do |step| %>
+      <div class ="step <%= step.completed? ? "completed" : "not-completed" %>">
+        <div class="badge-num">
+          <span class="badge bg-primary size-digit-<%= (step.position + 1).to_s.length %>"><%= step.position + 1 %></span>
+        </div>
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <strong><%= step.name %></strong> |
+            <span><%= raw t("protocols.steps.published_on", timestamp: l(step.created_at, format: :full), user: step.user.full_name) %></span>
+          </div>
+          <div class="panel-collapse collapse in" id="step-panel-<%= step.id %>" role="tabpanel" aria-expanded="true">
+            <div class="panel-body">
+              <div class="row">
+                <div class="col-xs-12">
+                  <% if strip_tags(step.description).blank? %>
+                    <em><%= t("protocols.steps.no_description") %></em>
+                  <% else %>
+                    <div class="ql-editor">
+                      <%= step.description.html_safe %>
+                    </div>
+                  <% end %>
+                </div>
+              </div>
+              <div class="row">
+                <% unless step.tables.blank? then %>
+                  <hr>
+                  <div class="col-xs-12">
+                    <strong><%= t("protocols.steps.tables") %></strong>
+                    <% step.tables.each do |table| %>
+                      <div data-role="hot-table" class="hot-table">
+                        <%= hidden_field(table, :contents, value: table.contents_utf_8, class: "hot-contents") %>
+                        <div data-role="step-hot-table" class="step-result-hot-table"></div>
+                      </div>
+                    <% end %>
+                  </div>
+                <% end %>
+
+                <% assets = ordered_assets(step) %>
+                <% unless assets.blank? then %>
+                  <hr>
+                  <div class="col-xs-12">
+                    <strong><%= t("protocols.steps.files") %></strong>
+                    <ul class="list-unstyled">
+                      <% assets.each do |asset| %>
+                        <li>
+                          <%= image_tag preview_asset_path(asset) if asset.is_image? %>
+                          <p><%= truncate(asset.file_file_name,
+                                          length: Constants::FILENAME_TRUNCATION_LENGTH) %></p>
+                        </li>
+                      <% end %>
+                    </ul>
+                  </div>
+                <% end %>
+
+                <% unless step.checklists.blank? then %>
+                  <hr>
+                  <div class="col-xs-12">
+                    <% step.checklists.each do |checklist| %>
+                      <strong><%= checklist.name %></strong>
+                      <% if checklist.checklist_items.empty? %>
+                        </br>
+                        <%= t("protocols.steps.empty_checklist") %>
+                        </br>
+                      <% else %>
+                        <% ordered_checklist_items(checklist).each do |checklist_item| %>
+                          <div class="checkbox">
+                            <label>
+                              <% if protocol.in_module? %>
+                                <input type="checkbox" value="" <%= "checked" if checklist_item.checked? %> disabled="disabled"/>
+                              <% else %>
+                                <input type="checkbox" value="" disabled="disabled" />
+                              <% end %>
+                              <%= checklist_item.text %>
+                            </label>
+                          </div>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  </div>
+                <% end %>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <% if protocol.steps.count == 0 %>
+    <div data-role="no-steps-text">
+      <em><%= t("protocols.steps.no_steps") %></em>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,4 @@
+<button type="button" class="btn btn-default" data-dismiss="modal"><%=t "general.close" %></button>
+<% if can_edit_protocol(@protocol) %>
+  <%= link_to t("general.edit"), edit_protocol_path(@protocol), :class => "btn btn-primary" %>
+<% end %>

config/locales/en.yml

@@ -1230,6 +1230,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

@@ -259,6 +259,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"