Connections sort

package-lock.json

@@ -11273,6 +11273,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -12554,6 +12559,11 @@
       "integrity": "sha512-oEqYpXKaFN+TaXU+mRLEx8dX0ah85aAJEe61mpdoUrq0Bhe/6sWhyZX1JjMQLhVsHAkncyhedhmCdDVSasUtDw==",
       "dev": true
     },
+    "vue-click-outside": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.1.0.tgz",
+      "integrity": "sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ=="
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
@@ -12631,6 +12641,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.23.2",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",
+      "integrity": "sha512-PgHCjUpxEAEZJq36ys49HfQmXglattf/7ofOzUrW2/rRdG7tu6fK84ir14t1jYv4kdXewTEa2ieKEAhhEMdwkQ==",
+      "requires": {
+        "sortablejs": "^1.10.1"
+      }
+    },
     "vuex": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz",

package.json

@@ -35,7 +35,9 @@
     "pg": "^8.2.1",
     "source-map-support": "^0.5.16",
     "spectre.css": "^0.5.8",
+    "vue-click-outside": "^1.1.0",
     "vue-i18n": "^8.17.7",
+    "vuedraggable": "^2.23.2",
     "vuex": "^3.4.0",
     "vuex-persist": "^2.2.0"
   },

src/renderer/components/BaseContextMenu.vue

@@ -0,0 +1,94 @@
+<template>
+   <div class="context">
+      <!-- <a
+         class="context-overlay c-hand"
+         @click="$emit('close')"
+         @contextmenu="$emit('close')"
+      /> -->
+      <div
+         v-click-outside="close"
+         class="context-container"
+         :style="position"
+      >
+         <slot />
+      </div>
+   </div>
+</template>
+
+<script>
+import ClickOutside from 'vue-click-outside';
+
+export default {
+   name: 'BaseContextMenu',
+   directives: {
+      ClickOutside
+   },
+   props: {
+      contextEvent: MouseEvent
+   },
+   computed: {
+      position () {
+         return {
+            top: this.contextEvent.clientY + 'px',
+            left: this.contextEvent.clientX + 'px'
+         };
+      }
+   },
+   methods: {
+      close () {
+         this.$emit('close');
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+   .context{
+      display: flex;
+      position: absolute;
+      z-index: 400;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      padding: 0.4rem;
+      position: fixed;
+      right: 0;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      pointer-events: none;
+
+      .context-container{
+         max-width: 150px;
+         z-index: 1;
+         box-shadow: 0px 1px 1px 0px #000;
+         padding: 0;
+         background: #1d1d1d;
+         border-radius: 0.1rem;
+         display: flex;
+         flex-direction: column;
+         max-height: 75vh;
+         padding: 0.3rem;
+         width: 100%;
+         position: absolute;
+         pointer-events: initial;
+
+         .context-element{
+            display: flex;
+            align-items: center;
+         }
+      }
+
+      .context-overlay{
+         background: transparent;
+         bottom: 0;
+         cursor: default;
+         display: block;
+         left: 0;
+         position: absolute;
+         right: 0;
+         top: 0;
+      }
+   }
+
+</style>

src/renderer/components/TheSettingBar.vue

@@ -1,17 +1,33 @@
 <template>
    <div id="settingbar">
       <div class="settingbar-top-elements">
+         <BaseContextMenu
+            v-if="isContext"
+            :context-event="contextEvent"
+            @close="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">
-            <li
-               v-for="connection in connections"
-               :key="connection.uid"
-               class="settingbar-element btn btn-link tooltip tooltip-right"
-               :class="{'selected': connection.uid === selectedWorkspace}"
-               :data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
-               @click="selectWorkspace(connection.uid)"
-            >
-               <i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${connected.includes(connection.uid) ? 'badge' : ''}`" />
-            </li>
+            <draggable v-model="connections">
+               <li
+                  v-for="connection in connections"
+                  :key="connection.uid"
+                  draggable="true"
+                  class="settingbar-element btn btn-link tooltip tooltip-right"
+                  :class="{'selected': connection.uid === selectedWorkspace}"
+                  :data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
+                  @click="selectWorkspace(connection.uid)"
+                  @contextmenu.prevent="contextMenu($event)"
+               >
+                  <i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${connected.includes(connection.uid) ? 'badge' : ''}`" />
+               </li>
+            </draggable>
             <li
                class="settingbar-element btn btn-link tooltip tooltip-right pt-3"
                data-tooltip="Add connection"
@@ -34,21 +50,47 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import draggable from 'vuedraggable';
+import BaseContextMenu from '@/components/BaseContextMenu';
 
 export default {
    name: 'TheSettingBar',
+   components: {
+      draggable,
+      BaseContextMenu
+   },
+   data () {
+      return {
+         dragElement: null,
+         isContext: false,
+         contextEvent: null
+      };
+   },
    computed: {
       ...mapGetters({
-         connections: 'connections/getConnections',
+         getConnections: 'connections/getConnections',
          connected: 'workspaces/getConnected',
          selectedWorkspace: 'workspaces/getSelected'
-      })
+      }),
+      connections: {
+         get () {
+            return this.getConnections;
+         },
+         set (value) {
+            this.updateConnections(value);
+         }
+      }
    },
    methods: {
       ...mapActions({
+         updateConnections: 'connections/updateConnections',
          showNewConnModal: 'connections/showNewConnModal',
          selectWorkspace: 'workspaces/selectWorkspace'
-      })
+      }),
+      contextMenu (event) {
+         this.contextEvent = event;
+         this.isContext = true;
+      }
    }
 };
 </script>

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

@@ -15,6 +15,9 @@ export default {
       ADD_CONNECTION (state, connection) {
          state.connections.push(connection);
       },
+      UPDATE_CONNECTIONS (state, connections) {
+         state.connections = connections;
+      },
       SHOW_NEW_CONNECTION_MODAL (state) {
          state.is_new_modal = true;
       },
@@ -26,6 +29,9 @@ export default {
       addConnection ({ commit }, connection) {
          commit('ADD_CONNECTION', connection);
       },
+      updateConnections ({ commit }, connections) {
+         commit('UPDATE_CONNECTIONS', connections);
+      },
       // Modals
       showNewConnModal ({ commit }) {
          commit('SHOW_NEW_CONNECTION_MODAL');