104 lines
2.1 KiB
Vue
104 lines
2.1 KiB
Vue
<template>
|
|
<div class="instrument-overview">
|
|
<div class="instrument-overview__heading">
|
|
<h1 class="instrument-overview__title">
|
|
Instrumente
|
|
</h1>
|
|
</div>
|
|
<instrument-filter
|
|
class="instrument-overview__filter"
|
|
@filter="updateFilter"/>
|
|
<div class="instrument-overview__list">
|
|
<router-link
|
|
:to="{name: 'instrument', params: {slug: instrument.slug}}"
|
|
:key="instrument.id"
|
|
class="instrument-overview__list-item"
|
|
tag="div"
|
|
v-for="instrument in filteredInstruments">
|
|
{{ instrument.title }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import InstrumentFilter from '@/components/instruments/InstrumentFilter';
|
|
import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
|
|
|
|
export default {
|
|
components: {
|
|
InstrumentFilter
|
|
},
|
|
|
|
apollo: {
|
|
instruments: {
|
|
query: INSTRUMENTS_QUERY,
|
|
update(data) {
|
|
return this.$getRidOfEdges(data).instruments;
|
|
}
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
instruments: [],
|
|
filter: []
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
filteredInstruments() {
|
|
return this.instruments.filter(instrument => this.filter.includes(instrument.type) || !this.filter.length);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
updateFilter(filter) {
|
|
this.filter = filter;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~styles/helpers";
|
|
|
|
.instrument-overview {
|
|
display: grid;
|
|
grid-template-rows: auto auto 1fr;
|
|
@include centered(800px);
|
|
|
|
&__heading {
|
|
padding: 2*$large-spacing 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&__title {
|
|
max-width: 1200px;
|
|
line-height: 1.2;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&__filter {
|
|
justify-self: start;
|
|
}
|
|
|
|
&__list {
|
|
padding: $large-spacing 0;
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&__list-item {
|
|
padding: $medium-spacing 0;
|
|
|
|
@include regular-text;
|
|
@include table-row($color-silver);
|
|
}
|
|
}
|
|
</style>
|