Add marvinJS integration [SCI-6831] (#4113)

app/assets/javascripts/sitewide/marvinjs_editor.js

@@ -167,6 +167,8 @@ var MarvinJsEditorApi = (function() {
       }
       $(marvinJsModal).modal('hide');
       config.button.dataset.inProgress = false;
+
+      if (MarvinJsEditor.saveCallback) MarvinJsEditor.saveCallback();
     }).error((response) => {
       if (response.status === 403) {
         HelperModule.flashAlertMsg(I18n.t('general.no_permissions'), 'danger');
@@ -250,7 +252,7 @@ var MarvinJsEditorApi = (function() {
       return true;
     },
 
-    initNewButton: function(selector) {
+    initNewButton: function(selector, saveCallback) {
       $(selector).off('click').on('click', function() {
         var objectId = this.dataset.objectId;
         var objectType = this.dataset.objectType;
@@ -264,6 +266,8 @@ var MarvinJsEditorApi = (function() {
           container: container
         });
       });
+
+      MarvinJsEditor.saveCallback = saveCallback;
     },
 
     save: function(config) {

app/javascript/vue/protocol/step.vue

@@ -71,7 +71,13 @@
                    @attachment:viewMode="updateAttachmentViewMode"/>
     </div>
     <deleteStepModal v-if="confirmingDelete" @confirm="deleteStep" @cancel="closeDeleteModal"/>
-    <fileModal v-if="showFileModal" @cancel="showFileModal = false" :step="step" @files="uploadFiles" @attachmentUploaded="addAttachment" />
+    <fileModal v-if="showFileModal"
+               :step="step"
+               @cancel="showFileModal = false"
+               @files="uploadFiles"
+               @attachmentUploaded="addAttachment"
+               @attachmentsChanged="loadAttachments"
+    />
   </div>
 </template>
 
@@ -112,15 +118,20 @@
       Attachments
     },
     created() {
-      $.get(this.step.attributes.urls.elements_url, (result) => {
-        this.elements = result.data
-      });
-
-      $.get(this.step.attributes.urls.attachments_url, (result) => {
-        this.attachments = result.data
-      });
+      this.loadAttachments();
+      this.loadElements();
     },
     methods: {
+      loadAttachments() {
+        $.get(this.step.attributes.urls.attachments_url, (result) => {
+          this.attachments = result.data
+        });
+      },
+      loadElements() {
+        $.get(this.step.attributes.urls.elements_url, (result) => {
+          this.elements = result.data
+        });
+      },
       showDeleteModal() {
         this.confirmingDelete = true;
       },

app/javascript/vue/protocol/step_attachments/context_menu.vue

@@ -28,7 +28,7 @@
            :data-sketch-name="attachment.attributes.metadata.name"
            :data-sketch-description="attachment.attributes.metadata.description"
         >
-          <img :src="attachment.attributes.url.marvin_js_icon"/>
+          <img :src="attachment.attributes.urls.marvin_js_icon"/>
           {{ i18n.t('assets.file_preview.edit_in_marvinjs') }}
         </a>
       </li>

app/javascript/vue/protocol/step_attachments/file_modal.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="modal" @keydown.esc="cancel"
        class="modal add-file-modal"
-       :class="dragingFile ? 'draging-file' : ''"
+       :class="{ 'draging-file' : dragingFile }"
        role="dialog" aria-hidden="true" tabindex="-1">
     <div class="modal-dialog">
       <div class="modal-content">
@@ -41,7 +41,9 @@
               <a
                 class="new-marvinjs-upload-button btn btn-light"
                 :data-object-id="step.id"
+                :data-marvin-url="step.attributes.marvinjs_context.marvin_js_asset_url"
                 data-object-type="Step"
+                @click="openMarvinJsModal"
               >
                 <span class="new-marvinjs-upload-icon">
                   <img :src="step.attributes.marvinjs_context.icon"/>
@@ -79,6 +81,10 @@
     },
     mounted() {
       $(this.$refs.modal).modal('show');
+      MarvinJsEditor.initNewButton('.new-marvinjs-upload-button', () => {
+        this.$emit('attachmentsChanged');
+        this.$nextTick(this.cancel);
+      });
     },
     methods: {
       cancel() {
@@ -95,6 +101,10 @@
         $(this.$refs.modal).modal('hide');
         this.$emit('files', this.$refs.fileSelector.files);
       },
+      openMarvinJsModal() {
+        // hide regular file modal
+        $(this.$refs.modal).modal('hide');
+      },
       openWopiFileModal() {
         // hide regular file modal
         $(this.$refs.modal).modal('hide');

app/serializers/step_serializer.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class StepSerializer < ActiveModel::Serializer
   include Rails.application.routes.url_helpers
   include ApplicationHelper
@@ -12,6 +14,7 @@ class StepSerializer < ActiveModel::Serializer
   def marvinjs_context
     if marvinjs_enabled
       {
+        marvin_js_asset_url: marvin_js_assets_path,
         icon: image_path('icon_small/marvinjs.svg')
       }
     end