traxxx-web/components/filters/channels.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>