Additions

.gitignore

@@ -4,3 +4,4 @@ node_modules/
 thumbs.db
 .idea/
 .vscode
+TODO.md

src/main/index.js

@@ -5,7 +5,7 @@ import * as path from 'path';
 import { format as formatUrl } from 'url';
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
 
-import ipcApi from './ipc-api';
+import ipcHandlers from './ipc-handlers';
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
@@ -15,8 +15,8 @@ let mainWindow;
 
 function createMainWindow () {
    const window = new BrowserWindow({
-      width: 1200,
+      width: 1600,
-      height: 900,
+      height: 1000,
       minHeight: 550,
       minWidth: 450,
       title: 'Antares',
@@ -61,8 +61,8 @@ function createMainWindow () {
       });
    });
 
-   // Initialize ipcApi
+   // Initialize ipcHandlers
-   ipcApi();
+   ipcHandlers();
 
    return window;
 };

src/main/ipc-api/connection.js

@@ -1,24 +0,0 @@
-
-import { ipcMain } from 'electron';
-import knex from 'knex';
-
-export default () => {
-   ipcMain.handle('testConnection', async (event, conn) => {
-      try {
-         await knex({
-            client: conn.client,
-            connection: {
-               host: conn.host,
-               port: +conn.port,
-               user: conn.user,
-               password: conn.password
-            }
-         }).raw('SELECT 1+1 AS result');
-
-         return { status: 'success' };
-      }
-      catch (err) {
-         return { status: 'error', response: err };
-      }
-   });
-};

src/main/ipc-handlers/connection.js

@@ -0,0 +1,50 @@
+
+import { ipcMain } from 'electron';
+import knex from 'knex';
+import InformationSchema from '../models/InformationSchema';
+
+const connections = {};
+
+export default () => {
+   ipcMain.handle('testConnection', async (event, conn) => {
+      try {
+         await knex({
+            client: conn.client,
+            connection: {
+               host: conn.host,
+               port: +conn.port,
+               user: conn.user,
+               password: conn.password
+            }
+         }).raw('SELECT 1+1 AS result');
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err };
+      }
+   });
+
+   ipcMain.handle('checkConnection', async (event, uid) => {
+      return uid in connections;
+   });
+
+   ipcMain.handle('connect', async (event, conn) => {
+      // TODO: make a test before
+      connections[conn.uid] = knex({
+         client: conn.client,
+         connection: {
+            host: conn.host,
+            port: +conn.port,
+            user: conn.user,
+            password: conn.password
+         },
+         pool: {
+            min: 1,
+            max: 3
+         }
+      });
+
+      return await InformationSchema.getStructure(connections[conn.uid]);
+   });
+};

src/main/models/InformationSchema.js

@@ -0,0 +1,10 @@
+'use strict';
+
+export default class {
+   static getStructure (connection) {
+      return connection()
+         .select('*')
+         .withSchema('information_schema')
+         .from('TABLES');
+   }
+}

src/renderer/App.vue

@@ -1,14 +1,15 @@
 <template>
    <div id="wrapper">
-      <!-- <TheHeader /> -->
       <TheSettingBar />
-      <TheExploreBar />
       <div id="main-content" class="container">
-         <!-- <BaseLoaderLayer
-            id="main-loader"
-            :is-loading="isLoading"
-         /> -->
          <TheAppWelcome v-if="!connections.length" @newConn="showNewConnModal" />
+         <div v-else class="columns col-gapless">
+            <DatabaseWorkspace
+               v-for="connection in connections"
+               :key="connection.uid"
+               :connection="connection"
+            />
+         </div>
       </div>
       <TheFooter />
       <ModalNewConnection v-if="isNewConnModal" />
@@ -18,18 +19,18 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import TheSettingBar from '@/components/TheSettingBar';
-import TheExploreBar from '@/components/TheExploreBar';
 import TheFooter from '@/components/TheFooter';
 import TheAppWelcome from '@/components/TheAppWelcome';
