Add drag n drop to results [SCI-9576]

app/javascript/vue/results/result.vue

@@ -1,6 +1,17 @@
 <template>
-  <div class="result-wrapper bg-white p-4 mb-4 rounded">
-    <div class="result-header flex justify-between ">
+  <div class="result-wrapper p-4 mb-4 rounded relative"
+      @drop.prevent="dropFile"
+      @dragenter.prevent="dragEnter($event)"
+      @dragover.prevent
+      :class="{ 'bg-sn-super-light-blue': dragingFile, 'bg-white': !dragingFile }"
+  >
+    <div class="text-xl items-center flex text-sn-blue h-full justify-center left-0 absolute top-0 w-full"
+         v-if="dragingFile"
+         @dragleave.prevent="dragingFile = false">
+      {{ i18n.t('my_modules.results.drop_message', { name: result.attributes.name }) }}
+      <StorageUsage v-if="showStorageUsage()" :parent="result"/>
+    </div>
+    <div class="result-header flex justify-between" :class="{ 'opacity-0 pointer-events-none': dragingFile }">
       <div class="result-head-left flex items-start flex-grow gap-4">
         <a class="result-collapse-link hover:no-underline focus:no-underline py-0.5 border-0 border-y border-transparent border-solid text-sn-black"
             :href="'#resultBody' + result.id"
@@ -85,7 +96,7 @@
       @reorder="updateElementOrder"
       @close="closeReorderModal"
     />
-    <div class="collapse in pl-10" :id="'resultBody' + result.id">
+    <div class="collapse in pl-10"  :class="{ 'opacity-0 pointer-events-none': dragingFile }" :id="'resultBody' + result.id">
       <div v-for="(element, index) in orderedElements" :key="element.id">
         <component
           :is="elements[index].attributes.orderable_type"
@@ -130,12 +141,17 @@
   import WopiFileModal from '../shared/content/attachments/mixins/wopi_file_modal.js'
   import OveMixin from '../shared/content/attachments/mixins/ove.js'
   import UtilsMixin from '../mixins/utils.js'
+  import StorageUsage from '../shared/content/attachments/storage_usage.vue'
 
   export default {
     name: 'Results',
     props: {
       result: { type: Object, required: true },
-      resultToReload: { type: Number, required: false }
+      resultToReload: { type: Number, required: false },
+      activeDragResult: {
+        type: Number,
+        required: false
+      }
     },
     data() {
       return {
@@ -144,6 +160,7 @@
         attachments: [],
         attachmentsReady: false,
         showFileModal: false,
+        dragingFile: false,
         wellPlateOptions: [
           { text: I18n.t('protocols.steps.insert.well_plate_options.32_x_48'), emit: 'create:table', params: [[32, 48], true] },
           { text: I18n.t('protocols.steps.insert.well_plate_options.16_x_24'), emit: 'create:table', params: [[16, 24], true] },
@@ -164,7 +181,8 @@
       Attachments,
       InlineEdit,
       MenuDropdown,
-      deleteResultModal
+      deleteResultModal,
+      StorageUsage
     },
     watch: {
       resultToReload() {
@@ -172,6 +190,11 @@
           this.loadElements();
           this.loadAttachments();
         }
+      },
+      activeDragResult() {
+        if (this.activeDragResult != this.result.id && this.dragingFile) {
+          this.dragingFile = false;
+        }
       }
     },
     computed: {
@@ -277,6 +300,20 @@
       this.loadElements();
     },
     methods: {
+      dragEnter(e) {
+        if (!this.urls.upload_attachment_url) return;
+
+        // Detect if dragged element is a file
+        // https://stackoverflow.com/a/8494918
+        let dt = e.dataTransfer;
+        if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))) {
+          this.dragingFile = true;
+          this.$emit('result:drag_enter', this.result.id);
+        }
+      },
+      showStorageUsage() {
+        return (this.elements.length || this.attachments.length) && !this.isCollapsed && this.result.attributes.storage_limit;
+      },
       openReorderModal() {
         this.reordering = true;
       },

app/javascript/vue/results/results.vue

@@ -20,6 +20,7 @@
       <Result v-for="result in results" :key="result.id"
         :result="result"
         :resultToReload="resultToReload"
+        :activeDragResult="activeDragResult"
         @result:elements:loaded="resultToReload = null"
         @result:move_element="reloadResult"
         @result:attachments:loaded="resultToReload = null"
@@ -28,6 +29,7 @@
         @result:archived="removeResult"
         @result:deleted="removeResult"
         @result:restored="removeResult"
+        @result:drag_enter="dragEnter"
       />
     </div>
   </div>
@@ -60,6 +62,7 @@
         resultToReload: null,
         nextPageUrl: null,
         loadingPage: false,
+        activeDragResult: null
       }
     },
     mounted() {
@@ -130,6 +133,9 @@
       },
       removeResult(result_id) {
         this.results = this.results.filter((r) => r.id != result_id);
+      },
+      dragEnter(id) {
+        this.activeDragResult = id;
       }
     }
   }

app/serializers/result_serializer.rb

@@ -10,7 +10,7 @@ class ResultSerializer < ActiveModel::Serializer
   attributes :name, :id, :urls, :updated_at, :created_at_formatted, :updated_at_formatted, :user,
              :my_module_id, :attachments_manageble, :marvinjs_enabled, :marvinjs_context, :type,
              :wopi_enabled, :wopi_context, :created_at, :created_by, :archived, :assets_order,
-             :open_vector_editor_context, :comments_count, :assets_view_mode
+             :open_vector_editor_context, :comments_count, :assets_view_mode, :storage_limit
 
   def marvinjs_enabled
     MarvinJsService.enabled?
@@ -36,6 +36,10 @@ class ResultSerializer < ActiveModel::Serializer
     scope
   end
 
+  def storage_limit
+    nil
+  end
+
   def marvinjs_context
     if marvinjs_enabled
       {

config/locales/en.yml

@@ -1274,6 +1274,7 @@ en:
       published_table: "entered a table on %{timestamp}."
       published_text:  "entered a text on %{timestamp}."
       published_asset:  "uploaded a file on %{timestamp}."
+      drop_message: "Drop file to add to result %{name}"
       expand_label: "Expand All"
       collapse_label: "Collapse All"
       empty_name: "Add title"