feat: new data tabs

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' });
-
-         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;
-         }
+         this.addWheelEvent();
+      },
+      openAsDataTab (tab) {
+         this.newTab({ uid: this.connection.uid, schema: tab.schema, table: tab.table, type: 'data' });
+         this.addWheelEvent();
       },
       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: [],