57 lines
1.7 KiB
Vue
57 lines
1.7 KiB
Vue
<template>
|
|
<NcAppNavigationItem :allow-collapse="true"
|
|
menu-placement="top"
|
|
:name="t('repod', 'Filtering episodes')">
|
|
<template #actions>
|
|
<NcActionCheckbox :checked="all"
|
|
:disabled="all"
|
|
@update:checked="(checked) => $store.commit('settings/filters', { listened: checked, listening: checked, unlistened: checked })">
|
|
{{ t('repod', 'Show all') }}
|
|
</NcActionCheckbox>
|
|
<NcActionCheckbox :checked="filters.listened"
|
|
@update:checked="(checked) => $store.commit('settings/filters', { listened: checked })">
|
|
{{ t('repod', 'Listened') }}
|
|
</NcActionCheckbox>
|
|
<NcActionCheckbox :checked="filters.listening"
|
|
@update:checked="(checked) => $store.commit('settings/filters', { listening: checked })">
|
|
{{ t('repod', 'Listening') }}
|
|
</NcActionCheckbox>
|
|
<NcActionCheckbox :checked="filters.unlistened"
|
|
@update:checked="(checked) => $store.commit('settings/filters', { unlistened: checked })">
|
|
{{ t('repod', 'Unlistened') }}
|
|
</NcActionCheckbox>
|
|
</template>
|
|
<template #icon>
|
|
<FilterIcon v-if="all" :size="20" />
|
|
<FilterSettingsIcon v-if="!all" :size="20" />
|
|
</template>
|
|
</NcAppNavigationItem>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcActionCheckbox, NcAppNavigationItem } from '@nextcloud/vue'
|
|
import FilterIcon from 'vue-material-design-icons/Filter.vue'
|
|
import FilterSettingsIcon from 'vue-material-design-icons/FilterSettings.vue'
|
|
|
|
export default {
|
|
name: 'Filters',
|
|
components: {
|
|
FilterIcon,
|
|
FilterSettingsIcon,
|
|
NcAppNavigationItem,
|
|
NcActionCheckbox,
|
|
},
|
|
computed: {
|
|
all() {
|
|
return this.filters.listened && this.filters.listening && this.filters.unlistened
|
|
},
|
|
filters() {
|
|
return this.$store.state.settings.filters
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch('settings/fetch')
|
|
},
|
|
}
|
|
</script>
|