Aggregating channels, filter inoperable.

2024-01-09 02:26:32 +01:00
parent 58f7ca0d89
commit d242eb3b73
17 changed files with 381 additions and 68 deletions
--- a/components/filters/channels.vue
+++ b/components/filters/channels.vue
@@ -0,0 +1,151 @@
+<template>
+	<div class="filter channels-container">
+		<div class="filters-sort">
+			<input
+				v-model="search"
+				type="search"
+				placeholder="Filter channels"
+				class="input input-inline filters-search"
+			>
+
+			<div
+				v-show="order === 'name'"
+				class="filter-sort order noselect"
+				@click="order = 'count'"
+			>
+				<Icon
+					icon="sort-alpha-asc"
+				/>
+			</div>
+
+			<div
+				v-show="order === 'count'"
+				class="filter-sort order noselect"
+				@click="order = 'priority'"
+			>
+				<Icon
+					icon="sort-numeric-desc"
+				/>
+			</div>
+		</div>
+
+		<ul
+			class="filter-items nolist"
+		>
+			<template v-for="network in networks">
+				<li
+					v-for="(channel) in [network, ...(network.children || [])]"
+					:key="`filter-channel-${channel.id}`"
+					class="filter-item"
+					:class="{ channel: !channel.isIndependent && channel.type !== 'network', selected: filters.channel?.id === channel.id }"
+					@click="emit('update', 'channel', channel)"
+				>
+					<span class="filter-name">
+						<span
+							class="filter-text"
+							:title="channel.name"
+						>
+							<img
+								v-if="channel.isIndependent || channel.type === 'network'"
+								:src="`/logos/${channel.slug}/favicon_dark.png`"
+								class="favicon"
+							>
+
+							<Icon
+								v-else
+								icon="arrow-up4"
+							/>
+
+							{{ channel.name }}
+						</span>
+
+						<span class="channel-details">
+							<span
+								v-if="channel.count"
+								class="filter-count"
+							>{{ channel.count }}</span>
+						</span>
+					</span>
+				</li>
+			</template>
+		</ul>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const props = defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+	channels: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const emit = defineEmits(['update']);
+
+const search = ref('');
+const searchRegexp = computed(() => new RegExp(search.value, 'i'));
+const order = ref('name');
+
+const { pageProps } = inject('pageContext');
+const { channel: pageChannel } = pageProps;
+
+const networks = computed(() => {
+	const filteredChannels = props.channels.filter((channel) => channel.id !== pageChannel?.id
+		&& (searchRegexp.value.test(channel.name)
+		|| searchRegexp.value.test(channel.slug)
+		|| (channel.parent && searchRegexp.value.test(channel.parent.name))
+		|| (channel.parent && searchRegexp.value.test(channel.parent.slug))));
+
+	return Object.values(filteredChannels.reduce((acc, channel) => {
+		if (!channel.parent || channel.isIndependent) {
+			acc[channel.id] = channel;
+
+			return acc;
+		}
+
+		if (!acc[channel.parent.id]) {
+			acc[channel.parent.id] = {
+				...channel.parent,
+				children: [],
+			};
+		}
+
+		acc[channel.parent.id].children.push(channel);
+
+		return acc;
+	}, {}));
+});
+</script>
+
+<style scoped>
+.filter-items {
+	max-height: 10rem;
+	overflow-y: auto;
+}
+
+.filter {
+	padding: 0;
+}
+
+.filter-item.channel {
+	.icon {
+		width: 1.5rem;
+		height: 1rem;
+		transform: rotate(-135deg);
+		fill: var(--shadow-weak-30);
+	}
+}
+
+.favicon {
+	width: 1rem;
+	height: 1rem;
+	margin-right: .5rem;
+	object-fit: contain;
+}
+</style>