feat: new data tabs

src/main/ipc-handlers/tables.js

@@ -29,7 +29,7 @@ export default (connections) => {
          if (sortParams && sortParams.field && sortParams.dir)
             query.orderBy({ [sortParams.field]: sortParams.dir.toUpperCase() });
 
-         const result = await query.run({ details: true });
+         const result = await query.run({ details: true, schema });
 
          return { status: 'success', response: result };
       }

src/main/libs/clients/MySQLClient.js

@@ -1419,7 +1419,7 @@ export class MySQLClient extends AntaresCore {
                         name: field.orgName,
                         alias: field.name,
                         orgName: field.orgName,
-                        schema: field.schema,
+                        schema: field.schema || args.schema,
                         table: field.table,
                         tableAlias: field.table,
                         orgTable: field.orgTable,

src/renderer/components/Workspace.vue

@@ -91,7 +91,11 @@
                   </span>
                </a>
 
-               <a v-if="tab.type === 'temp-data'" class="tab-link">
+               <a
+                  v-if="tab.type === 'temp-data'"
+                  class="tab-link"
+                  @dblclick="openAsDataTab(tab)"
+               >
                   <i class="mdi mdi-18px mr-1" :class="workspace.breadcrumbs.table ? 'mdi-table' : 'mdi-table-eye'" />
                   <span :title="`${$t('word.data').toUpperCase()}: ${tab.table}`">
                      <span class=" text-italic">{{ tab.table }}</span>
@@ -102,6 +106,18 @@
                      />
                   </span>
                </a>
+
+               <a v-if="tab.type === '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
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
             </li>
             <li class="tab-item">
                <a
@@ -164,7 +180,7 @@
                :connection="connection"
             />
             <WorkspaceTableTab
-               v-else-if="tab.type==='temp-data'"
+               v-else-if="['temp-data', 'data'].includes(tab.type)"
                :key="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
@@ -307,14 +323,11 @@ export default {
       }),
       addQueryTab () {
          this.newTab({ uid: this.connection.uid, type: 'query' });
-
+         this.addWheelEvent();
-         if (!this.hasWheelEvent) {
+      },
-            this.$refs.tabWrap.addEventListener('wheel', e => {
+      openAsDataTab (tab) {
-               if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
+         this.newTab({ uid: this.connection.uid, schema: tab.schema, table: tab.table, type: 'data' });
-               else this.$refs.tabWrap.scrollLeft -= 50;
+         this.addWheelEvent();
-            });
-            this.hasWheelEvent = true;
-         }
       },
       closeTab (tab) {
          if (tab.type === 'query' && this.queryTabs.length === 1) return;
@@ -328,6 +341,15 @@ export default {
       },
       hideProcessesModal () {
          this.isProcessesModal = false;
+      },
+      addWheelEvent () {
+         if (!this.hasWheelEvent) {
+            this.$refs.tabWrap.addEventListener('wheel', e => {
+               if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
+               else this.$refs.tabWrap.scrollLeft -= 50;
+            });
+            this.hasWheelEvent = true;
+         }
       }
    }
 };

src/renderer/components/WorkspaceExploreBarSchema.vue

@@ -20,6 +20,7 @@
                   class="menu-item"
                   :class="{'text-bold': breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name)}"
                   @click="selectTable({schema: database.name, table})"
+                  @dblclick="openDataTab({schema: database.name, table})"
                   @contextmenu.prevent="showTableContext($event, table)"
                >
                   <a class="table-name">
@@ -281,8 +282,12 @@ export default {
          this.changeBreadcrumbs({ schema, table: null });
       },
       selectTable ({ schema, table }) {
-         this.setBreadcrumbs({ schema, [table.type]: table.name });
          this.newTab({ uid: this.connection.uid, table: table.name, schema: this.database.name, type: 'temp-data' });
+         this.setBreadcrumbs({ schema, [table.type]: table.name });
+      },
+      openDataTab ({ schema, table }) {
+         this.newTab({ uid: this.connection.uid, table: table.name, schema: this.database.name, type: 'data' });
+         this.setBreadcrumbs({ schema, [table.type]: table.name });
       },
       showSchemaContext (event, schema) {
          this.selectSchema(schema);

src/renderer/components/WorkspaceTableTab.vue

@@ -187,7 +187,7 @@ export default {
    },
    data () {
       return {
-         tabUid: 'data',
+         tabUid: 'data', // ???
          isQuering: false,
          isPageMenu: false,
          results: [],

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

@@ -493,10 +493,22 @@ export default {
       },
       newTab ({ state, commit }, { uid, content, type, autorun, schema, table }) {
          let tabUid;
-         if (type === 'temp-data') {
          const workspaceTabs = state.workspaces.find(workspace => workspace.uid === uid);
+
+         if (type === 'temp-data') {
+            const existentTab = workspaceTabs
+               ? workspaceTabs.tabs.find(tab =>
+                  tab.schema === schema &&
+                  tab.table === table &&
+                  ['temp-data', 'data'].includes(tab.type))
+               : false;
+
+            if (existentTab) { // if data tab exists
+               tabUid = existentTab.uid;
+            }
+            else {
                const tempTabs = workspaceTabs ? workspaceTabs.tabs.filter(tab => tab.type === 'temp-data') : false;
-            if (tempTabs && tempTabs.length) { // id temp table already opened
+               if (tempTabs && tempTabs.length) { // if temp table already opened
                   for (const tab of tempTabs) {
                      commit('REPLACE_TAB', { uid, tab: tab.uid, type, schema, table });
                      tabUid = tab.uid;
@@ -507,6 +519,24 @@ export default {
                   commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
                }
             }
+         }
+         else if (type === 'data') {
+            const existentTab = workspaceTabs
+               ? workspaceTabs.tabs.find(tab =>
+                  tab.schema === schema &&
+                  tab.table === table &&
+                  ['temp-data', 'data'].includes(tab.type))
+               : false;
+
+            if (existentTab) {
+               commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, table });
+               tabUid = existentTab.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 });