thelounge/client/components/Network.vue

<template>
	<div
		v-if="networks.length === 0"
		class="empty">
		You are not connected to any networks yet.
	</div>
	<Draggable
		v-else
		:list="networks"
		:options="{ handle: '.lobby', draggable: '.network', ghostClass: 'network-placeholder' }"
		class="networks"
		@change="onNetworkSort"
		@start="onDragStart"
		@end="onDragEnd"
	>
		<div
			v-for="network in networks"
			:key="network.uuid"
			:class="{ 'not-connected': !network.status.connected, 'not-secure': !network.status.secure }"
			:id="'network-' + network.uuid"
			:data-uuid="network.uuid"
			:data-nick="network.nick"
			class="network"
			role="region"
		>
			<Channel
				:channel="network.channels[0]"
				:network="network"
				:active-channel="activeChannel"
			/>
			<JoinChannel :channel="network.channels[0]"/>

			<Draggable
				:options="{ draggable: '.chan', ghostClass: 'chan-placeholder' }"
				:list="network.channels"
				class="channels"
				@change="onChannelSort"
				@start="onDragStart"
				@end="onDragEnd"
			>
				<Channel
					v-for="(channel, index) in network.channels"
					v-if="index > 0"
					:key="channel.id"
					:channel="channel"
					:network="network"
					:active-channel="activeChannel"
				/>
			</Draggable>
		</div>
	</Draggable>
</template>

<script>
import Draggable from "vuedraggable";
import JoinChannel from "./JoinChannel.vue";
import Channel from "./Channel.vue";

// TODO: ignoreSortSync should be removed
import {findChannel} from "../js/vue";
import socket from "../js/socket";
// import options from "../js/options";

export default {
	name: "Network",
	components: {
		JoinChannel,
		Channel,
		Draggable,
	},
	props: {
		activeChannel: Object,
		networks: Array,
	},
	methods: {
		onDragStart(e) {
			e.target.classList.add("ui-sortable-helper");
		},
		onDragEnd(e) {
			e.target.classList.remove("ui-sortable-helper");
		},
		onNetworkSort(e) {
			if (!e.moved) {
				return;
			}

			socket.emit("sort", {
				type: "networks",
				order: this.networks.map((n) => n.uuid),
			});

			// options.settings.ignoreSortSync = true;
		},
		onChannelSort(e) {
			if (!e.moved) {
				return;
			}

			const channel = findChannel(e.moved.element.id);

			if (!channel) {
				return;
			}

			socket.emit("sort", {
				type: "channels",
				target: channel.network.uuid,
				order: channel.network.channels.map((c) => c.id),
			});

			// options.settings.ignoreSortSync = true;
		},
	},
};
</script>