Additions

src/renderer/components/Workspace.vue

@@ -1,8 +1,18 @@
 <template>
    <div v-show="isSelected" class="workspace column columns">
       <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
-      <div class="workspace-tabs column">
-         <pre>{{ JSON.stringify(workspace.structure, null, 3) }}</pre>
+      <div class="workspace-tabs column p-0">
+         <ul class="tab tab-block">
+            <li
+               v-for="(tab, key) of workspace.tabs"
+               :key="tab.uid"
+               class="tab-item"
+               :class="{'active': selectedTab === tab.uid}"
+            >
+               <a href="#">Query #{{ key }} <span class="btn btn-clear" /></a>
+            </li>
+         </ul>
+         <QueryEditor v-model="query" />
       </div>
    </div>
 </template>
@@ -11,15 +21,22 @@
 import { mapGetters, mapActions } from 'vuex';
 import Connection from '@/ipc-api/Connection';
 import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
+import QueryEditor from '@/components/QueryEditor';
 
 export default {
    name: 'Workspace',
    components: {
-      WorkspaceExploreBar
+      WorkspaceExploreBar,
+      QueryEditor
    },
    props: {
       connection: Object
    },
+   data () {
+      return {
+         query: ''
+      };
+   },
    computed: {
       ...mapGetters({
          selectedWorkspace: 'workspaces/getSelected',
@@ -30,10 +47,13 @@ export default {
       },
       isSelected () {
          return this.selectedWorkspace === this.connection.uid;
+      },
+      selectedTab () {
+         return this.workspace.tabs.filter(tab => tab.selected).uid || this.workspace.tabs[0].uid;
       }
    },
    async created () {
-      this.addWorkspace(this.connection.uid);
+      await this.addWorkspace(this.connection.uid);
       const isInitiated = await Connection.checkConnection(this.connection.uid);
       if (isInitiated)
          this.connectWorkspace(this.connection);
@@ -50,13 +70,22 @@ export default {
 </script>
 
 <style lang="scss">
-   .workspace{
-      padding: 0;
-      margin: 0;
+.workspace{
+   padding: 0;
+   margin: 0;
 
-      .workspace-tabs{
-         overflow: auto;
-         height: calc(100vh - #{$excluding-size});
+   .workspace-tabs{
+      overflow: auto;
+      height: calc(100vh - #{$excluding-size});
+
+      .tab-block{
+         background: $bg-color-light;
+         margin-top: 0;
+
+         .tab-item{
+            max-width: 6rem;
+         }
       }
    }
+}
 </style>