traxxx/assets/components/header/filter-bar.vue

<template>
    <div class="filter-bar noselect">
        <span class="sort">
            <router-link
                :to="{ name: isHome ? 'latest' : $route.name, params: { ...$route.params, range: 'latest' } }"
                :class="{ active: $route.name === 'latest' || range === 'latest' }"
                class="range range-button"
            >Latest</router-link>

            <router-link
                :to="{ name: isHome ? 'upcoming' : $route.name, params: { ...$route.params, range: 'upcoming' } }"
                :class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
                class="range-button"
            >Upcoming</router-link>

            <router-link
                :to="{ name: isHome ? 'new' : $route.name, params: { ...$route.params, range: 'new' } }"
                :class="{ active: $route.name === 'new' || range === 'new' }"
                class="range-button"
            >New</router-link>

            <!--
            <router-link
                :to="{ name: $route.name, params: { ...$route.params, range: 'all' } }"
                :class="{ active: range === 'all' }"
                class="range-button"
            >All</router-link>
            -->
        </span>

        <span>
            <span class="filters-container">
                <Icon icon="filter" />

                <Filters
                    class="filters-block"
                    :filter="filter"
                    @set-filter="setFilter"
                />
            </span>

            <v-popover class="filters-compact">
                <Icon icon="filter" />

                <div slot="popover">
                    <Filters
                        :compact="true"
                        :filter="filter"
                        @set-filter="setFilter"
                    />
                </div>
            </v-popover>
        </span>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import Filters from './filters.vue';

function filter(state) {
    return state.ui.filter;
}

function range() {
    return this.$route.params.range;
}

function batch(state) {
    return state.ui.batch;
}

async function setFilter(newFilter) {
    this.$store.dispatch('setFilter', newFilter);

    await this.fetchReleases();
}

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: {
        Filters,
    },
    props: {
        fetchReleases: {
            type: Function,
            default: null,
        },
        isHome: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        ...mapState({
            filter,
            range,
            batch,
        }),
    },
    methods: {
        setFilter,
        setRange,
        setBatch,
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.filter-bar {
    background: var(--background);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    border-top: solid 1px var(--shadow-hint);
    z-index: 1;
    font-size: 0;
    box-shadow: 0 0 3px var(--darken);

    .icon {
        margin: 0 .5rem 0 0;
        fill: var(--shadow);
    }
}

.sort {
    display: flex;
    align-items: center;
}

.filters-container {
    display: inline-block;
}

.filters-block {
    display: inline-block;
}

.filters-compact {
    font-size: 1rem;
    font-weight: bold;
    display: none;
    margin: 0 0 0 .5rem;
}

.range-button {
    color: var(--shadow);
    background: var(--background);
    display: inline-block;
    padding: .5rem 1rem;
    border: none;
    box-shadow: 0 0 2px var(--shadow-weak);
    font-size: .8rem;
    font-weight: bold;
    text-decoration: none;

    &:hover:not(.active) {
        color: var(--shadow-strong);
        cursor: pointer;
    }

    &.active {
        color: var(--primary);
    }
}

@media(max-width: $breakpoint) {
    .filters-container {
        display: none;
    }

    .filters-compact {
        display: inline-block;
    }
}
</style>