added server channel ordering. fixed notify sound

src/components/app/ServerTemplate/ChannelTemplate.vue

@@ -58,10 +58,11 @@ export default {
 }
 
 .channel {
+  position: relative;
   display: flex;
   align-items: center;
   padding: 5px;
-  transition: 0.3s;
+  transition: background 0.3s;
   font-size: 14px;
   cursor: pointer;
   color: white;

src/components/app/ServerTemplate/ChannelsList.vue

@@ -8,12 +8,14 @@
       v-if="channels"
       class="wrapper"
     >
-      <ChannelTemplate
+     <draggable :disabled="!isServerCreator" v-model="serverChannels" :animation="200" :delay="mobile ? 400 : 0" ghost-class="ghost" @end="onEnd" @start="onStart">
-        v-for="channel in channels"
+        <ChannelTemplate
-        :key="channel.channelID"
+          v-for="channel in serverChannels"
-        :channel-data="channel"
+          :key="channel.channelID"
-        @click.native="openChannel(channel)"
+          :channel-data="channel"
-      />
+          @click.native="openChannel(channel)"
+        />
+     </draggable>
     </div>
   </div>
 </template>
@@ -21,26 +23,45 @@
 import Spinner from "@/components/Spinner.vue";
 import ChannelTemplate from "@/components/app/ServerTemplate/ChannelTemplate.vue";
 import ServerService from "@/services/ServerService.js";
+import draggable from 'vuedraggable'
+import { isMobile } from "@/utils/Mobile";
 import {bus} from '@/main.js'
 
 export default {
-  components: { ChannelTemplate, Spinner },
+  components: { draggable, ChannelTemplate, Spinner },
   props: ["serverID"],
-  computed: {
+  data() {
-    channels() {
+    return {
-      const channelsIds = this.$store.getters["servers/channelsIDs"][this.serverID];
+      mobile: isMobile(),
-      if (channelsIds) {
+      drag: false,
-        let channels = [];
-        for ( let channelID of channelsIds ){
-          channels.push(this.$store.getters.channels[channelID])
-        }
-        return channels;
-      } else {
-        return false;
-      }
     }
   },
 
+  methods: {
+    onStart() {
+      this.drag = true;
+    },
+    async onEnd() {
+      this.drag = false;
+      const channelIDs = this.serverChannels.map(s => s.channelID);
+      const update = await ServerService.channelPosition(this.serverID, channelIDs);
+    },
+    openChannel(channel) {
+      // add to local storage
+      const selectedChannels = JSON.parse(localStorage.getItem('selectedChannels') || '{}')
+      selectedChannels[this.serverID] = channel.channelID;
+      localStorage.setItem('selectedChannels', JSON.stringify(selectedChannels));
+
+      const notificationExists = this.$store.getters.notifications.find(n => n.channelID === channel.channelID)
+
+      if (notificationExists && document.hasFocus()) {
+        this.$socket.emit('notification:dismiss', {channelID: channel.channelID});
+      }
+      
+      bus.$emit('closeLeftMenu');
+      this.$store.dispatch('openChannel', channel)
+    }
+  },
   async beforeMount() {
     if (this.channels !== undefined) return;
     const { ok, error, result } = await ServerService.getChannels(
@@ -63,27 +84,44 @@ export default {
       });
     }
   },
-  methods: {
+  computed: {
-    openChannel(channel) {
+    user() {
-      // add to local storage
+      return this.$store.getters.user;
-      const selectedChannels = JSON.parse(localStorage.getItem('selectedChannels') || '{}')
+    },
-      selectedChannels[this.serverID] = channel.channelID;
+    isServerCreator() {
-      localStorage.setItem('selectedChannels', JSON.stringify(selectedChannels));
+      return this.$store.getters["servers/servers"][this.serverID].creator.uniqueID === this.user.uniqueID;
-
+    },
-      const notificationExists = this.$store.getters.notifications.find(n => n.channelID === channel.channelID)
+    channels() {
-
+      return this.$store.getters.channels;
-      if (notificationExists && document.hasFocus()) {
+    },
-        this.$socket.emit('notification:dismiss', {channelID: channel.channelID});
+    serverChannels: {
+      get() {
+        const channelsIds = this.$store.getters["servers/channelsIDs"][this.serverID];
+        if (!channelsIds) {return false}
+        return channelsIds.map(id => this.channels[id])
+      },
+      set(value) {
+        this.$store.dispatch('servers/setChannelIDs', {serverID: this.serverID, channelIDs: value.map(c => c.channelID)} )
       }
-      
-      bus.$emit('closeLeftMenu');
-      this.$store.dispatch('openChannel', channel)
     }
-  }
+  },
 };
 </script>
 
 <style scoped>
+.sortable-drag {
+  opacity: 0;
+}
+.ghost::before {
+  content: '';
+  position: absolute;
+  background: white;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px;
+}
+
 .channels-list {
   height: 100%;
   width: 100%;

src/components/app/Tabs/Explore.vue

@@ -118,7 +118,7 @@ export default {
       );
     },
     donateButton() {
-      window.open("https://www.patreon.com/nertivia", "_blank");
+      window.open("https://www.paypal.me/DiscordDevHelp", "_blank");
     }
   },
   mounted() {},

src/services/ServerService.js

@@ -34,7 +34,9 @@ export default {
   createChannel(serverID, name) {
     return wrapper(instance().put(`/servers/${serverID}/channels`, {name}));
   },
-  
+  channelPosition(serverID, channelIDArr) {
+    return wrapper(instance().put(`/servers/${serverID}/channels/position`, {channel_position: channelIDArr}));
+  },
   updateChannel (serverID, channelID, data) {
     return wrapper(instance().patch(`/servers/${serverID}/channels/${channelID}`, data));
   },

src/store/modules/notificationsModule.js

@@ -22,7 +22,7 @@ const actions = {
     // dont display a notification if the channel is selected.
     if (
       context.rootState.channelModule.selectedChannelID !== channelID ||
-      (currentTab !== 1 && currentTab !== 2)
+      (currentTab !== 1 && currentTab !== 2) || !document.hasFocus()
     ) {
       NotificationSounds.notification();
     }

src/store/modules/serversModule.js

@@ -25,6 +25,9 @@ const getters = {
 };
 
 const actions = {
+  setChannelIDs(context, {serverID, channelIDs}) {
+    context.commit('SET_CHANNEL_IDs', {serverID, channelIDs})
+  },
   AddChannelsIDs(context, {serverID, channelsIDs}) {
     context.commit('ADD_CHANNELS_IDS', {serverID, channelsIDs});
   },

src/store/modules/socketIOModule.js

@@ -90,7 +90,6 @@ const actions = {
       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)
@@ -100,9 +99,27 @@ const actions = {
       servers = [...sortedServers.reverse(), ...tempServers];
       sortedServers = null;
       tempServers = null;
+      delete settings.server_position;
     }
 
-
+    // sort server channels by user order.
+    servers.map(s => {
+      if(!s.channel_position) return s;
+      let tempServerChannels = [...s.channels];
+      let sortedServerChannels = [];
+      for (let index = 0; index < s.channel_position.length; index++) {
+        const channelID = s.channel_position[index];
+        const findIndex = tempServerChannels.findIndex((c) => c.channelID == channelID );
+        if (tempServerChannels[findIndex]) {
+          sortedServerChannels = [...sortedServerChannels, ...[tempServerChannels[findIndex]]];
+          tempServerChannels.splice(findIndex, 1)
+        }
+      }
+      s.channels = [...sortedServerChannels, ...tempServerChannels];
+      tempServerChannels = null;
+      sortedServerChannels = null;
+      return s;
+    })
 
     //convert array to object for servers
     servers = servers.reduce((obj, item) => {
@@ -432,6 +449,9 @@ const actions = {
     }
     context.dispatch("servers/setServers", serverSorted);
     
+  },
+  ["socket_server:channelPosition"](context, {serverID, channel_position}) {
+    context.dispatch("servers/setChannelIDs", {serverID, channelIDs: channel_position})
   }
 };
 

src/utils/changelog.js

@@ -9,6 +9,19 @@ const prototype = {
 };
 
 const config = [
+  {
+    version: 8.1,
+    title: "Move server channels",
+    shortTitle: "",
+    date: "12/11/2019",
+    headColor: "#0c7b7f",
+    new: [
+      "You can now move channels to make it more organized."
+    ],
+    fix: [
+      "Fixed a bug where the notification sound would sometimes not work."
+    ],
+  },
   {
     version: 8.0,
     title: "Move servers",