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', pageNumber: 1 } }"
				: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', pageNumber: 1 } }"
				: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', pageNumber: 1 } }"
				:class="{ active: $route.name === 'new' || range === 'new' }"
				class="range-button"
			>New</router-link>
		</span>

		<Pagination
			:items-total="itemsTotal"
			:items-per-page="itemsPerPage"
		/>

		<span class="tags">
			<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';
import Pagination from '../pagination/pagination.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,
		Pagination,
	},
	props: {
		fetchReleases: {
			type: Function,
			default: null,
		},
		isHome: {
			type: Boolean,
			default: false,
		},
		itemsTotal: {
			type: Number,
			default: 0,
		},
		itemsPerPage: {
			type: Number,
			default: 10,
		},
	},
	computed: {
		...mapState({
			filter,
			range,
			batch,
		}),
	},
	methods: {
		setFilter,
		setRange,
		setBatch,
	},
};
</script>

<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;
	margin: 0 0 -1px 0;
}

.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);
    display: inline-block;
    padding: .75rem 1rem;
    border: none;
    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);
    }
}

.tags {
	flex-shrink: 0;
}

@media(max-width: $breakpoint2) {
	.pagination {
		display: none;
	}
}

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

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