Add new protocol view to repository [SCI-6858]

app/assets/stylesheets/protocols/protocol.scss

@@ -4,6 +4,22 @@
 @import "constants";
 @import "mixins";
 
+.content-pane.protocols-show {
+  background-color: $color-alto;
+  margin: 0 -16px;
+  overflow: hidden;
+  padding: 36px 10px 10px;
+  width: calc(100% + 31px);
+
+  .protocol-position-container {
+    background-color: $color-white;
+    box-shadow: $flyout-shadow;
+    margin: 0 auto;
+    max-width: 900px;
+    padding: 10px;
+  }
+}
+
 .protocol-repository-header {
 
   .protocol-info {

app/controllers/protocols_controller.rb

@@ -17,6 +17,7 @@ class ProtocolsController < ApplicationController
   )
   before_action :check_clone_permissions, only: [:clone]
   before_action :check_view_permissions, only: %i(
+    show
     protocol_status_bar
     updated_at_label
     preview
@@ -161,6 +162,16 @@ class ProtocolsController < ApplicationController
     current_team_switch(@protocol.team)
   end
 
+  def show
+    # Switch to correct team
+    current_team_switch(@protocol.team)
+
+    respond_to do |format|
+      format.json { render json: @protocol, serializer: ProtocolSerializer, user: current_user }
+      format.html
+    end
+  end
+
   def update_keywords
     respond_to do |format|
       # sanitize user input

app/datatables/protocols_datatable.rb

@@ -10,7 +10,7 @@ class ProtocolsDatatable < CustomDatatable
   def_delegator :@view, :can_clone_protocol_in_repository?
   def_delegator :@view, :clone_protocol_path
   def_delegator :@view, :linked_children_protocol_path
-  def_delegator :@view, :preview_protocol_path
+  def_delegator :@view, :protocol_path
 
   def initialize(view, team, type, user)
     super(view)
@@ -176,10 +176,7 @@ class ProtocolsDatatable < CustomDatatable
   end
 
   def name_html(record)
-    "<a href='#' data-action='protocol-preview'" \
-      "data-url='#{preview_protocol_path(record)}'>" \
-      "#{escape_input(record.name)}" \
-      "</a>"
+    "<a href='#{protocol_path(record)}'>#{escape_input(record.name)}</a>"
   end
 
   def keywords_html(record)

app/javascript/vue/protocol/container.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="task-protocol">
-    <div class="task-section-header">
+    <div class="task-section-header" v-if="!inRepository">
       <a class="task-section-caret" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
         <i class="fas fa-caret-right"></i>
         <div class="task-section-title">
@@ -61,6 +61,7 @@
             <Step
               :step.sync="steps[index]"
               @reorder="startStepReorder"
+              :inRepository="inRepository"
               @step:delete="updateStepsPosition"
               @step:update="updateStep"
             />
@@ -115,6 +116,11 @@
     },
     components: { Step, InlineEdit, ProtocolModals, ProtocolOptions, Tinymce, ReorderableItemsModal },
     mixins: [UtilsMixin],
+    computed: {
+      inRepository() {
+        return this.protocol.attributes.in_repository
+      }
+    },
     data() {
       return {
         protocol: {
@@ -134,6 +140,7 @@
     },
     methods: {
       refreshProtocolStatus() {
+        if (this.inRepository) return
         // legacy method from app/assets/javascripts/my_modules/protocols.js
         refreshProtocolStatusBar();
       },

app/javascript/vue/protocol/step.vue

@@ -21,7 +21,7 @@
            data-remote="true">
           <span class="fas fa-caret-right"></span>
       </a>
-      <div class="step-complete-container">
+      <div v-if="!inRepository" class="step-complete-container">
         <div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`" @click="changeState"></div>
       </div>
       <div class="step-position">
@@ -161,7 +161,11 @@
       step: {
         type: Object,
         required: true
-      }
+      },
+      inRepository: {
+        type: Boolean,
+        required: true
+      },
     },
     data() {
       return {

app/serializers/protocol_serializer.rb

@@ -6,7 +6,7 @@ class ProtocolSerializer < ActiveModel::Serializer
   include ApplicationHelper
   include ActionView::Helpers::TextHelper
 
-  attributes :name, :id, :urls, :description, :description_view, :updated_at
+  attributes :name, :id, :urls, :description, :description_view, :updated_at, :in_repository
 
   def updated_at
     object.updated_at.to_i
@@ -34,6 +34,10 @@ class ProtocolSerializer < ActiveModel::Serializer
     }
   end
 
+  def in_repository
+    !object.in_module?
+  end
+
   private
 
   def load_from_repo_url

app/serializers/step_serializer.rb

@@ -48,7 +48,7 @@ class StepSerializer < ActiveModel::Serializer
   end
 
   def assets_order
-    object.current_view_state(@instance_options[:user]).state.dig('assets', 'sort')
+    object.current_view_state(@instance_options[:user]).state.dig('assets', 'sort') unless object.destroyed?
   end
 
   def urls

app/views/protocols/show.html.erb

@@ -0,0 +1,31 @@
+<div class="content-pane protocols-show" >
+  <div class="protocol-position-container">
+    <div
+      id="protocolContainer"
+      data-protocol-url="<%= protocol_path(@protocol) %>"
+      data-add-step-url="<%= protocol_steps_path(protocol_id: @protocol.id) %>"
+      data-steps-url="<%= steps_path(protocol_id: @protocol) %>"
+      data-editable="<%= can_manage_protocol_in_module?(@protocol) %>"
+      data-date-format="<%= datetime_picker_format_date_only %>"
+      data-user-utc-offset="<%= ActiveSupport::TimeZone.find_tzinfo(current_user.time_zone).utc_offset %>"
+    >
+      <protocol-container
+      :protocol-url="protocolUrl"
+      :steps-url="stepsUrl"
+      :add-step-url="addStepUrl"
+      :editable="editable"
+      />
+    </div>
+  </div>
+</div>
+
+<!-- Create new office file modal -->
+<%= render partial: 'assets/wopi/create_wopi_file_modal.html.erb' %>
+
+
+<%= javascript_include_tag "handsontable.full" %>
+<%= render partial: "shared/formulas_libraries.html.erb" %>
+<%= javascript_pack_tag 'pdfjs/pdf_js' %>
+<%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>
+
+<%= javascript_pack_tag 'vue/protocol' %>

config/routes.rb

@@ -508,11 +508,10 @@ Rails.application.routes.draw do
     get 'result_tables/:id/download' => 'result_tables#download',
       as: :result_table_download
 
-    resources :protocols, only: [:index, :edit, :create] do
+    resources :protocols, only: %i(index show edit create) do
       resources :steps, only: [:new, :create] do
         post :reorder, on: :collection
       end
-
       member do
         get 'print', to: 'protocols#print'
         get 'linked_children', to: 'protocols#linked_children'