fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

feat: new unsaved change reminder

This commit is contained in:
Fabio Di Stasio 2021-07-16 23:24:55 +02:00
parent 003c02b1fb
commit f7a74df009
7 changed files with 76 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/App.vue
View File

@ -16,7 +16,6 @@
<TheNotificationsBoard />
<TheScratchpad v-if="isScratchpad" />
<ModalSettings v-if="isSettingModal" />
<ModalDiscardChanges v-if="isUnsavedDiscardModal" />
<BaseTextEditor class="d-none" value="" />
</div>
</div>
@ -39,7 +38,6 @@ export default {
WorkspaceAddConnectionPanel: () => import(/* webpackChunkName: "WorkspaceAddConnectionPanel" */'@/components/WorkspaceAddConnectionPanel'),
ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings'),
TheScratchpad: () => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad'),
ModalDiscardChanges: () => import(/* webpackChunkName: "ModalDiscardChanges" */'@/components/ModalDiscardChanges'),
BaseTextEditor: () => import(/* webpackChunkName: "BaseTextEditor" */'@/components/BaseTextEditor')
},
data () {

12
src/renderer/components/ModalDiscardChanges.vue
View File

@ -2,8 +2,8 @@
<ConfirmModal
:confirm-text="$t('word.discard')"
:cancel-text="$t('word.stay')"
@confirm="discardUnsavedChanges"
@hide="closeUnsavedChangesModal"
@confirm="$emit('confirm')"
@hide="$emit('close')"
>
<template slot="header">
<div class="d-flex">
@ -19,7 +19,6 @@
</template>
<script>
import { mapActions } from 'vuex';
import ConfirmModal from '@/components/BaseConfirmModal';
export default {
@ -34,13 +33,6 @@ export default {
window.removeEventListener('keydown', this.onKey);
},
methods: {
...mapActions({
discardUnsavedChanges: 'workspaces/discardUnsavedChanges',
closeUnsavedChangesModal: 'workspaces/closeUnsavedChangesModal'
}),
closeModal () {
this.$emit('close');
},
onKey (e) {
e.stopPropagation();
if (e.key === 'Escape')

38
src/renderer/components/Workspace.vue
View File

@ -87,7 +87,11 @@
</span>
</a>
<a v-else-if="tab.type === 'table-props'" class="tab-link">
<a
v-else-if="tab.type === 'table-props'"
class="tab-link"
:class="{'badge': tab.isChanged}"
>
<i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
<span :title="`${$t('word.settings').toUpperCase()}: ${tab.elementType}`">
{{ tab.elementName }}
@ -99,7 +103,11 @@
</span>
</a>
<a v-else-if="tab.type === 'view-props'" class="tab-link">
<a
v-else-if="tab.type === 'view-props'"
class="tab-link"
:class="{'badge': tab.isChanged}"
>
<i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
<span :title="`${$t('word.settings').toUpperCase()}: ${tab.elementType}`">
{{ tab.elementName }}
@ -230,6 +238,12 @@
:connection="connection"
@close="hideProcessesModal"
/>
<ModalDiscardChanges
v-if="unsavedTab"
@confirm="closeTab(unsavedTab, true)"
@close="unsavedTab = null"
/>
</div>
</template>
@ -249,6 +263,7 @@ import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
// import WorkspacePropsTabTriggerFunction from '@/components/WorkspacePropsTabTriggerFunction';
// import WorkspacePropsTabScheduler from '@/components/WorkspacePropsTabScheduler';
import ModalProcessesList from '@/components/ModalProcessesList';
import ModalDiscardChanges from '@/components/ModalDiscardChanges';
export default {
name: 'Workspace',
@ -265,7 +280,8 @@ export default {
// WorkspacePropsTabFunction,
// WorkspacePropsTabTriggerFunction,
// WorkspacePropsTabScheduler,
ModalProcessesList
ModalProcessesList,
ModalDiscardChanges
},
props: {
connection: Object
@ -273,7 +289,8 @@ export default {
data () {
return {
hasWheelEvent: false,
isProcessesModal: false
isProcessesModal: false,
unsavedTab: null
};
},
computed: {
@ -365,8 +382,13 @@ export default {
openAsDataTab (tab) {
this.newTab({ uid: this.connection.uid, schema: tab.schema, elementName: tab.elementName, type: 'data', elementType: tab.elementType });
},
closeTab (tab) {
closeTab (tab, force) {
this.unsavedTab = null;
if (tab.type === 'query' && this.queryTabs.length === 1) return;
if (!force && tab.isChanged) {
this.unsavedTab = tab;
return;
}
this.removeTab({ uid: this.connection.uid, tab: tab.uid });
if (this.selectedTab === tab.uid && this.workspace.tabs.length)
@ -426,6 +448,12 @@ export default {
opacity: 0.7;
transition: opacity 0.2s;
&.badge::after {
position: absolute;
right: 35px;
top: 25px;
}
.btn-clear {
margin-left: 0.5rem;
opacity: 0;

7
src/renderer/components/WorkspacePropsTab.vue
View File

@ -137,7 +137,6 @@ export default {
},
data () {
return {
tabUid: 'prop', // ???
isLoading: false,
isSaving: false,
isOptionsModal: false,
@ -164,6 +163,9 @@ export default {
workspace () {
return this.getWorkspace(this.connection.uid);
},
tabUid () {
return this.$vnode.key;
},
tableOptions () {
const db = this.workspace.structure.find(db => db.name === this.schema);
return db && this.table ? db.tables.find(table => table.name === this.table) : {};
@ -207,8 +209,7 @@ export default {
}
},
isChanged (val) {
if (this.isSelected && this.lastTable === this.table && this.table !== null)
this.setUnsavedChanges(val);
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
}
},
created () {

12
src/renderer/components/WorkspacePropsTabView.vue
View File

@ -23,6 +23,11 @@
<span>{{ $t('word.clear') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="$t('word.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
</div>
</div>
</div>
</div>
<div class="container">
@ -192,7 +197,6 @@ export default {
},
data () {
return {
tabUid: 'prop',
isLoading: false,
isSaving: false,
originalView: null,
@ -210,6 +214,9 @@ export default {
workspace () {
return this.getWorkspace(this.connection.uid);
},
tabUid () {
return this.$vnode.key;
},
isChanged () {
return JSON.stringify(this.originalView) !== JSON.stringify(this.localView);
},
@ -241,8 +248,7 @@ export default {
}
},
isChanged (val) {
if (this.isSelected && this.lastView === this.view && this.view !== null)
this.setUnsavedChanges(val);
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
}
},
async created () {

2
src/renderer/i18n/en-US.js
View File

@ -169,7 +169,7 @@ module.exports = {
deleteTable: 'Delete table',
emptyCorfirm: 'Do you confirm to empty',
unsavedChanges: 'Unsaved changes',
discardUnsavedChanges: 'You have some unsaved changes. By leaving this tab these changes will be discarded.',
discardUnsavedChanges: 'You have some unsaved changes. Closing this tab these changes will be discarded.',
thereAreNoIndexes: 'There are no indexes',
thereAreNoForeign: 'There are no foreign keys',
createNewForeign: 'Create new foreign key',

55
src/renderer/store/modules/workspaces.store.js
View File

@ -11,10 +11,7 @@ export default {
strict: true,
state: {
workspaces: [],
selected_workspace: null,
has_unsaved_changes: false,
is_unsaved_discard_modal: false,
pending_breadcrumbs: {}
selected_workspace: null
},
getters: {
getSelected: state => {
@ -45,9 +42,6 @@ export default {
},
getSearchTerm: state => uid => {
return state.workspaces.find(workspace => workspace.uid === uid).search_term;
},
isUnsavedDiscardModal: state => {
return state.is_unsaved_discard_modal;
}
},
mutations: {
@ -296,12 +290,26 @@ export default {
return workspace;
});
},
SET_UNSAVED_CHANGES (state, val) {
state.has_unsaved_changes = !!val;
},
SET_UNSAVED_DISCARD_MODAL (state, val) {
state.is_unsaved_discard_modal = !!val;
SET_UNSAVED_CHANGES (state, { uid, tUid, isChanged }) {
state.workspaces = state.workspaces.map(workspace => {
if (workspace.uid === uid) {
return {
...workspace,
tabs: workspace.tabs.map(tab => {
if (tab.uid === tUid)
return { ...tab, isChanged };
return tab;
})
};
}
else
return workspace;
});
},
// SET_UNSAVED_DISCARD_MODAL (state, val) {
// state.is_unsaved_discard_modal = !!val;
// },
SET_PENDING_BREADCRUMBS (state, payload) {
state.pending_breadcrumbs = payload;
},
@ -483,11 +491,11 @@ export default {
dispatch('setUnsavedChanges', false);
},
changeBreadcrumbs ({ state, commit, getters }, payload) {
if (state.has_unsaved_changes) {
commit('SET_UNSAVED_DISCARD_MODAL', true);
commit('SET_PENDING_BREADCRUMBS', payload);
return;
}
// if (state.has_unsaved_changes) {
// commit('SET_UNSAVED_DISCARD_MODAL', true);
// commit('SET_PENDING_BREADCRUMBS', payload);
// return;
// }
const breadcrumbsObj = {
schema: null,
@ -607,17 +615,8 @@ export default {
setTabKeyUsage ({ commit }, payload) {
commit('SET_TAB_KEY_USAGE', payload);
},
setUnsavedChanges ({ commit }, val) {
commit('SET_UNSAVED_CHANGES', val);
},
discardUnsavedChanges ({ state, commit, dispatch }) {
dispatch('setUnsavedChanges', false);
dispatch('changeBreadcrumbs', state.pending_breadcrumbs);
commit('SET_UNSAVED_DISCARD_MODAL', false);
commit('SET_PENDING_BREADCRUMBS', {});
},
closeUnsavedChangesModal ({ commit }) {
commit('SET_UNSAVED_DISCARD_MODAL', false);
setUnsavedChanges ({ commit }, payload) {
commit('SET_UNSAVED_CHANGES', payload);
}
}
};