From cbf93628a5ade2002854763beb5b51e8c3379d94 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Fri, 28 Jul 2023 14:05:26 +0200
Subject: [PATCH] [feature] have all button for source filter option

---
 .../FilterMenu/FilterMenuComponent.vue        |  2 +-
 .../FilterMenu/FollowingFilter.spec.js        | 11 +++
 .../components/FilterMenu/FollowingFilter.vue | 70 +++++++++++++------
 webapp/store/posts.js                         | 10 +++
 webapp/store/posts.spec.js                    | 19 +++++
 5 files changed, 91 insertions(+), 21 deletions(-)

diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue
index 52b0fcd20..e362e758f 100644
--- a/webapp/components/FilterMenu/FilterMenuComponent.vue
+++ b/webapp/components/FilterMenu/FilterMenuComponent.vue
@@ -13,7 +13,7 @@
         </div>
       </div>
       <post-type-filter />
-      <following-filter />
+      <following-filter @showFilterMenu="$emit('showFilterMenu')" />
       <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
     </div>
     <div v-if="eventSetInPostTypeFilter" class="filter-menu-options">
diff --git a/webapp/components/FilterMenu/FollowingFilter.spec.js b/webapp/components/FilterMenu/FollowingFilter.spec.js
index 0f51b305c..9dbc5d011 100644
--- a/webapp/components/FilterMenu/FollowingFilter.spec.js
+++ b/webapp/components/FilterMenu/FollowingFilter.spec.js
@@ -10,6 +10,7 @@ describe('FollowingFilter', () => {
   const mutations = {
     'posts/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(),
     'posts/TOGGLE_FILTER_BY_MY_GROUPS': jest.fn(),
+    'posts/RESET_FOLLOWERS_FILTER': jest.fn(),
   }
   const getters = {
     'auth/user': () => {
@@ -65,5 +66,15 @@ describe('FollowingFilter', () => {
         expect(mutations['posts/TOGGLE_FILTER_BY_MY_GROUPS']).toHaveBeenCalled()
       })
     })
+    describe('clears follower filter', () => {
+      it('when all button is clicked', async () => {
+        wrapper = await Wrapper()
+        const clearFollowerButton = wrapper.find(
+          '.following-filter .item-all-follower .base-button',
+        )
+        clearFollowerButton.trigger('click')
+        expect(mutations['posts/RESET_FOLLOWERS_FILTER']).toHaveBeenCalledTimes(1)
+      })
+    })
   })
 })
diff --git a/webapp/components/FilterMenu/FollowingFilter.vue b/webapp/components/FilterMenu/FollowingFilter.vue
index 615b955df..b650f17b7 100644
--- a/webapp/components/FilterMenu/FollowingFilter.vue
+++ b/webapp/components/FilterMenu/FollowingFilter.vue
@@ -5,30 +5,43 @@
     class="following-filter"
   >
     <template #filter-follower>
-      <li class="item follower-item">
+      <div class="item item-all-follower">
         <base-button
-          icon="user-plus"
-          :label="$t('filter-menu.following')"
-          :filled="filteredByUsersFollowed"
-          :title="$t('contribution.filterFollow')"
-          @click="toggleFilteredByFollowed(currentUser.id)"
+          :filled="!filteredByUsersFollowed && !filteredByPostsInMyGroups"
+          :label="$t('filter-menu.all')"
+          icon="check"
+          @click="setResetFollowers"
           size="small"
         >
-          {{ $t('contribution.filterFollow') }}
+          {{ $t('filter-menu.all') }}
         </base-button>
-      </li>
-      <li class="item posts-in-my-groups-item">
-        <base-button
-          icon="users"
-          :label="$t('filter-menu.my-groups')"
-          :filled="filteredByPostsInMyGroups"
-          :title="$t('contribution.filterMyGroups')"
-          @click="toggleFilteredByMyGroups()"
-          size="small"
-        >
-          {{ $t('contribution.filterMyGroups') }}
-        </base-button>
-      </li>
+      </div>
+      <div class="follower-filter-list">
+        <li class="item follower-item">
+          <base-button
+            icon="user-plus"
+            :label="$t('filter-menu.following')"
+            :filled="filteredByUsersFollowed"
+            :title="$t('contribution.filterFollow')"
+            @click="toggleFilteredByFollowed(currentUser.id)"
+            size="small"
+          >
+            {{ $t('contribution.filterFollow') }}
+          </base-button>
+        </li>
+        <li class="item posts-in-my-groups-item">
+          <base-button
+            icon="users"
+            :label="$t('filter-menu.my-groups')"
+            :filled="filteredByPostsInMyGroups"
+            :title="$t('contribution.filterMyGroups')"
+            @click="toggleFilteredByMyGroups()"
+            size="small"
+          >
+            {{ $t('contribution.filterMyGroups') }}
+          </base-button>
+        </li>
+      </div>
     </template>
   </filter-menu-section>
 </template>
@@ -51,9 +64,26 @@ export default {
   },
   methods: {
     ...mapMutations({
+      resetFollowers: 'posts/RESET_FOLLOWERS_FILTER',
       toggleFilteredByFollowed: 'posts/TOGGLE_FILTER_BY_FOLLOWED',
       toggleFilteredByMyGroups: 'posts/TOGGLE_FILTER_BY_MY_GROUPS',
     }),
+    setResetFollowers() {
+      this.resetFollowers()
+      this.$emit('showFilterMenu')
+    },
   },
 }
 </script>
+
+<style lang="scss">
+.follower-filter-list {
+  display: flex;
+  margin-left: $space-xx-small;
+
+  & .base-button {
+    margin-right: $space-xx-small;
+    margin-bottom: $space-xx-small;
+  }
+}
+</style>
diff --git a/webapp/store/posts.js b/webapp/store/posts.js
index 95113ab6b..51e34f6c5 100644
--- a/webapp/store/posts.js
+++ b/webapp/store/posts.js
@@ -47,6 +47,16 @@ export const mutations = {
     delete filter.categories_some
     state.filter = filter
   },
+  RESET_FOLLOWERS_FILTER(state) {
+    const filter = clone(state.filter)
+    if (get(filter, 'postsInMyGroups')) {
+      delete filter.postsInMyGroups
+    }
+    if (get(filter, 'author.followedBy_some.id')) {
+      delete filter.author
+    }
+    state.filter = filter
+  },
   RESET_EMOTIONS(state) {
     const filter = clone(state.filter)
     delete filter.emotions_some
diff --git a/webapp/store/posts.spec.js b/webapp/store/posts.spec.js
index 4efb55491..b3c73e124 100644
--- a/webapp/store/posts.spec.js
+++ b/webapp/store/posts.spec.js
@@ -146,6 +146,25 @@ describe('mutations', () => {
     })
   })
 
+  describe('RESET_FOLLOWERS_FILTER', () => {
+    beforeEach(() => {
+      testMutation = () => {
+        mutations.RESET_FOLLOWERS_FILTER(state)
+        return getters.filter(state)
+      }
+    })
+
+    it('resets the categories filter', () => {
+      state = {
+        filter: {
+          author: { followedBy_some: { id: 4711 } },
+          postsInMyGroups: true,
+        },
+      }
+      expect(testMutation()).toEqual({})
+    })
+  })
+
   describe('TOGGLE_LANGUAGE', () => {
     beforeEach(() => {
       testMutation = (languageCode) => {