IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change behavior of filter menu post type buttons to switch between them by click

Browse Source
This commit is contained in:
Wolfgang Huß 2023-05-26 19:22:55 +02:00
parent a3c3b02729
commit 3fa8c3d2e3
1 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
webapp/components/FilterMenu/PostTypeFilter.vue
View File

@ -11,16 +11,16 @@
:label="$t('filter-menu.article')" :label="$t('filter-menu.article')"
:filled="articleSet" :filled="articleSet"
:title="$t('filter-menu.article')" :title="$t('filter-menu.article')"
@click="toggleFilterPostType('Article')" @click="setPostTypeFilter('Article')"
/> />
</li> </li>
<li class="item event-item"> <li class="item event-item">
<labeled-button <labeled-button
icon="calendar" icon="calendar"
:label="$t('filter-menu.events')" :label="$t('filter-menu.event')"
:filled="eventSet" :filled="eventSet"
:title="$t('filter-menu.events')" :title="$t('filter-menu.event')"
@click="toggleFilterPostType('Event')" @click="setPostTypeFilter('Event')"
/> />
</li> </li>
</template> </template>
@ -38,11 +38,19 @@ export default {
FilterMenuSection, FilterMenuSection,
LabeledButton, LabeledButton,
}, },
data() {
return {
postTypes: ['Article', 'Event'],
}
},
computed: { computed: {
...mapGetters({ ...mapGetters({
filteredPostTypes: 'posts/filteredPostTypes', filteredPostTypes: 'posts/filteredPostTypes',
currentUser: 'auth/user', currentUser: 'auth/user',
}), }),
noneSet() {
return !this.articleSet && !this.eventSet
},
articleSet() { articleSet() {
return this.filteredPostTypes.includes('Article') return this.filteredPostTypes.includes('Article')
}, },
@ -54,6 +62,27 @@ export default {
...mapMutations({ ...mapMutations({
toggleFilterPostType: 'posts/TOGGLE_POST_TYPE', toggleFilterPostType: 'posts/TOGGLE_POST_TYPE',
}), }),
setPostTypeFilter(setPostType) {
if (this.noneSet) {
if (setPostType !== 'All') this.toggleFilterPostType(setPostType)
} else {
if (setPostType !== 'All') {
// if not set then set and unset all others
if (!this.filteredPostTypes.includes(setPostType)) {
this.toggleFilterPostType(setPostType)
this.postTypes.forEach((postType) => {
if (postType !== setPostType)
if (this.filteredPostTypes.includes(postType)) this.toggleFilterPostType(postType)
})
}
} else {
// unset all
this.postTypes.forEach((postType) => {
if (this.filteredPostTypes.includes(postType)) this.toggleFilterPostType(postType)
})
}
}
},
}, },
} }
</script> </script>