forked from DebaucheryLibrarian/traxxx
Added channel filter.
This commit is contained in:
DebaucheryLibrarian
144
assets/components/filters/channel-filter.vue
Normal file
144
assets/components/filters/channel-filter.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<v-popover class="filter-container">
|
||||
<div class="filter">
|
||||
<Icon icon="antenna" />
|
||||
|
||||
<div
|
||||
v-if="selectedChannels.length > 0"
|
||||
class="filter-applied"
|
||||
>{{ selectedChannels.length }} {{ selectedChannels.length > 1 ? 'channels' : 'channel' }}</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="filter-applied empty"
|
||||
>Channels</div>
|
||||
</div>
|
||||
|
||||
<div slot="popover">
|
||||
<router-link
|
||||
class="filter-clear"
|
||||
:to="{ query: { ...$route.query, channels: undefined } }"
|
||||
:class="{ active: selectedChannels.length > 0 }"
|
||||
>clear all<Icon icon="cross2" /></router-link>
|
||||
|
||||
<ul class="filter-items nolist">
|
||||
<li
|
||||
v-for="channel in channelsPerNetwork"
|
||||
:key="`channel-${channel.id}`"
|
||||
class="filter-item"
|
||||
:class="{ [channel.type]: true, independent: channel.independent }"
|
||||
>
|
||||
<router-link
|
||||
:to="{ query: { ...$route.query, channels: channel.slug, mode }, params: { pageNumber: 1 } }"
|
||||
class="filter-name"
|
||||
>
|
||||
<img
|
||||
v-if="channel.independent || !channel.parent"
|
||||
:src="`/img/logos/${channel.slug}/favicon.png`"
|
||||
class="favicon"
|
||||
>
|
||||
|
||||
{{ channel.name }}
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
:to="{ query: { ...$route.query, ...getNewRange(channel.slug), mode }, params: { pageNumber: 1 } }"
|
||||
class="filter-include"
|
||||
:class="{ selected: selectedChannels.includes(channel.slug) }"
|
||||
>
|
||||
<Icon
|
||||
icon="checkmark"
|
||||
class="filter-add"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="filter-remove"
|
||||
/>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</v-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function getNewRange(channel) {
|
||||
if (this.selectedChannels.includes(channel)) {
|
||||
return { channels: this.selectedChannels.filter(selectedTag => selectedTag !== channel).join(',') || undefined };
|
||||
}
|
||||
|
||||
return { channels: this.selectedChannels.concat(channel).join(',') };
|
||||
}
|
||||
|
||||
function selectedChannels() {
|
||||
return this.$route.query.channels ? this.$route.query.channels.split(',') : [];
|
||||
}
|
||||
|
||||
function channelsPerNetwork() {
|
||||
const networks = this.availableChannels.reduce((acc, channel) => {
|
||||
if (channel.independent || !channel.parent) {
|
||||
acc[channel.slug] = { ...channel, children: [] };
|
||||
return acc;
|
||||
}
|
||||
|
||||
if (!acc[channel.parent.slug]) {
|
||||
acc[channel.parent.slug] = { ...channel.parent, children: [] };
|
||||
}
|
||||
|
||||
acc[channel.parent.slug].children.push(channel);
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return Object.values(networks).reduce((acc, network) => [...acc, network, ...(network.children || [])], []);
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
filter: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
availableChannels: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: this.$route.query.mode || 'all',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
channelsPerNetwork,
|
||||
selectedChannels,
|
||||
},
|
||||
methods: {
|
||||
getNewRange,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.favicon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
padding: 0 .75rem 0 0;
|
||||
filter: drop-shadow(0 0 1px var(--darken));
|
||||
}
|
||||
|
||||
.network .filter-name,
|
||||
.independent .filter-name {
|
||||
font-weight: bold;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.channel:not(.independent) .filter-name {
|
||||
padding: .5rem .5rem .5rem 2.25rem;
|
||||
}
|
||||
</style>
|
||||
323
assets/components/filters/filter-bar.vue
Normal file
323
assets/components/filters/filter-bar.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div class="filter-bar noselect">
|
||||
<div class="sort">
|
||||
<router-link
|
||||
:to="{ params: { range: 'latest', pageNumber: 1 } }"
|
||||
:class="{ active: $route.name === 'latest' || range === 'latest' }"
|
||||
class="range range-button"
|
||||
>Latest</router-link>
|
||||
|
||||
<router-link
|
||||
:to="{ params: { range: 'upcoming', pageNumber: 1 } }"
|
||||
:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
|
||||
class="range-button"
|
||||
>Upcoming</router-link>
|
||||
|
||||
<router-link
|
||||
:to="{ params: { range: 'new', pageNumber: 1 } }"
|
||||
:class="{ active: $route.name === 'new' || range === 'new' }"
|
||||
class="range-button"
|
||||
>New</router-link>
|
||||
</div>
|
||||
|
||||
<div class="filters">
|
||||
<ChannelFilter
|
||||
class="filter"
|
||||
:filter="filter"
|
||||
:available-channels="availableChannels"
|
||||
/>
|
||||
|
||||
<TagFilter
|
||||
class="filter"
|
||||
:filter="filter"
|
||||
:available-tags="availableTags"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import ChannelFilter from './channel-filter.vue';
|
||||
import TagFilter from './tag-filter.vue';
|
||||
|
||||
function filter(state) {
|
||||
return state.ui.filter;
|
||||
}
|
||||
|
||||
function range() {
|
||||
return this.$route.params.range;
|
||||
}
|
||||
|
||||
function batch(state) {
|
||||
return state.ui.batch;
|
||||
}
|
||||
|
||||
async function setRange(newRange) {
|
||||
this.$store.dispatch('setRange', newRange);
|
||||
|
||||
await this.fetchReleases();
|
||||
}
|
||||
|
||||
async function setBatch(newBatch) {
|
||||
this.$store.dispatch('setBatch', newBatch);
|
||||
|
||||
await this.fetchReleases();
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChannelFilter,
|
||||
TagFilter,
|
||||
},
|
||||
props: {
|
||||
fetchReleases: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
isHome: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
itemsTotal: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
itemsPerPage: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
availableTags: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
availableChannels: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
filter,
|
||||
range,
|
||||
batch,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
setRange,
|
||||
setBatch,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'breakpoints';
|
||||
|
||||
.filter {
|
||||
color: var(--shadow);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
margin: -.1rem 0 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.applied {
|
||||
color: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-applied {
|
||||
flex-grow: 1;
|
||||
padding: .75rem .5rem;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: right;
|
||||
|
||||
&.empty {
|
||||
color: var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-mode {
|
||||
width: 100%;
|
||||
background: none;
|
||||
padding: .75rem;
|
||||
margin: 0 0 .5rem 0;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
|
||||
.filter-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 1rem;
|
||||
color: var(--darken-weak);
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
|
||||
.icon {
|
||||
fill: var(--darken-hint);
|
||||
margin: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--darken);
|
||||
|
||||
.icon {
|
||||
fill: var(--darken-weak);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
background: var(--darken-hint);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: var(--alert);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-items .filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: var(--darken-hint);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.selected .filter-include .filter-add {
|
||||
fill: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-include {
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
padding: .5rem 1rem;
|
||||
fill: var(--darken-hint);
|
||||
}
|
||||
|
||||
.filter-remove {
|
||||
display: none;
|
||||
fill: var(--alert);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&.selected .filter-add {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.selected .filter-remove {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-name {
|
||||
min-width: 8rem;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding: .5rem .75rem .5rem 1rem;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.filter-include:hover,
|
||||
.filter-name:hover {
|
||||
background: var(--darken-hint);
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-micro) {
|
||||
.filter-applied {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: .5rem 1rem 0 1rem;
|
||||
z-index: 1;
|
||||
background: var(--background-dim);
|
||||
font-size: 0;
|
||||
|
||||
.icon {
|
||||
margin: 0 .5rem 0 0;
|
||||
fill: var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.range-button {
|
||||
color: var(--shadow);
|
||||
display: inline-block;
|
||||
padding: .8rem 1rem;
|
||||
border: none;
|
||||
position: relative;
|
||||
font-size: .8rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
border: solid 1px transparent;
|
||||
border-bottom: none;
|
||||
|
||||
&:hover:not(.active) {
|
||||
color: var(--shadow-strong);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--primary);
|
||||
background: var(--background-soft);
|
||||
border-color: var(--crease);
|
||||
|
||||
&::after {
|
||||
/* hide grey border for tab effect, negative margin shows grey crease on mobile */
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--background-soft);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
assets/components/filters/tag-filter.vue
Normal file
111
assets/components/filters/tag-filter.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<v-popover class="filter-container">
|
||||
<div class="filter">
|
||||
<Icon icon="price-tag4" />
|
||||
|
||||
<div
|
||||
v-if="selectedTags.length > 0"
|
||||
class="filter-applied"
|
||||
>{{ selectedTags.length }} {{ selectedTags.length > 1 ? 'tags' : 'tag' }}</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="filter-applied empty"
|
||||
>Tags</div>
|
||||
</div>
|
||||
|
||||
<div slot="popover">
|
||||
<select
|
||||
v-model="mode"
|
||||
class="filter-mode"
|
||||
@change="$router.push({ query: { ...$route.query, mode }, params: { pageNumber: 1 } })"
|
||||
>
|
||||
<option value="all">match all selected</option>
|
||||
<option value="any">match any selected</option>
|
||||
</select>
|
||||
|
||||
<router-link
|
||||
class="filter-clear"
|
||||
:to="{ query: { ...$route.query, tags: undefined, mode: undefined } }"
|
||||
:class="{ active: selectedTags.length > 0 }"
|
||||
>clear all<Icon icon="cross2" /></router-link>
|
||||
|
||||
<ul class="filter-items nolist">
|
||||
<li
|
||||
v-for="tag in availableTags"
|
||||
:key="`tag-${tag.id}`"
|
||||
class="filter-item"
|
||||
:class="{ selected: selectedTags.includes(tag.slug) }"
|
||||
>
|
||||
<router-link
|
||||
:to="{ query: { ...$route.query, tags: tag.slug, mode }, params: { pageNumber: 1 } }"
|
||||
class="filter-name"
|
||||
>{{ tag.name }}</router-link>
|
||||
|
||||
<router-link
|
||||
:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
|
||||
class="filter-include"
|
||||
:class="{ selected: selectedTags.includes(tag.slug) }"
|
||||
>
|
||||
<Icon
|
||||
icon="checkmark"
|
||||
class="filter-add"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="filter-remove"
|
||||
/>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</v-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function getNewRange(tag) {
|
||||
if (this.selectedTags.includes(tag)) {
|
||||
return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') || undefined };
|
||||
}
|
||||
|
||||
return { tags: this.selectedTags.concat(tag).join(',') };
|
||||
}
|
||||
|
||||
function selectedTags() {
|
||||
return this.$route.query.tags ? this.$route.query.tags.split(',') : [];
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
filter: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
availableTags: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: this.$route.query.mode || 'all',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedTags,
|
||||
},
|
||||
methods: {
|
||||
getNewRange,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user