move servers

package-lock.json

@@ -10583,6 +10583,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.1.tgz",
+      "integrity": "sha512-N6r7GrVmO8RW1rn0cTdvK3JR0BcqecAJ0PmYMCL3ZuqTH3pY+9QyqkmJSkkLyyDvd+AJnwaxTP22Ybr/83V9hQ=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -11938,6 +11943,14 @@
         "vue-script2": "^2.0.3"
       }
     },
+    "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.1.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",

package.json

@@ -32,6 +32,7 @@
     "vue-socket.io": "^3.0.4",
     "vue-socket.io-extended": "^3.2.0",
     "vue-twitter": "^0.1.0",
+    "vuedraggable": "^2.23.2",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/components/app/Navigation.vue

@@ -41,14 +41,22 @@
           >error</div>
         </div>
         <div class="seperater" />
+
         <div class="server-items" v-if="currentTab === 2">
-          <server-template
+          <draggable v-model="serversArr" :animation="200" :delay="mobile ? 400 : 0" ghost-class="ghost" @end="onEnd" @start="onStart">
-            v-for="(data, index) in serversArr"
+            <transition-group type="transition" :name="!drag ? 'flip-list' : null">
-            :serverData="data"
+              <server-template
-            @click.native="openServer(data.server_id)"
+                class="sortable"
-            :key="index.server_id"
+                v-for="(data) in serversArr"
-          />
+                :serverData="data"
+                @click.native="openServer(data.server_id)"
+                :key="data.server_id"
+              />
+            </transition-group>
+          </draggable>
+
         </div>
+
       </div>
       <div class="seperater" />
       <div
@@ -75,20 +83,35 @@
 <script>
 import { bus } from "@/main.js";
 import config from "@/config.js";
+import settingsService from '@/services/settingsService';
 import ServerTemplate from "@/components/app/ServerTemplate/ServerTemplate";
-
+import draggable from 'vuedraggable'
+import { isMobile } from "@/utils/Mobile";
 export default {
-  components: { ServerTemplate },
+  components: { ServerTemplate, draggable },
   data() {
     return {
       avatarDomain: config.domain + "/avatars",
       toolTipShown: false,
       toolTipTopPosition: 0,
       toolTipServerID: null,
-      toolTipLocalName: null
+      toolTipLocalName: null,
+      mobile: isMobile(),
+
+      drag: false,
     };
   },
   methods: {
+    async onEnd(event) {
+      this.drag = false;
+      const serverIDArr = this.serversArr.map(s => s.server_id);
+      await settingsService.setServerPositions(serverIDArr);
+    },
+    onStart() {
+      this.toolTipShown = false;
+      this.drag = true;
+      this.$store.dispatch("setAllPopout", {show: false});
+    },
     dismissNotification(channelID) {
       const notifications = this.$store.getters.notifications.find(function(e) {
         return e.channelID === channelID;
@@ -156,6 +179,7 @@ export default {
       this.toolTipShown = true;
     },
     serverToolTipEvent({ serverID, top }) {
+      if (this.drag) return;
       this.toolTipLocalName = null;
       this.toolTipServerID = serverID;
       this.toolTipTopPosition = top - this.getTopHeight() + 16;
@@ -198,14 +222,25 @@ export default {
     servers() {
       return this.$store.getters["servers/servers"];
     },
-    serversArr() {
+    serversArr: {
-      const data = this.servers;
+      get() {
-      return Object.keys(data)
+        const data = this.servers;
+        return Object.keys(data)
         .map(key => {
           return data[key];
         })
-        .slice()
         .reverse();
+      },
+      set(value) {
+        const reversedServers = value.reverse()
+        // convert array to json
+        const json = {};
+        for (let index = 0; index < reversedServers.length; index++) {
+          const element = reversedServers[index];
+          json[element.server_id] = element;
+        }
+        this.$store.dispatch("servers/setServers", json);
+      }
     },
     selectedServerID() {
       return this.$store.getters["servers/selectedServerID"];
@@ -261,7 +296,25 @@ export default {
 };
 </script>
 
+
 <style lang="scss" scoped>
+
+.flip-list-move {
+  transition: 0.3s;
+}
+.sortable-drag {
+  opacity: 0;
+}
+.ghost::before {
+  content: '';
+  position: absolute;
+  background: white;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+}
+
 .navigation {
   display: flex;
   flex-direction: column;

src/components/app/ServerTemplate/ServerTemplate.vue

@@ -92,7 +92,7 @@ export default {
   align-content: center;
   align-items: center;
   user-select: none;
-  transition: 0.2s;
+  transition: background 0.2s;
   cursor: pointer;
   &:hover {
     background: #074447;

src/services/settingsService.js

@@ -14,5 +14,8 @@ export default {
     return wrapper(instance().put('/settings/apperance', {
       [apperance]: boolean
     }));
+  },
+  setServerPositions (ServerIDArr) {
+    return wrapper(instance().put('/settings/server_position', {server_position: ServerIDArr}));
   }
 }

src/store/modules/socketIOModule.js

@@ -36,6 +36,7 @@ const actions = {
       settings
     } = data;
 
+
     const friendsArr = user.friends;
 
     const presence = {};
@@ -80,6 +81,27 @@ const actions = {
     // }
 
     let servers = user.servers || [];
+
+    // sort server by users order
+    let tempServers = [...servers];
+    let sortedServers = [];
+
+    for (let index = 0; index < settings.server_position.length; index++) {
+      const server_id = settings.server_position[index];
+      const findIndex = tempServers.findIndex((s) => s.server_id == server_id );
+      console.log()
+      if (tempServers[findIndex]) {
+        sortedServers = [...sortedServers, ...[tempServers[findIndex]]];
+        tempServers.splice(findIndex, 1)
+      }      
+    }
+
+    servers = [...sortedServers.reverse(), ...tempServers];
+    sortedServers = null;
+    tempServers = null;
+
+
+
     //convert array to object for servers
     servers = servers.reduce((obj, item) => {
       item.channels.forEach(element => {