filter menu in content page

webapp/components/FilterMenu/FilterMenu.vue

@@ -11,15 +11,7 @@
       <base-icon class="dropdown-arrow" name="angle-down" />
     </base-button>
     <template slot="popover">
-      <div class="filter-menu-options">
+      <filter-menu-component :showMobileMenu="showMobileMenu" />
-        <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
-        <following-filter />
-        <categories-filter v-if="categoriesActive" :showMobileMenu="showMobileMenu" />
-      </div>
-      <div class="filter-menu-options">
-        <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
-        <order-by-filter />
-      </div>
     </template>
   </dropdown>
 </template>
@@ -27,21 +19,12 @@
 <script>
 import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
-import FollowingFilter from './FollowingFilter'
+import FilterMenuComponent from './FilterMenuComponent'
-import OrderByFilter from './OrderByFilter'
-import CategoriesFilter from './CategoriesFilter'
 
 export default {
   components: {
     Dropdown,
-    FollowingFilter,
+    FilterMenuComponent,
-    OrderByFilter,
-    CategoriesFilter,
-  },
-  data() {
-    return {
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
-    }
   },
   props: {
     placement: { type: String },
@@ -55,14 +38,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-.filter-menu-options {
-  max-width: $size-max-width-filter-menu;
-  padding: $space-small $space-x-small;
-
-  > .title {
-    font-size: $font-size-large;
-  }
-}
-</style>

webapp/components/FilterMenu/FilterMenuComponent.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="filter-menu-options">
+      <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
+      <following-filter />
+      <categories-filter v-if="categoriesActive" :showMobileMenu="showMobileMenu" />
+    </div>
+    <div class="filter-menu-options">
+      <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
+      <order-by-filter />
+    </div>
+  </div>
+</template>
+
+<script>
+import FollowingFilter from './FollowingFilter'
+import OrderByFilter from './OrderByFilter'
+import CategoriesFilter from './CategoriesFilter'
+
+export default {
+  components: {
+    FollowingFilter,
+    OrderByFilter,
+    CategoriesFilter,
+  },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
+}
+</script>
+
+<style lang="scss">
+.filter-menu-options {
+  max-width: $size-max-width-filter-menu;
+  padding: $space-small $space-x-small;
+
+  > .title {
+    font-size: $font-size-large;
+  }
+}
+</style>

webapp/layouts/default.vue

@@ -5,7 +5,7 @@
     </div>
     <ds-container>
       <div class="main-container">
-        <nuxt />
+        <nuxt :showMobileMenu="showMobileMenu" />
       </div>
     </ds-container>
     <page-footer v-if="!showMobileMenu" />

webapp/pages/index.vue

@@ -4,6 +4,39 @@
       <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
         <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
+      <!--Filter Button-->
+
+      <ds-grid-item
+        v-if="categoriesActive"
+        :row-span="1"
+        column-span="fullWidth"
+        style="z-index: 1"
+      >
+        <span v-if="Object.keys(postsFilter).length !== 0">
+          <ds-chip
+            v-for="filter in postsFilter.categories_some.id_in"
+            @remove="removeFilter"
+            removable
+            :key="filter"
+            color="inverse"
+            size="large"
+          >
+            {{ filter }}
+          </ds-chip>
+        </span>
+        <ds-button :icon="filterButtonIcon" right @click="showFilter = !showFilter">
+          {{ filterButtonText }}
+        </ds-button>
+
+        <div
+          style="background-color: white; box-shadow: rgb(189 189 189) 1px 9px 15px 1px"
+          v-if="showFilter"
+        >
+          <filter-menu-component :showMobileMenu="showMobileMenu" />
+        </div>
+      </ds-grid-item>
+      <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }" />
+
       <!-- donation info -->
       <ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
         <donation-info :goal="goal" :progress="progress" />
@@ -65,7 +98,7 @@ import { mapGetters, mapMutations } from 'vuex'
 import { DonationsQuery } from '~/graphql/Donations'
 import { filterPosts } from '~/graphql/PostQuery.js'
 import UpdateQuery from '~/components/utils/UpdateQuery'
-
+import FilterMenuComponent from '~/components/FilterMenu/FilterMenuComponent'
 export default {
   components: {
     DonationInfo,
@@ -74,11 +107,16 @@ export default {
     HcEmpty,
     MasonryGrid,
     MasonryGridItem,
+    FilterMenuComponent,
   },
   mixins: [postListActions],
+  props: {
+    showMobileMenu: { type: Boolean, default: false },
+  },
   data() {
     const { hashtag = null } = this.$route.query
     return {
+      showFilter: false,
       showDonations: true,
       goal: 15000,
       progress: 7000,
@@ -88,6 +126,7 @@ export default {
       offset: 0,
       pageSize: 12,
       hashtag,
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
     }
   },
   computed: {
@@ -95,6 +134,16 @@ export default {
       postsFilter: 'posts/filter',
       orderBy: 'posts/orderBy',
     }),
+    filterButtonIcon() {
+      if (Object.keys(this.postsFilter).length === 0) {
+        return this.showFilter ? 'angle-down' : 'angle-up'
+      }
+      return 'filter'
+    },
+    filterButtonText() {
+      if (this.postsFilter.author) return 'Beiträge von Freunden filtern'
+      return 'Beiträge filtern'
+    },
     finalFilters() {
       let filter = this.postsFilter
       if (this.hashtag) {
@@ -124,6 +173,9 @@ export default {
       resetCategories: 'posts/RESET_CATEGORIES',
       toggleCategory: 'posts/TOGGLE_CATEGORY',
     }),
+    removeFilter() {
+      alert('Filter löschen')
+    },
     clearSearch() {
       this.$router.push({ path: '/' })
       this.hashtag = null