feat: new unsaved change reminder

src/renderer/components/ModalDiscardChanges.vue

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

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