Additions

src/renderer/components/BaseConfirmModal.vue

@@ -0,0 +1,82 @@
+<template>
+   <div class="modal modal-sm active">
+      <a class="modal-overlay" @click="hideModal" />
+      <div class="modal-container">
+         <div v-if="hasHeader" class="modal-header text-light">
+            <div class="modal-title h6">
+               <slot name="header" />
+            </div>
+            <a class="btn btn-clear float-right" @click="hideModal" />
+         </div>
+         <div v-if="hasDefault" class="modal-header">
+            <div class="modal-title h6">
+               <slot />
+            </div>
+            <a class="btn btn-clear float-right" @click="hideModal" />
+         </div>
+         <div v-if="hasBody" class="modal-body">
+            <a
+               v-if="!hasHeader && !hasDefault"
+               class="btn btn-clear float-right"
+               @click="hideModal"
+            />
+            <div class="content">
+               <slot name="body" />
+            </div>
+         </div>
+         <div class="modal-footer">
+            <button
+               class="btn btn-primary mr-2"
+               @click="confirmModal"
+            >
+               {{ confirmText }}
+            </button>
+            <button
+               class="btn btn-link"
+               @click="hideModal"
+            >
+               Cancel
+            </button>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'BaseConfirmModal',
+   props: {
+      confirmText: {
+         type: String,
+         default: 'Confirm'
+      }
+   },
+   computed: {
+      hasHeader () {
+         return !!this.$slots.header;
+      },
+      hasBody () {
+         return !!this.$slots.body;
+      },
+      hasDefault () {
+         return !!this.$slots.default;
+      }
+   },
+   methods: {
+      confirmModal () {
+         this.$emit('confirm');
+         this.hideModal();
+      },
+
+      hideModal () {
+         this.$emit('hide');
+      }
+   }
+};
+</script>
+
+<style scoped>
+   .modal.modal-sm .modal-container{
+      padding: 0;
+   }
+</style>

src/renderer/components/BaseContextMenu.vue

@@ -1,10 +1,5 @@
 <template>
    <div class="context">
-      <!-- <a
-         class="context-overlay c-hand"
-         @click="$emit('close')"
-         @contextmenu="$emit('close')"
-      /> -->
       <div
          v-click-outside="close"
          class="context-container"
@@ -28,15 +23,15 @@ export default {
    },
    computed: {
       position () {
-         return {
+         return { // TODO: calc direction if near corners
-            top: this.contextEvent.clientY + 'px',
+            top: this.contextEvent.clientY + 5 + 'px',
-            left: this.contextEvent.clientX + 'px'
+            left: this.contextEvent.clientX + 5 + 'px'
          };
       }
    },
    methods: {
       close () {
-         this.$emit('close');
+         this.$emit('closeContext');
       }
    }
 };
