diff --git a/src/components/app/ServerTemplate/ChannelTemplate.vue b/src/components/app/ServerTemplate/ChannelTemplate.vue
index adebc29..3fac2e7 100644
--- a/src/components/app/ServerTemplate/ChannelTemplate.vue
+++ b/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;
diff --git a/src/components/app/ServerTemplate/ChannelsList.vue b/src/components/app/ServerTemplate/ChannelsList.vue
index bcfeb19..6d7642a 100644
--- a/src/components/app/ServerTemplate/ChannelsList.vue
+++ b/src/components/app/ServerTemplate/ChannelsList.vue
@@ -8,12 +8,14 @@
v-if="channels"
class="wrapper"
>
-
+
+
+
@@ -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: {
- channels() {
- const channelsIds = this.$store.getters["servers/channelsIDs"][this.serverID];
- if (channelsIds) {
- let channels = [];
- for ( let channelID of channelsIds ){
- channels.push(this.$store.getters.channels[channelID])
- }
- return channels;
- } else {
- return false;
- }
+ data() {
+ return {
+ mobile: isMobile(),
+ drag: 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: {
- 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});
+ computed: {
+ user() {
+ return this.$store.getters.user;
+ },
+ isServerCreator() {
+ return this.$store.getters["servers/servers"][this.serverID].creator.uniqueID === this.user.uniqueID;
+ },
+ channels() {
+ return this.$store.getters.channels;
+ },
+ 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)
}
- }
+ },
};