791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<span>
|
|
<span v-if="hasFilterItems && !gratisMode">
|
|
<small
|
|
v-for="({ filter_item }, i) in filterItemResolved"
|
|
:key="`column-filter_item-${filter_item.id}`"
|
|
>
|
|
<v-icon
|
|
:color="filter_item.color"
|
|
class="mx-1"
|
|
size="10"
|
|
v-if="filter_item.color"
|
|
>mdi-circle</v-icon
|
|
>
|
|
<span v-if="filter_item.title">{{ filter_item.title }}</span>
|
|
<span v-if="filter_item.subtitle">{{ filter_item.subtitle }}</span>
|
|
{{ filterItemResolved.length - 1 === i ? '' : '-' }}
|
|
</small>
|
|
</span>
|
|
|
|
<span v-if="gratisMode && isGratis">
|
|
<v-icon class="mx-1" color="accent" x-small>mdi-star</v-icon>
|
|
<span class="accent--text">Gratis</span>
|
|
</span>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
filterTitle: {
|
|
type: String,
|
|
default: 'type',
|
|
},
|
|
filters: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
gratisMode: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
filterItemResolved() {
|
|
// return this.$store.getters.filterItemsResolved(
|
|
// this.filterTitle,
|
|
// this.filters
|
|
// )
|
|
|
|
const filter = this.$store.getters.getFilterByTitle(this.filterTitle)
|
|
return this.filters.filter((f) => f.filter_item.filter_id === filter.id)
|
|
},
|
|
hasFilterItems() {
|
|
return this.filterItemResolved.length > 0
|
|
},
|
|
isGratis() {
|
|
return this.filterItemResolved.find(
|
|
(f) => f.filter_item.title === 'Gratis'
|
|
)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
small span {
|
|
font-size: 15.75px;
|
|
}
|
|
.mdi-star {
|
|
margin-right: 0 !important;
|
|
}
|
|
</style>
|