diff --git a/changes/changelog.d/630.enhancement b/changes/changelog.d/630.enhancement new file mode 100644 index 0000000000000000000000000000000000000000..019911337ca63376568c0ea0f8a362b532a9a4a0 --- /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 3c669eb180d03d9eaaa6aec25a8bcc5132dccf1d..f5cf432e9351627680657dc9bc7666a453f69ad7 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 d4a3d824594c1e09536beb0500caef3be705c33f..5fc7234ecd03fe82dd3019ba18d2997c55673aeb 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>