DIsconnection

src/main/ipc-handlers/connection.js

@@ -55,4 +55,9 @@ export default () => {
       connections[conn.uid] = connection;
       return { status: 'success', response: structure };
    });
+
+   ipcMain.handle('disconnect', (event, uid) => {
+      connections[uid].destroy();
+      delete connections[uid];
+   });
 };

src/renderer/components/BaseNotification.vue

@@ -9,7 +9,7 @@
          class="material-icons c-hand"
          @click="toggleExpand"
       >{{ isExpanded ? 'expand_less' : 'expand_more' }}</i>
-      <button class="btn btn-clear" @click="hideToast" />
+      <button class="btn btn-clear ml-2" @click="hideToast" />
    </div>
 </template>
 

src/renderer/components/DatabaseConnectPanel.vue

@@ -1,5 +1,5 @@
 <template>
-   <div v-if="!isConnected" class="columns">
+   <div class="columns">
       <div class="column col-12 empty text-light">
          <div class="empty-icon">
             <i class="material-icons md-48">cloud_off</i>
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { mapActions } from 'vuex';
 import Connection from '@/ipc-api/Connection';
 
 export default {
@@ -34,14 +34,6 @@ export default {
          isConnecting: false
       };
    },
-   computed: {
-      ...mapGetters({
-         connected: 'workspaces/getConnected'
-      }),
-      isConnected () {
-         return this.connected.includes(this.connection.uid);
-      }
-   },
    methods: {
       ...mapActions({
          addNotification: 'notifications/addNotification',

src/renderer/components/DatabaseExploreBar.vue

@@ -1,13 +1,22 @@
 <template>
    <div class="workspace-explorebar column">
-      <div class="workspace-explorebar-title">
+      <div class="workspace-explorebar-header">
-         {{ connection.user }}@{{ connection.host }}:{{ connection.port }}
+         <span class="workspace-explorebar-title">{{ connection.user }}@{{ connection.host }}:{{ connection.port }}</span>
+         <span v-if="isConnected" class="workspace-explorebar-tools">
+            <i class="material-icons md-18 c-hand mr-1" title="Refresh">cached</i>
+            <i
+               class="material-icons md-18 c-hand"
+               title="Disconnect"
+               @click="disconnectWorkspace(connection.uid)"
+            >exit_to_app</i>
+         </span>
       </div>
-      <DatabaseConnectPanel :connection="connection" />
+      <DatabaseConnectPanel v-if="!isConnected" :connection="connection" />
    </div>
 </template>
 
 <script>
+import { mapGetters, mapActions } from 'vuex';
 import DatabaseConnectPanel from '@/components/DatabaseConnectPanel';
 
 export default {
@@ -17,6 +26,19 @@ export default {
    },
    props: {
       connection: Object
+   },
+   computed: {
+      ...mapGetters({
+         connected: 'workspaces/getConnected'
+      }),
+      isConnected () {
+         return this.connected.includes(this.connection.uid);
+      }
+   },
+   methods: {
+      ...mapActions({
+         disconnectWorkspace: 'workspaces/removeConnected'
+      })
    }
 };
 </script>
@@ -37,15 +59,33 @@ export default {
       position: relative;
       padding-top: 1.4rem;
 
-      .workspace-explorebar-title{
+      .workspace-explorebar-header{
          top: 0;
          left: 0;
          right: 0;
          padding: .3rem;
          position: absolute;
+         display: flex;
+         justify-content: space-between;
          font-size: .6rem;
          font-weight: 700;
          text-transform: uppercase;
+
+         .workspace-explorebar-title{
+            width: 80%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+         }
+
+         .workspace-explorebar-tools > i{
+            opacity: .6;
+            transition: opacity .2s;;
+
+            &:hover{
+               opacity: 1;
+            }
+         }
       }
    }
 </style>

src/renderer/components/DatabaseWorkspace.vue

@@ -2,7 +2,7 @@
    <div v-show="selectedWorkspace === connection.uid" class="workspace column columns">
       <DatabaseExploreBar :connection="connection" />
       <div class="workspace-tabs column">
-         <p>{{ connection }}</p>
+         <pre>{{ JSON.stringify(connection, null, 3) }}</pre>
       </div>
    </div>
 </template>
@@ -32,6 +32,7 @@ export default {
       })
    },
    async created () {
+      this.addWorkspace(this.connection.uid);
       const isInitiated = await Connection.checkConnection(this.connection.uid);
       if (isInitiated) {
          try {
@@ -51,6 +52,7 @@ export default {
    methods: {
       ...mapActions({
          addNotification: 'notifications/addNotification',
+         addWorkspace: 'workspaces/addWorkspace',
          addConnected: 'workspaces/addConnected',
          removeConnected: 'workspaces/removeConnected'
       })

src/renderer/ipc-api/Connection.js

@@ -14,6 +14,10 @@ export default class {
       return ipcRenderer.invoke('connect', params);
    }
 
+   static disconnect (uid) {
+      return ipcRenderer.invoke('disconnect', uid);
+   }
+
    // TODO: refresh
    // TODO: disconnect
 }

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

@@ -1,5 +1,5 @@
 'use strict';
-// import { uidGen } from 'common/libs/utilities';
+import Connection from '@/ipc-api/Connection';
 
 export default {
    namespaced: true,
@@ -7,11 +7,11 @@ export default {
    state: {
       workspaces: [],
       connected_workspaces: [],
-      workspace_selected: null
+      selected_workspace: null
    },
    getters: {
       getSelected: state => {
-         if (state.workspace_selected) return state.workspace_selected;
+         if (state.selected_workspace) return state.selected_workspace;
          if (state.workspaces.length) return state.workspaces[0].uid;
          return null;
       },
@@ -20,13 +20,16 @@ export default {
    },
    mutations: {
       SELECT_WORKSPACE (state, uid) {
-         state.workspace_selected = uid;
+         state.selected_workspace = uid;
       },
       ADD_CONNECTED (state, uid) {
          state.connected_workspaces.push(uid);
       },
       REMOVE_CONNECTED (state, uid) {
-         state.connected_workspaces = state.connected_workspaces.filter(item => item.uid !== uid);
+         state.connected_workspaces = state.connected_workspaces.filter(value => value !== uid);
+      },
+      ADD_WORKSPACE (state, workspace) {
+         state.workspaces.push(workspace);
       }
    },
    actions: {
@@ -36,8 +39,16 @@ export default {
       addConnected ({ commit }, uid) {
          commit('ADD_CONNECTED', uid);
       },
-      removeConnected ({ commit }, uid) {
+      async removeConnected ({ commit }, uid) {
+         Connection.disconnect(uid);
          commit('REMOVE_CONNECTED', uid);
+      },
+      addWorkspace ({ commit }, uid) {
+         const workspace = {
+            uid,
+            tabs: []
+         };
+         commit('ADD_WORKSPACE', workspace);
       }
    }
 };