feat(UI): close temp data tabs

src/renderer/components/Workspace.vue

@@ -76,7 +76,7 @@
                class="tab-item"
                :class="{'active': selectedTab === tab.uid}"
                @click="selectTab({uid: workspace.uid, tab: tab.uid})"
-               @mouseup.middle="closeTab(tab.uid)"
+               @mouseup.middle="closeTab(tab)"
             >
                <a v-if="tab.type === 'query'" class="tab-link">
                   <i class="mdi mdi-18px mdi-code-tags mr-1" />
@@ -86,13 +86,21 @@
                         v-if="queryTabs.length > 1"
                         class="btn btn-clear"
                         :title="$t('word.close')"
-                        @click.stop="closeTab(tab.uid)"
+                        @click.stop="closeTab(tab)"
                      />
                   </span>
                </a>
-               <a v-if="tab.type === 'temp-data'" class="tab-link text-italic">
+
+               <a v-if="tab.type === 'temp-data'" class="tab-link">
                   <i class="mdi mdi-18px mr-1" :class="workspace.breadcrumbs.table ? 'mdi-table' : 'mdi-table-eye'" />
-                  <span :title="`${$t('word.data').toUpperCase()}: ${tab.table}`">{{ tab.table }}</span>
+                  <span :title="`${$t('word.data').toUpperCase()}: ${tab.table}`">
+                     <span class=" text-italic">{{ tab.table }}</span>
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
                </a>
             </li>
             <li class="tab-item">
@@ -308,9 +316,12 @@ export default {
             this.hasWheelEvent = true;
          }
       },
-      closeTab (tUid) {
+      closeTab (tab) {
-         if (this.queryTabs.length === 1) return;
+         if (tab.type === 'query' && this.queryTabs.length === 1) return;
-         this.removeTab({ uid: this.connection.uid, tab: tUid });
+
+         this.removeTab({ uid: this.connection.uid, tab: tab.uid });
+         if (this.selectedTab === tab.uid && this.workspace.tabs.length)
+            this.selectTab({ uid: this.workspace.uid, tab: this.workspace.tabs[0].uid });
       },
       showProcessesModal () {
          this.isProcessesModal = true;

src/renderer/components/WorkspaceExploreBarSchema.vue

@@ -282,7 +282,6 @@ export default {
       },
       selectTable ({ schema, table }) {
          this.setBreadcrumbs({ schema, [table.type]: table.name });
-         // TODO: open only if not already opened
          this.newTab({ uid: this.connection.uid, table: table.name, schema: this.database.name, type: 'temp-data' });
       },
       showSchemaContext (event, schema) {

src/renderer/components/WorkspaceExploreBarTableContext.vue

@@ -138,9 +138,6 @@ export default {
             });
 
             if (status === 'success') {
-               if (this.selectedTable.name === this.workspace.breadcrumbs.table)
-                  this.changeBreadcrumbs({ table: null });
-
                this.closeContext();
                this.$emit('reload');
             }

src/renderer/components/WorkspacePropsTab.vue

@@ -185,6 +185,12 @@ export default {
       }
    },
    watch: {
+      schema () {
+         if (this.isSelected) {
+            this.getFieldsData();
+            this.lastTable = this.table;
+         }
+      },
       table () {
          if (this.isSelected) {
             this.getFieldsData();

src/renderer/components/WorkspaceTableTab.vue

@@ -236,6 +236,15 @@ export default {
       }
    },
    watch: {
+      schema () {
+         if (this.isSelected) {
+            this.page = 1;
+            this.sortParams = {};
+            this.getTableData();
+            this.lastTable = this.table;
+            this.$refs.queryTable.resetSort();
+         }
+      },
       table () {
          if (this.isSelected) {
             this.page = 1;

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

@@ -217,6 +217,23 @@ export default {
                return workspace;
          });
       },
+      REPLACE_TAB (state, { uid, tab: tUid, type, schema, table }) {
+         state.workspaces = state.workspaces.map(workspace => {
+            if (workspace.uid === uid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.uid === tUid)
+                        return { ...tab, type, schema, table };
+
+                     return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
+      },
       SELECT_TAB (state, { uid, tab }) {
          state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, selected_tab: tab } : workspace);
       },
@@ -475,18 +492,27 @@ export default {
          commit('SET_SEARCH_TERM', { uid: getters.getSelected, term });
       },
       newTab ({ state, commit }, { uid, content, type, autorun, schema, table }) {
+         let tabUid;
          if (type === 'temp-data') {
             const workspaceTabs = state.workspaces.find(workspace => workspace.uid === uid);
             const tempTabs = workspaceTabs ? workspaceTabs.tabs.filter(tab => tab.type === 'temp-data') : false;
-            if (tempTabs) {
+            if (tempTabs && tempTabs.length) { // id temp table already opened
-               for (const tab of tempTabs)
+               for (const tab of tempTabs) {
-                  commit('REMOVE_TAB', { uid, tab: tab.uid });// TODO: replace instead remove
+                  commit('REPLACE_TAB', { uid, tab: tab.uid, type, schema, table });
+                  tabUid = tab.uid;
+               }
+            }
+            else {
+               tabUid = uidGen('T');
+               commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
             }
          }
+         else {
+            tabUid = uidGen('T');
+            commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
+         }
 
-         const tab = uidGen('T');
+         commit('SELECT_TAB', { uid, tab: tabUid });
-         commit('NEW_TAB', { uid, tab, content, type, autorun, schema, table });
-         commit('SELECT_TAB', { uid, tab });
       },
       removeTab ({ commit }, payload) {
          commit('REMOVE_TAB', payload);