From 6701e89b4558fc685da489e0651e3e0edf07d328 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 27 Oct 2022 15:20:59 +0200
Subject: [PATCH] add modal

---
 client/package.json                           |   1 +
 .../components/Upload/DragAndDropModal.vue    | 128 ++++++++++++++++++
 .../src/entry/analysis/modules/Analysis.vue   |   3 +
 client/yarn.lock                              |  32 +++++
 4 files changed, 164 insertions(+)
 create mode 100644 client/src/components/Upload/DragAndDropModal.vue

diff --git a/client/package.json b/client/package.json
index 1ea15517c35..93de48d8685 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,6 +33,7 @@
     "@johmun/vue-tags-input": "^2.1.0",
     "@popperjs/core": "^2.11.5",
     "@sentry/browser": "^6.17.4",
+    "@vueuse/core": "^9.4.0",
     "assert": "^2.0.0",
     "axios": "^0.25.0",
     "babel-runtime": "^6.26.0",
diff --git a/client/src/components/Upload/DragAndDropModal.vue b/client/src/components/Upload/DragAndDropModal.vue
new file mode 100644
index 00000000000..33690cd32cd
--- /dev/null
+++ b/client/src/components/Upload/DragAndDropModal.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { useEventListener } from "@vueuse/core";
+import { ref, computed } from "vue";
+
+/** prevents any internal drag-events from opening the modal */
+const dragBlocked = ref(false);
+
+const isDragOver = ref(false);
+
+const modal = ref(null);
+
+useEventListener(
+    document.body,
+    "dragstart",
+    (event) => {
+        dragBlocked.value = true;
+    },
+    true
+);
+
+useEventListener(
+    document.body,
+    "dragover",
+    (event) => {
+        if (!dragBlocked.value) {
+            // prevent the browser from opening the file
+            event.preventDefault();
+        }
+    },
+    true
+);
+
+useEventListener(document.body, "drop", (event) => {
+    if (!dragBlocked.value) {
+        // prevent the browser from opening the file
+        event.preventDefault();
+        modal.value.hide();
+    }
+}),
+    true;
+
+useEventListener(
+    document.body,
+    "dragend",
+    (event) => {
+        dragBlocked.value = false;
+        isDragOver.value = false;
+        modal.value.hide();
+    },
+    true
+);
+
+useEventListener(
+    document.body,
+    "dragenter",
+    (event) => {
+        if (!dragBlocked.value && !isAnyModalOpen()) {
+            isDragOver.value = false;
+            modal.value.show();
+            event.preventDefault();
+        }
+    },
+    true
+);
+
+function isAnyModalOpen() {
+    return document.querySelectorAll(".modal.show").length > 0;
+}
+
+const modalContentElement = ref(null);
+const modalClass = computed(() => {
+    if (isDragOver.value) {
+        return "ui-drag-and-drop-modal drag-over";
+    } else {
+        return "ui-drag-and-drop-modal";
+    }
+});
+
+useEventListener(modalContentElement, "dragenter", () => {
+    isDragOver.value = true;
+});
+
+useEventListener(modalContentElement, "dragleave", () => {
+    isDragOver.value = false;
+});
+</script>
+
+<template>
+    <b-modal ref="modal" :modal-class="modalClass" hide-header hide-footer centered>
+        <div ref="modalContentElement" class="inner-content h-xl">Drop Files here to Upload them</div>
+    </b-modal>
+</template>
+
+<style lang="scss">
+@import "theme/blue.scss";
+
+.ui-drag-and-drop-modal {
+    .modal-content {
+        background-color: transparent;
+        border-radius: 16px;
+        border: 6px dashed;
+        border-color: $brand-secondary;
+        min-height: 40vh;
+
+        .modal-body {
+            display: flex;
+        }
+
+        .inner-content {
+            flex: 1 1 auto;
+            display: grid;
+            place-items: center;
+            color: $brand-secondary;
+            font-weight: bold;
+        }
+    }
+
+    &.drag-over {
+        .modal-content {
+            border-color: $brand-success;
+
+            .inner-content {
+                color: $brand-success;
+            }
+        }
+    }
+}
+</style>
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index e441a6d713c..37191a51433 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -14,6 +14,7 @@
             </div>
         </div>
         <SidePanel v-if="showPanels" side="right" :current-panel="getHistoryIndex()" :current-panel-properties="{}" />
+        <DragAndDropModal />
     </div>
 </template>
 <script>
@@ -22,11 +23,13 @@ import HistoryIndex from "components/History/Index";
 import ToolBox from "components/Panels/ProviderAwareToolBox";
 import SidePanel from "components/Panels/SidePanel";
 import CenterFrame from "./CenterFrame";
+import DragAndDropModal from "components/Upload/DragAndDropModal";
 
 export default {
     components: {
         CenterFrame,
         SidePanel,
+        DragAndDropModal,
     },
     data() {
         return {
diff --git a/client/yarn.lock b/client/yarn.lock
index df24b3709ee..53d310ea22a 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1930,6 +1930,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/web-bluetooth@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
+  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -2002,6 +2007,28 @@
     source-map "0.5.6"
     tsconfig "^7.0.0"
 
+"@vueuse/core@^9.4.0":
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.4.0.tgz#afb30f9494b0954e51a489526566b14f1e2c5fb3"
+  integrity sha512-JzgenGj1ZF2BHOen5rsFiAyyI9sXAv7aKhNLlm9b7SwYQeKTcxTWdhudonURCSP3Egl9NQaRBzes2lv/1JUt/Q==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.16"
+    "@vueuse/metadata" "9.4.0"
+    "@vueuse/shared" "9.4.0"
+    vue-demi "*"
+
+"@vueuse/metadata@9.4.0":
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.4.0.tgz#5c8eb105a8ad9eb7b47f78a226ff993560d0bd7f"
+  integrity sha512-7GKMdGAsJyQJl35MYOz/RDpP0FxuiZBRDSN79QIPbdqYx4Sd0sVTnIC68KJ6Oln0t0SouvSUMvRHuno216Ud2Q==
+
+"@vueuse/shared@9.4.0":
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.4.0.tgz#634022fe42b3d5ece1d81d749724966f5071c8c3"
+  integrity sha512-fTuem51KwMCnqUKkI8B57qAIMcFovtGgsCtAeqxIzH3i6nE9VYge+gVfneNHAAy7lj8twbkNfqQSygOPJTm4tQ==
+  dependencies:
+    vue-demi "*"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -9937,6 +9964,11 @@ void-elements@^2.0.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==
 
+vue-demi@*:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
 vue-eslint-parser@^9.0.1:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz#0c17a89e0932cc94fa6a79f0726697e13bfe3c96"