152 lines
3.0 KiB
Vue
152 lines
3.0 KiB
Vue
<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>
|