diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue index 203be72..1181d2e 100644 --- a/src/components/MainMenu.vue +++ b/src/components/MainMenu.vue @@ -28,7 +28,7 @@
Save query - +
@@ -44,7 +44,7 @@ />
- +
@@ -82,6 +82,7 @@ export default { }, created () { this.$root.$on('createNewQuery', this.createNewQuery) + this.$root.$on('saveQuery', this.checkQueryBeforeSave) }, methods: { createNewQuery () { @@ -96,6 +97,10 @@ export default { this.$store.commit('addTab', tab) this.$store.commit('setCurrentTabId', tab.id) }, + cancelSave () { + this.$modal.hide('save') + this.$root.$off('querySaved') + }, checkQueryBeforeSave () { this.errorMsg = null const isFromScratch = !this.currentQuery.initName @@ -159,6 +164,9 @@ export default { // Hide dialog this.$modal.hide('save') + + // Signal about saving + this.$root.$emit('querySaved') } } } diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue index 2d940df..4ae2d7f 100644 --- a/src/components/Tabs.vue +++ b/src/components/Tabs.vue @@ -13,7 +13,7 @@ {{ tab.tempName }}
- +
@@ -32,6 +32,32 @@ a new query from scratch or open the one from My queries + + + +
+ Close tab {{ + closingTabIndex !== null + ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`) + : '' + }} + +
+
+ You have unsaved changes. Save changes in {{ + closingTabIndex !== null + ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`) + : '' + }} before closing? +
+
+ + + +
+
@@ -46,6 +72,7 @@ export default { }, data () { return { + closingTabIndex: null } }, computed: { @@ -56,12 +83,45 @@ export default { return this.$store.state.currentTabId } }, + created () { + window.addEventListener('beforeunload', this.leavingSqliteviz) + }, + unmounted () { + window.removeEventListener('beforeunload', this.leavingSqliteviz) + }, methods: { + leavingSqliteviz (event) { + if (this.tabs.some(tab => tab.isUnsaved)) { + event.preventDefault() + event.returnValue = '' + } + }, selectTab (id) { this.$store.commit('setCurrentTabId', id) }, + beforeCloseTab (index) { + this.closingTabIndex = index + if (this.tabs[index].isUnsaved) { + this.$modal.show('close-warn') + } else { + this.closeTab(index) + } + }, closeTab (index) { + this.$modal.hide('close-warn') + this.closingTabIndex = null this.$store.commit('deleteTab', index) + }, + saveAndClose (index) { + this.$root.$on('querySaved', () => { + this.closeTab(index) + this.$root.$off('querySaved') + }) + this.selectTab(this.tabs[index].id) + this.$modal.hide('close-warn') + this.$nextTick(() => { + this.$root.$emit('saveQuery') + }) } } }