Notification and connection status improvements

src/renderer/components/BaseNotification.vue

@@ -1,15 +1,20 @@
 <template>
    <div class="toast mt-2" :class="notificationStatus.className">
-      <span class="p-vcentered text-left">
+      <span class="p-vcentered text-left" :class="{'expanded': isExpanded}">
          <i class="material-icons mr-1">{{ notificationStatus.iconName }}</i>
          <span class="notification-message">{{ message }}</span>
       </span>
+      <i
+         v-if="isExpandable"
+         class="material-icons c-hand"
+         @click="toggleExpand"
+      >{{ isExpanded ? 'expand_less' : 'expand_more' }}</i>
       <button class="btn btn-clear" @click="hideToast" />
    </div>
 </template>
 
 <script>
-export default { // TODO: open notifications button
+export default {
    name: 'BaseNotification',
    props: {
       message: {
@@ -21,6 +26,11 @@ export default { // TODO: open notifications button
          default: ''
       }
    },
+   data () {
+      return {
+         isExpanded: false
+      };
+   },
    computed: {
       notificationStatus () {
          let className = '';
@@ -45,11 +55,17 @@ export default { // TODO: open notifications button
          }
 
          return { className, iconName };
+      },
+      isExpandable () {
+         return this.message.length > 80;
       }
    },
    methods: {
       hideToast () {
          this.$emit('close');
+      },
+      toggleExpand () {
+         this.isExpanded = !this.isExpanded;
       }
    }
 };
@@ -60,6 +76,8 @@ export default { // TODO: open notifications button
       justify-content: space-between;
       user-select: text;
       word-break: break-all;
+      width: fit-content;
+      margin-left: auto;
    }
 
    .notification-message{
@@ -67,7 +85,11 @@ export default { // TODO: open notifications button
       overflow: hidden;
       text-overflow: ellipsis;
       display: inline-block;
-      width: 25rem;
+      max-width: 25rem;
       user-select: none;
    }
+
+   .expanded .notification-message{
+      white-space: initial;
+   }
 </style>

src/renderer/components/DatabaseConnectPanel.vue

@@ -0,0 +1,77 @@
+<template>
+   <div v-if="!isConnected" class="columns">
+      <div class="column col-12 empty text-light">
+         <div class="empty-icon">
+            <i class="material-icons md-48">cloud_off</i>
+         </div>
+         <p class="empty-title h5">
+            Disconnected
+         </p>
+         <div class="empty-action">
+            <button
+               class="btn btn-success"
+               :class="{'loading': isConnecting}"
+               @click="startConnection"
+            >
+               Connect
+            </button>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Connection from '@/ipc-api/Connection';
+
+export default {
+   name: 'DatabaseConnectPanel',
+   props: {
+      connection: Object
+   },
+   data () {
+      return {
+         isConnecting: false
+      };
+   },
+   computed: {
+      ...mapGetters({
+         connected: 'workspaces/getConnected'
+      }),
+      isConnected () {
+         return this.connected.includes(this.connection.uid);
+      }
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         addConnected: 'workspaces/addConnected'
+      }),
+      async startConnection () {
+         this.isConnecting = true;
+         try {
+            const { status, response } = await Connection.connect(this.connection);
+            if (status === 'error')
+               this.addNotification({ status, message: response });
+            else
+               this.addConnected(this.connection.uid);
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+         this.isConnecting = false;
+      }
+   }
+};
+</script>
+
+<style scoped>
+   .empty{
+      height: 100%;
+      border-radius: 0;
+      background: transparent;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+   }
+</style>

src/renderer/components/DatabaseExploreBar.vue

@@ -3,47 +3,20 @@
       <div class="workspace-explorebar-title">
          {{ connection.user }}@{{ connection.host }}:{{ connection.port }}
       </div>
-      <button
-         v-if="!isConnected"
-         class="btn btn-success mt-4"
-         :class="{'loading': isConnecting}"
-         @click="startConnection"
-      >
-         Connect
-      </button>
+      <DatabaseConnectPanel :connection="connection" />
    </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex';
-import Connection from '@/ipc-api/Connection';
+import DatabaseConnectPanel from '@/components/DatabaseConnectPanel';
 
 export default {
    name: 'DatabaseExploreBar',
+   components: {
+      DatabaseConnectPanel
+   },
    props: {
       connection: Object
-   },
-   data () {
-      return {
-         isConnected: false,
-         isConnecting: false
-      };
-   },
-   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
-      async startConnection () {
-         this.isConnecting = true;
-         try {
-            this.structure = await Connection.connect(this.connection);
-            this.isConnected = true;
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-         this.isConnecting = false;
-      }
    }
 };
 </script>

src/renderer/components/DatabaseWorkspace.vue

@@ -1,5 +1,5 @@
 <template>
-   <div v-show="selectedConnection === connection.uid" class="workspace column columns">
+   <div v-show="selectedWorkspace === connection.uid" class="workspace column columns">
       <DatabaseExploreBar :connection="connection" />
       <div class="workspace-tabs column">
          <p>{{ connection }}</p>
@@ -27,23 +27,32 @@ export default {
    },
    computed: {
       ...mapGetters({
-         selectedConnection: 'connections/getSelected'
+         selectedWorkspace: 'workspaces/getSelected',
+         getConnected: 'workspaces/getConnected'
       })
    },
    async created () {
-      this.isConnected = await Connection.checkConnection(this.connection.uid);
-      if (this.isConnected) {
+      const isInitiated = await Connection.checkConnection(this.connection.uid);
+      if (isInitiated) {
          try {
-            this.structure = await Connection.connect(this.connection);// TODO: use refresh
+            const { status, response } = await Connection.connect(this.connection);
+            if (status === 'success') {
+               this.structure = response;
+               this.addConnected(this.connection.uid);
+            }
+            else
+               this.addNotification({ status, message: response });
          }
          catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
+            this.addNotification({ status: 'error', message: err.toString() });
          }
       }
    },
    methods: {
       ...mapActions({
-         addNotification: 'notifications/addNotification'
+         addNotification: 'notifications/addNotification',
+         addConnected: 'workspaces/addConnected',
+         removeConnected: 'workspaces/removeConnected'
       })
    }
 };

src/renderer/components/TheNotificationsBoard.vue

@@ -5,7 +5,6 @@
             v-for="notification in latestNotifications"
             :key="notification.uid"
             :message="notification.message"
-            :title="notification.message"
             :status="notification.status"
             @close="removeNotification(notification.uid)"
          />
@@ -42,7 +41,7 @@ export default {
    #notifications-board{
       position: absolute;
       z-index: 9;
-      right: 1rem;
+      right: .8rem;
       bottom: $footer-height+1rem;
    }
 </style>

src/renderer/components/TheSettingBar.vue

@@ -6,11 +6,11 @@
                v-for="connection in connections"
                :key="connection.uid"
                class="settingbar-element btn btn-link tooltip tooltip-right"
-               :class="{'selected': connection.uid === selectedConnection}"
+               :class="{'selected': connection.uid === selectedWorkspace}"
                :data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
-               @click="selectConnection(connection.uid)"
+               @click="selectWorkspace(connection.uid)"
             >
-               <i class="settingbar-element-icon dbi" :class="`dbi-${connection.client}`" />
+               <i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${connected.includes(connection.uid) ? 'badge' : ''}`" />
             </li>
             <li
                class="settingbar-element btn btn-link tooltip tooltip-right pt-3"
@@ -40,13 +40,14 @@ export default {
    computed: {
       ...mapGetters({
          connections: 'connections/getConnections',
-         selectedConnection: 'connections/getSelected'
+         connected: 'workspaces/getConnected',
+         selectedWorkspace: 'workspaces/getSelected'
       })
    },
    methods: {
       ...mapActions({
          showNewConnModal: 'connections/showNewConnModal',
-         selectConnection: 'connections/selectConnection'
+         selectWorkspace: 'workspaces/selectWorkspace'
       })
    }
 };
@@ -92,6 +93,13 @@ export default {
 
             .settingbar-element-icon{
                margin-left: -3px;
+
+               &.badge::after{
+                  bottom: -10px;
+                  right: 0;
+                  position: absolute;
+                  background: $success-color;
+               }
             }
          }