filter by post type

webapp/assets/_new/icons/svgs/book.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>book</title>
+<path d="M10 5c2.92 0 5.482 0.981 6 1.188 0.518-0.206 3.080-1.188 6-1.188 3.227 0 6.375 1.313 6.375 1.313l0.625 0.281v20.406h-11.281c-0.346 0.597-0.979 1-1.719 1s-1.373-0.403-1.719-1h-11.281v-20.406l0.625-0.281s3.148-1.313 6.375-1.313zM10 7c-2.199 0-4.232 0.69-5 0.969v16.125c1.188-0.392 2.897-0.875 5-0.875 2.057 0 3.888 0.506 5 0.875v-16.125c-1-0.343-3.067-0.969-5-0.969zM22 7c-1.933 0-4 0.626-5 0.969v16.125c1.112-0.369 2.943-0.875 5-0.875 2.103 0 3.813 0.483 5 0.875v-16.125c-0.768-0.279-2.801-0.969-5-0.969z"></path>
+</svg>

webapp/assets/_new/icons/svgs/calendar.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>calendar</title>
+<path d="M9 4h2v1h10v-1h2v1h4v22h-22v-22h4v-1zM7 7v2h18v-2h-2v1h-2v-1h-10v1h-2v-1h-2zM7 11v14h18v-14h-18zM13 13h2v2h-2v-2zM17 13h2v2h-2v-2zM21 13h2v2h-2v-2zM9 17h2v2h-2v-2zM13 17h2v2h-2v-2zM17 17h2v2h-2v-2zM21 17h2v2h-2v-2zM9 21h2v2h-2v-2zM13 21h2v2h-2v-2zM17 21h2v2h-2v-2z"></path>
+</svg>

webapp/components/FilterMenu/FilterMenuComponent.vue

@@ -3,6 +3,7 @@
     <div class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
       <following-filter />
+      <post-type-filter />
       <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
     </div>
     <div class="filter-menu-options">
@@ -13,6 +14,7 @@
 </template>
 
 <script>
+import PostTypeFilter from './PostTypeFilter'
 import FollowingFilter from './FollowingFilter'
 import OrderByFilter from './OrderByFilter'
 import CategoriesFilter from './CategoriesFilter'
@@ -22,6 +24,7 @@ export default {
     FollowingFilter,
     OrderByFilter,
     CategoriesFilter,
+    PostTypeFilter,
   },
   data() {
     return {

webapp/components/FilterMenu/PostTypeFilter.vue

@@ -0,0 +1,59 @@
+<template>
+  <filter-menu-section
+    :title="$t('filter-menu.post-type')"
+    :divider="false"
+    class="following-filter"
+  >
+    <template #filter-follower>
+      <li class="item article-item">
+        <labeled-button
+          icon="book"
+          :label="$t('filter-menu.article')"
+          :filled="articleSet"
+          :title="$t('filter-menu.article')"
+          @click="toggleFilterPostType('Article')"
+        />
+      </li>
+      <li class="item event-item">
+        <labeled-button
+          icon="calendar"
+          :label="$t('filter-menu.events')"
+          :filled="eventSet"
+          :title="$t('filter-menu.events')"
+          @click="toggleFilterPostType('Event')"
+        />
+      </li>
+    </template>
+  </filter-menu-section>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+
+export default {
+  name: 'PostTypeFilter',
+  components: {
+    FilterMenuSection,
+    LabeledButton,
+  },
+  computed: {
+    ...mapGetters({
+      filteredPostTypes: 'posts/filteredPostTypes',
+      currentUser: 'auth/user',
+    }),
+    articleSet() {
+      return this.filteredPostTypes.includes('Article')
+    },
+    eventSet() {
+      return this.filteredPostTypes.includes('Event')
+    },
+  },
+  methods: {
+    ...mapMutations({
+      toggleFilterPostType: 'posts/TOGGLE_POST_TYPE',
+    }),
+  },
+}
+</script>

webapp/locales/de.json

@@ -377,9 +377,11 @@
   },
   "filter-menu": {
     "all": "Alle",
+    "article": "Artikel",
     "categories": "Themen",
     "deleteFilter": "Filter löschen",
     "emotions": "Emotionen",
+    "events": "Veranstaltungen",
     "filter-by": "Filtern nach ...",
     "following": "Nutzer denen ich folge",
     "languages": "Sprachen",
@@ -395,6 +397,7 @@
       }
     },
     "order-by": "Sortieren nach ...",
+    "post-type": "Beitrags-Typ",
     "save": {
       "error": "Themen konnten nicht gespeichert werden!",
       "success": "Themen gespeichert!"

webapp/locales/en.json

@@ -377,9 +377,11 @@
   },
   "filter-menu": {
     "all": "All",
+    "article": "Article",
     "categories": "Topics",
     "deleteFilter": "Delete filter",
     "emotions": "Emotions",
+    "events": "Events",
     "filter-by": "Filter by ...",
     "following": "Users I follow",
     "languages": "Languages",
@@ -395,6 +397,7 @@
       }
     },
     "order-by": "Order by ...",
+    "post-type": "Post type",
     "save": {
       "error": "Failed saving topic settings!",
       "success": "Topics saved!"

webapp/store/posts.js

@@ -63,6 +63,12 @@ export const mutations = {
     if (isEmpty(get(filter, 'categories_some.id_in'))) delete filter.categories_some
     state.filter = filter
   },
+  TOGGLE_POST_TYPE(state, postType) {
+    const filter = clone(state.filter)
+    update(filter, 'postType_in', (postTypes) => xor(postTypes, [postType]))
+    if (isEmpty(get(filter, 'postType_in'))) delete filter.postType_in
+    state.filter = filter
+  },
   TOGGLE_LANGUAGE(state, languageCode) {
     const filter = clone(state.filter)
     update(filter, 'language_in', (languageCodes) => xor(languageCodes, [languageCode]))
@@ -90,6 +96,9 @@ export const getters = {
   filteredCategoryIds(state) {
     return get(state.filter, 'categories_some.id_in') || []
   },
+  filteredPostTypes(state) {
+    return get(state.filter, 'postType_in') || []
+  },
   filteredLanguageCodes(state) {
     return get(state.filter, 'language_in') || []
   },