Move filter by followers functionality to filter dropdown

webapp/components/FilterMenu/FilterMenu.vue

@@ -1,26 +1,6 @@
 <template>
-  <ds-card class="filter-menu-card">
-    <ds-flex>
-      <ds-flex-item class="filter-menu-title">
-        <ds-heading size="h3">{{ $t('filter-menu.title') }}</ds-heading>
-      </ds-flex-item>
-      <ds-flex-item>
-        <div class="filter-menu-buttons">
-          <ds-button
-            v-tooltip="{
-              content: this.$t('contribution.filterFollow'),
-              placement: 'left',
-              delay: { show: 500 },
-            }"
-            name="filter-by-followed-authors-only"
-            icon="user-plus"
-            :primary="!!filterAuthorIsFollowedById"
-            @click="toggleOnlyFollowed"
-          />
-        </div>
-      </ds-flex-item>
-    </ds-flex>
-    <div v-if="hashtag">
+  <ds-card v-show="hashtag" class="filter-menu-card">
+    <div>
       <ds-space margin-bottom="x-small" />
       <ds-flex>
         <ds-flex-item>
@@ -56,23 +36,7 @@ export default {
       filter: {},
     }
   },
-  computed: {
-    filterAuthorIsFollowedById() {
-      const { author = {} } = this.filter
-      /* eslint-disable camelcase */
-      const { followedBy_some = {} } = author
-      const { id } = followedBy_some
-      /* eslint-enable */
-      return id
-    },
-  },
   methods: {
-    toggleOnlyFollowed() {
-      this.filter = this.filterAuthorIsFollowedById
-        ? {}
-        : { author: { followedBy_some: { id: this.user.id } } }
-      this.$emit('changeFilterBubble', this.filter)
-    },
     clearSearch() {
       this.$emit('clearSearch')
     },

webapp/components/FilterPosts/FilterPosts.vue

@@ -5,7 +5,7 @@
       <ds-icon style="margin: 7px 0px 0px 2px" size="xx-small" name="angle-down" />
     </a>
     <template slot="popover">
-      <filter-posts-menu-items :chunk="chunk" @filterPosts="filterPosts" />
+      <filter-posts-menu-items :chunk="chunk" @filterPosts="filterPosts" :user="currentUser" />
     </template>
   </dropdown>
 </template>
@@ -13,7 +13,7 @@
 import _ from 'lodash'
 import Dropdown from '~/components/Dropdown'
 import { filterPosts } from '~/graphql/PostQuery.js'
-import { mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import FilterPostsMenuItems from '~/components/FilterPosts/FilterPostsMenuItems'
 
 export default {
@@ -32,6 +32,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
     chunk() {
       return _.chunk(this.categories, 2)
     },
@@ -40,8 +43,8 @@ export default {
     ...mapMutations({
       setPosts: 'posts/SET_POSTS',
     }),
-    filterPosts(categoryIds) {
-      const filter = categoryIds.length ? { categories_some: { id_in: categoryIds } } : {}
+    filterPosts(filter) {
+      // const filter = categoryIds.length ? { categories_some: { id_in: categoryIds } } : {}
       this.$apollo
         .query({
           query: filterPosts(this.$i18n),

webapp/components/FilterPosts/FilterPostsMenuItems.vue

@@ -2,7 +2,7 @@
   <ds-container>
     <ds-space />
     <ds-flex id="filter-posts-header">
-      <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
+      <ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
       <ds-space margin-bottom="large" />
     </ds-flex>
     <ds-flex>
@@ -19,7 +19,7 @@
               :primary="allCategories"
             />
             <ds-flex-item>
-              <label class="category-labels">{{ $t('filter-posts.all') }}</label>
+              <label class="category-labels">{{ $t('filter-posts.categories.all') }}</label>
             </ds-flex-item>
             <ds-space />
           </ds-flex-item>
@@ -55,17 +55,55 @@
         </ds-flex>
       </ds-flex-item>
     </ds-flex>
+    <ds-space />
+    <ds-flex id="filter-posts-by-followers-header">
+      <ds-heading tag="h4">
+        {{
+          filteredByFollowers ? $t('filter-posts.followers.header') : $t('filter-posts.all.header')
+        }}
+      </ds-heading>
+      <ds-space margin-bottom="large" />
+    </ds-flex>
+    <ds-flex>
+      <ds-flex-item
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
+        class="categories-menu-item"
+      >
+        <ds-flex>
+          <ds-flex-item width="10%" />
+          <ds-flex-item width="100%">
+            <div class="filter-menu-buttons">
+              <ds-button
+                v-tooltip="{
+                  content: this.$t('contribution.filterFollow'),
+                  placement: 'left',
+                  delay: { show: 500 },
+                }"
+                name="filter-by-followed-authors-only"
+                icon="user-plus"
+                :primary="!filteredByFollowers"
+                @click="toggleOnlyFollowed"
+              />
+            </div>
+            <ds-space margin-bottom="large" />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-flex-item>
+    </ds-flex>
   </ds-container>
 </template>
 <script>
 export default {
   props: {
+    user: { type: Object, required: true },
     chunk: { type: Array, default: () => [] },
   },
   data() {
     return {
       selectedCategoryIds: [],
       allCategories: true,
+      filter: {},
+      filteredByFollowers: false,
     }
   },
   methods: {
@@ -89,7 +127,25 @@ export default {
         }
         this.allCategories = false
       }
-      this.$emit('filterPosts', this.selectedCategoryIds)
+      if (!this.selectedCategoryIds.length && this.filteredByFollowers) {
+        delete this.filter.categories_some
+      } else if (this.filter.author) {
+        this.filter.categories_some = { id_in: this.selectedCategoryIds }
+      } else {
+        this.filter = { categories_some: { followedBy_some: { id: this.user.id } } }
+      }
+      this.$emit('filterPosts', this.filter)
+    },
+    toggleOnlyFollowed() {
+      this.filteredByFollowers = !this.filteredByFollowers
+      if (!this.selectedCategoryIds.length && !this.filteredByFollowers) {
+        this.filter = {}
+      } else if (this.filter.categories_some) {
+        this.filter.author = { followedBy_some: { id: this.user.id } }
+      } else {
+        this.filter = { author: { followedBy_some: { id: this.user.id } } }
+      }
+      this.$emit('filterPosts', this.filter)
     },
   },
 }
@@ -99,6 +155,10 @@ export default {
   display: block;
 }
 
+#filter-posts-by-followers-header {
+  display: block;
+}
+
 .categories-menu-item {
   text-align: center;
 }

webapp/locales/de.json

@@ -5,8 +5,16 @@
     "clearSearch": "Suche löschen"
   },
   "filter-posts": {
-    "header": "Themenkategorien",
-    "all": "Alle"
+    "categories": {
+      "header": "Themenkategorien",
+      "all": "Alle"
+    },
+    "all": {
+      "header": "Alle Beiträge des Benutzers"
+    },
+    "followers": {
+      "header": "Die Beiträge meiner Anhänger"
+    }
   },
   "site": {
     "made": "Mit ❤ gemacht",

webapp/locales/en.json

@@ -5,8 +5,16 @@
     "clearSearch": "Clear search"
   },
   "filter-posts": {
-    "header": "Categories of Content",
-    "all": "All"
+    "categories": {
+      "header": "Categories of Content",
+      "all": "All"
+    },
+    "all": {
+      "header": "All user's contributions"
+    },
+    "followers": {
+      "header": "My followers contributions"
+    }
   },
   "site": {
     "made": "Made with ❤",