@@ -67,8 +62,6 @@ export default {
          border-radius: 0.1rem;
          display: flex;
          flex-direction: column;
-         max-height: 75vh;
-         padding: 0.3rem;
          width: 100%;
          position: absolute;
          pointer-events: initial;
@@ -76,6 +69,12 @@ export default {
          .context-element{
             display: flex;
             align-items: center;
+            padding: .1rem .3rem;
+            cursor: pointer;
+
+            &:hover{
+               background: $primary-color;
+            }
          }
       }
 

src/renderer/components/ModalAskCredentials.vue

@@ -6,7 +6,7 @@
             <div class="modal-title h6">
                Credentials
             </div>
-            <a class="btn btn-clear c-hand" @click="closeModal" />
+            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
          </div>
          <div class="modal-body">
             <div class="content">
@@ -39,10 +39,10 @@
             </div>
          </div>
          <div class="modal-footer text-light">
-            <button class="btn btn-primary mr-2" @click="sendCredentials">
+            <button class="btn btn-primary mr-2" @click.stop="sendCredentials">
                Send
             </button>
-            <button class="btn btn-link" @click="closeModal">
+            <button class="btn btn-link" @click.stop="closeModal">
                Close
             </button>
          </div>

src/renderer/components/ModalEditConnection.vue

@@ -0,0 +1,235 @@
+<template>
+   <div class="modal active">
+      <a class="modal-overlay c-hand" @click="closeModal" />
+      <div class="modal-container">
+         <div class="modal-header text-light">
+            <div class="modal-title h6">
+               Create a new connection
+            </div>
+            <a class="btn btn-clear c-hand" @click="closeModal" />
+         </div>
+         <div class="modal-body">
+            <div class="content">
+               <form class="form-horizontal">
+                  <fieldset class="m-0" :disabled="isTesting">
+                     <div class="form-group">
+                        <div class="col-3 col-sm-12">
+                           <label class="form-label">Client:</label>
+                        </div>
+                        <div class="col-9 col-sm-12">
+                           <select v-model="localConnection.client" class="form-select">
+                              <option value="mysql">
+                                 MySQL/MariaDB
+                              </option>
+                              <option value="mssql">
+                                 Microsoft SQL
+                              </option>
+                              <option value="pg">
+                                 PostgreSQL
+                              </option>
+                              <option value="oracledb">
+                                 Oracle DB
+                              </option>
+                           </select>
+                        </div>
+                     </div>
+                     <div class="form-group">
+                        <div class="col-3 col-sm-12">
+                           <label class="form-label">Host name/IP:</label>
+                        </div>
+                        <div class="col-9 col-sm-12">
+                           <input
+                              v-model="localConnection.host"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group">
+                        <div class="col-3 col-sm-12">
+                           <label class="form-label">Port:</label>
+                        </div>
+                        <div class="col-9 col-sm-12">
+                           <input
+                              v-model="localConnection.port"
+                              class="form-input"
+                              type="number"
+                              min="1"
+                              max="65535"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group">
+                        <div class="col-3 col-sm-12">
+                           <label class="form-label">User:</label>
+                        </div>
+                        <div class="col-9 col-sm-12">
+                           <input
+                              v-model="localConnection.user"
+                              class="form-input"
+                              type="text"
+                              :disabled="localConnection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group">
+                        <div class="col-3 col-sm-12">
+                           <label class="form-label">Password:</label>
+                        </div>
+                        <div class="col-9 col-sm-12">
+                           <input
+                              v-model="localConnection.password"
+                              class="form-input"
+                              type="password"
+                              :disabled="localConnection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group">
+                        <div class="col-3 col-sm-12" />
+                        <div class="col-9 col-sm-12">
+                           <label class="form-checkbox form-inline">
+                              <input v-model="localConnection.ask" type="checkbox"><i class="form-icon" /> Ask for credentials
+                           </label>
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div class="modal-footer text-light">
+            <BaseToast
+               class="mb-2"
+               :message="toast.message"
+               :status="toast.status"
+            />
+            <button
+               class="btn btn-gray mr-2"
+               :class="{'loading': isTesting}"
+               @click="startTest"
+            >
+               Test connection
+            </button>
+            <button class="btn btn-primary mr-2" @click="saveEditConnection">
+               Save
+            </button>
+            <button class="btn btn-link" @click="closeModal">
+               Close
+            </button>
+         </div>
+      </div>
+      <ModalAskCredentials
+         v-if="isAsking"
+         @closeAsking="closeAsking"
+         @credentials="continueTest"
+      />
+   </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import Connection from '@/ipc-api/Connection';
+import ModalAskCredentials from '@/components/ModalAskCredentials';
+import BaseToast from '@/components/BaseToast';
+
+export default {
+   name: 'ModalEditConnection',
+   components: {
+      ModalAskCredentials,
+      BaseToast
+   },
+   props: {
+      isOpened: {
+         type: Boolean,
+         default: false
+      },
+      connection: Object
+   },
+   data () {
+      return {
+         toast: {
+            status: '',
+            message: ''
+         },
+         isTesting: false,
+         isAsking: false,
+         connectionProxy: null
+      };
+   },
+   computed: {
+      localConnection: {
+         get () {
+            if (this.connectionProxy === null)
+               return this.connection;
+            else
+               return this.connectionProxy;
+         },
+         set (val) {
+            this.connectionProxy = val;
+         }
+      }
+   },
+   methods: {
+      ...mapActions({
+         editConnection: 'connections/editConnection'
+      }),
+      async startTest () {
+         this.isTesting = true;
+         this.toast = {
+            status: '',
+            message: ''
+         };
+
+         if (this.connection.ask)
+            this.isAsking = true;
+         else {
+            try {
+               const res = await Connection.makeTest(this.connection);
+               if (res.status === 'error')
+                  this.toast = { status: 'error', message: res.response.message };
+               else
+                  this.toast = { status: 'success', message: 'Connection successifully made!' };
+            }
+            catch (err) {
+               this.toast = { status: 'error', message: err.stack };
+            }
+
+            this.isTesting = false;
+         }
+      },
+      async continueTest (credentials) { // if "Ask for credentials" is true
+         this.isAsking = false;
+         const params = Object.assign({}, this.connection, credentials);
+         try {
+            const res = await Connection.makeTest(params);
+            if (res.status === 'error')
+               this.toast = { status: 'error', message: res.response.message };
+            else
+               this.toast = { status: 'success', message: 'Connection successifully made!' };
+         }
+         catch (err) {
+            this.toast = { status: 'error', message: err.stack };
+         }
+
+         this.isTesting = false;
+      },
+      saveEditConnection () {
+         this.editConnection(this.connection);
+         this.closeModal();
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      closeAsking () {
+         this.isTesting = false;
+         this.isAsking = false;
+      }
+   }
+};
+</script>
+
+<style scoped>
+   .modal-container{
+      max-width: 450px;
+   }
+</style>

src/renderer/components/ModalNewConnection.vue

@@ -216,7 +216,18 @@ export default {
       async continueTest (credentials) { // if "Ask for credentials" is true
          this.isAsking = false;
          const params = Object.assign({}, this.connection, credentials);
-         await Connection.makeTest(params);
+         try {
+            const res = await Connection.makeTest(params);
+            if (res.status === 'error')
+               this.toast = { status: 'error', message: res.response.message };
+            else
+               this.toast = { status: 'success', message: 'Connection successifully made!' };
+         }
+         catch (err) {
+            this.toast = { status: 'error', message: err.stack };
+         }
+
+         this.isTesting = false;
       },
       saveNewConnection () {
          this.addConnection(this.connection);

src/renderer/components/SettingBarContext.vue

@@ -0,0 +1,81 @@
+<template>
+   <BaseContextMenu
+      :context-event="contextEvent"
+      @closeContext="$emit('closeContext')"
+   >
+      <div class="context-element" @click="showEditModal">
+         <i class="material-icons md-18 text-light pr-1">edit</i> Edit
+      </div>
+      <div class="context-element" @click="showConfirmModal">
+         <i class="material-icons md-18 text-light pr-1">delete</i> Delete
+      </div>
+
+      <ConfirmModal
+         v-if="isConfirmModal"
+         @confirm="deleteConnection(contextConnection)"
+         @hide="hideConfirmModal"
+      >
+         <template :slot="'header'">
+            Delete connection
+         </template>
+         <div :slot="'body'">
+            <div class="mb-2">
+               Do you confirm the cancellation of <b>{{ contextConnection.user }}@{{ contextConnection.host }}:{{ contextConnection.port }}</b>?
+            </div>
+         </div>
+      </ConfirmModal>
+      <!-- TODO: move to vuex -->
+      <ModalEditConnection
+         v-if="isEditModal"
+         :connection="contextConnection"
+         @close="isEditModal = false"
+      />
+   </BaseContextMenu>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import BaseContextMenu from '@/components/BaseContextMenu';
+import ConfirmModal from '@/components/BaseConfirmModal';
+import ModalEditConnection from '@/components/ModalEditConnection';
+
+export default {
+   name: 'SettingBarContext',
+   components: {
+      BaseContextMenu,
+      ConfirmModal,
+      ModalEditConnection
+   },
+   props: {
+      contextEvent: MouseEvent,
+      contextConnection: Object
+   },
+   data () {
+      return {
+         isConfirmModal: false,
+         isEditModal: false
+      };
+   },
+   methods: {
+      ...mapActions({
+         deleteConnection: 'connections/deleteConnection'
+      }),
+      showConfirmModal () {
+         this.isConfirmModal = true;
+      },
+      hideConfirmModal () {
+         this.isConfirmModal = false;
+      },
+      showEditModal () {
+         this.isEditModal = true;
+      },
+      hideEditModal () {
+         this.isEditModal = false;
+      }
+   }
+};
+</script>
+
+<style>
+
+</style>

src/renderer/components/TheSettingBar.vue

@@ -1,18 +1,12 @@
 <template>
    <div id="settingbar">
       <div class="settingbar-top-elements">
-         <BaseContextMenu
+         <SettingBarContext
             v-if="isContext"
             :context-event="contextEvent"
-            @close="isContext = false"
+            :context-connection="contextConnection"
-         >
+            @closeContext="isContext = false"
-            <div class="context-element">
+         />
-               <i class="material-icons md-18 text-light pr-1">edit</i> Edit
-            </div>
-            <div class="context-element">
-               <i class="material-icons md-18 text-light pr-1">delete</i> Delete
-            </div>
-         </BaseContextMenu>
          <ul class="settingbar-elements">
             <draggable v-model="connections">
                <li
@@ -23,7 +17,7 @@
                   :class="{'selected': connection.uid === selectedWorkspace}"
                   :data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
                   @click="selectWorkspace(connection.uid)"
-                  @contextmenu.prevent="contextMenu($event)"
+                  @contextmenu.prevent="contextMenu($event, connection)"
                >
                   <i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${connected.includes(connection.uid) ? 'badge' : ''}`" />
                </li>
@@ -51,19 +45,20 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import draggable from 'vuedraggable';
-import BaseContextMenu from '@/components/BaseContextMenu';
+import SettingBarContext from '@/components/SettingBarContext';
 
 export default {
    name: 'TheSettingBar',
    components: {
       draggable,
-      BaseContextMenu
+      SettingBarContext
    },
    data () {
       return {
          dragElement: null,
          isContext: false,
-         contextEvent: null
+         contextEvent: null,
+         contextConnection: {}
       };
    },
    computed: {
@@ -87,8 +82,9 @@ export default {
          showNewConnModal: 'connections/showNewConnModal',
          selectWorkspace: 'workspaces/selectWorkspace'
       }),
-      contextMenu (event) {
+      contextMenu (event, connection) {
          this.contextEvent = event;
+         this.contextConnection = connection;
          this.isContext = true;
       }
    }
@@ -111,6 +107,7 @@ export default {
       .settingbar-elements{
          list-style: none;
          text-align: center;
+         width: $settingbar-width;
          padding: 0;
          margin: 0;
 

src/renderer/store/modules/connections.store.js

@@ -5,7 +5,8 @@ export default {
    strict: true,
    state: {
       connections: [],
-      is_new_modal: false
+      is_new_modal: false,
+      is_edit_modal: false
    },
    getters: {
       getConnections: state => state.connections,
@@ -15,6 +16,9 @@ export default {
       ADD_CONNECTION (state, connection) {
          state.connections.push(connection);
       },
+      DELETE_CONNECTION (state, connection) {
+         state.connections = state.connections.filter(el => el.uid !== connection.uid);
+      },
       UPDATE_CONNECTIONS (state, connections) {
          state.connections = connections;
       },
@@ -29,6 +33,12 @@ export default {
       addConnection ({ commit }, connection) {
          commit('ADD_CONNECTION', connection);
       },
+      deleteConnection ({ commit }, connection) {
+         commit('DELETE_CONNECTION', connection);
+      },
+      editConnection ({ commit }, connection) {
+         commit('EDIT_CONNECTION', connection);
+      },
       updateConnections ({ commit }, connections) {
          commit('UPDATE_CONNECTIONS', connections);
       },