Notifications board

package-lock.json

@@ -2487,6 +2487,11 @@
       "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
       "dev": true
     },
+    "buffer-writer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-writer/-/buffer-writer-2.0.0.tgz",
+      "integrity": "sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw=="
+    },
     "buffer-xor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
@@ -9063,6 +9068,11 @@
         }
       }
     },
+    "packet-reader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/packet-reader/-/packet-reader-1.0.0.tgz",
+      "integrity": "sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ=="
+    },
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -9291,11 +9301,73 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "pg": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.2.0.tgz",
+      "integrity": "sha512-EQeWKZv7qBTQZQa7EraR61AOi0bpizvlZLvrPdgAGaraX4YI+y40iQnL39XjPMXVnHOOG3jV6kAGtc0WSJn/+A==",
+      "requires": {
+        "buffer-writer": "2.0.0",
+        "packet-reader": "1.0.0",
+        "pg-connection-string": "^2.2.2",
+        "pg-pool": "^3.2.0",
+        "pg-protocol": "^1.2.3",
+        "pg-types": "^2.1.0",
+        "pgpass": "1.x",
+        "semver": "4.3.2"
+      },
+      "dependencies": {
+        "pg-connection-string": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.2.2.tgz",
+          "integrity": "sha512-+hel4DGuSZCjCZwglAuyi+XlodHnKmrbyTw0hVWlmGN2o4AfJDkDo5obAFzblS5M5PFBMx0uDt5Y1QjlNC+tqg=="
+        },
+        "semver": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.2.tgz",
+          "integrity": "sha1-x6BxWKgL7dBSNVt3DYLWZA+AO+c="
+        }
+      }
+    },
     "pg-connection-string": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.2.0.tgz",
       "integrity": "sha512-xB/+wxcpFipUZOQcSzcgkjcNOosGhEoPSjz06jC89lv1dj7mc9bZv6wLVy8M2fVjP0a/xN0N988YDq1L0FhK3A=="
     },
+    "pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw=="
+    },
+    "pg-pool": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.2.0.tgz",
+      "integrity": "sha512-7BLwDNDEfPFjE9vmZLcJPLFwuDAVGZ5lIZo2MeQfwYG7EPGfdNVis/dz6obI/yKqvQIx2sf6QBKXMLB+y/ftgA=="
+    },
+    "pg-protocol": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.2.3.tgz",
+      "integrity": "sha512-erHFURS0mPmTbq18cn/zNL3Y4IzNCrU4sgCim0qy7zAPe3Vc0rvK5cImJR6lDvIaz3fJU2R1R9FNOlnUtyF10Q=="
+    },
+    "pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "requires": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      }
+    },
+    "pgpass": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.2.tgz",
+      "integrity": "sha1-Knu0G2BltnkH6R2hsHwYR8h3swY=",
+      "requires": {
+        "split": "^1.0.0"
+      }
+    },
     "pify": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
@@ -9597,6 +9669,29 @@
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
       "dev": true
     },
+    "postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA=="
+    },
+    "postgres-bytea": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz",
+      "integrity": "sha1-AntTPAqokOJtFy1Hz5zOzFIazTU="
+    },
+    "postgres-date": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.5.tgz",
+      "integrity": "sha512-pdau6GRPERdAYUQwkBnGKxEfPyhVZXG/JiS44iZWiNdSOWE09N2lUgN6yshuq6fVSon4Pm0VMXd1srUUkLe9iA=="
+    },
+    "postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "requires": {
+        "xtend": "^4.0.0"
+      }
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -11286,6 +11381,14 @@
       "resolved": "https://registry.npmjs.org/spectre.css/-/spectre.css-0.5.8.tgz",
       "integrity": "sha512-3N4WocWY+Dl6b3e5v3nsZYyp+VSDcBfGDzyyHw/H78ie9BoAhHkxmrhLxo9y8RadxYzVrPjfPdlev3hXEUzR2w=="
     },
