From 77b41fc0b489dcd4d5bee48fc0cdcfd0d953a9ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <ciaranainsworth@posteo.net>
Date: Mon, 18 Mar 2019 10:09:28 +0100
Subject: [PATCH] Resolve #630: "Do not allow tab closure during upload"

---
 changes/changelog.d/630.enhancement          |  1 +
 front/src/components/library/FileUpload.vue  | 13 +++++++++++++
 front/src/views/content/libraries/Upload.vue | 15 ++++++++++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 changes/changelog.d/630.enhancement

diff --git a/changes/changelog.d/630.enhancement b/changes/changelog.d/630.enhancement
new file mode 100644
index 000000000..019911337
--- /dev/null
+++ b/changes/changelog.d/630.enhancement
@@ -0,0 +1 @@
+Ask for confirmation before leaving upload page if there is a an upload in process (#630)
\ No newline at end of file
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index 3c669eb18..f5cf432e9 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -169,14 +169,24 @@ export default {
       id: "fileUpload",
       handler: this.handleImportEvent
     });
+    window.onbeforeunload = e => this.onBeforeUnload(e);
   },
   destroyed() {
     this.$store.commit("ui/removeWebsocketEventHandler", {
       eventName: "import.status_updated",
       id: "fileUpload"
     });
+    window.onbeforeunload = null;
   },
   methods: {
+    onBeforeUnload(e = {}) {
+      const returnValue = ('This page is asking you to confirm that you want to leave - data you have entered may not be saved.');
+      if (!this.hasActiveUploads) return null;
+      Object.assign(e, {
+        returnValue,
+      });
+      return returnValue;
+    },
     inputFile(newFile, oldFile) {
       this.$refs.upload.active = true;
     },
@@ -294,6 +304,9 @@ export default {
         f.statusIndex = statusIndex
         return f
       }), ['statusIndex', 'name'])
+    },
+    hasActiveUploads () {
+      return this.sortedFiles.filter((f) => { return f.active }).length > 0
     }
   },
   watch: {
diff --git a/front/src/views/content/libraries/Upload.vue b/front/src/views/content/libraries/Upload.vue
index d4a3d8245..5fc7234ec 100644
--- a/front/src/views/content/libraries/Upload.vue
+++ b/front/src/views/content/libraries/Upload.vue
@@ -4,7 +4,7 @@
       <div class="ui text loader"><translate translate-context="Content/Library/Paragraph">Loading library data…</translate></div>
     </div>
     <detail-area v-else :library="library">
-      <file-upload :default-import-reference="defaultImportReference" :library="library" />
+      <file-upload ref="fileupload" :default-import-reference="defaultImportReference" :library="library" />
     </detail-area>
   </div>
 </template>
@@ -20,6 +20,19 @@ export default {
   components: {
     DetailArea,
     FileUpload
+  },
+  beforeRouteLeave (to, from, next){
+    if (this.$refs.fileupload.hasActiveUploads){
+      const answer = window.confirm('This page is asking you to confirm that you want to leave - data you have entered may not be saved.')
+      if (answer) {
+        next()
+      } else {
+        next(false)
+      }
+    }
+    else{
+      next()
+    }
   }
 }
 </script>