Fix files loading during copy [SCI-7149]

app/javascript/vue/protocol/attachments.vue

@@ -4,7 +4,7 @@
       <div class="title">
         <h3>{{ i18n.t('protocols.steps.files', {count: attachments.length}) }}</h3>
       </div>
-      <div class="actions" v-if="step.attributes.attachments_manageble">
+      <div class="actions" v-if="step.attributes.attachments_manageble && attachmentsReady">
         <div ref="actionsDropdownButton" class="dropdown sci-dropdown">
           <button class="btn btn-light dropdown-toggle" type="button" id="dropdownAttachmentsOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             <span>{{ i18n.t("protocols.steps.attachments.manage") }}</span>
@@ -97,6 +97,7 @@
   import inlineAttachment from 'vue/protocol/step_attachments/inline.vue'
   import thumbnailAttachment from 'vue/protocol/step_attachments/thumbnail.vue'
   import uploadingAttachment from 'vue/protocol/step_attachments/uploading.vue'
+  import emptyAttachment from 'vue/protocol/step_attachments/empty.vue'
   import marvinjsIcon from 'images/icon_small/marvinjs.svg'
   import bioEddieIcon from 'images/icon_small/bio_eddie.png'
 
@@ -112,6 +113,10 @@
       step: {
         type: Object,
         required: true
+      },
+      attachmentsReady: {
+        type: Boolean,
+        required: true
       }
     },
     data() {
@@ -127,7 +132,8 @@
       thumbnailAttachment,
       inlineAttachment,
       listAttachment,
-      uploadingAttachment
+      uploadingAttachment,
+      emptyAttachment
     },
     computed: {
       attachmentsOrdered() {
@@ -166,6 +172,8 @@
       attachment_view_mode(attachment) {
         if (attachment.attributes.uploading) {
           return 'uploadingAttachment'
+        } else if (!attachment.attributes.attached) {
+          return 'emptyAttachment'
         }
         return `${attachment.attributes.view_mode}Attachment`
       },

app/javascript/vue/protocol/step.vue

@@ -78,7 +78,7 @@
               <i class="fas fa-font"></i>
               {{ i18n.t('protocols.steps.insert.text') }}
             </li>
-            <li class="action"  @click="showFileModal = true">
+            <li v-if="attachmentsReady" class="action"  @click="showFileModal = true">
               <i class="fas fa-paperclip"></i>
               {{ i18n.t('protocols.steps.insert.attachment') }}
             </li>
@@ -145,6 +145,7 @@
         <Attachments v-if="attachments.length"
                     :step="step"
                     :attachments="attachments"
+                    :attachmentsReady="attachmentsReady"
                     @attachments:openFileModal="showFileModal = true"
                     @attachment:deleted="attachmentDeleted"
                     @attachment:uploaded="loadAttachments"
@@ -217,6 +218,7 @@
       return {
         elements: [],
         attachments: [],
+        attachmentsReady: false,
         confirmingDelete: false,
         showFileModal: false,
         showClipboardPasteModal: false,
@@ -272,8 +274,18 @@
         }
       },
       loadAttachments() {
+        this.attachmentsReady = false
+
         $.get(this.urls.attachments_url, (result) => {
           this.attachments = result.data
+
+          if (this.attachments.findIndex((e) => e.attributes.attached === false) >= 0) {
+            setTimeout(() => {
+              this.loadAttachments()
+            }, 10000)
+          } else {
+            this.attachmentsReady = true
+          }
         });
         this.showFileModal = false;
       },

app/javascript/vue/protocol/step_attachments/empty.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="attachment-container asset" :data-asset-id="attachment.id">
+    <div
+      class="file-name"
+      :id="`modal_link${attachment.id}`"
+      data-no-turbolink="true"
+      :data-id="attachment.id"
+    >
+      <div class="attachment-preview processing" :class= "attachment.attributes.asset_type"></div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    name: 'emptyAttachment',
+    props: {
+      attachment: {
+        type: Object,
+        required: true
+      },
+      stepId: {
+        type: Number,
+        required: true
+      }
+    }
+  }
+</script>

app/javascript/vue/protocol/step_attachments/thumbnail.vue

@@ -18,9 +18,9 @@
             style='opacity: 0' />
         <i  v-else class="fas" :class="attachment.attributes.icon"></i>
       </div>
-      <div class="attachment-label" 
+      <div class="attachment-label"
-           data-toggle="tooltip" 
+           data-toggle="tooltip"
-           data-placement="bottom" 
+           data-placement="bottom"
            :title="`${ attachment.attributes.file_name }`">
         {{ attachment.attributes.file_name }}
         <span v-if="attachment.isNewUpload" class="attachment-label-new">

app/serializers/asset_serializer.rb

@@ -11,7 +11,7 @@ class AssetSerializer < ActiveModel::Serializer
   attributes :file_name, :view_mode, :icon, :urls, :updated_at_formatted,
              :file_size, :medium_preview, :large_preview, :asset_type, :wopi,
              :wopi_context, :pdf_previewable, :file_size_formatted, :asset_order,
-             :updated_at, :metadata, :image_editable, :image_context, :pdf
+             :updated_at, :metadata, :image_editable, :image_context, :pdf, :attached
 
   def icon
     file_fa_icon_class(object)
@@ -29,6 +29,10 @@ class AssetSerializer < ActiveModel::Serializer
     I18n.l(object.updated_at, format: :full_date) if object.updated_at
   end
 
+  def attached
+    object.file.attached?
+  end
+
   def file_size_formatted
     number_to_human_size(object.file_size)
   end
@@ -106,7 +110,7 @@ class AssetSerializer < ActiveModel::Serializer
   def urls
     urls = {
       preview: asset_file_preview_path(object),
-      download: rails_blob_path(object.file, disposition: 'attachment'),
+      download: (rails_blob_path(object.file, disposition: 'attachment') if attached),
       load_asset: load_asset_path(object),
       asset_file: asset_file_url_path(object),
       marvin_js: marvin_js_asset_path(object),