From a63e132b419b31f0208d67c9a8c547b7c67564fd Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 5 Sep 2019 16:00:28 +0200
Subject: [PATCH] Extract categories filter into own component

- Co-authored-by: Brent Vardy <brent.vardy@challengelogic.net>
- Co-authored-by: Mike Aono <aonomike@gmail.com>
- Co-authored-by: Harald <harald.reingruber@gmx.at>
---
 .../FilterPosts/CategoriesFilterMenuItems.vue | 104 +++++++-----------
 .../FilterPosts/CategoriesFilters.vue         | 101 +++++++++++++++++
 2 files changed, 143 insertions(+), 62 deletions(-)
 create mode 100644 webapp/components/FilterPosts/CategoriesFilters.vue

diff --git a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
index 7a35bf3cc..7b683276b 100644
--- a/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/CategoriesFilterMenuItems.vue
@@ -1,101 +1,81 @@
 <template>
-  <ds-space margin-top="large">
-    <ds-flex id="filter-posts-header">
-      <ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
+  <ds-container>
+    <categories-filters :chunk="chunk" />
+    <ds-space />
+    <ds-flex id="filter-posts-by-followers-header">
+      <ds-heading tag="h4">{{ $t('filter-posts.general.header') }}</ds-heading>
       <ds-space margin-bottom="large" />
     </ds-flex>
-    <ds-flex :gutter="{ lg: 'small' }">
+    <ds-flex>
       <ds-flex-item
-        :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '10%' }"
         class="categories-menu-item"
       >
         <ds-flex>
           <ds-flex-item width="10%" />
           <ds-flex-item width="100%">
-            <ds-button
-              icon="check"
-              @click.stop.prevent="resetCategories"
-              :primary="!filteredCategoryIds.length"
-            />
-            <ds-flex-item>
-              <label class="category-labels">{{ $t('filter-posts.categories.all') }}</label>
-            </ds-flex-item>
-            <ds-space />
+            <div class="follow-button">
+              <ds-button
+                v-tooltip="{
+                  content: this.$t('contribution.filterFollow'),
+                  placement: 'left',
+                  delay: { show: 500 },
+                }"
+                name="filter-by-followed-authors-only"
+                icon="user-plus"
+                :primary="filteredByUsersFollowed"
+                @click="toggleFilteredByFollowed(user.id)"
+              />
+              <ds-flex-item>
+                <label class="follow-label">{{ $t('filter-posts.followers.label') }}</label>
+              </ds-flex-item>
+              <ds-space />
+            </div>
           </ds-flex-item>
         </ds-flex>
       </ds-flex-item>
-      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '4%' }" />
-      <ds-flex-item
-        :width="{ base: '0%', sm: '0%', md: '0%', lg: '3%' }"
-        id="categories-menu-divider"
-      />
-      <ds-flex-item
-        :width="{ base: '50%', sm: '50%', md: '50%', lg: '11%' }"
-        v-for="index in chunk.length"
-        :key="index"
-      >
-        <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
-          <ds-flex class="categories-menu">
-            <ds-flex-item width="100%" class="categories-menu-item">
-              <ds-button
-                :icon="category.icon"
-                :primary="filteredCategoryIds.includes(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
-              />
-              <ds-space margin-bottom="small" />
-            </ds-flex-item>
-            <ds-flex>
-              <ds-flex-item class="categories-menu-item">
-                <label class="category-labels">
-                  {{ $t(`contribution.category.name.${category.slug}`) }}
-                </label>
-              </ds-flex-item>
-              <ds-space margin-bottom="xx-large" />
-            </ds-flex>
-          </ds-flex>
-        </ds-flex>
-      </ds-flex-item>
+      <ds-space margin-bottom="large" />
     </ds-flex>
