From c23deb376022c44a67e3f1732289d578523c50e2 Mon Sep 17 00:00:00 2001
From: Fabio <fabio286@gmail.com>
Date: Mon, 18 May 2020 18:06:32 +0200
Subject: [PATCH] DIsconnection

---
 src/main/ipc-handlers/connection.js           |  5 ++
 src/renderer/components/BaseNotification.vue  |  2 +-
 .../components/DatabaseConnectPanel.vue       | 12 +----
 .../components/DatabaseExploreBar.vue         | 48 +++++++++++++++++--
 src/renderer/components/DatabaseWorkspace.vue |  4 +-
 src/renderer/ipc-api/Connection.js            |  4 ++
 .../store/modules/workspaces.store.js         | 23 ++++++---
 7 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/src/main/ipc-handlers/connection.js b/src/main/ipc-handlers/connection.js
index 19612ebb..5a68ab5e 100644
--- a/src/main/ipc-handlers/connection.js
+++ b/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];
+   });
 };
diff --git a/src/renderer/components/BaseNotification.vue b/src/renderer/components/BaseNotification.vue
index 9724240c..fb8f0260 100644
--- a/src/renderer/components/BaseNotification.vue
+++ b/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>
 
diff --git a/src/renderer/components/DatabaseConnectPanel.vue b/src/renderer/components/DatabaseConnectPanel.vue
index 2f7b85af..8904aea5 100644
--- a/src/renderer/components/DatabaseConnectPanel.vue
+++ b/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',
diff --git a/src/renderer/components/DatabaseExploreBar.vue b/src/renderer/components/DatabaseExploreBar.vue
index b923ec67..56475066 100644
--- a/src/renderer/components/DatabaseExploreBar.vue
+++ b/src/renderer/components/DatabaseExploreBar.vue
@@ -1,13 +1,22 @@
 <template>
    <div class="workspace-explorebar column">
-      <div class="workspace-explorebar-title">
-         {{ connection.user }}@{{ connection.host }}:{{ connection.port }}
+      <div class="workspace-explorebar-header">
+         <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>
diff --git a/src/renderer/components/DatabaseWorkspace.vue b/src/renderer/components/DatabaseWorkspace.vue
index ecd4bd78..592ac88f 100644
--- a/src/renderer/components/DatabaseWorkspace.vue
+++ b/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'
       })
diff --git a/src/renderer/ipc-api/Connection.js b/src/renderer/ipc-api/Connection.js
index 7867fef4..2a1ccdf1 100644
--- a/src/renderer/ipc-api/Connection.js
+++ b/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
 }
diff --git a/src/renderer/store/modules/workspaces.store.js b/src/renderer/store/modules/workspaces.store.js
index 9b1ba70c..cfa9f7bb 100644
--- a/src/renderer/store/modules/workspaces.store.js
+++ b/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);
       }
    }
 };