Notifications board

src/renderer/components/BaseNotification.vue

@@ -0,0 +1,73 @@
+<template>
+   <div class="toast mt-2" :class="notificationStatus.className">
+      <span class="p-vcentered text-left">
+         <i class="material-icons mr-1">{{ notificationStatus.iconName }}</i>
+         <span class="notification-message">{{ message }}</span>
+      </span>
+      <button class="btn btn-clear" @click="hideToast" />
+   </div>
+</template>
+
+<script>
+export default { // TODO: open notifications button
+   name: 'BaseNotification',
+   props: {
+      message: {
+         type: String,
+         default: ''
+      },
+      status: {
+         type: String,
+         default: ''
+      }
+   },
+   computed: {
+      notificationStatus () {
+         let className = '';
+         let iconName = '';
+         switch (this.status) {
+            case 'success':
+               className = 'toast-success';
+               iconName = 'done';
+               break;
+            case 'error':
+               className = 'toast-error';
+               iconName = 'error';
+               break;
+            case 'warning':
+               className = 'toast-warning';
+               iconName = 'warning';
+               break;
+            case 'primary':
+               className = 'toast-primary';
+               iconName = 'info_outline';
+               break;
+         }
+
+         return { className, iconName };
+      }
+   },
+   methods: {
+      hideToast () {
+         this.$emit('close');
+      }
+   }
+};
+</script>
+<style scoped>
+   .toast{
+      display: flex;
+      justify-content: space-between;
+      user-select: text;
+      word-break: break-all;
+   }
+
+   .notification-message{
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      width: 25rem;
+      user-select: none;
+   }
+</style>

src/renderer/components/BaseToast.vue

@@ -64,6 +64,7 @@ export default {
    methods: {
       hideToast () {
          this.isVisible = false;
+         this.$emit('close');
       }
    }
 };

src/renderer/components/DatabaseExploreBar.vue

@@ -1,9 +1,13 @@
 <template>
    <div class="workspace-explorebar column">
+      <div class="workspace-explorebar-title">
+         {{ connection.user }}@{{ connection.host }}:{{ connection.port }}
+      </div>
       <button
          v-if="!isConnected"
-         class="btn btn-primary mt-4"
-         @click="$emit('connect')"
+         class="btn btn-success mt-4"
+         :class="{'loading': isConnecting}"
+         @click="startConnection"
       >
          Connect
       </button>
@@ -11,11 +15,35 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex';
+import Connection from '@/ipc-api/Connection';
+
 export default {
    name: 'DatabaseExploreBar',
    props: {
-      uid: String,
-      isConnected: Boolean
+      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>
@@ -27,10 +55,24 @@ export default {
       flex-direction: column;
       justify-content: flex-start;
       align-items: center;
+      text-align: left;
       background: $bg-color-gray;
       margin-bottom: $footer-height;
       box-shadow: 0 0 1px 0px #000;
       z-index: 8;
       flex: initial;
+      position: relative;
+      padding-top: 1.4rem;
+
+      .workspace-explorebar-title{
+         top: 0;
+         left: 0;
+         right: 0;
+         padding: .3rem;
+         position: absolute;
+         font-size: .6rem;
+         font-weight: 700;
+         text-transform: uppercase;
+      }
    }
 </style>

src/renderer/components/DatabaseWorkspace.vue

@@ -1,18 +1,14 @@
 <template>
    <div v-show="selectedConnection === connection.uid" class="workspace column columns">
-      <DatabaseExploreBar
-         :uid="connection.uid"
-         :is-connected="isConnected"
-         @connect="startConnection"
-      />
+      <DatabaseExploreBar :connection="connection" />
       <div class="workspace-tabs column">
-         <p>{{ connection.uid }}</p>
+         <p>{{ connection }}</p>
       </div>
    </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import Connection from '@/ipc-api/Connection';
 import DatabaseExploreBar from '@/components/DatabaseExploreBar';
 
@@ -26,7 +22,6 @@ export default {
    },
    data () {
       return {
-         isConnected: false,
          structure: null
       };
    },
@@ -37,14 +32,19 @@ export default {
    },
    async created () {
       this.isConnected = await Connection.checkConnection(this.connection.uid);
-      if (this.isConnected)
-         this.structure = await Connection.connect(this.connection);// TODO: use refresh
+      if (this.isConnected) {
+         try {
+            this.structure = await Connection.connect(this.connection);// TODO: use refresh
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      }
    },
    methods: {
-      async startConnection () {
-         this.structure = await Connection.connect(this.connection);
-         this.isConnected = true;
-      }
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      })
    }
 };
 </script>

src/renderer/components/ModalNewConnection.vue

@@ -17,7 +17,11 @@
                            <label class="form-label">Client:</label>
                         </div>
                         <div class="col-9 col-sm-12">
-                           <select v-model="connection.client" class="form-select">
+                           <select
+                              v-model="connection.client"
+                              class="form-select"
+                              @change="setDefaults"
+                           >
                               <option value="mysql">
                                  MySQL/MariaDB
                               </option>
@@ -129,6 +133,7 @@
 <script>
 import { mapActions } from 'vuex';
 import Connection from '@/ipc-api/Connection';
+import { uidGen } from 'common/libs/utilities';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseToast from '@/components/BaseToast';
 
@@ -153,7 +158,7 @@ export default {
             user: 'root',
             password: '',
             ask: false,
-            uid: Math.random().toString(36).substr(2, 9).toUpperCase()
+            uid: uidGen()
          },
          toast: {
             status: '',
@@ -168,6 +173,22 @@ export default {
          closeModal: 'connections/hideNewConnModal',
          addConnection: 'connections/addConnection'
       }),
+      setDefaults () {
+         switch (this.connection.client) {
+            case 'mysql':
+               this.connection.port = '3306';
+               break;
+            case 'mssql':
+               this.connection.port = '1433';
+               break;
+            case 'pg':
+               this.connection.port = '5432';
+               break;
+            case 'oracledb':
+               this.connection.port = '1521';
+               break;
+         }
+      },
       async startTest () {
          this.isTesting = true;
          this.toast = {

src/renderer/components/TheNotificationsBoard.vue

@@ -0,0 +1,48 @@
+<template>
+   <div id="notifications-board">
+      <transition-group name="slide-fade">
+         <BaseNotification
+            v-for="notification in latestNotifications"
+            :key="notification.uid"
+            :message="notification.message"
+            :title="notification.message"
+            :status="notification.status"
+            @close="removeNotification(notification.uid)"
+         />
+      </transition-group>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseNotification from '@/components/BaseNotification';
+
+export default {
+   name: 'TheNotificationsBoard',
+   components: {
+      BaseNotification
+   },
+   computed: {
+      ...mapGetters({
+         notifications: 'notifications/getNotifications'
+      }),
+      latestNotifications () {
+         return this.notifications.slice(0, 10);
+      }
+   },
+   methods: {
+      ...mapActions({
+         removeNotification: 'notifications/removeNotification'
+      })
+   }
+};
+</script>
+
+<style lang="scss">
+   #notifications-board{
+      position: absolute;
+      z-index: 9;
+      right: 1rem;
+      bottom: $footer-height+1rem;
+   }
+</style>