forked from DebaucheryLibrarian/traxxx
235 lines
5.3 KiB
Vue
235 lines
5.3 KiB
Vue
<template>
|
|
<div class="filter-bar noselect">
|
|
<span>
|
|
<label class="range">
|
|
<input
|
|
:id="`${_uid}-range-latest`"
|
|
:checked="range === 'latest'"
|
|
type="radio"
|
|
class="range-input"
|
|
@click="setRange('latest')"
|
|
>
|
|
<label
|
|
:for="`${_uid}-range-latest`"
|
|
class="range-button"
|
|
>Latest</label>
|
|
</label>
|
|
|
|
<label class="range">
|
|
<input
|
|
:id="`${_uid}-range-upcoming`"
|
|
:checked="range === 'upcoming'"
|
|
type="radio"
|
|
class="range-input"
|
|
@click="setRange('upcoming')"
|
|
>
|
|
<label
|
|
:for="`${_uid}-range-upcoming`"
|
|
class="range-button"
|
|
>Upcoming</label>
|
|
</label>
|
|
|
|
<label class="range">
|
|
<input
|
|
:id="`${_uid}-range-all`"
|
|
:checked="range === 'all'"
|
|
type="radio"
|
|
class="range-input"
|
|
@click="setRange('all')"
|
|
>
|
|
<label
|
|
:for="`${_uid}-range-all`"
|
|
class="range-button"
|
|
>All</label>
|
|
</label>
|
|
</span>
|
|
|
|
<span>
|
|
<label class="batch">
|
|
<input
|
|
:id="`${_uid}-batch-all`"
|
|
:checked="batch === 'all'"
|
|
type="radio"
|
|
class="range-input"
|
|
@click="setBatch('all')"
|
|
>
|
|
<label
|
|
:for="`${_uid}-batch-all`"
|
|
class="range-button"
|
|
>All</label>
|
|
</label>
|
|
|
|
<label
|
|
v-tooltip="'Only show newly added'"
|
|
class="batch"
|
|
>
|
|
<input
|
|
:id="`${_uid}-batch-new`"
|
|
:checked="batch === 'new'"
|
|
type="radio"
|
|
class="range-input"
|
|
@click="setBatch('new')"
|
|
>
|
|
<label
|
|
:for="`${_uid}-batch-new`"
|
|
class="range-button"
|
|
>New</label>
|
|
</label>
|
|
</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(state) {
|
|
return state.ui.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,
|
|
},
|
|
},
|
|
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);
|
|
transition: background var(--theme-transition);
|
|
|
|
.icon {
|
|
fill: var(--shadow);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
transition: background var(--theme-transition), color var(--theme-transition);
|
|
|
|
&:hover {
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.range-input {
|
|
display: none;
|
|
|
|
&:checked + .range-button {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
@media(max-width: $breakpoint) {
|
|
.filters-container {
|
|
display: none;
|
|
}
|
|
|
|
.filters-compact {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
</style>
|