+import DatabaseWorkspace from '@/components/DatabaseWorkspace';
 import ModalNewConnection from '@/components/ModalNewConnection';
 
 export default {
    name: 'App',
    components: {
       TheSettingBar,
-      TheExploreBar,
       TheFooter,
       TheAppWelcome,
+      DatabaseWorkspace,
       ModalNewConnection
    },
    data () {
@@ -51,7 +52,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
    html,
    body{
       height: 100%;
@@ -63,7 +64,12 @@ export default {
       position: relative;
    }
 
-   /* #main-content{
+   #main-content {
-      background: #232524;
+      padding: 0;
-   } */
+      justify-content: flex-start;
+
+      > .columns{
+         height: 100vh;
+      }
+   }
 </style>

src/renderer/components/DatabaseExploreBar.vue

@@ -1,18 +1,27 @@
 <template>
-   <div id="explorebar" class="container">
+   <div class="workspace-explorebar column">
-      <!-- aaa -->
+      <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 {
+            try {
+               const res = await Connection.makeTest(this.connection);
+               if (res.status === 'error')
+                  this.toast = { status: 'error', message: res.response.message };
                else
-            await this.invokeTest(this.connection);
+                  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);
+         await Connection.makeTest(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();
-            });
-         });
       },
       saveNewConnection () {
          this.addConnection(this.connection);

src/renderer/components/TheAppWelcome.vue

@@ -1,5 +1,6 @@
 <template>
-   <div class="empty text-light">
+   <div class="columns">
+      <div class="column col-12 empty text-light">
          <div class="empty-icon">
             <i class="material-icons md-48">mood</i>
          </div>
@@ -15,6 +16,7 @@
             </button>
          </div>
       </div>
+   </div>
 </template>
 
 <script>

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">
+            <li class="settingbar-element btn btn-link tooltip tooltip-right mb-2" data-tooltip="Settings">
-               <i class="material-icons text-light">settings</i>
+               <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'
+         showNewConnModal: 'connections/showNewConnModal',
-      }),
+         selectConnection: 'connections/selectConnection'
-      isActiveTab: uid => uid === this.selectedConnection
+      })
    }
 };
 </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;
             }
          }
 

src/renderer/ipc-api/Connection.js

@@ -0,0 +1,19 @@
+'use strict';
+import { ipcRenderer } from 'electron';
+
+export default class {
+   static makeTest (params) {
+      return ipcRenderer.invoke('testConnection', params);
+   }
+
+   static checkConnection (params) {
+      return ipcRenderer.invoke('checkConnection', params);
+   }
+
+   static connect (params) {
+      return ipcRenderer.invoke('connect', params);
+   }
+
+   // TODO: refresh
+   // TODO: disconnect
+}

src/renderer/scss/_variables.scss

@@ -7,6 +7,6 @@ $bg-color-light: #3f3f3f;
 $bg-color-gray: #272727;
 
 /*Sizes*/
-$settingbar-width: 4rem;
+$settingbar-width: 3rem;
-$explorebar-width: 16rem;
+$explorebar-width: 14rem;
 $footer-height: 1.5rem;

src/renderer/store/index.js

@@ -8,10 +8,10 @@ import application from './modules/application.store';
 import connections from './modules/connections.store';
 
 const vuexLocalStorage = new VuexPersist({
-   key: 'vuex', // The key to store the state on in the storage provider.
+   key: 'application', // The key to store the state on in the storage provider.
    storage: window.localStorage,
    reducer: state => ({
-      connections: state.connections.connections
+      connections: state.connections
    })
 });
 

src/renderer/store/modules/connections.store.js

@@ -26,6 +26,9 @@ export default {
       },
       HIDE_NEW_CONNECTION_MODAL (state) {
          state.is_new_modal = false;
+      },
+      SELECT_CONNECTION (state, uid) {
+         state.connection_selected = uid;
       }
    },
    actions: {
@@ -38,6 +41,9 @@ export default {
       },
       hideNewConnModal ({ commit }) {
          commit('HIDE_NEW_CONNECTION_MODAL');
+      },
+      selectConnection ({ commit }, uid) {
+         commit('SELECT_CONNECTION', uid);
       }
    }
 };