Merge pull request #4090 from aignatov-bio/ai-sci-6810-add-tinymce-component-to-protocol-description

Add tinyMce field to protocol [SCI-6810]

app/assets/stylesheets/my_modules/protocol.scss

@@ -37,4 +37,12 @@
       }
     }
   }
+  .tinymce-container {
+    display: flex;
+    width: 100%;
+
+    .tiny-mce-editor {
+      flex-basis: 100%;
+    }
+  }
 }

app/assets/stylesheets/steps/components/text.scss

@@ -6,7 +6,6 @@
   position: relative;
   width: calc(100% + 16px);
 
-
   .action-container {
     cursor: pointer;
     height: 100%;
@@ -16,7 +15,12 @@
     z-index: 100;
 
     .buttons-container {
-      background: linear-gradient(90deg, transparent 0%, $color-concrete 25%, $color-concrete 100%);
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        $color-concrete 25%,
+        $color-concrete 100%
+      );
       display: none;
       padding-left: 2em;
       position: absolute;
@@ -36,15 +40,8 @@
   }
 
   .tinymce-container {
-    display: flex;
-    width: 100%;
-
     .tinymce-status-badge {
       display: none;
-    };
-
-    .tiny-mce-editor {
-      flex-basis: 100%;
     }
 
     .tinymce-view {

app/controllers/my_modules_controller.rb

@@ -263,14 +263,14 @@ class MyModulesController < ApplicationController
   end
 
   def protocol
-    render json: @my_module.protocol, serializer: ProtocolSerializer
+    render json: @my_module.protocol, serializer: ProtocolSerializer, user: current_user
   end
 
   def update_protocol
     protocol = @my_module.protocol
     protocol.update!(protocol_params)
 
-    render json: protocol, serializer: ProtocolSerializer
+    render json: protocol, serializer: ProtocolSerializer, user: current_user
   end
 
   def results
@@ -403,7 +403,7 @@ class MyModulesController < ApplicationController
   end
 
   def protocol_params
-    params.require(:protocol).permit(:name)
+    params.require(:protocol).permit(:name, :description)
   end
 
   def update_status_params

app/javascript/vue/protocol/container.vue

@@ -34,6 +34,17 @@
             @update="updateName"
           />
         </div>
+        <Tinymce
+          :value="protocol.attributes.description"
+          :value_html="protocol.attributes.description_view"
+          :placeholder="i18n.t('my_modules.protocols.protocol_status_bar.empty_description_edit_label')"
+          :updateUrl="protocolUrl"
+          :objectType="'Protocol'"
+          :objectId="parseInt(protocol.id)"
+          :fieldName="'protocol[description]'"
+          :lastUpdated="protocol.attributes.updated_at"
+          @update="updateDescription"
+        />
       </div>
       <div class="protocol-steps">
         <template v-for="(step, index) in steps">
@@ -63,6 +74,7 @@
   import Step from 'vue/protocol/step'
   import ProtocolOptions from 'vue/protocol/protocolOptions'
   import ProtocolModals from 'vue/protocol/modals'
+  import Tinymce from 'vue/shared/tinymce.vue'
 
   export default {
     name: 'ProtocolContainer',
@@ -84,7 +96,7 @@
         required: true
       }
     },
-    components: { Step, InlineEdit, ProtocolModals, ProtocolOptions },
+    components: { Step, InlineEdit, ProtocolModals, ProtocolOptions, Tinymce },
     data() {
       return {
         protocol: {
@@ -115,6 +127,9 @@
           data: { protocol: { name: newName } }
         });
       },
+      updateDescription(protocol) {
+        this.protocol.attributes = protocol.data.attributes
+      },
       addStep(position) {
         $.post(this.addStepUrl, {position: position}, (result) => {
           this.updateStepsPosition(result.data)

app/serializers/protocol_serializer.rb

@@ -3,8 +3,26 @@
 class ProtocolSerializer < ActiveModel::Serializer
   include Canaid::Helpers::PermissionsHelper
   include Rails.application.routes.url_helpers
+  include ApplicationHelper
+  include ActionView::Helpers::TextHelper
 
-  attributes :name, :id, :urls
+  attributes :name, :id, :urls, :description, :description_view, :updated_at
+
+  def updated_at
+    object.updated_at.to_i
+  end
+
+  def description_view
+    @user = @instance_options[:user]
+    custom_auto_link(object.tinymce_render('description'),
+                     simple_format: false,
+                     tags: %w(img),
+                     team: object.team)
+  end
+
+  def description
+    sanitize_input(object.tinymce_render('description'))
+  end
 
   def urls
     {