+    "split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "requires": {
+        "through": "2"
+      }
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -11765,8 +11868,7 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
-      "dev": true
     },
     "through2": {
       "version": "2.0.5",
@@ -13416,8 +13518,7 @@
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
-      "dev": true
     },
     "y18n": {
       "version": "4.0.0",

package.json

@@ -32,6 +32,7 @@
     "material-design-icons": "^3.0.1",
     "mssql": "^6.2.0",
     "mysql": "^2.18.1",
+    "pg": "^8.2.0",
     "source-map-support": "^0.5.16",
     "spectre.css": "^0.5.8",
     "vue-i18n": "^8.17.4",

src/common/libs/utilities.js

@@ -0,0 +1,3 @@
+export function uidGen () {
+   return Math.random().toString(36).substr(2, 9).toUpperCase();
+};

src/renderer/App.vue

@@ -12,6 +12,7 @@
          </div>
       </div>
       <TheFooter />
+      <TheNotificationsBoard />
       <ModalNewConnection v-if="isNewConnModal" />
    </div>
 </template>
@@ -20,6 +21,7 @@
 import { mapActions, mapGetters } from 'vuex';
 import TheSettingBar from '@/components/TheSettingBar';
 import TheFooter from '@/components/TheFooter';
+import TheNotificationsBoard from '@/components/TheNotificationsBoard';
 import TheAppWelcome from '@/components/TheAppWelcome';
 import DatabaseWorkspace from '@/components/DatabaseWorkspace';
 import ModalNewConnection from '@/components/ModalNewConnection';
@@ -29,6 +31,7 @@ export default {
    components: {
       TheSettingBar,
       TheFooter,
+      TheNotificationsBoard,
       TheAppWelcome,
       DatabaseWorkspace,
       ModalNewConnection

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"
+         class="btn btn-success mt-4"
-         @click="$emit('connect')"
+         :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,
+      connection: Object
-      isConnected: Boolean
+   },
+   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
+      <DatabaseExploreBar :connection="connection" />
-         :uid="connection.uid"
-         :is-connected="isConnected"
-         @connect="startConnection"
-      />
       <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)
+      if (this.isConnected) {
-         this.structure = await Connection.connect(this.connection);// TODO: use refresh
+         try {
+            this.structure = await Connection.connect(this.connection);// TODO: use refresh
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      }
    },
    methods: {
-      async startConnection () {
+      ...mapActions({
-         this.structure = await Connection.connect(this.connection);
+         addNotification: 'notifications/addNotification'
-         this.isConnected = true;
+      })
-      }
    }
 };
 </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>

src/renderer/scss/_transitions.scss

@@ -0,0 +1,10 @@
+.slide-fade-enter-active {
+   transition: all .3s ease;
+ }
+ .slide-fade-leave-active {
+   transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+ }
+ .slide-fade-enter, .slide-fade-leave-to {
+   transform: translateX(10px);
+   opacity: 0;
+ }

src/renderer/scss/_variables.scss

@@ -1,10 +1,11 @@
 /*Colors*/
 $body-bg: #1d1d1d;
 $body-font-color: #fff;
-$primary-color: #e36929;
 $bg-color: #1d1d1d;
 $bg-color-light: #3f3f3f;
 $bg-color-gray: #272727;
+$primary-color: #e36929;
+$error-color: #de3b28;
 
 /*Sizes*/
 $settingbar-width: 3rem;

src/renderer/scss/main.scss

@@ -1,4 +1,5 @@
 @import "variables";
+@import "transitions";
 @import "mdi-additions";
 @import "~spectre.css/src/spectre";
 

src/renderer/store/index.js

@@ -6,6 +6,7 @@ import VuexPersist from 'vuex-persist';
 
 import application from './modules/application.store';
 import connections from './modules/connections.store';
+import notifications from './modules/notifications.store';
 
 const vuexLocalStorage = new VuexPersist({
    key: 'application', // The key to store the state on in the storage provider.
@@ -21,7 +22,8 @@ export default new Vuex.Store({
    strict: true,
    modules: {
       application,
-      connections
+      connections,
+      notifications
    },
    plugins: [vuexLocalStorage.plugin]
 });

src/renderer/store/modules/notifications.store.js

@@ -0,0 +1,30 @@
+'use strict';
+import { uidGen } from 'common/libs/utilities';
+
+export default {
+   namespaced: true,
+   strict: true,
+   state: {
+      notifications: []
+   },
+   getters: {
+      getNotifications: state => state.notifications
+   },
+   mutations: {
+      ADD_NOTIFICATION (state, payload) {
+         state.notifications.unshift(payload);
+      },
+      REMOVE_NOTIFICATION (state, uid) {
+         state.notifications = state.notifications.filter(item => item.uid !== uid);
+      }
+   },
+   actions: {
+      addNotification ({ commit }, payload) {
+         payload.uid = uidGen();
+         commit('ADD_NOTIFICATION', payload);
+      },
+      removeNotification ({ commit }, uid) {
+         commit('REMOVE_NOTIFICATION', uid);
+      }
+   }
+};