Merge branch '630-do-not-allow-tab-closure-during-upload' into 'develop'

Resolve "Do not allow tab closure during upload"

Closes #630

See merge request funkwhale/funkwhale!673
This commit is contained in:
Eliot Berriot 2019-03-18 10:09:28 +01:00
commit 7b9343bc89
3 changed files with 28 additions and 1 deletions

View File

@ -0,0 +1 @@
Ask for confirmation before leaving upload page if there is a an upload in process (#630)

View File

@ -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: {

View File

@ -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>