Notifications board

2020-05-15 17:52:59 +02:00 · 2020-05-15 17:52:59 +02:00 · 55b1991869
parent aea94f0325
commit 55b1991869
15 changed files with 363 additions and 26 deletions
--- a/package-lock.json
+++ b/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=",
-      "dev": true
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
    },
    "y18n": {
      "version": "4.0.0",
--- a/package.json
+++ b/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",
--- a/src/common/libs/utilities.js
+++ b/src/common/libs/utilities.js
@ -0,0 +1,3 @@
+export function uidGen () {
+   return Math.random().toString(36).substr(2, 9).toUpperCase();
+};
--- a/src/renderer/App.vue
+++ b/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
--- a/src/renderer/components/BaseNotification.vue
+++ b/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>
--- a/src/renderer/components/BaseToast.vue
+++ b/src/renderer/components/BaseToast.vue
@ -64,6 +64,7 @@ export default {
   methods: {
      hideToast () {
         this.isVisible = false;
+         this.$emit('close');
      }
   }
 };
--- a/src/renderer/components/DatabaseExploreBar.vue
+++ b/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>
--- a/src/renderer/components/DatabaseWorkspace.vue
+++ b/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>
--- a/src/renderer/components/ModalNewConnection.vue
+++ b/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 = {
--- a/src/renderer/components/TheNotificationsBoard.vue
+++ b/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>
--- a/src/renderer/scss/_transitions.scss
+++ b/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;
+ }
--- a/src/renderer/scss/_variables.scss
+++ b/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;
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@ -1,4 +1,5 @@
@import "variables";
+@import "transitions";
@import "mdi-additions";
@import "~spectre.css/src/spectre";

--- a/src/renderer/store/index.js
+++ b/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]
 });
--- a/src/renderer/store/modules/notifications.store.js
+++ b/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);
+      }
+   }
+};