feat: new unsaved change reminder

src/renderer/App.vue

@@ -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 () {

src/renderer/components/ModalDiscardChanges.vue

@@ -2,8 +2,8 @@
    <ConfirmModal
       :confirm-text="$t('word.discard')"
       :cancel-text="$t('word.stay')"
-      @confirm="discardUnsavedChanges"
+      @confirm="$emit('confirm')"
-      @hide="closeUnsavedChangesModal"
+      @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')

src/renderer/components/Workspace.vue

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

src/renderer/components/WorkspacePropsTab.vue

@@ -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({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
-            this.setUnsavedChanges(val);
       }
    },
    created () {

src/renderer/components/WorkspacePropsTabView.vue

@@ -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({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
-            this.setUnsavedChanges(val);
       }
    },
    async created () {

src/renderer/i18n/en-US.js

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

src/renderer/store/modules/workspaces.store.js

@@ -11,10 +11,7 @@ export default {
    strict: true,
    state: {
       workspaces: [],
-      selected_workspace: null,
+      selected_workspace: null
-      has_unsaved_changes: false,
-      is_unsaved_discard_modal: false,
-      pending_breadcrumbs: {}
    },
    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) {
+      SET_UNSAVED_CHANGES (state, { uid, tUid, isChanged }) {
-         state.has_unsaved_changes = !!val;
+         state.workspaces = state.workspaces.map(workspace => {
-      },
+            if (workspace.uid === uid) {
-      SET_UNSAVED_DISCARD_MODAL (state, val) {
+               return {
-         state.is_unsaved_discard_modal = !!val;
+                  ...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) {
+         // if (state.has_unsaved_changes) {
-            commit('SET_UNSAVED_DISCARD_MODAL', true);
+         //    commit('SET_UNSAVED_DISCARD_MODAL', true);
-            commit('SET_PENDING_BREADCRUMBS', payload);
+         //    commit('SET_PENDING_BREADCRUMBS', payload);
-            return;
+         //    return;
-         }
+         // }
 
          const breadcrumbsObj = {
             schema: null,
@@ -607,17 +615,8 @@ export default {
       setTabKeyUsage ({ commit }, payload) {
          commit('SET_TAB_KEY_USAGE', payload);
       },
-      setUnsavedChanges ({ commit }, val) {
+      setUnsavedChanges ({ commit }, payload) {
-         commit('SET_UNSAVED_CHANGES', val);
+         commit('SET_UNSAVED_CHANGES', payload);
-      },
-      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);
       }
    }
 };