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) } - } + }, };