feat: unsaved changes reminder

src/renderer/components/ModalDiscardChanges.vue

@@ -0,0 +1,57 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.discard')"
+      :cancel-text="$t('word.stay')"
+      @confirm="discardUnsavedChanges"
+      @hide="closeUnsavedChangesModal"
+   >
+      <template slot="header">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ $t('message.unsavedChanges') }}
+         </div>
+      </template>
+      <div slot="body">
+         <div>
+            {{ $t('message.discardUnsavedChanges') }}
+         </div>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'ModalDiscardChanges',
+   components: {
+      ConfirmModal
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      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')
+            this.closeModal();
+      }
+   }
+};
+</script>
+
+<style scoped>
+  .modal-container {
+    max-width: 360px;
+  }
+</style>

src/renderer/components/Workspace.vue

@@ -67,6 +67,7 @@
          </ul>
          <WorkspacePropsTab
             v-show="selectedTab === 'prop'"
+            :is-selected="selectedTab === 'prop'"
             :connection="connection"
             :table="workspace.breadcrumbs.table"
          />

src/renderer/components/WorkspaceExploreBarDatabase.vue

@@ -18,7 +18,7 @@
                   :key="table.name"
                   class="menu-item"
                   :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.table === table.name}"
-                  @click="changeBreadcrumbs({schema: database.name, table: table.name})"
+                  @click="setBreadcrumbs({schema: database.name, table: table.name})"
                   @contextmenu.prevent="showTableContext($event, table.name)"
                >
                   <a class="table-name">
@@ -76,6 +76,10 @@ export default {
       piePercentage (val) {
          const perc = val / this.maxSize * 100;
          return { background: `conic-gradient(lime ${perc}%, white 0)` };
+      },
+      setBreadcrumbs (payload) {
+         if (this.breadcrumbs.schema === payload.schema && this.breadcrumbs.table === payload.table) return;
+         this.changeBreadcrumbs(payload);
       }
    }
 };

src/renderer/components/WorkspacePropsTab.vue

@@ -137,7 +137,7 @@ export default {
       },
       tableOptions () {
          const db = this.workspace.structure.find(db => db.name === this.schema);
-         return db ? db.tables.find(table => table.name === this.table) : {};
+         return db && this.table ? db.tables.find(table => table.name === this.table) : {};
       },
       defaultEngine () {
          return this.getDatabaseVariable(this.connection.uid, 'default_storage_engine').value || '';
@@ -167,12 +167,17 @@ export default {
             this.getFieldsData();
             this.lastTable = this.table;
          }
+      },
+      isChanged (val) {
+         if (this.isSelected && this.lastTable === this.table && this.table !== null)
+            this.setUnsavedChanges(val);
       }
    },
    methods: {
       ...mapActions({
          addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure'
+         refreshStructure: 'workspaces/refreshStructure',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges'
       }),
       async getFieldsData () {
          if (!this.table) return;