-  </ds-space>
+  </ds-container>
 </template>
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import CategoriesFilters from './CategoriesFilters'
 
 export default {
+  components: {
+    CategoriesFilters,
+  },
   props: {
     chunk: { type: Array, default: () => [] },
   },
   computed: {
     ...mapGetters({
-      filteredCategoryIds: 'postsFilter/filteredCategoryIds',
+      filteredByUsersFollowed: 'postsFilter/filteredByUsersFollowed',
     }),
   },
   methods: {
     ...mapMutations({
-      resetCategories: 'postsFilter/RESET_CATEGORIES',
-      toggleCategory: 'postsFilter/TOGGLE_CATEGORY',
+      toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
     }),
   },
 }
 </script>
 <style lang="scss">
-.categories-menu-item {
-  text-align: center;
+#filter-posts-header {
+  display: block;
 }
 
-.categories-menu {
-  justify-content: center;
+#filter-posts-by-followers-header {
+  display: block;
 }
 
-.category-labels,
-.follow-label {
-  font-size: $font-size-small;
-}
-
-@media only screen and (min-width: 960px) {
-  #categories-menu-divider {
-    border-left: 1px solid $border-color-soft;
-    margin: 9px 0px 40px 0px;
+@media only screen and (max-width: 960px) {
+  #filter-posts-header {
+    text-align: center;
+  }
+  .follow-button {
+    float: left;
   }
 }
 </style>
diff --git a/webapp/components/FilterPosts/CategoriesFilters.vue b/webapp/components/FilterPosts/CategoriesFilters.vue
new file mode 100644
index 000000000..59d17cb59
--- /dev/null
+++ b/webapp/components/FilterPosts/CategoriesFilters.vue
@@ -0,0 +1,101 @@
+<template>
+  <ds-space>
+    <ds-flex id="filter-posts-header">
+      <ds-heading tag="h4">{{ $t('filter-posts.categories.header') }}</ds-heading>
+      <ds-space margin-bottom="large" />
+    </ds-flex>
+    <ds-flex :gutter="{ lg: 'small' }">
+      <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%">
+            <ds-button
+              icon="check"
+              @click.stop.prevent="resetCategories"
+              :primary="!filteredCategoryIds.length"
+            />
+            <ds-flex-item>
+              <label class="category-labels">{{ $t('filter-posts.categories.all') }}</label>
+            </ds-flex-item>
+            <ds-space />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '4%' }" />
+      <ds-flex-item
+        :width="{ base: '0%', sm: '0%', md: '0%', lg: '3%' }"
+        id="categories-menu-divider"
+      />
+      <ds-flex-item
+        :width="{ base: '50%', sm: '50%', md: '50%', lg: '11%' }"
+        v-for="index in chunk.length"
+        :key="index"
+      >
+        <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
+          <ds-flex class="categories-menu">
+            <ds-flex-item width="100%" class="categories-menu-item">
+              <ds-button
+                :icon="category.icon"
+                :primary="filteredCategoryIds.includes(category.id)"
+                @click.stop.prevent="toggleCategory(category.id)"
+              />
+              <ds-space margin-bottom="small" />
+            </ds-flex-item>
+            <ds-flex>
+              <ds-flex-item class="categories-menu-item">
+                <label class="category-labels">
+                  {{ $t(`contribution.category.name.${category.slug}`) }}
+                </label>
+              </ds-flex-item>
+              <ds-space margin-bottom="xx-large" />
+            </ds-flex>
+          </ds-flex>
+        </ds-flex>
+      </ds-flex-item>
+    </ds-flex>
+  </ds-space>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+
+export default {
+  props: {
+    chunk: { type: Array, default: () => [] },
+  },
+  computed: {
+    ...mapGetters({
+      filteredCategoryIds: 'postsFilter/filteredCategoryIds',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      resetCategories: 'postsFilter/RESET_CATEGORIES',
+      toggleCategory: 'postsFilter/TOGGLE_CATEGORY',
+    }),
+  },
+}
+</script>
+<style lang="scss">
+.categories-menu-item {
+  text-align: center;
+}
+
+.categories-menu {
+  justify-content: center;
+}
+
+.category-labels,
+.follow-label {
+  font-size: $font-size-small;
+}
+
+@media only screen and (min-width: 960px) {
+  #categories-menu-divider {
+    border-left: 1px solid $border-color-soft;
+    margin: 9px 0px 40px 0px;
+  }
+}
+</style>