Additions

src/renderer/components/DatabaseExploreBar.vue

@@ -1,18 +1,27 @@
 <template>
-   <div id="explorebar" class="container">
-      <!-- aaa -->
+   <div class="workspace-explorebar column">
+      <button
+         v-if="!isConnected"
+         class="btn btn-primary mt-4"
+         @click="$emit('connect')"
+      >
+         Connect
+      </button>
    </div>
 </template>
 
 <script>
 export default {
-   name: 'TheExploreBar'
-
+   name: 'DatabaseExploreBar',
+   props: {
+      uid: String,
+      isConnected: Boolean
+   }
 };
 </script>
 
 <style lang="scss">
-   #explorebar{
+   .workspace-explorebar{
       width: $explorebar-width;
       display: flex;
       flex-direction: column;
@@ -22,5 +31,6 @@ export default {
       margin-bottom: $footer-height;
       box-shadow: 0 0 1px 0px #000;
       z-index: 8;
+      flex: initial;
    }
 </style>

src/renderer/components/DatabaseWorkspace.vue

@@ -0,0 +1,57 @@
+<template>
+   <div v-show="selectedConnection === connection.uid" class="workspace column columns">
+      <DatabaseExploreBar
+         :uid="connection.uid"
+         :is-connected="isConnected"
+         @connect="startConnection"
+      />
+      <div class="workspace-tabs column">
+         <p>{{ connection.uid }}</p>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Connection from '@/ipc-api/Connection';
+import DatabaseExploreBar from '@/components/DatabaseExploreBar';
+
+export default {
+   name: 'DatabaseWorkspace',
+   components: {
+      DatabaseExploreBar
+   },
+   props: {
+      connection: Object
+   },
+   data () {
+      return {
+         isConnected: false,
+         structure: null
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedConnection: 'connections/getSelected'
+      })
+   },
+   async created () {
+      this.isConnected = await Connection.checkConnection(this.connection.uid);
+      if (this.isConnected)
+         this.structure = await Connection.connect(this.connection);// TODO: use refresh
+   },
+   methods: {
+      async startConnection () {
+         this.structure = await Connection.connect(this.connection);
+         this.isConnected = true;
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+   .workspace{
+      padding: 0;
+      margin: 0;
+   }
+</style>

src/renderer/components/ModalNewConnection.vue

@@ -128,7 +128,7 @@
 
 <script>
 import { mapActions } from 'vuex';
-import { ipcRenderer } from 'electron';
+import Connection from '@/ipc-api/Connection';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseToast from '@/components/BaseToast';
 
@@ -177,34 +177,25 @@ export default {
 
          if (this.connection.ask)
             this.isAsking = true;
-         else
-            await this.invokeTest(this.connection);
+         else {
+            try {
+               const res = await Connection.makeTest(this.connection);
+               if (res.status === 'error')
+                  this.toast = { status: 'error', message: res.response.message };
+               else
+                  this.toast = { status: 'success', message: 'Connection successifully made!' };
+            }
+            catch (err) {
+               this.toast = { status: 'error', message: err.stack };
+            }
+
+            this.isTesting = false;
+         }
       },
       async continueTest (credentials) { // if "Ask for credentials" is true
          this.isAsking = false;
          const params = Object.assign({}, this.connection, credentials);
-         await this.invokeTest(params);
-      },
-      invokeTest (params) {
-         return new Promise((resolve, reject) => {
-            ipcRenderer.invoke('testConnection', params).then(res => {
-               if (res.status === 'error') {
-                  this.toast = {
-                     status: 'error',
-                     message: res.response.message
-                  };
-               }
-               else {
-                  this.toast = {
-                     status: 'success',
-                     message: 'Connection successifully made!'
-                  };
-               }
-
-               this.isTesting = false;
-               resolve();
-            });
-         });
+         await Connection.makeTest(params);
       },
       saveNewConnection () {
          this.addConnection(this.connection);

src/renderer/components/TheAppWelcome.vue

@@ -1,18 +1,20 @@
 <template>
-   <div class="empty text-light">
-      <div class="empty-icon">
-         <i class="material-icons md-48">mood</i>
-      </div>
-      <p class="empty-title h5">
-         Welcome to Antares SQL Client!
-      </p>
-      <p class="empty-subtitle">
-         Your first step: create a new database connection.
-      </p>
-      <div class="empty-action">
-         <button class="btn btn-primary" @click="$emit('newConn')">
-            Create connection
-         </button>
+   <div class="columns">
+      <div class="column col-12 empty text-light">
+         <div class="empty-icon">
+            <i class="material-icons md-48">mood</i>
+         </div>
+         <p class="empty-title h5">
+            Welcome to Antares SQL Client!
+         </p>
+         <p class="empty-subtitle">
+            Your first step: create a new database connection.
+         </p>
+         <div class="empty-action">
+            <button class="btn btn-primary" @click="$emit('newConn')">
+               Create connection
+            </button>
+         </div>
       </div>
    </div>
 </template>

src/renderer/components/TheSettingBar.vue

@@ -1,30 +1,31 @@
 <template>
-   <div id="settingbar" class="container">
+   <div id="settingbar">
       <div class="settingbar-top-elements">
          <ul class="settingbar-elements">
             <li
                v-for="connection in connections"
                :key="connection.uid"
-               class="settingbar-element btn btn-link tooltip tooltip-right p-0"
+               class="settingbar-element btn btn-link tooltip tooltip-right"
                :class="{'selected': connection.uid === selectedConnection}"
                :data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
+               @click="selectConnection(connection.uid)"
             >
-               <i class="dbi" :class="`dbi-${connection.client}`" />
+               <i class="settingbar-element-icon dbi" :class="`dbi-${connection.client}`" />
             </li>
             <li
-               class="settingbar-element btn btn-link tooltip tooltip-right"
+               class="settingbar-element btn btn-link tooltip tooltip-right pt-3"
                data-tooltip="Add connection"
                @click="showNewConnModal"
             >
-               <i class="material-icons text-light">add</i>
+               <i class="settingbar-element-icon material-icons text-light">add</i>
             </li>
          </ul>
       </div>
 
       <div class="settingbar-bottom-elements">
          <ul class="settingbar-elements">
-            <li class="settingbar-element btn btn-link tooltip tooltip-right" data-tooltip="Settings">
-               <i class="material-icons text-light">settings</i>
+            <li class="settingbar-element btn btn-link tooltip tooltip-right mb-2" data-tooltip="Settings">
+               <i class="settingbar-element-icon material-icons text-light">settings</i>
             </li>
          </ul>
       </div>
@@ -44,9 +45,9 @@ export default {
    },
    methods: {
       ...mapActions({
-         showNewConnModal: 'connections/showNewConnModal'
-      }),
-      isActiveTab: uid => uid === this.selectedConnection
+         showNewConnModal: 'connections/showNewConnModal',
+         selectConnection: 'connections/selectConnection'
+      })
    }
 };
 </script>
@@ -59,7 +60,7 @@ export default {
       justify-content: space-between;
       align-items: center;
       background: $bg-color-light;
-      padding: .5rem 0;
+      padding: 0;
       margin-bottom: $footer-height;
       box-shadow: 0 0 1px 0px #000;
       z-index: 9;
@@ -72,9 +73,25 @@ export default {
 
          .settingbar-element{
             height: initial;
+            width: 100%;
+            padding: 0;
+            padding: .3rem 0 0;
+            margin: 0;
+            border-left: 3px solid transparent;
+            opacity: .5;
+            transition: opacity .2s;
+
+            &:hover{
+               opacity: 1;
+            }
+
+            &.selected{
+               border-left-color: $body-font-color;
+               opacity: 1;
+            }
 
             .settingbar-element-icon{
-               width: 42px;
+               margin-left: -3px;
             }
          }